osl-base-extended 1.0.38 → 1.0.39

package/fesm2022/osl-base-extended.mjs

@@ -40,6 +40,7 @@ class DialogWrapper {
         this.dialogRef = dialogRef;
         this.data = data;
         this.dialogData.header = data.header;
+        this.dialogData.partialHeader = data.partialHeader;
         this.dialogData.formBody = data.formBody;
         this.dialogData.formFooter = data.formFooter;
         this.dialogData.data = data.data;
@@ -47,17 +48,18 @@ class DialogWrapper {
         this.dialogData.component = data.component;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DialogWrapper, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DialogWrapper, isStandalone: true, selector: "dialog-wrapper", ngImport: i0, template: "\r\n@if(dialogData.component){\r\n    <ng-container [ngComponentOutlet]=\"dialogData.component\"  [ngComponentOutletInputs]=\"{ data: dialogData }\"></ng-container>\r\n}\r\n@else{\r\n  <div class=\"dialog-container\">\r\n  \r\n    <!-- Header -->\r\n    @if(typeof dialogData.header == 'string') {\r\n      <div class=\"dialog-header\" mat-dialog-title>\r\n        <div class=\"dialog-header-left\">\r\n          <div class=\"dialog-icon-ring\">\r\n            <mat-icon class=\"dialog-icon\">\r\n              {{ dialogData.header.startsWith('Add') ? 'add_circle' : dialogData.header.startsWith('Edit') ? 'edit' : 'info' }}\r\n            </mat-icon>\r\n          </div>\r\n          <div class=\"dialog-title-group\">\r\n            <span class=\"dialog-mode-label\">\r\n              {{ dialogData.header.startsWith('Add') ? 'Creating New' : dialogData.header.startsWith('Edit') ? 'Edit' : '' }}\r\n            </span>\r\n            <span class=\"dialog-heading\"> {{ dialogData.header.startsWith('Add') ? dialogData.header.replace('Add','') : dialogData.header.startsWith('Edit') ? dialogData.header.replace('Edit','') : '' }}</span>\r\n          </div>\r\n        </div>\r\n        <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\r\n    }\r\n  \r\n    <!-- Body -->\r\n    <mat-dialog-content class=\"dialog-content\">\r\n      @if(dialogData.formBody) {\r\n        <div class=\"dialog-body\">\r\n          <ng-container *ngTemplateOutlet=\"dialogData.formBody; context: { $implicit: dialogData }\"></ng-container>\r\n        </div>\r\n      }\r\n    </mat-dialog-content>\r\n  \r\n    <!-- Footer -->\r\n    @if(dialogData.formFooter) {\r\n      <mat-dialog-actions class=\"dialog-actions\">\r\n        <div class=\"dialog-footer\">\r\n          <ng-container *ngTemplateOutlet=\"dialogData.formFooter; context: { $implicit: dialogData }\"></ng-container>\r\n        </div>\r\n      </mat-dialog-actions>\r\n    }\r\n  \r\n  </div>\r\n\r\n}\r\n", styles: [".dialog-container{display:flex;flex-direction:column;overflow:hidden}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;background:linear-gradient(135deg,#f0f6ff,#e8f0fe);border-bottom:1px solid rgba(37,99,235,.12);gap:12px}.dialog-header:before{display:none}.dialog-header-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}.dialog-icon-ring{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--osl-primary, #2563eb),#3b82f6);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #2563eb4d;animation:icon-pop .25s cubic-bezier(.34,1.56,.64,1)}.dialog-icon{color:#fff;font-size:24px;width:24px;height:24px}.dialog-title-group{display:flex;flex-direction:column;min-width:0}.dialog-mode-label{font-size:11px;font-weight:500;color:var(--osl-primary, #2563eb);text-transform:uppercase;letter-spacing:.6px;line-height:1.2}.dialog-heading{font-size:18px;font-weight:600;color:#111827;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialog-close-btn{flex-shrink:0;color:#6b7280;transition:color .15s ease,background .15s ease}.dialog-close-btn:hover{color:#111827;background:#0000000f}.dialog-close-btn .mat-icon{font-size:20px;width:20px;height:20px}.dialog-content{padding:0!important;max-height:65vh;overflow-y:auto}.dialog-content::-webkit-scrollbar{width:5px}.dialog-content::-webkit-scrollbar-track{background:transparent}.dialog-content::-webkit-scrollbar-thumb{background:#2563eb33;border-radius:4px}.dialog-body{padding:20px 24px}.dialog-actions{padding:0!important;min-height:unset!important;border-top:1px solid #e5e7eb;background:#fafafa}.dialog-footer{width:100%;padding:14px 24px}@keyframes icon-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.mat-mdc-dialog-title:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DialogWrapper, isStandalone: true, selector: "dialog-wrapper", ngImport: i0, template: "\r\n@if(dialogData.component){\r\n    <ng-container [ngComponentOutlet]=\"dialogData.component\"  [ngComponentOutletInputs]=\"{ data: dialogData }\"></ng-container>\r\n}\r\n@else{\r\n  <div class=\"dialog-container\">\r\n  \r\n    <!-- Header -->\r\n    @if(typeof dialogData.header == 'string') {\r\n      <div class=\"dialog-header\" mat-dialog-title>\r\n        <div class=\"dialog-header-left\">\r\n          <div class=\"dialog-icon-ring\">\r\n            <mat-icon class=\"dialog-icon\">\r\n              {{ dialogData.header.startsWith('Add') ? 'add_circle' : dialogData.header.startsWith('Edit') ? 'edit' : 'info' }}\r\n            </mat-icon>\r\n          </div>\r\n          <div class=\"dialog-title-group\">\r\n            <span class=\"dialog-mode-label\">\r\n              {{ dialogData.header.startsWith('Add') ? 'Creating New' : dialogData.header.startsWith('Edit') ? 'Edit' : '' }}\r\n            </span>\r\n            <span class=\"dialog-heading\"> {{ dialogData.header.startsWith('Add') ? dialogData.header.replace('Add','') : dialogData.header.startsWith('Edit') ? dialogData.header.replace('Edit','') : '' }}</span>\r\n          </div>\r\n        </div>\r\n        @if(dialogData.partialHeader) {\r\n       \r\n          <ng-container *ngTemplateOutlet=\"dialogData.partialHeader; context: { $implicit: dialogData }\"></ng-container>\r\n        }\r\n        <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n          <span> test</span>\r\n      </div>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\r\n    }\r\n  \r\n    <!-- Body -->\r\n    <mat-dialog-content class=\"dialog-content\">\r\n      @if(dialogData.formBody) {\r\n        <div class=\"dialog-body\">\r\n          <ng-container *ngTemplateOutlet=\"dialogData.formBody; context: { $implicit: dialogData }\"></ng-container>\r\n        </div>\r\n      }\r\n    </mat-dialog-content>\r\n  \r\n    <!-- Footer -->\r\n    @if(dialogData.formFooter) {\r\n      <mat-dialog-actions class=\"dialog-actions\">\r\n        <div class=\"dialog-footer\">\r\n          <ng-container *ngTemplateOutlet=\"dialogData.formFooter; context: { $implicit: dialogData }\"></ng-container>\r\n        </div>\r\n      </mat-dialog-actions>\r\n    }\r\n  \r\n  </div>\r\n\r\n}\r\n", styles: [".dialog-container{display:flex;flex-direction:column;overflow:hidden}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;background:linear-gradient(135deg,#f0f6ff,#e8f0fe);border-bottom:1px solid rgba(37,99,235,.12);gap:12px}.dialog-header:before{display:none}.dialog-header-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}.dialog-icon-ring{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--osl-primary, #2563eb),#3b82f6);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #2563eb4d;animation:icon-pop .25s cubic-bezier(.34,1.56,.64,1)}.dialog-icon{color:#fff;font-size:24px;width:24px;height:24px}.dialog-title-group{display:flex;flex-direction:column;min-width:0}.dialog-mode-label{font-size:11px;font-weight:500;color:var(--osl-primary, #2563eb);text-transform:uppercase;letter-spacing:.6px;line-height:1.2}.dialog-heading{font-size:18px;font-weight:600;color:#111827;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialog-close-btn{flex-shrink:0;color:#6b7280;transition:color .15s ease,background .15s ease}.dialog-close-btn:hover{color:#111827;background:#0000000f}.dialog-close-btn .mat-icon{font-size:20px;width:20px;height:20px}.dialog-content{padding:0!important;max-height:65vh;overflow-y:auto}.dialog-content::-webkit-scrollbar{width:5px}.dialog-content::-webkit-scrollbar-track{background:transparent}.dialog-content::-webkit-scrollbar-thumb{background:#2563eb33;border-radius:4px}.dialog-body{padding:20px 24px}.dialog-actions{padding:0!important;min-height:unset!important;border-top:1px solid #e5e7eb;background:#fafafa}.dialog-footer{width:100%;padding:14px 24px}@keyframes icon-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.mat-mdc-dialog-title:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
 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: "\r\n@if(dialogData.component){\r\n    <ng-container [ngComponentOutlet]=\"dialogData.component\"  [ngComponentOutletInputs]=\"{ data: dialogData }\"></ng-container>\r\n}\r\n@else{\r\n  <div class=\"dialog-container\">\r\n  \r\n    <!-- Header -->\r\n    @if(typeof dialogData.header == 'string') {\r\n      <div class=\"dialog-header\" mat-dialog-title>\r\n        <div class=\"dialog-header-left\">\r\n          <div class=\"dialog-icon-ring\">\r\n            <mat-icon class=\"dialog-icon\">\r\n              {{ dialogData.header.startsWith('Add') ? 'add_circle' : dialogData.header.startsWith('Edit') ? 'edit' : 'info' }}\r\n            </mat-icon>\r\n          </div>\r\n          <div class=\"dialog-title-group\">\r\n            <span class=\"dialog-mode-label\">\r\n              {{ dialogData.header.startsWith('Add') ? 'Creating New' : dialogData.header.startsWith('Edit') ? 'Edit' : '' }}\r\n            </span>\r\n            <span class=\"dialog-heading\"> {{ dialogData.header.startsWith('Add') ? dialogData.header.replace('Add','') : dialogData.header.startsWith('Edit') ? dialogData.header.replace('Edit','') : '' }}</span>\r\n          </div>\r\n        </div>\r\n        <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\r\n    }\r\n  \r\n    <!-- Body -->\r\n    <mat-dialog-content class=\"dialog-content\">\r\n      @if(dialogData.formBody) {\r\n        <div class=\"dialog-body\">\r\n          <ng-container *ngTemplateOutlet=\"dialogData.formBody; context: { $implicit: dialogData }\"></ng-container>\r\n        </div>\r\n      }\r\n    </mat-dialog-content>\r\n  \r\n    <!-- Footer -->\r\n    @if(dialogData.formFooter) {\r\n      <mat-dialog-actions class=\"dialog-actions\">\r\n        <div class=\"dialog-footer\">\r\n          <ng-container *ngTemplateOutlet=\"dialogData.formFooter; context: { $implicit: dialogData }\"></ng-container>\r\n        </div>\r\n      </mat-dialog-actions>\r\n    }\r\n  \r\n  </div>\r\n\r\n}\r\n", styles: [".dialog-container{display:flex;flex-direction:column;overflow:hidden}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;background:linear-gradient(135deg,#f0f6ff,#e8f0fe);border-bottom:1px solid rgba(37,99,235,.12);gap:12px}.dialog-header:before{display:none}.dialog-header-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}.dialog-icon-ring{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--osl-primary, #2563eb),#3b82f6);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #2563eb4d;animation:icon-pop .25s cubic-bezier(.34,1.56,.64,1)}.dialog-icon{color:#fff;font-size:24px;width:24px;height:24px}.dialog-title-group{display:flex;flex-direction:column;min-width:0}.dialog-mode-label{font-size:11px;font-weight:500;color:var(--osl-primary, #2563eb);text-transform:uppercase;letter-spacing:.6px;line-height:1.2}.dialog-heading{font-size:18px;font-weight:600;color:#111827;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialog-close-btn{flex-shrink:0;color:#6b7280;transition:color .15s ease,background .15s ease}.dialog-close-btn:hover{color:#111827;background:#0000000f}.dialog-close-btn .mat-icon{font-size:20px;width:20px;height:20px}.dialog-content{padding:0!important;max-height:65vh;overflow-y:auto}.dialog-content::-webkit-scrollbar{width:5px}.dialog-content::-webkit-scrollbar-track{background:transparent}.dialog-content::-webkit-scrollbar-thumb{background:#2563eb33;border-radius:4px}.dialog-body{padding:20px 24px}.dialog-actions{padding:0!important;min-height:unset!important;border-top:1px solid #e5e7eb;background:#fafafa}.dialog-footer{width:100%;padding:14px 24px}@keyframes icon-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.mat-mdc-dialog-title:before{display:none}\n"] }]
+            args: [{ selector: 'dialog-wrapper', imports: [MatDialogModule, MatIconModule, NgTemplateOutlet, MatIconButton, NgComponentOutlet], template: "\r\n@if(dialogData.component){\r\n    <ng-container [ngComponentOutlet]=\"dialogData.component\"  [ngComponentOutletInputs]=\"{ data: dialogData }\"></ng-container>\r\n}\r\n@else{\r\n  <div class=\"dialog-container\">\r\n  \r\n    <!-- Header -->\r\n    @if(typeof dialogData.header == 'string') {\r\n      <div class=\"dialog-header\" mat-dialog-title>\r\n        <div class=\"dialog-header-left\">\r\n          <div class=\"dialog-icon-ring\">\r\n            <mat-icon class=\"dialog-icon\">\r\n              {{ dialogData.header.startsWith('Add') ? 'add_circle' : dialogData.header.startsWith('Edit') ? 'edit' : 'info' }}\r\n            </mat-icon>\r\n          </div>\r\n          <div class=\"dialog-title-group\">\r\n            <span class=\"dialog-mode-label\">\r\n              {{ dialogData.header.startsWith('Add') ? 'Creating New' : dialogData.header.startsWith('Edit') ? 'Edit' : '' }}\r\n            </span>\r\n            <span class=\"dialog-heading\"> {{ dialogData.header.startsWith('Add') ? dialogData.header.replace('Add','') : dialogData.header.startsWith('Edit') ? dialogData.header.replace('Edit','') : '' }}</span>\r\n          </div>\r\n        </div>\r\n        @if(dialogData.partialHeader) {\r\n       \r\n          <ng-container *ngTemplateOutlet=\"dialogData.partialHeader; context: { $implicit: dialogData }\"></ng-container>\r\n        }\r\n        <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n          <span> test</span>\r\n      </div>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\r\n    }\r\n  \r\n    <!-- Body -->\r\n    <mat-dialog-content class=\"dialog-content\">\r\n      @if(dialogData.formBody) {\r\n        <div class=\"dialog-body\">\r\n          <ng-container *ngTemplateOutlet=\"dialogData.formBody; context: { $implicit: dialogData }\"></ng-container>\r\n        </div>\r\n      }\r\n    </mat-dialog-content>\r\n  \r\n    <!-- Footer -->\r\n    @if(dialogData.formFooter) {\r\n      <mat-dialog-actions class=\"dialog-actions\">\r\n        <div class=\"dialog-footer\">\r\n          <ng-container *ngTemplateOutlet=\"dialogData.formFooter; context: { $implicit: dialogData }\"></ng-container>\r\n        </div>\r\n      </mat-dialog-actions>\r\n    }\r\n  \r\n  </div>\r\n\r\n}\r\n", styles: [".dialog-container{display:flex;flex-direction:column;overflow:hidden}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;background:linear-gradient(135deg,#f0f6ff,#e8f0fe);border-bottom:1px solid rgba(37,99,235,.12);gap:12px}.dialog-header:before{display:none}.dialog-header-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}.dialog-icon-ring{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--osl-primary, #2563eb),#3b82f6);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #2563eb4d;animation:icon-pop .25s cubic-bezier(.34,1.56,.64,1)}.dialog-icon{color:#fff;font-size:24px;width:24px;height:24px}.dialog-title-group{display:flex;flex-direction:column;min-width:0}.dialog-mode-label{font-size:11px;font-weight:500;color:var(--osl-primary, #2563eb);text-transform:uppercase;letter-spacing:.6px;line-height:1.2}.dialog-heading{font-size:18px;font-weight:600;color:#111827;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialog-close-btn{flex-shrink:0;color:#6b7280;transition:color .15s ease,background .15s ease}.dialog-close-btn:hover{color:#111827;background:#0000000f}.dialog-close-btn .mat-icon{font-size:20px;width:20px;height:20px}.dialog-content{padding:0!important;max-height:65vh;overflow-y:auto}.dialog-content::-webkit-scrollbar{width:5px}.dialog-content::-webkit-scrollbar-track{background:transparent}.dialog-content::-webkit-scrollbar-thumb{background:#2563eb33;border-radius:4px}.dialog-body{padding:20px 24px}.dialog-actions{padding:0!important;min-height:unset!important;border-top:1px solid #e5e7eb;background:#fafafa}.dialog-footer{width:100%;padding:14px 24px}@keyframes icon-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.mat-mdc-dialog-title:before{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: Dialog, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }] });
 class Dialog {
     header = "No Title Found";
+    partialHeader;
     formBody;
     formFooter;
     data;
@@ -2245,6 +2247,8 @@ class OslSetup {
     isLister = false;
     moreMenuActions = [];
     customFormFooter;
+    customHeaderTemp;
+    partialCustomHeaderTemp;
     // ── Outputs ───────────────────────────────────────────────────
     onSearch = new EventEmitter();
     onAdd = new EventEmitter();
@@ -2353,14 +2357,15 @@ class OslSetup {
             width: this.dialogWidth,
             maxWidth: '90vw',
             data: {
-                header: (this.dialogMode === 'add' ? 'Add ' : 'Edit ') + this.title,
+                header: this.customHeaderTemp ?? ((this.dialogMode === 'add' ? 'Add ' : 'Edit ') + this.title),
+                partialHeader: this.partialCustomHeaderTemp,
                 formBody: this.formBodyTpl,
                 formFooter: this.customFormFooter ? this.customFooterWrapperTpl : this.formFooterTpl,
             },
         });
     }
     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", moreMenuActions: "moreMenuActions", customFormFooter: "customFormFooter", onSave: "onSave" }, outputs: { onSearch: "onSearch", onAdd: "onAdd", 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: "customFooterWrapperTpl", first: true, predicate: ["customFooterWrapperTpl"], descendants: true }, { propertyName: "searchbar", first: true, predicate: ["searchbar"], descendants: true }, { propertyName: "gridRef", first: true, predicate: ["gridRef"], descendants: true }], ngImport: i0, template: "<div class=\"p-2\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"osl-setup-header\">\r\n    <h5 class=\"mb-0\">{{ title }}</h5>\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n     <osl-searchbar #searchbar class=\"mx-2\" (onSearch)=\"onSearchSetup($event)\"></osl-searchbar>\r\n      @if(!isLister){\r\n        <osl-button \r\n          variant=\"secondary\"\r\n          size=\"sm\"\r\n          [label]=\"'Add ' + title\"\r\n          (clickEv)=\"openAddDialog()\"\r\n        ></osl-button>\r\n\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Grid -->\r\n  <div class=\"osl-setup-body my-2\">\r\n    <osl-grid\r\n       #gridRef\r\n      [columns]=\"columnsWithActions\"\r\n      [(datasource)]=\"datasource\"\r\n      [isPaginated]=\"isPaginated\"\r\n      [pageSize]=\"pageSize\"\r\n      [autoMode]=\"autoMode\"\r\n      [tableHeight]=\"tableHeight\"\r\n      [totalRecords]=\"totalRecords\"\r\n      [loading]=\"loading\"\r\n      [moreMenuActions]=\"moreMenuActions\"\r\n      (editClick)=\"openEditDialog($event)\"\r\n      (deleteClick)=\"onDeleteClick($event)\"\r\n      (pageChange)=\"onPageChange(pageChange,$event)\"\r\n      (pageSizeChange)=\"onPageChange(pageSizeChange,$event)\"\r\n      (sortChange)=\"sortChange.emit($event)\"\r\n      [isSelectable]=\"isLister\";\r\n      (onRowClick)=\"onRowClick.emit($event)\"\r\n    />\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Dialog: Form Body -->\r\n<ng-template #formBodyTpl>\r\n  <osl-dynamic-form\r\n  [skeletonLoading]=\"formLoading\"\r\n    [elements]=\"formElements\"\r\n    [(model)]=\"dialogModel\"\r\n  ></osl-dynamic-form>\r\n</ng-template>\r\n\r\n<!-- Dialog: Form Footer -->\r\n<ng-template #formFooterTpl>\r\n  <div class=\"osl-setup-dialog-footer\">\r\n\r\n\r\n      <osl-button [loading]=\"saveLoading\" variant=\"secondary\" label=\"Save\" (click)=\"saveDialog()\"></osl-button>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Wrapper that bridges DialogWrapper's implicit context to the custom footer template -->\r\n<ng-template #customFooterWrapperTpl let-data>\r\n  <ng-container *ngTemplateOutlet=\"customFormFooter!; context: { $implicit: { dialogModel: dialogModel, dialogMode: dialogMode, dialogRef: data.dialogRef } }\"></ng-container>\r\n</ng-template>\r\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: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DynamicForm, selector: "osl-dynamic-form", inputs: ["elements", "model", "skeletonLoading", "skeletonTheme"], 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", "moreMenuActions"], 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", moreMenuActions: "moreMenuActions", customFormFooter: "customFormFooter", customHeaderTemp: "customHeaderTemp", partialCustomHeaderTemp: "partialCustomHeaderTemp", onSave: "onSave" }, outputs: { onSearch: "onSearch", onAdd: "onAdd", 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: "customFooterWrapperTpl", first: true, predicate: ["customFooterWrapperTpl"], descendants: true }, { propertyName: "searchbar", first: true, predicate: ["searchbar"], descendants: true }, { propertyName: "gridRef", first: true, predicate: ["gridRef"], descendants: true }], ngImport: i0, template: "<div class=\"p-2\">\r\n\r\n  <!-- Header -->\r\n  <div class=\"osl-setup-header\">\r\n    <h5 class=\"mb-0\">{{ title }}</h5>\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n     <osl-searchbar #searchbar class=\"mx-2\" (onSearch)=\"onSearchSetup($event)\"></osl-searchbar>\r\n      @if(!isLister){\r\n        <osl-button \r\n          variant=\"secondary\"\r\n          size=\"sm\"\r\n          [label]=\"'Add ' + title\"\r\n          (clickEv)=\"openAddDialog()\"\r\n        ></osl-button>\r\n\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Grid -->\r\n  <div class=\"osl-setup-body my-2\">\r\n    <osl-grid\r\n       #gridRef\r\n      [columns]=\"columnsWithActions\"\r\n      [(datasource)]=\"datasource\"\r\n      [isPaginated]=\"isPaginated\"\r\n      [pageSize]=\"pageSize\"\r\n      [autoMode]=\"autoMode\"\r\n      [tableHeight]=\"tableHeight\"\r\n      [totalRecords]=\"totalRecords\"\r\n      [loading]=\"loading\"\r\n      [moreMenuActions]=\"moreMenuActions\"\r\n      (editClick)=\"openEditDialog($event)\"\r\n      (deleteClick)=\"onDeleteClick($event)\"\r\n      (pageChange)=\"onPageChange(pageChange,$event)\"\r\n      (pageSizeChange)=\"onPageChange(pageSizeChange,$event)\"\r\n      (sortChange)=\"sortChange.emit($event)\"\r\n      [isSelectable]=\"isLister\";\r\n      (onRowClick)=\"onRowClick.emit($event)\"\r\n    />\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Dialog: Form Body -->\r\n<ng-template #formBodyTpl>\r\n  <osl-dynamic-form\r\n  [skeletonLoading]=\"formLoading\"\r\n    [elements]=\"formElements\"\r\n    [(model)]=\"dialogModel\"\r\n  ></osl-dynamic-form>\r\n</ng-template>\r\n\r\n<!-- Dialog: Form Footer -->\r\n<ng-template #formFooterTpl>\r\n  <div class=\"osl-setup-dialog-footer\">\r\n\r\n\r\n      <osl-button [loading]=\"saveLoading\" variant=\"secondary\" label=\"Save\" (click)=\"saveDialog()\"></osl-button>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Wrapper that bridges DialogWrapper's implicit context to the custom footer template -->\r\n<ng-template #customFooterWrapperTpl let-data>\r\n  <ng-container *ngTemplateOutlet=\"customFormFooter!; context: { $implicit: { dialogModel: dialogModel, dialogMode: dialogMode, dialogRef: data.dialogRef } }\"></ng-container>\r\n</ng-template>\r\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: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DynamicForm, selector: "osl-dynamic-form", inputs: ["elements", "model", "skeletonLoading", "skeletonTheme"], 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", "moreMenuActions"], 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,
@@ -2425,6 +2430,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], customFormFooter: [{
                 type: Input,
                 args: ['customFormFooter']
+            }], customHeaderTemp: [{
+                type: Input,
+                args: ['customHeaderTemp']
+            }], partialCustomHeaderTemp: [{
+                type: Input,
+                args: ['partialCustomHeaderTemp']
             }], onSearch: [{
                 type: Output
             }], onAdd: [{
@@ -2646,7 +2657,7 @@ class OslAutocompleteLister {
         this.dialogRef.close(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslAutocompleteLister, deps: [{ token: i1.MatDialogRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: OslAutocompleteLister, isStandalone: false, selector: "osl-autocomplete-lister", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"p-4\">\r\n    <osl-setup [loading]=\"loader\" [autoMode]=\"false\" [title]=\"autocompleteData?.title\"  [totalRecords]=\"recordCount\"  (pageSizeChange)=\"onPageChange($event)\" (pageChange)=\"onPageChange($event)\" (onRowClick)=\"onRowClick($event)\" [columns]=\"column\" [datasource]=\"datasource\" [isLister]=\"true\"></osl-setup>\r\n    \r\n</div>", styles: [""], dependencies: [{ kind: "component", type: OslSetup, selector: "osl-setup", inputs: ["title", "columns", "datasource", "isPaginated", "pageSize", "autoMode", "tableHeight", "totalRecords", "loading", "dialogWidth", "formElements", "beforeDisplay", "onAddEditFn", "isLister", "moreMenuActions", "customFormFooter", "onSave"], outputs: ["onSearch", "onAdd", "onEdit", "onDelete", "pageChange", "pageSizeChange", "sortChange", "onRowClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: OslAutocompleteLister, isStandalone: false, selector: "osl-autocomplete-lister", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"p-4\">\r\n    <osl-setup [loading]=\"loader\" [autoMode]=\"false\" [title]=\"autocompleteData?.title\"  [totalRecords]=\"recordCount\"  (pageSizeChange)=\"onPageChange($event)\" (pageChange)=\"onPageChange($event)\" (onRowClick)=\"onRowClick($event)\" [columns]=\"column\" [datasource]=\"datasource\" [isLister]=\"true\"></osl-setup>\r\n    \r\n</div>", styles: [""], dependencies: [{ kind: "component", type: OslSetup, selector: "osl-setup", inputs: ["title", "columns", "datasource", "isPaginated", "pageSize", "autoMode", "tableHeight", "totalRecords", "loading", "dialogWidth", "formElements", "beforeDisplay", "onAddEditFn", "isLister", "moreMenuActions", "customFormFooter", "customHeaderTemp", "partialCustomHeaderTemp", "onSave"], outputs: ["onSearch", "onAdd", "onEdit", "onDelete", "pageChange", "pageSizeChange", "sortChange", "onRowClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslAutocompleteLister, decorators: [{
             type: Component,