osl-base-extended 9.4.0 → 9.7.0

package/fesm2022/osl-base-extended.mjs

@@ -71,11 +71,11 @@ class DialogWrapper {
         };
     };
     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\r\n    class=\"dialog-container\"\r\n    cdkDrag\r\n    cdkDragRootElement=\".cdk-overlay-pane\"\r\n    [cdkDragConstrainPosition]=\"dragConstrainPosition\"\r\n    [cdkDragDisabled]=\"!dialogData.isDraggable\">\r\n\r\n    <!-- Header -->\r\n    @if(typeof dialogData.header == 'string') {\r\n      <div class=\"dialog-header\" [class.draggable]=\"dialogData.isDraggable\" cdkDragHandle [cdkDragHandleDisabled]=\"!dialogData.isDraggable\" 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.isDraggable) {\r\n          <div class=\"dialog-drag-handle\" title=\"Drag to move\">\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </div>\r\n        }\r\n        @if(dialogData.partialHeader) {\r\n\r\n          <ng-container *ngTemplateOutlet=\"dialogData.partialHeader; context: { $implicit: dialogData }\"></ng-container>\r\n        }\r\n        <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n\r\n      </div>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\r\n    }\r\n  \r\n    <!-- Body -->\r\n    <mat-dialog-content class=\"dialog-content\">\r\n      @if(dialogData.formBody) {\r\n        <div class=\"dialog-body\">\r\n          <ng-container *ngTemplateOutlet=\"dialogData.formBody; context: { $implicit: dialogData }\"></ng-container>\r\n        </div>\r\n      }\r\n    </mat-dialog-content>\r\n  \r\n    <!-- Footer -->\r\n    @if(dialogData.formFooter) {\r\n      <mat-dialog-actions class=\"dialog-actions\" [class.draggable]=\"dialogData.isDraggable\" cdkDragHandle [cdkDragHandleDisabled]=\"!dialogData.isDraggable\">\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{position:relative;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.draggable{cursor:move}.dialog-drag-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;color:#9ca3af;cursor:move;pointer-events:none}.dialog-drag-handle .mat-icon{font-size:20px;width:20px;height:20px}.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-actions.draggable{cursor:move}.dialog-footer{width:100%;padding:14px 24px}@keyframes icon-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.mat-mdc-dialog-title:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
+    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\r\n    class=\"dialog-container\"\r\n    cdkDrag\r\n    cdkDragRootElement=\".cdk-overlay-pane\"\r\n    [cdkDragConstrainPosition]=\"dragConstrainPosition\"\r\n    [cdkDragDisabled]=\"!dialogData.isDraggable\">\r\n\r\n    <!-- Header -->\r\n    @if(typeof dialogData.header == 'string') {\r\n      <div class=\"dialog-header\" [class.draggable]=\"dialogData.isDraggable\" cdkDragHandle [cdkDragHandleDisabled]=\"!dialogData.isDraggable\" 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.isDraggable) {\r\n          <div class=\"dialog-drag-handle\" title=\"Drag to move\">\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </div>\r\n        }\r\n        @if(dialogData.partialHeader) {\r\n\r\n          <ng-container *ngTemplateOutlet=\"dialogData.partialHeader; context: { $implicit: dialogData }\"></ng-container>\r\n        }\r\n        <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n\r\n      </div>\r\n    } @else {\r\n      <div class=\"dialog-header-custom\" [class.draggable]=\"dialogData.isDraggable\" cdkDragHandle [cdkDragHandleDisabled]=\"!dialogData.isDraggable\">\r\n        <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\r\n      </div>\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\" [class.draggable]=\"dialogData.isDraggable\" cdkDragHandle [cdkDragHandleDisabled]=\"!dialogData.isDraggable\">\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-custom{display:contents}.dialog-header-custom.draggable{cursor:move}.dialog-header{position:relative;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.draggable{cursor:move}.dialog-drag-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;color:#9ca3af;cursor:move;pointer-events:none}.dialog-drag-handle .mat-icon{font-size:20px;width:20px;height:20px}.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-actions.draggable{cursor:move}.dialog-footer{width:100%;padding:14px 24px}@keyframes icon-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.mat-mdc-dialog-title:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
 }
 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, DragDropModule], 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\r\n    class=\"dialog-container\"\r\n    cdkDrag\r\n    cdkDragRootElement=\".cdk-overlay-pane\"\r\n    [cdkDragConstrainPosition]=\"dragConstrainPosition\"\r\n    [cdkDragDisabled]=\"!dialogData.isDraggable\">\r\n\r\n    <!-- Header -->\r\n    @if(typeof dialogData.header == 'string') {\r\n      <div class=\"dialog-header\" [class.draggable]=\"dialogData.isDraggable\" cdkDragHandle [cdkDragHandleDisabled]=\"!dialogData.isDraggable\" 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.isDraggable) {\r\n          <div class=\"dialog-drag-handle\" title=\"Drag to move\">\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </div>\r\n        }\r\n        @if(dialogData.partialHeader) {\r\n\r\n          <ng-container *ngTemplateOutlet=\"dialogData.partialHeader; context: { $implicit: dialogData }\"></ng-container>\r\n        }\r\n        <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n\r\n      </div>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\r\n    }\r\n  \r\n    <!-- Body -->\r\n    <mat-dialog-content class=\"dialog-content\">\r\n      @if(dialogData.formBody) {\r\n        <div class=\"dialog-body\">\r\n          <ng-container *ngTemplateOutlet=\"dialogData.formBody; context: { $implicit: dialogData }\"></ng-container>\r\n        </div>\r\n      }\r\n    </mat-dialog-content>\r\n  \r\n    <!-- Footer -->\r\n    @if(dialogData.formFooter) {\r\n      <mat-dialog-actions class=\"dialog-actions\" [class.draggable]=\"dialogData.isDraggable\" cdkDragHandle [cdkDragHandleDisabled]=\"!dialogData.isDraggable\">\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{position:relative;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.draggable{cursor:move}.dialog-drag-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;color:#9ca3af;cursor:move;pointer-events:none}.dialog-drag-handle .mat-icon{font-size:20px;width:20px;height:20px}.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-actions.draggable{cursor:move}.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, DragDropModule], 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\r\n    class=\"dialog-container\"\r\n    cdkDrag\r\n    cdkDragRootElement=\".cdk-overlay-pane\"\r\n    [cdkDragConstrainPosition]=\"dragConstrainPosition\"\r\n    [cdkDragDisabled]=\"!dialogData.isDraggable\">\r\n\r\n    <!-- Header -->\r\n    @if(typeof dialogData.header == 'string') {\r\n      <div class=\"dialog-header\" [class.draggable]=\"dialogData.isDraggable\" cdkDragHandle [cdkDragHandleDisabled]=\"!dialogData.isDraggable\" 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.isDraggable) {\r\n          <div class=\"dialog-drag-handle\" title=\"Drag to move\">\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </div>\r\n        }\r\n        @if(dialogData.partialHeader) {\r\n\r\n          <ng-container *ngTemplateOutlet=\"dialogData.partialHeader; context: { $implicit: dialogData }\"></ng-container>\r\n        }\r\n        <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n\r\n      </div>\r\n    } @else {\r\n      <div class=\"dialog-header-custom\" [class.draggable]=\"dialogData.isDraggable\" cdkDragHandle [cdkDragHandleDisabled]=\"!dialogData.isDraggable\">\r\n        <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\r\n      </div>\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\" [class.draggable]=\"dialogData.isDraggable\" cdkDragHandle [cdkDragHandleDisabled]=\"!dialogData.isDraggable\">\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-custom{display:contents}.dialog-header-custom.draggable{cursor:move}.dialog-header{position:relative;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.draggable{cursor:move}.dialog-drag-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;color:#9ca3af;cursor:move;pointer-events:none}.dialog-drag-handle .mat-icon{font-size:20px;width:20px;height:20px}.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-actions.draggable{cursor:move}.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]
@@ -3302,12 +3302,18 @@ class OslSearchbar {
     label = "Type to Search...";
     onSearch = new EventEmitter();
     searchQuery = "";
+    focused = false;
     searchControl = new FormControl('');
     onKeyChange() {
         if (!this.searchQuery) {
             this.onSearch.emit(this.searchQuery);
         }
     }
+    clearSearch() {
+        this.searchQuery = '';
+        this.searchControl.setValue('', { emitEvent: false });
+        this.onSearch.emit('');
+    }
     ngOnInit() {
         this.searchControl.valueChanges.pipe(debounceTime$1(300), distinctUntilChanged$1()).subscribe(value => {
             if (value) {
@@ -3316,11 +3322,11 @@ class OslSearchbar {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSearchbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: OslSearchbar, isStandalone: false, selector: "osl-searchbar", inputs: { label: "label" }, outputs: { onSearch: "onSearch" }, ngImport: i0, template: " <div class=\"search-wrap\" [class.focused]=\"searchQuery.length > 0\">\r\n        <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n          <circle cx=\"11\" cy=\"11\" r=\"8\"/>\r\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\r\n        </svg>\r\n        <input\r\n          type=\"text\"\r\n          (keyup)=\"onKeyChange()\"\r\n         [formControl]=\"searchControl\"\r\n          class=\"search-input\"\r\n          [placeholder]=\"label\"\r\n          [(ngModel)]=\"searchQuery\"\r\n        />\r\n      \r\n    \r\n      </div>", styles: [".search-wrap{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--osl-border);border-radius:5px;padding:0 14px;height:30px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.search-icon{width:15px;height:15px;color:var(--text-muted);flex-shrink:0;transition:color var(--transition-fast)}.search-wrap:focus-within .search-icon{color:var(--accent-cyan)}.search-input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-family:Lexend Deca,sans-serif;font-size:13px}.search-input::placeholder{color:var(--text-muted)}.search-kbd{font-size:10px;color:var(--text-muted);background:var(--bg-hover);border:1px solid var(--osl-border-subtle);border-radius:4px;padding:2px 5px;font-family:Lexend Deca,sans-serif;flex-shrink:0}.search-clear{width:16px;height:16px;color:var(--text-muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;transition:color var(--transition-fast)}.search-clear svg{width:12px;height:12px}.search-clear:hover{color:var(--text-primary)}\n"], dependencies: [{ kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslSearchbar, isStandalone: false, selector: "osl-searchbar", inputs: { label: "label" }, outputs: { onSearch: "onSearch" }, ngImport: i0, template: "<div class=\"osl-searchbar-wrap\" [class.osl-searchbar-wrap--focused]=\"focused\">\n  <svg class=\"osl-searchbar-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n  </svg>\n  <input\n    type=\"text\"\n    class=\"osl-searchbar-input\"\n    (keyup)=\"onKeyChange()\"\n    [formControl]=\"searchControl\"\n    [placeholder]=\"label\"\n    [(ngModel)]=\"searchQuery\"\n    (focus)=\"focused = true\"\n    (blur)=\"focused = false\"\n  />\n  @if (searchQuery) {\n    <button type=\"button\" class=\"osl-searchbar-clear\" tabindex=\"-1\" aria-label=\"Clear search\" (click)=\"clearSearch()\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n      </svg>\n    </button>\n  }\n</div>\n", styles: [":host{display:inline-flex;width:260px;max-width:100%;flex-shrink:0}.osl-searchbar-wrap{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 14px;background:#f1f2f4;border:1px solid transparent;border-radius:999px;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.osl-searchbar-wrap:hover{background:#e7e9ec}.osl-searchbar-wrap--focused,.osl-searchbar-wrap--focused:hover{background:#fff;border-color:var(--osl-primary, #6366f1);box-shadow:0 0 0 3px color-mix(in srgb,var(--osl-primary, #6366f1) 14%,transparent),0 1px 2px #1018280a}.osl-searchbar-icon{width:16px;height:16px;color:#9ca3af;flex-shrink:0;transition:color .2s ease}.osl-searchbar-wrap--focused .osl-searchbar-icon{color:var(--osl-primary, #6366f1)}.osl-searchbar-input{flex:1;min-width:0;height:100%;border:none;outline:none;background:transparent;color:#1f2937;font-family:inherit;font-size:var(--osl-text-font-size, 13px)}.osl-searchbar-input::placeholder{color:#9ca3af}.osl-searchbar-clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;padding:0;border:none;border-radius:50%;background:transparent;color:#9ca3af;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .1s ease;animation:osl-searchbar-clear-in .15s ease}.osl-searchbar-clear svg{width:12px;height:12px}.osl-searchbar-clear:hover{background:#fff1f2;color:#f43f5e}.osl-searchbar-clear:active{transform:scale(.88)}@keyframes osl-searchbar-clear-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSearchbar, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-searchbar', standalone: false, template: " <div class=\"search-wrap\" [class.focused]=\"searchQuery.length > 0\">\r\n        <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n          <circle cx=\"11\" cy=\"11\" r=\"8\"/>\r\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\r\n        </svg>\r\n        <input\r\n          type=\"text\"\r\n          (keyup)=\"onKeyChange()\"\r\n         [formControl]=\"searchControl\"\r\n          class=\"search-input\"\r\n          [placeholder]=\"label\"\r\n          [(ngModel)]=\"searchQuery\"\r\n        />\r\n      \r\n    \r\n      </div>", styles: [".search-wrap{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--osl-border);border-radius:5px;padding:0 14px;height:30px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.search-icon{width:15px;height:15px;color:var(--text-muted);flex-shrink:0;transition:color var(--transition-fast)}.search-wrap:focus-within .search-icon{color:var(--accent-cyan)}.search-input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-family:Lexend Deca,sans-serif;font-size:13px}.search-input::placeholder{color:var(--text-muted)}.search-kbd{font-size:10px;color:var(--text-muted);background:var(--bg-hover);border:1px solid var(--osl-border-subtle);border-radius:4px;padding:2px 5px;font-family:Lexend Deca,sans-serif;flex-shrink:0}.search-clear{width:16px;height:16px;color:var(--text-muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;transition:color var(--transition-fast)}.search-clear svg{width:12px;height:12px}.search-clear:hover{color:var(--text-primary)}\n"] }]
+            args: [{ selector: 'osl-searchbar', standalone: false, template: "<div class=\"osl-searchbar-wrap\" [class.osl-searchbar-wrap--focused]=\"focused\">\n  <svg class=\"osl-searchbar-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n    <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n  </svg>\n  <input\n    type=\"text\"\n    class=\"osl-searchbar-input\"\n    (keyup)=\"onKeyChange()\"\n    [formControl]=\"searchControl\"\n    [placeholder]=\"label\"\n    [(ngModel)]=\"searchQuery\"\n    (focus)=\"focused = true\"\n    (blur)=\"focused = false\"\n  />\n  @if (searchQuery) {\n    <button type=\"button\" class=\"osl-searchbar-clear\" tabindex=\"-1\" aria-label=\"Clear search\" (click)=\"clearSearch()\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n      </svg>\n    </button>\n  }\n</div>\n", styles: [":host{display:inline-flex;width:260px;max-width:100%;flex-shrink:0}.osl-searchbar-wrap{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 14px;background:#f1f2f4;border:1px solid transparent;border-radius:999px;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.osl-searchbar-wrap:hover{background:#e7e9ec}.osl-searchbar-wrap--focused,.osl-searchbar-wrap--focused:hover{background:#fff;border-color:var(--osl-primary, #6366f1);box-shadow:0 0 0 3px color-mix(in srgb,var(--osl-primary, #6366f1) 14%,transparent),0 1px 2px #1018280a}.osl-searchbar-icon{width:16px;height:16px;color:#9ca3af;flex-shrink:0;transition:color .2s ease}.osl-searchbar-wrap--focused .osl-searchbar-icon{color:var(--osl-primary, #6366f1)}.osl-searchbar-input{flex:1;min-width:0;height:100%;border:none;outline:none;background:transparent;color:#1f2937;font-family:inherit;font-size:var(--osl-text-font-size, 13px)}.osl-searchbar-input::placeholder{color:#9ca3af}.osl-searchbar-clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;padding:0;border:none;border-radius:50%;background:transparent;color:#9ca3af;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .1s ease;animation:osl-searchbar-clear-in .15s ease}.osl-searchbar-clear svg{width:12px;height:12px}.osl-searchbar-clear:hover{background:#fff1f2;color:#f43f5e}.osl-searchbar-clear:active{transform:scale(.88)}@keyframes osl-searchbar-clear-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n"] }]
         }], propDecorators: { label: [{
                 type: Input,
                 args: ['label']