orque-ui 0.0.1

package/fesm2022/orque-ui.mjs

@@ -0,0 +1,1970 @@
+import * as i0 from '@angular/core';
+import { Component, EventEmitter, HostListener, Output, Input, signal, forwardRef, ChangeDetectionStrategy, ViewChild, Injectable } from '@angular/core';
+import * as i1$3 from '@angular/common';
+import { DatePipe, CommonModule, NgClass } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { FormGroup, FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { Subject, BehaviorSubject } from 'rxjs';
+import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import * as i1 from '@angular/common/http';
+import * as i1$2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+
+class OUi {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OUi, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: OUi, isStandalone: true, selector: "o-o-ui", ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OUi, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'o-o-ui',
+                    standalone: true,
+                    imports: [],
+                    template: '',
+                }]
+        }] });
+
+/**
+ * OPAC JSON Page Rendering Model
+ */
+
+class ContextSwitcherComponent {
+    elementRef;
+    currentContext = 'OPAC';
+    activeTenant = null;
+    contextChange = new EventEmitter();
+    dropdownOpen = false;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    toggleDropdown() {
+        this.dropdownOpen = !this.dropdownOpen;
+    }
+    isLicensed(product) {
+        if (product === 'OPAC')
+            return true;
+        if (!this.activeTenant || !this.activeTenant.settings_json)
+            return false;
+        let settings = this.activeTenant.settings_json;
+        if (typeof settings === 'string') {
+            try {
+                settings = JSON.parse(settings);
+            }
+            catch (e) {
+                return false;
+            }
+        }
+        const licensed = settings.licensedProducts || {};
+        return !!(licensed[product] && licensed[product].enabled);
+    }
+    switchContext(product) {
+        if (!this.isLicensed(product))
+            return;
+        this.currentContext = product;
+        this.dropdownOpen = false;
+        this.contextChange.emit(product);
+    }
+    getContextLabel() {
+        if (this.currentContext === 'OPAC') {
+            return 'OPAC Administration';
+        }
+        return `Orque ${this.currentContext}`;
+    }
+    onClickOutside(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.dropdownOpen = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ContextSwitcherComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ContextSwitcherComponent, isStandalone: true, selector: "o-context-switcher", inputs: { currentContext: "currentContext", activeTenant: "activeTenant" }, outputs: { contextChange: "contextChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"context-switcher\">\n  <button class=\"context-btn\" (click)=\"toggleDropdown()\">\n    {{ getContextLabel() }}\n  </button>\n  <div class=\"context-dropdown\" [class.active]=\"dropdownOpen\">\n    <div class=\"context-item\" [class.active]=\"currentContext === 'OPAC'\" (click)=\"switchContext('OPAC')\">\n      <span class=\"context-item-title\">OPAC Administration</span>\n      <span class=\"context-item-desc\">Master control panel</span>\n    </div>\n    @if (isLicensed('ERP')) {\n    <div class=\"context-item\"\n         [class.active]=\"currentContext === 'ERP'\"\n         (click)=\"switchContext('ERP')\">\n      <span class=\"context-item-title\">Orque ERP</span>\n      <span class=\"context-item-desc\">Enterprise Resource Planning</span>\n    </div>\n    }\n    @if (isLicensed('CRM')) {\n    <div class=\"context-item\"\n         [class.active]=\"currentContext === 'CRM'\"\n         (click)=\"switchContext('CRM')\">\n      <span class=\"context-item-title\">Orque CRM</span>\n      <span class=\"context-item-desc\">Customer Relationship Management</span>\n    </div>\n    }\n    @if (isLicensed('IMS')) {\n    <div class=\"context-item\"\n         [class.active]=\"currentContext === 'IMS'\"\n         (click)=\"switchContext('IMS')\">\n      <span class=\"context-item-title\">Orque IMS</span>\n      <span class=\"context-item-desc\">Inventory Management System</span>\n    </div>\n    }\n  </div>\n</div>\n", styles: [".context-switcher{position:relative;display:inline-block}.context-btn{background:var(--glass-bg, rgba(22, 17, 45, .45));border:1px solid var(--glass-border, rgba(255, 255, 255, .08));padding:.6rem 1.2rem;border-radius:var(--radius-md, 10px);color:var(--text-primary, #f3f1f8);font-weight:500;cursor:pointer;display:flex;align-items:center;gap:.6rem;transition:var(--transition, all .25s cubic-bezier(.4, 0, .2, 1));font-family:inherit;font-size:.95rem}.context-btn:hover{background:#ffffff0d;border-color:var(--color-primary, #8b5cf6);box-shadow:0 0 10px var(--color-primary-glow, rgba(139, 92, 246, .4))}.context-btn:after{content:\"\\25bc\";font-size:.7rem;color:var(--text-secondary, #9a94b5)}.context-dropdown{position:absolute;top:calc(100% + 8px);left:0;background:#0f0a20f2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border, rgba(255, 255, 255, .08));border-radius:var(--radius-md, 10px);box-shadow:var(--glass-glow, 0 8px 32px 0 rgba(0, 0, 0, .37)),0 0 20px #00000080;width:240px;overflow:hidden;display:none;z-index:1000}.context-dropdown.active{display:block;animation:slideDown .2s ease-out}.context-item{display:flex;flex-direction:column;padding:.8rem 1.2rem;cursor:pointer;transition:var(--transition, all .25s cubic-bezier(.4, 0, .2, 1));border-bottom:1px solid rgba(255,255,255,.03);text-align:left}.context-item:last-child{border-bottom:none}.context-item:hover{background:#8b5cf626}.context-item.active{border-left:3px solid var(--color-primary, #8b5cf6);background:#8b5cf61a}.context-item-title{font-weight:600;font-size:.95rem;color:var(--text-primary, #f3f1f8)}.context-item-desc{font-size:.75rem;color:var(--text-secondary, #9a94b5);margin-top:.2rem}.context-item.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}@keyframes slideDown{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ContextSwitcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-context-switcher', standalone: true, imports: [], template: "<div class=\"context-switcher\">\n  <button class=\"context-btn\" (click)=\"toggleDropdown()\">\n    {{ getContextLabel() }}\n  </button>\n  <div class=\"context-dropdown\" [class.active]=\"dropdownOpen\">\n    <div class=\"context-item\" [class.active]=\"currentContext === 'OPAC'\" (click)=\"switchContext('OPAC')\">\n      <span class=\"context-item-title\">OPAC Administration</span>\n      <span class=\"context-item-desc\">Master control panel</span>\n    </div>\n    @if (isLicensed('ERP')) {\n    <div class=\"context-item\"\n         [class.active]=\"currentContext === 'ERP'\"\n         (click)=\"switchContext('ERP')\">\n      <span class=\"context-item-title\">Orque ERP</span>\n      <span class=\"context-item-desc\">Enterprise Resource Planning</span>\n    </div>\n    }\n    @if (isLicensed('CRM')) {\n    <div class=\"context-item\"\n         [class.active]=\"currentContext === 'CRM'\"\n         (click)=\"switchContext('CRM')\">\n      <span class=\"context-item-title\">Orque CRM</span>\n      <span class=\"context-item-desc\">Customer Relationship Management</span>\n    </div>\n    }\n    @if (isLicensed('IMS')) {\n    <div class=\"context-item\"\n         [class.active]=\"currentContext === 'IMS'\"\n         (click)=\"switchContext('IMS')\">\n      <span class=\"context-item-title\">Orque IMS</span>\n      <span class=\"context-item-desc\">Inventory Management System</span>\n    </div>\n    }\n  </div>\n</div>\n", styles: [".context-switcher{position:relative;display:inline-block}.context-btn{background:var(--glass-bg, rgba(22, 17, 45, .45));border:1px solid var(--glass-border, rgba(255, 255, 255, .08));padding:.6rem 1.2rem;border-radius:var(--radius-md, 10px);color:var(--text-primary, #f3f1f8);font-weight:500;cursor:pointer;display:flex;align-items:center;gap:.6rem;transition:var(--transition, all .25s cubic-bezier(.4, 0, .2, 1));font-family:inherit;font-size:.95rem}.context-btn:hover{background:#ffffff0d;border-color:var(--color-primary, #8b5cf6);box-shadow:0 0 10px var(--color-primary-glow, rgba(139, 92, 246, .4))}.context-btn:after{content:\"\\25bc\";font-size:.7rem;color:var(--text-secondary, #9a94b5)}.context-dropdown{position:absolute;top:calc(100% + 8px);left:0;background:#0f0a20f2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border, rgba(255, 255, 255, .08));border-radius:var(--radius-md, 10px);box-shadow:var(--glass-glow, 0 8px 32px 0 rgba(0, 0, 0, .37)),0 0 20px #00000080;width:240px;overflow:hidden;display:none;z-index:1000}.context-dropdown.active{display:block;animation:slideDown .2s ease-out}.context-item{display:flex;flex-direction:column;padding:.8rem 1.2rem;cursor:pointer;transition:var(--transition, all .25s cubic-bezier(.4, 0, .2, 1));border-bottom:1px solid rgba(255,255,255,.03);text-align:left}.context-item:last-child{border-bottom:none}.context-item:hover{background:#8b5cf626}.context-item.active{border-left:3px solid var(--color-primary, #8b5cf6);background:#8b5cf61a}.context-item-title{font-weight:600;font-size:.95rem;color:var(--text-primary, #f3f1f8)}.context-item-desc{font-size:.75rem;color:var(--text-secondary, #9a94b5);margin-top:.2rem}.context-item.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}@keyframes slideDown{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { currentContext: [{
+                type: Input
+            }], activeTenant: [{
+                type: Input
+            }], contextChange: [{
+                type: Output
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class ToggleTabsComponent {
+    tabs = [];
+    activeTab = '';
+    tabChange = new EventEmitter();
+    select(value) {
+        this.activeTab = value;
+        this.tabChange.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ToggleTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ToggleTabsComponent, isStandalone: true, selector: "o-toggle-tabs", inputs: { tabs: "tabs", activeTab: "activeTab" }, outputs: { tabChange: "tabChange" }, ngImport: i0, template: "<div class=\"o-btn-group\">\n  @for (tab of tabs; track tab.value) {\n  <button\n    class=\"o-btn-group__btn\"\n    [class.o-btn-group__btn--active]=\"activeTab === tab.value\"\n    (click)=\"select(tab.value)\"\n    type=\"button\">\n    {{ tab.label }}\n  </button>\n  }\n</div>\n", styles: [".o-btn-group{display:inline-flex;align-items:center;border:1px solid #15104E;border-radius:4px;background-color:#f1f3f9;padding:0;gap:0;overflow:hidden}.o-btn-group__btn{height:38px;padding:0 24px;font-size:14px;font-weight:600;font-family:inherit;color:#15104e;background:#f1f3f9;border:none;border-right:1px solid #15104E;border-radius:0;cursor:pointer;white-space:nowrap;transition:all .1s ease;line-height:38px;outline:none;text-align:center}.o-btn-group__btn:last-child{border-right:none}.o-btn-group__btn:hover:not(.o-btn-group__btn--active){background:#e5e3fd;color:#15104e}.o-btn-group__btn--active,.o-btn-group__btn--active:hover{background-color:#15104e;color:#fff}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ToggleTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-toggle-tabs', standalone: true, imports: [], template: "<div class=\"o-btn-group\">\n  @for (tab of tabs; track tab.value) {\n  <button\n    class=\"o-btn-group__btn\"\n    [class.o-btn-group__btn--active]=\"activeTab === tab.value\"\n    (click)=\"select(tab.value)\"\n    type=\"button\">\n    {{ tab.label }}\n  </button>\n  }\n</div>\n", styles: [".o-btn-group{display:inline-flex;align-items:center;border:1px solid #15104E;border-radius:4px;background-color:#f1f3f9;padding:0;gap:0;overflow:hidden}.o-btn-group__btn{height:38px;padding:0 24px;font-size:14px;font-weight:600;font-family:inherit;color:#15104e;background:#f1f3f9;border:none;border-right:1px solid #15104E;border-radius:0;cursor:pointer;white-space:nowrap;transition:all .1s ease;line-height:38px;outline:none;text-align:center}.o-btn-group__btn:last-child{border-right:none}.o-btn-group__btn:hover:not(.o-btn-group__btn--active){background:#e5e3fd;color:#15104e}.o-btn-group__btn--active,.o-btn-group__btn--active:hover{background-color:#15104e;color:#fff}\n"] }]
+        }], propDecorators: { tabs: [{
+                type: Input
+            }], activeTab: [{
+                type: Input
+            }], tabChange: [{
+                type: Output
+            }] } });
+
+class DataTableComponent {
+    columns = [];
+    rows = [];
+    selectable = true;
+    actions = [];
+    rowClick = new EventEmitter();
+    menuOpen = new EventEmitter();
+    actionClick = new EventEmitter();
+    selectionChange = new EventEmitter();
+    visibleColumns = [];
+    selectedRows = [];
+    menuRow = null;
+    ngOnChanges() {
+        this.visibleColumns = this.columns.filter(c => c.isHeaderView !== false &&
+            c.name !== 'checkbox' &&
+            c.name !== 'actionSection');
+    }
+    selectRow(row) {
+        this.rowClick.emit(row);
+    }
+    onCellClick(event, colName, row) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (colName === 'requestId') {
+            this.actionClick.emit({ action: 'view', row });
+        }
+    }
+    isSelected(row) {
+        return this.selectedRows.includes(row);
+    }
+    toggleRow(row) {
+        if (this.isSelected(row)) {
+            this.selectedRows =
+                this.selectedRows.filter(r => r !== row);
+        }
+        else {
+            this.selectedRows.push(row);
+        }
+        this.selectionChange.emit(this.selectedRows);
+    }
+    toggleAll(event) {
+        const checked = event.target.checked;
+        this.selectedRows =
+            checked ? [...this.rows] : [];
+        this.selectionChange.emit(this.selectedRows);
+    }
+    isAllSelected() {
+        return (this.rows.length > 0 &&
+            this.selectedRows.length === this.rows.length);
+    }
+    openMenu(event, row) {
+        event.stopPropagation();
+        this.menuOpen.emit({
+            event,
+            row
+        });
+        this.menuRow =
+            this.menuRow === row
+                ? null
+                : row;
+    }
+    triggerAction(action, row, event) {
+        event.stopPropagation();
+        this.actionClick.emit({
+            action,
+            row
+        });
+        this.menuRow = null;
+    }
+    statusClass(status) {
+        if (!status) {
+            return '';
+        }
+        switch (status.toLowerCase()) {
+            case 'draft':
+                return 'status-draft';
+            case 'active':
+            case 'approved':
+                return 'status-active';
+            case 'pending':
+            case 'returned':
+            case 'in progress':
+                return 'status-progress';
+            case 'rejected':
+            case 'cancelled':
+            case 'expired':
+                return 'status-rejected';
+            default:
+                return 'status-inactive';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: DataTableComponent, isStandalone: true, selector: "o-data-table", inputs: { columns: "columns", rows: "rows", selectable: "selectable", actions: "actions" }, outputs: { rowClick: "rowClick", menuOpen: "menuOpen", actionClick: "actionClick", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"o-table-wrapper\">\n\n  <table class=\"o-table\">\n\n    <thead>\n      <tr>\n\n        <!-- Checkbox Column -->\n        <th class=\"checkbox-col\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isAllSelected()\"\n            (change)=\"toggleAll($event)\"\n          />\n        </th>\n\n        <!-- Actions Column -->\n        <th class=\"action-col\">Actions</th>\n\n        <!-- Dynamic Columns -->\n        @for (col of visibleColumns; track col.name) {\n        <th [style.width]=\"col.width || 'auto'\">\n          {{ col.label }}\n        </th>\n        }\n\n      </tr>\n    </thead>\n\n    <tbody>\n\n      <!-- Empty State -->\n      @if (rows.length === 0) {\n      <tr>\n        <td class=\"o-empty-cell\" [attr.colspan]=\"visibleColumns.length + 2\">\n          No data found\n        </td>\n      </tr>\n      }\n\n      <!-- Data Rows -->\n      @for (row of rows; track $index) {\n      <tr class=\"table-row\" (click)=\"selectRow(row)\">\n\n        <!-- Checkbox -->\n        <td class=\"checkbox-col\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(row)\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleRow(row)\"\n          />\n        </td>\n\n        <!-- Actions -->\n        <td class=\"action-cell\">\n          <button\n            type=\"button\"\n            class=\"action-btn\"\n            (click)=\"openMenu($event, row)\"\n            title=\"Actions\">\n            &#8942;\n          </button>\n        </td>\n\n        <!-- Dynamic Columns -->\n        @for (col of visibleColumns; track col.name) {\n        <td>\n          @if (col.name === 'requestId') {\n            <a href=\"javascript:void(0)\" class=\"o-table-link\" (click)=\"onCellClick($event, col.name, row)\">\n              {{ row[col.name] || '\u2014' }}\n            </a>\n          } @else if (col.pipe === 'status') {\n            <span class=\"o-status-badge\" [class]=\"statusClass(row[col.name])\">\n              {{ row[col.name] || '\u2014' }}\n            </span>\n          } @else if (col.pipe === 'date') {\n            {{ row[col.name] ? (row[col.name] | date:'dd MMM yyyy') : '\u2014' }}\n          } @else {\n            {{ row[col.name] || '\u2014' }}\n          }\n        </td>\n        }\n\n      </tr>\n      }\n\n    </tbody>\n\n  </table>\n\n</div>\n", styles: [".o-table-wrapper{width:100%;overflow-x:auto;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.o-table{width:100%;border-collapse:collapse;min-width:900px}.o-table thead th{background:#f1f3f9;color:#15104e;font-size:13px;font-weight:600;text-transform:none;padding:12px 14px;text-align:left;border-bottom:1px solid #CDCDCD;border-right:1px solid #CDCDCD;white-space:nowrap}.o-table thead th:last-child{border-right:none}.o-table tbody td{padding:12px 14px;font-size:13px;color:#333;border-bottom:1px solid #E2E8F0;border-right:1px solid #E2E8F0;vertical-align:middle}.o-table tbody td:last-child{border-right:none}.o-table-link{color:#1d4ed8;text-decoration:underline;font-weight:600;cursor:pointer;outline:none}.o-table-link:hover{color:#1e40af}.table-row{transition:background .1s ease}.table-row:hover{background:#f1f3f9;cursor:pointer}.table-row:last-child td{border-bottom:none}.checkbox-col{width:52px;text-align:center}.checkbox-col input{width:16px;height:16px;cursor:pointer}.action-col{width:80px;text-align:center}.action-cell{position:relative;text-align:center}.action-btn{width:32px;height:32px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-size:18px;color:#64748b;transition:all .2s ease}.action-btn:hover{background:#f1f5f9;color:#0f172a}.action-menu{position:absolute;top:38px;right:10px;min-width:170px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 10px 25px #00000014,0 4px 10px #0000000a;z-index:1000;overflow:hidden}.action-menu-item{width:100%;padding:10px 14px;border:none;background:transparent;text-align:left;font-size:13px;color:#334155;cursor:pointer;transition:background .15s ease}.action-menu-item:hover{background:#f8fafc}.o-empty-cell{text-align:center;padding:48px!important;color:#94a3b8;font-style:italic}.o-status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:90px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600}.status-draft{background:#fef3c7;color:#92400e}.status-active{background:#dcfce7;color:#166534}.status-progress{background:#dbeafe;color:#1d4ed8}.status-inactive{background:#f1f5f9;color:#64748b}.status-rejected{background:#fee2e2;color:#b91c1c}.selected-row{background:#eff6ff!important}@media(max-width:768px){.o-table{min-width:700px}.o-table thead th,.o-table tbody td{padding:12px}}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: DataTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-data-table', standalone: true, imports: [DatePipe], template: "<div class=\"o-table-wrapper\">\n\n  <table class=\"o-table\">\n\n    <thead>\n      <tr>\n\n        <!-- Checkbox Column -->\n        <th class=\"checkbox-col\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isAllSelected()\"\n            (change)=\"toggleAll($event)\"\n          />\n        </th>\n\n        <!-- Actions Column -->\n        <th class=\"action-col\">Actions</th>\n\n        <!-- Dynamic Columns -->\n        @for (col of visibleColumns; track col.name) {\n        <th [style.width]=\"col.width || 'auto'\">\n          {{ col.label }}\n        </th>\n        }\n\n      </tr>\n    </thead>\n\n    <tbody>\n\n      <!-- Empty State -->\n      @if (rows.length === 0) {\n      <tr>\n        <td class=\"o-empty-cell\" [attr.colspan]=\"visibleColumns.length + 2\">\n          No data found\n        </td>\n      </tr>\n      }\n\n      <!-- Data Rows -->\n      @for (row of rows; track $index) {\n      <tr class=\"table-row\" (click)=\"selectRow(row)\">\n\n        <!-- Checkbox -->\n        <td class=\"checkbox-col\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(row)\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleRow(row)\"\n          />\n        </td>\n\n        <!-- Actions -->\n        <td class=\"action-cell\">\n          <button\n            type=\"button\"\n            class=\"action-btn\"\n            (click)=\"openMenu($event, row)\"\n            title=\"Actions\">\n            &#8942;\n          </button>\n        </td>\n\n        <!-- Dynamic Columns -->\n        @for (col of visibleColumns; track col.name) {\n        <td>\n          @if (col.name === 'requestId') {\n            <a href=\"javascript:void(0)\" class=\"o-table-link\" (click)=\"onCellClick($event, col.name, row)\">\n              {{ row[col.name] || '\u2014' }}\n            </a>\n          } @else if (col.pipe === 'status') {\n            <span class=\"o-status-badge\" [class]=\"statusClass(row[col.name])\">\n              {{ row[col.name] || '\u2014' }}\n            </span>\n          } @else if (col.pipe === 'date') {\n            {{ row[col.name] ? (row[col.name] | date:'dd MMM yyyy') : '\u2014' }}\n          } @else {\n            {{ row[col.name] || '\u2014' }}\n          }\n        </td>\n        }\n\n      </tr>\n      }\n\n    </tbody>\n\n  </table>\n\n</div>\n", styles: [".o-table-wrapper{width:100%;overflow-x:auto;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.o-table{width:100%;border-collapse:collapse;min-width:900px}.o-table thead th{background:#f1f3f9;color:#15104e;font-size:13px;font-weight:600;text-transform:none;padding:12px 14px;text-align:left;border-bottom:1px solid #CDCDCD;border-right:1px solid #CDCDCD;white-space:nowrap}.o-table thead th:last-child{border-right:none}.o-table tbody td{padding:12px 14px;font-size:13px;color:#333;border-bottom:1px solid #E2E8F0;border-right:1px solid #E2E8F0;vertical-align:middle}.o-table tbody td:last-child{border-right:none}.o-table-link{color:#1d4ed8;text-decoration:underline;font-weight:600;cursor:pointer;outline:none}.o-table-link:hover{color:#1e40af}.table-row{transition:background .1s ease}.table-row:hover{background:#f1f3f9;cursor:pointer}.table-row:last-child td{border-bottom:none}.checkbox-col{width:52px;text-align:center}.checkbox-col input{width:16px;height:16px;cursor:pointer}.action-col{width:80px;text-align:center}.action-cell{position:relative;text-align:center}.action-btn{width:32px;height:32px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-size:18px;color:#64748b;transition:all .2s ease}.action-btn:hover{background:#f1f5f9;color:#0f172a}.action-menu{position:absolute;top:38px;right:10px;min-width:170px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 10px 25px #00000014,0 4px 10px #0000000a;z-index:1000;overflow:hidden}.action-menu-item{width:100%;padding:10px 14px;border:none;background:transparent;text-align:left;font-size:13px;color:#334155;cursor:pointer;transition:background .15s ease}.action-menu-item:hover{background:#f8fafc}.o-empty-cell{text-align:center;padding:48px!important;color:#94a3b8;font-style:italic}.o-status-badge{display:inline-flex;align-items:center;justify-content:center;min-width:90px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600}.status-draft{background:#fef3c7;color:#92400e}.status-active{background:#dcfce7;color:#166534}.status-progress{background:#dbeafe;color:#1d4ed8}.status-inactive{background:#f1f5f9;color:#64748b}.status-rejected{background:#fee2e2;color:#b91c1c}.selected-row{background:#eff6ff!important}@media(max-width:768px){.o-table{min-width:700px}.o-table thead th,.o-table tbody td{padding:12px}}\n"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], rowClick: [{
+                type: Output
+            }], menuOpen: [{
+                type: Output
+            }], actionClick: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }] } });
+
+function buildFromConfig(config) {
+    const modules = config.modules || {};
+    const system = config.system || {};
+    const moduleMetadata = {};
+    const planData = [];
+    Object.keys(modules).forEach(key => {
+        const mod = modules[key];
+        moduleMetadata[key] = {
+            label: mod.label || key.toUpperCase(),
+            desc: mod.desc || '',
+            icon: mod.icon || ''
+        };
+        const accessKeys = {};
+        const groups = mod.groups || {};
+        Object.keys(groups).forEach(groupName => {
+            accessKeys[groupName] = groups[groupName].map(s => ({
+                screen: s,
+                name: s.substring(1),
+                isMark: false,
+                isDisabled: false
+            }));
+        });
+        const sysSettings = mod.systemSettings || system['System Settings'] || [];
+        accessKeys['System Settings'] = sysSettings.map(s => ({
+            screen: s,
+            name: s.substring(1),
+            isMark: true,
+            isDisabled: false
+        }));
+        const bizMaster = mod.businessMaster || system['Business Master'] || [];
+        accessKeys['Business Master'] = bizMaster.map(s => ({
+            screen: s,
+            name: s.substring(1),
+            isMark: true,
+            isDisabled: false
+        }));
+        planData.push({ productName: key, accessKeys });
+    });
+    return { moduleMetadata, planData };
+}
+class OLicenseModulesComponent {
+    http;
+    cdr;
+    configPath = 'assets/application/pages/license-modules.json';
+    disabled = false;
+    value = null;
+    valueChange = new EventEmitter();
+    // Signals
+    allData = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allData" }] : /* istanbul ignore next */ []));
+    selectedModules = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedModules" }] : /* istanbul ignore next */ []));
+    isCustomMode = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCustomMode" }] : /* istanbul ignore next */ []));
+    searchText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+    form = new FormGroup({});
+    moduleMetadata = {};
+    destroy$ = new Subject();
+    configLoaded = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(http, cdr) {
+        this.http = http;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.http.get(this.configPath).pipe(takeUntil(this.destroy$)).subscribe({
+            next: (config) => {
+                const built = buildFromConfig(config);
+                this.moduleMetadata = built.moduleMetadata;
+                this.allData.set(built.planData);
+                this.configLoaded = true;
+                this.setupForm();
+                this.applyInitialValue();
+                this.cdr.markForCheck();
+            },
+            error: (err) => {
+                console.error('[o-license-modules] Failed to load config:', err);
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['value'] && this.configLoaded) {
+            this.applyInitialValue();
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    // ControlValueAccessor
+    writeValue(val) {
+        this.value = val;
+        if (this.configLoaded) {
+            this.applyInitialValue();
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    setupForm() {
+        const group = {};
+        this.allData().forEach(planData => {
+            const productGroup = {};
+            Object.keys(planData.accessKeys).forEach(groupKey => {
+                planData.accessKeys[groupKey].forEach(accessKey => {
+                    productGroup[accessKey.screen] = new FormControl(false);
+                });
+            });
+            group[planData.productName] = new FormGroup(productGroup);
+        });
+        this.form = new FormGroup(group);
+        this.form.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            const output = this.buildOutputValue();
+            this.onChange(output);
+            this.onTouched();
+            this.valueChange.emit(output);
+        });
+    }
+    applyInitialValue() {
+        if (!this.value) {
+            this.selectedModules.set(new Set());
+            this.isCustomMode.set(false);
+            return;
+        }
+        const selectedMods = new Set();
+        Object.keys(this.value).forEach(productName => {
+            const screens = this.value[productName] || [];
+            if (screens.length > 0) {
+                selectedMods.add(productName.toLowerCase());
+            }
+        });
+        this.selectedModules.set(selectedMods);
+        this.allData().forEach(planData => {
+            const pName = planData.productName.toLowerCase();
+            const savedScreens = this.value[pName] || this.value[planData.productName] || [];
+            const productForm = this.form.get(planData.productName);
+            if (!productForm)
+                return;
+            if (selectedMods.has(pName) && savedScreens.length > 0) {
+                savedScreens.forEach(screen => {
+                    const ctrl = productForm.get(screen);
+                    if (ctrl)
+                        ctrl.setValue(true, { emitEvent: false });
+                });
+            }
+            else if (selectedMods.has(pName)) {
+                this.checkAllFeaturesForPlan(planData, productForm);
+            }
+        });
+        this.cdr.markForCheck();
+    }
+    checkAllFeaturesForPlan(planData, productForm) {
+        Object.keys(planData.accessKeys).forEach(groupKey => {
+            planData.accessKeys[groupKey].forEach(accessKey => {
+                const ctrl = productForm.get(accessKey.screen);
+                if (ctrl && !accessKey.isDisabled) {
+                    ctrl.setValue(true, { emitEvent: false });
+                }
+            });
+        });
+    }
+    // Public methods used in template
+    getModuleMetadata(name) {
+        return this.moduleMetadata[name.toLowerCase()];
+    }
+    toggleModule(productName) {
+        if (this.disabled)
+            return;
+        if (productName === 'custom') {
+            const next = !this.isCustomMode();
+            this.isCustomMode.set(next);
+            if (!next) {
+                this.isCustomMode.set(false);
+            }
+        }
+        else {
+            const current = new Set(this.selectedModules());
+            const key = productName.toLowerCase();
+            if (current.has(key)) {
+                current.delete(key);
+                this.uncheckAllForProduct(productName);
+            }
+            else {
+                current.add(key);
+                const planData = this.allData().find(p => p.productName.toLowerCase() === key);
+                if (planData) {
+                    const productForm = this.form.get(planData.productName);
+                    if (productForm) {
+                        this.checkAllFeaturesForPlan(planData, productForm);
+                    }
+                }
+            }
+            this.selectedModules.set(current);
+        }
+        this.cdr.markForCheck();
+        const output = this.buildOutputValue();
+        this.onChange(output);
+        this.onTouched();
+        this.valueChange.emit(output);
+    }
+    uncheckAllForProduct(productName) {
+        const productForm = this.form.get(productName);
+        if (!productForm)
+            return;
+        Object.keys(productForm.controls).forEach(key => {
+            productForm.get(key)?.setValue(false, { emitEvent: false });
+        });
+    }
+    getFormControl(productName, screen) {
+        return this.form.get(productName)?.get(screen);
+    }
+    filterFeatures(text) {
+        this.searchText.set(text);
+        this.cdr.markForCheck();
+    }
+    getDisplayedGroups() {
+        const selectedMods = this.selectedModules();
+        const isCustom = this.isCustomMode();
+        const filter = this.searchText().toLowerCase();
+        if (!isCustom && selectedMods.size === 0) {
+            return [];
+        }
+        const groupsMap = new Map();
+        this.allData().forEach(planData => {
+            const pNameLower = planData.productName.toLowerCase();
+            if (!isCustom && !selectedMods.has(pNameLower)) {
+                return;
+            }
+            Object.keys(planData.accessKeys).forEach(groupKey => {
+                const keyLower = groupKey.toLowerCase();
+                if (!groupsMap.has(keyLower)) {
+                    groupsMap.set(keyLower, {
+                        groupName: groupKey,
+                        featuresMap: new Map()
+                    });
+                }
+                const featuresMap = groupsMap.get(keyLower).featuresMap;
+                planData.accessKeys[groupKey].forEach(accessKey => {
+                    if (filter && !accessKey.name.toLowerCase().includes(filter) && !accessKey.screen.toLowerCase().includes(filter)) {
+                        return;
+                    }
+                    const screenLower = accessKey.screen.toLowerCase();
+                    if (!featuresMap.has(screenLower)) {
+                        featuresMap.set(screenLower, {
+                            screen: accessKey.screen,
+                            name: accessKey.name,
+                            isDisabled: accessKey.isDisabled,
+                            productName: planData.productName
+                        });
+                    }
+                });
+            });
+        });
+        const result = [];
+        groupsMap.forEach(data => {
+            if (data.featuresMap.size > 0) {
+                result.push({
+                    groupName: data.groupName,
+                    features: Array.from(data.featuresMap.values())
+                });
+            }
+        });
+        return result;
+    }
+    getTotalFeaturesCount() {
+        return this.getDisplayedGroups().reduce((acc, g) => acc + g.features.length, 0);
+    }
+    getSelectedModulesTitle() {
+        const mods = Array.from(this.selectedModules());
+        if (mods.length === 0)
+            return 'Selected module features';
+        const labels = mods.map(m => this.moduleMetadata[m]?.label || m.toUpperCase());
+        return labels.join(' + ') + ' modules';
+    }
+    clearAll() {
+        if (this.disabled)
+            return;
+        this.selectedModules.set(new Set());
+        this.isCustomMode.set(false);
+        this.allData().forEach(planData => {
+            this.uncheckAllForProduct(planData.productName);
+        });
+        this.cdr.markForCheck();
+        const output = this.buildOutputValue();
+        this.onChange(output);
+        this.onTouched();
+        this.valueChange.emit(output);
+    }
+    buildOutputValue() {
+        const output = {};
+        this.allData().forEach(planData => {
+            const pName = planData.productName;
+            const productForm = this.form.get(pName);
+            if (!productForm)
+                return;
+            const checkedScreens = Object.keys(productForm.controls).filter(key => productForm.get(key)?.value === true);
+            if (checkedScreens.length > 0) {
+                output[pName] = checkedScreens;
+            }
+        });
+        return output;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OLicenseModulesComponent, deps: [{ token: i1.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: OLicenseModulesComponent, isStandalone: true, selector: "o-license-modules", inputs: { configPath: "configPath", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => OLicenseModulesComponent),
+                multi: true
+            }
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"o-lm\" [class.o-lm--disabled]=\"disabled\" [formGroup]=\"form\">\n\n  <!-- Step 1: Select Modules -->\n  <div class=\"o-lm__step-row\">\n    <span class=\"o-lm__step\">1</span>\n    <span class=\"o-lm__step-label\">Select modules</span>\n  </div>\n\n  <div class=\"o-lm__modules-grid\">\n    @for (planData of allData(); track planData.productName) {\n      @let meta = getModuleMetadata(planData.productName);\n      @if (meta) {\n        <div\n          class=\"o-lm__mod-card\"\n          [class.o-lm__mod-card--selected]=\"selectedModules().has(planData.productName.toLowerCase()) && !isCustomMode()\"\n          (click)=\"toggleModule(planData.productName)\"\n          role=\"button\"\n          [attr.aria-pressed]=\"selectedModules().has(planData.productName.toLowerCase())\"\n          tabindex=\"0\"\n          (keydown.enter)=\"toggleModule(planData.productName)\"\n          (keydown.space)=\"$event.preventDefault(); toggleModule(planData.productName)\"\n        >\n          <div class=\"o-lm__mod-check\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12l5 5L20 7\"/></svg>\n          </div>\n          <div class=\"o-lm__mod-icon\">\n            <svg viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path [attr.d]=\"meta.icon\"/>\n            </svg>\n          </div>\n          <h3 class=\"o-lm__mod-title\">{{ meta.label }}</h3>\n          <p class=\"o-lm__mod-desc\">{{ meta.desc }}</p>\n        </div>\n      }\n    }\n\n    <!-- Custom card -->\n    <div\n      class=\"o-lm__mod-card o-lm__mod-card--custom\"\n      [class.o-lm__mod-card--selected-custom]=\"isCustomMode()\"\n      (click)=\"toggleModule('custom')\"\n      role=\"button\"\n      [attr.aria-pressed]=\"isCustomMode()\"\n      tabindex=\"0\"\n      (keydown.enter)=\"toggleModule('custom')\"\n      (keydown.space)=\"$event.preventDefault(); toggleModule('custom')\"\n    >\n      <div class=\"o-lm__mod-check o-lm__mod-check--custom\">\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12l5 5L20 7\"/></svg>\n      </div>\n      <div class=\"o-lm__mod-icon\">\n        <svg viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"M3 5h18M3 12h18M3 19h18M7 2v6M17 9v6M11 16v6\"/>\n        </svg>\n      </div>\n      <h3 class=\"o-lm__mod-title\">Custom</h3>\n      <p class=\"o-lm__mod-desc\">Pick individual features</p>\n    </div>\n  </div>\n\n  <!-- Step 2: Features Panel -->\n  <div class=\"o-lm__step-row\">\n    <span class=\"o-lm__step\">2</span>\n    <span class=\"o-lm__step-label\">Features included</span>\n  </div>\n\n  <div class=\"o-lm__panel\">\n    <div class=\"o-lm__panel-header\">\n      <span class=\"o-lm__panel-title\">\n        @if (!isCustomMode() && selectedModules().size === 0) {\n          No module selected\n        } @else if (isCustomMode()) {\n          Custom \u2014 all features available\n        } @else {\n          @if (getTotalFeaturesCount() > 0) {\n            {{ getSelectedModulesTitle() }}\n          } @else {\n            No features found\n          }\n        }\n      </span>\n      @if (isCustomMode() || selectedModules().size > 0) {\n        <span\n          class=\"o-lm__badge\"\n          [class.o-lm__badge--green]=\"isCustomMode()\"\n          [class.o-lm__badge--blue]=\"!isCustomMode()\"\n        >\n          {{ getTotalFeaturesCount() }} features\n        </span>\n      }\n    </div>\n\n    @if (isCustomMode() || selectedModules().size > 0) {\n      <div class=\"o-lm__search-row\">\n        <svg viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\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=\"o-lm__search-input\"\n          placeholder=\"Filter features...\"\n          [value]=\"searchText()\"\n          (input)=\"filterFeatures($any($event.target).value)\"\n          aria-label=\"Filter features\"\n        />\n      </div>\n\n      <div class=\"o-lm__panel-body\">\n        @let groups = getDisplayedGroups();\n        @if (groups.length === 0) {\n          <div class=\"o-lm__empty-state\">\n            <svg viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n            </svg>\n            <p>No features match \"{{ searchText() }}\"</p>\n          </div>\n        } @else {\n          @for (group of groups; track group.groupName) {\n            <div class=\"o-lm__module-section\">\n              <h4 class=\"o-lm__section-title\">\n                {{ group.groupName }}\n                <span class=\"o-lm__section-count\">({{ group.features.length }})</span>\n              </h4>\n              @for (feature of group.features; track feature.screen) {\n                <div\n                  class=\"o-lm__feature-item\"\n                  [class.o-lm__feature-item--disabled]=\"disabled || feature.isDisabled\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    class=\"o-lm__feature-checkbox\"\n                    [formControl]=\"getFormControl(feature.productName, feature.screen)\"\n                    [attr.disabled]=\"(disabled || feature.isDisabled) ? '' : null\"\n                    [id]=\"'feat-' + feature.productName + '-' + feature.screen\"\n                  />\n                  <label\n                    class=\"o-lm__feature-label\"\n                    [for]=\"'feat-' + feature.productName + '-' + feature.screen\"\n                  >\n                    {{ feature.name }}\n                  </label>\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div class=\"o-lm__panel-body\">\n        <div class=\"o-lm__empty-state\">\n          <svg viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\"\n               stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"/>\n            <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"/>\n            <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"/>\n            <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"/>\n          </svg>\n          <p>Select a module above to view included features</p>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Actions -->\n  <div class=\"o-lm__action-row\">\n    <button\n      type=\"button\"\n      class=\"o-lm__btn-clear\"\n      [disabled]=\"disabled\"\n      (click)=\"clearAll()\"\n    >\n      Clear all\n    </button>\n  </div>\n\n</div>\n", styles: [".o-lm__step-row{display:flex;align-items:center;gap:8px;margin-top:1.5rem;margin-bottom:1.25rem}.o-lm__step{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;background:#e6f1fb;color:#185fa5;flex-shrink:0}.o-lm__step-label{font-size:13px;font-weight:500;color:#5a5a5a}.o-lm__modules-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:1.5rem}@media(max-width:900px){.o-lm__modules-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.o-lm__modules-grid{grid-template-columns:repeat(2,1fr)}}.o-lm__mod-card{border:1.5px solid #e1e1e1;border-radius:8px;padding:14px 12px;cursor:pointer;transition:border-color .15s,background .15s;background:#fff;position:relative;-webkit-user-select:none;user-select:none;outline:none}.o-lm__mod-card:hover{border-color:#b9b9b9}.o-lm__mod-card:focus-visible{box-shadow:0 0 0 3px #15104e2e}.o-lm__mod-card--selected{border-color:#378add;background:#e6f1fb}.o-lm__mod-card--selected .o-lm__mod-icon{color:#185fa5}.o-lm__mod-card--selected .o-lm__mod-check{display:flex}.o-lm__mod-card--custom:hover{border-color:#7aaa3c}.o-lm__mod-card--selected-custom{border-color:#639922;background:#eaf3de}.o-lm__mod-card--selected-custom .o-lm__mod-icon{color:#3b6d11}.o-lm__mod-card--selected-custom .o-lm__mod-check--custom{display:flex}.o-lm__mod-check{position:absolute;top:8px;right:8px;width:16px;height:16px;border-radius:50%;background:#378add;display:none;align-items:center;justify-content:center}.o-lm__mod-check svg{width:10px;height:10px;stroke:#fff;stroke-width:3;fill:none}.o-lm__mod-check--custom{background:#639922}.o-lm__mod-icon{font-size:22px;margin-bottom:8px;color:#5a5a5a;display:flex;align-items:center}.o-lm__mod-icon svg{width:22px;height:22px}.o-lm__mod-title{font-size:13px;font-weight:500;color:#333;margin:0 0 4px}.o-lm__mod-desc{font-size:11px;color:#5a5a5a;margin:0}.o-lm__panel{border:.5px solid #e1e1e1;border-radius:8px;overflow:hidden;min-height:200px;background:#fff}.o-lm__panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:.5px solid #e1e1e1;background:#fafafa}.o-lm__panel-title{font-size:13px;font-weight:500;color:#333}.o-lm__badge{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:500}.o-lm__badge--blue{background:#e6f1fb;color:#185fa5}.o-lm__badge--green{background:#eaf3de;color:#3b6d11}.o-lm__search-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:.5px solid #e1e1e1;background:#fff}.o-lm__search-row svg{width:14px;height:14px;color:#767676;flex-shrink:0}.o-lm__search-input{flex:1;border:none;background:transparent;font-size:12px;color:#333;outline:none}.o-lm__search-input::placeholder{color:#767676}.o-lm__panel-body{display:grid;grid-template-columns:repeat(3,1fr);gap:0}@media(max-width:700px){.o-lm__panel-body{grid-template-columns:1fr}}.o-lm__module-section{border-right:.5px solid #e1e1e1;padding:12px}.o-lm__module-section:last-child{border-right:none}.o-lm__section-title{font-size:11px;font-weight:500;color:#5a5a5a;text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px;padding-bottom:6px;border-bottom:.5px solid #e1e1e1}.o-lm__section-count{font-size:10px;font-weight:400;text-transform:none;letter-spacing:0}.o-lm__feature-item{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12px;color:#333}.o-lm__feature-item--disabled{opacity:.6;cursor:not-allowed}.o-lm__feature-item--disabled .o-lm__feature-checkbox,.o-lm__feature-item--disabled .o-lm__feature-label{cursor:not-allowed}.o-lm__feature-checkbox{width:14px;height:14px;cursor:pointer;flex-shrink:0;accent-color:#15104e}.o-lm__feature-label{cursor:pointer;font-size:12px;color:#333;line-height:1.3}.o-lm__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:#767676;grid-column:1/-1}.o-lm__empty-state svg{width:36px;height:36px;margin-bottom:8px;opacity:.4}.o-lm__empty-state p{font-size:13px;margin:0}.o-lm__action-row{display:flex;justify-content:flex-end;margin-top:1rem}.o-lm__btn-clear{padding:7px 18px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:.5px solid #b9b9b9;background:#fff;color:#333;transition:background .12s,border-color .12s}.o-lm__btn-clear:hover:not(:disabled){background:#f5f5f5;border-color:#999}.o-lm__btn-clear:disabled{opacity:.5;cursor:not-allowed}.o-lm--disabled{pointer-events:none;opacity:.85}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OLicenseModulesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-license-modules', standalone: true, imports: [CommonModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => OLicenseModulesComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"o-lm\" [class.o-lm--disabled]=\"disabled\" [formGroup]=\"form\">\n\n  <!-- Step 1: Select Modules -->\n  <div class=\"o-lm__step-row\">\n    <span class=\"o-lm__step\">1</span>\n    <span class=\"o-lm__step-label\">Select modules</span>\n  </div>\n\n  <div class=\"o-lm__modules-grid\">\n    @for (planData of allData(); track planData.productName) {\n      @let meta = getModuleMetadata(planData.productName);\n      @if (meta) {\n        <div\n          class=\"o-lm__mod-card\"\n          [class.o-lm__mod-card--selected]=\"selectedModules().has(planData.productName.toLowerCase()) && !isCustomMode()\"\n          (click)=\"toggleModule(planData.productName)\"\n          role=\"button\"\n          [attr.aria-pressed]=\"selectedModules().has(planData.productName.toLowerCase())\"\n          tabindex=\"0\"\n          (keydown.enter)=\"toggleModule(planData.productName)\"\n          (keydown.space)=\"$event.preventDefault(); toggleModule(planData.productName)\"\n        >\n          <div class=\"o-lm__mod-check\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12l5 5L20 7\"/></svg>\n          </div>\n          <div class=\"o-lm__mod-icon\">\n            <svg viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path [attr.d]=\"meta.icon\"/>\n            </svg>\n          </div>\n          <h3 class=\"o-lm__mod-title\">{{ meta.label }}</h3>\n          <p class=\"o-lm__mod-desc\">{{ meta.desc }}</p>\n        </div>\n      }\n    }\n\n    <!-- Custom card -->\n    <div\n      class=\"o-lm__mod-card o-lm__mod-card--custom\"\n      [class.o-lm__mod-card--selected-custom]=\"isCustomMode()\"\n      (click)=\"toggleModule('custom')\"\n      role=\"button\"\n      [attr.aria-pressed]=\"isCustomMode()\"\n      tabindex=\"0\"\n      (keydown.enter)=\"toggleModule('custom')\"\n      (keydown.space)=\"$event.preventDefault(); toggleModule('custom')\"\n    >\n      <div class=\"o-lm__mod-check o-lm__mod-check--custom\">\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12l5 5L20 7\"/></svg>\n      </div>\n      <div class=\"o-lm__mod-icon\">\n        <svg viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"M3 5h18M3 12h18M3 19h18M7 2v6M17 9v6M11 16v6\"/>\n        </svg>\n      </div>\n      <h3 class=\"o-lm__mod-title\">Custom</h3>\n      <p class=\"o-lm__mod-desc\">Pick individual features</p>\n    </div>\n  </div>\n\n  <!-- Step 2: Features Panel -->\n  <div class=\"o-lm__step-row\">\n    <span class=\"o-lm__step\">2</span>\n    <span class=\"o-lm__step-label\">Features included</span>\n  </div>\n\n  <div class=\"o-lm__panel\">\n    <div class=\"o-lm__panel-header\">\n      <span class=\"o-lm__panel-title\">\n        @if (!isCustomMode() && selectedModules().size === 0) {\n          No module selected\n        } @else if (isCustomMode()) {\n          Custom \u2014 all features available\n        } @else {\n          @if (getTotalFeaturesCount() > 0) {\n            {{ getSelectedModulesTitle() }}\n          } @else {\n            No features found\n          }\n        }\n      </span>\n      @if (isCustomMode() || selectedModules().size > 0) {\n        <span\n          class=\"o-lm__badge\"\n          [class.o-lm__badge--green]=\"isCustomMode()\"\n          [class.o-lm__badge--blue]=\"!isCustomMode()\"\n        >\n          {{ getTotalFeaturesCount() }} features\n        </span>\n      }\n    </div>\n\n    @if (isCustomMode() || selectedModules().size > 0) {\n      <div class=\"o-lm__search-row\">\n        <svg viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\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=\"o-lm__search-input\"\n          placeholder=\"Filter features...\"\n          [value]=\"searchText()\"\n          (input)=\"filterFeatures($any($event.target).value)\"\n          aria-label=\"Filter features\"\n        />\n      </div>\n\n      <div class=\"o-lm__panel-body\">\n        @let groups = getDisplayedGroups();\n        @if (groups.length === 0) {\n          <div class=\"o-lm__empty-state\">\n            <svg viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n            </svg>\n            <p>No features match \"{{ searchText() }}\"</p>\n          </div>\n        } @else {\n          @for (group of groups; track group.groupName) {\n            <div class=\"o-lm__module-section\">\n              <h4 class=\"o-lm__section-title\">\n                {{ group.groupName }}\n                <span class=\"o-lm__section-count\">({{ group.features.length }})</span>\n              </h4>\n              @for (feature of group.features; track feature.screen) {\n                <div\n                  class=\"o-lm__feature-item\"\n                  [class.o-lm__feature-item--disabled]=\"disabled || feature.isDisabled\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    class=\"o-lm__feature-checkbox\"\n                    [formControl]=\"getFormControl(feature.productName, feature.screen)\"\n                    [attr.disabled]=\"(disabled || feature.isDisabled) ? '' : null\"\n                    [id]=\"'feat-' + feature.productName + '-' + feature.screen\"\n                  />\n                  <label\n                    class=\"o-lm__feature-label\"\n                    [for]=\"'feat-' + feature.productName + '-' + feature.screen\"\n                  >\n                    {{ feature.name }}\n                  </label>\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div class=\"o-lm__panel-body\">\n        <div class=\"o-lm__empty-state\">\n          <svg viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\"\n               stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"/>\n            <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"/>\n            <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"/>\n            <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"/>\n          </svg>\n          <p>Select a module above to view included features</p>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Actions -->\n  <div class=\"o-lm__action-row\">\n    <button\n      type=\"button\"\n      class=\"o-lm__btn-clear\"\n      [disabled]=\"disabled\"\n      (click)=\"clearAll()\"\n    >\n      Clear all\n    </button>\n  </div>\n\n</div>\n", styles: [".o-lm__step-row{display:flex;align-items:center;gap:8px;margin-top:1.5rem;margin-bottom:1.25rem}.o-lm__step{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;background:#e6f1fb;color:#185fa5;flex-shrink:0}.o-lm__step-label{font-size:13px;font-weight:500;color:#5a5a5a}.o-lm__modules-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:1.5rem}@media(max-width:900px){.o-lm__modules-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.o-lm__modules-grid{grid-template-columns:repeat(2,1fr)}}.o-lm__mod-card{border:1.5px solid #e1e1e1;border-radius:8px;padding:14px 12px;cursor:pointer;transition:border-color .15s,background .15s;background:#fff;position:relative;-webkit-user-select:none;user-select:none;outline:none}.o-lm__mod-card:hover{border-color:#b9b9b9}.o-lm__mod-card:focus-visible{box-shadow:0 0 0 3px #15104e2e}.o-lm__mod-card--selected{border-color:#378add;background:#e6f1fb}.o-lm__mod-card--selected .o-lm__mod-icon{color:#185fa5}.o-lm__mod-card--selected .o-lm__mod-check{display:flex}.o-lm__mod-card--custom:hover{border-color:#7aaa3c}.o-lm__mod-card--selected-custom{border-color:#639922;background:#eaf3de}.o-lm__mod-card--selected-custom .o-lm__mod-icon{color:#3b6d11}.o-lm__mod-card--selected-custom .o-lm__mod-check--custom{display:flex}.o-lm__mod-check{position:absolute;top:8px;right:8px;width:16px;height:16px;border-radius:50%;background:#378add;display:none;align-items:center;justify-content:center}.o-lm__mod-check svg{width:10px;height:10px;stroke:#fff;stroke-width:3;fill:none}.o-lm__mod-check--custom{background:#639922}.o-lm__mod-icon{font-size:22px;margin-bottom:8px;color:#5a5a5a;display:flex;align-items:center}.o-lm__mod-icon svg{width:22px;height:22px}.o-lm__mod-title{font-size:13px;font-weight:500;color:#333;margin:0 0 4px}.o-lm__mod-desc{font-size:11px;color:#5a5a5a;margin:0}.o-lm__panel{border:.5px solid #e1e1e1;border-radius:8px;overflow:hidden;min-height:200px;background:#fff}.o-lm__panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:.5px solid #e1e1e1;background:#fafafa}.o-lm__panel-title{font-size:13px;font-weight:500;color:#333}.o-lm__badge{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:500}.o-lm__badge--blue{background:#e6f1fb;color:#185fa5}.o-lm__badge--green{background:#eaf3de;color:#3b6d11}.o-lm__search-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:.5px solid #e1e1e1;background:#fff}.o-lm__search-row svg{width:14px;height:14px;color:#767676;flex-shrink:0}.o-lm__search-input{flex:1;border:none;background:transparent;font-size:12px;color:#333;outline:none}.o-lm__search-input::placeholder{color:#767676}.o-lm__panel-body{display:grid;grid-template-columns:repeat(3,1fr);gap:0}@media(max-width:700px){.o-lm__panel-body{grid-template-columns:1fr}}.o-lm__module-section{border-right:.5px solid #e1e1e1;padding:12px}.o-lm__module-section:last-child{border-right:none}.o-lm__section-title{font-size:11px;font-weight:500;color:#5a5a5a;text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px;padding-bottom:6px;border-bottom:.5px solid #e1e1e1}.o-lm__section-count{font-size:10px;font-weight:400;text-transform:none;letter-spacing:0}.o-lm__feature-item{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12px;color:#333}.o-lm__feature-item--disabled{opacity:.6;cursor:not-allowed}.o-lm__feature-item--disabled .o-lm__feature-checkbox,.o-lm__feature-item--disabled .o-lm__feature-label{cursor:not-allowed}.o-lm__feature-checkbox{width:14px;height:14px;cursor:pointer;flex-shrink:0;accent-color:#15104e}.o-lm__feature-label{cursor:pointer;font-size:12px;color:#333;line-height:1.3}.o-lm__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:#767676;grid-column:1/-1}.o-lm__empty-state svg{width:36px;height:36px;margin-bottom:8px;opacity:.4}.o-lm__empty-state p{font-size:13px;margin:0}.o-lm__action-row{display:flex;justify-content:flex-end;margin-top:1rem}.o-lm__btn-clear{padding:7px 18px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:.5px solid #b9b9b9;background:#fff;color:#333;transition:background .12s,border-color .12s}.o-lm__btn-clear:hover:not(:disabled){background:#f5f5f5;border-color:#999}.o-lm__btn-clear:disabled{opacity:.5;cursor:not-allowed}.o-lm--disabled{pointer-events:none;opacity:.85}\n"] }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i0.ChangeDetectorRef }], propDecorators: { configPath: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class OStatusToggleComponent {
+    labels = ['Active', 'Inactive'];
+    value = true;
+    disabled = false;
+    valueChange = new EventEmitter();
+    onChange = () => { };
+    onTouched = () => { };
+    get activeLabel() {
+        return this.labels[0];
+    }
+    get inactiveLabel() {
+        return this.labels[1];
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.value = !this.value;
+        this.onChange(this.value);
+        this.onTouched();
+        this.valueChange.emit(this.value);
+    }
+    writeValue(val) {
+        this.value = !!val;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OStatusToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: OStatusToggleComponent, isStandalone: true, selector: "o-status-toggle", inputs: { labels: "labels", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => OStatusToggleComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<label class=\"o-status-toggle\" [class.o-status-toggle--active]=\"value\" [class.o-status-toggle--inactive]=\"!value\" [class.o-status-toggle--disabled]=\"disabled\">\n  <input\n    type=\"checkbox\"\n    class=\"o-status-toggle__input\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"toggle()\"\n    aria-label=\"Status toggle\"\n  />\n  <span class=\"o-status-toggle__track\">\n    <span class=\"o-status-toggle__thumb\"></span>\n  </span>\n  @if (value) {\n    <span class=\"o-status-toggle__label o-status-toggle__label--left\">{{ activeLabel }}</span>\n  }\n  @if (!value) {\n    <span class=\"o-status-toggle__label o-status-toggle__label--right\">{{ inactiveLabel }}</span>\n  }\n</label>\n", styles: [".o-status-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;width:80px;height:28px;border-radius:999px;transition:background .2s}.o-status-toggle--active{background:#16a34a}.o-status-toggle--active .o-status-toggle__thumb{transform:translate(2px);right:auto;left:2px}.o-status-toggle--inactive{background:#ef4444}.o-status-toggle--inactive .o-status-toggle__thumb{transform:translate(0);left:auto;right:2px}.o-status-toggle--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.o-status-toggle__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.o-status-toggle__track{position:absolute;inset:0;border-radius:999px}.o-status-toggle__thumb{position:absolute;top:2px;width:24px;height:24px;border-radius:50%;background:#f3f4f6;box-shadow:0 1px 3px #00000040;transition:left .2s,right .2s}.o-status-toggle__label{position:absolute;font-size:.68rem;font-weight:700;text-transform:uppercase;color:#fff;pointer-events:none}.o-status-toggle__label--left{left:6px}.o-status-toggle__label--right{right:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OStatusToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-status-toggle', standalone: true, imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => OStatusToggleComponent),
+                            multi: true
+                        }
+                    ], template: "<label class=\"o-status-toggle\" [class.o-status-toggle--active]=\"value\" [class.o-status-toggle--inactive]=\"!value\" [class.o-status-toggle--disabled]=\"disabled\">\n  <input\n    type=\"checkbox\"\n    class=\"o-status-toggle__input\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    (change)=\"toggle()\"\n    aria-label=\"Status toggle\"\n  />\n  <span class=\"o-status-toggle__track\">\n    <span class=\"o-status-toggle__thumb\"></span>\n  </span>\n  @if (value) {\n    <span class=\"o-status-toggle__label o-status-toggle__label--left\">{{ activeLabel }}</span>\n  }\n  @if (!value) {\n    <span class=\"o-status-toggle__label o-status-toggle__label--right\">{{ inactiveLabel }}</span>\n  }\n</label>\n", styles: [".o-status-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;width:80px;height:28px;border-radius:999px;transition:background .2s}.o-status-toggle--active{background:#16a34a}.o-status-toggle--active .o-status-toggle__thumb{transform:translate(2px);right:auto;left:2px}.o-status-toggle--inactive{background:#ef4444}.o-status-toggle--inactive .o-status-toggle__thumb{transform:translate(0);left:auto;right:2px}.o-status-toggle--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.o-status-toggle__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.o-status-toggle__track{position:absolute;inset:0;border-radius:999px}.o-status-toggle__thumb{position:absolute;top:2px;width:24px;height:24px;border-radius:50%;background:#f3f4f6;box-shadow:0 1px 3px #00000040;transition:left .2s,right .2s}.o-status-toggle__label{position:absolute;font-size:.68rem;font-weight:700;text-transform:uppercase;color:#fff;pointer-events:none}.o-status-toggle__label--left{left:6px}.o-status-toggle__label--right{right:6px}\n"] }]
+        }], propDecorators: { labels: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class FormDrawerComponent {
+    cdr;
+    open = false;
+    title = 'New Request';
+    steps = [];
+    rowData = null;
+    showSubmit = true;
+    readOnly = false;
+    actionType = 'new';
+    closeDrawer = new EventEmitter();
+    save = new EventEmitter();
+    submit = new EventEmitter();
+    formData = {};
+    selectedProducts = [];
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngOnChanges(changes) {
+        if (changes['rowData'] || changes['open']) {
+            this.formData = this.rowData ? { ...this.rowData } : {};
+            this.initializeProductDetails();
+            this.selectedProducts = this.getSelectedProducts();
+            this.cdr.detectChanges();
+        }
+    }
+    initializeProductDetails() {
+        if (!this.formData.productDetails) {
+            this.formData.productDetails = {};
+        }
+        if (this.formData.licenseDetails && Array.isArray(this.formData.licenseDetails)) {
+            this.formData.licenseDetails.forEach((prod) => {
+                const pName = prod.productName.toLowerCase();
+                this.formData.productDetails[pName] = {
+                    userLimit: prod.userLimit || 80,
+                    concurrentLimit: prod.concurrentLimit || 15,
+                    startDate: prod.startDate || '',
+                    endDate: prod.endDate || '',
+                    gracePeriod: prod.gracePeriod || 30
+                };
+            });
+        }
+        else {
+            this.syncProductDetails();
+        }
+    }
+    getSelectedProducts() {
+        const modules = this.formData.modules || {};
+        return Object.keys(modules).filter(key => {
+            const screens = modules[key];
+            return Array.isArray(screens) && screens.length > 0;
+        });
+    }
+    onModulesChange(value) {
+        this.formData.modules = value || {};
+        this.syncProductDetails();
+        this.selectedProducts = this.getSelectedProducts();
+        this.cdr.detectChanges();
+    }
+    syncProductDetails() {
+        if (!this.formData.productDetails) {
+            this.formData.productDetails = {};
+        }
+        const selectedProds = this.getSelectedProducts();
+        selectedProds.forEach(pName => {
+            const key = pName.toLowerCase();
+            if (!this.formData.productDetails[key]) {
+                this.formData.productDetails[key] = {
+                    userLimit: 80,
+                    concurrentLimit: 15,
+                    startDate: '',
+                    endDate: '',
+                    gracePeriod: 30
+                };
+            }
+        });
+    }
+    /**
+     * Returns all fields for rendering, including hidden section-header fields and
+     * special component-type fields like licenseModules.
+     */
+    visibleFields(step) {
+        return (step.fields || []).filter(f => {
+            // Always include hidden fields that carry a sectionName (section headers)
+            if (f.type === 'hidden' && f.sectionName) {
+                return true;
+            }
+            // Exclude purely hidden fields with no sectionName
+            if (f.type === 'hidden') {
+                return false;
+            }
+            // Include all renderable types
+            return (!f.type ||
+                f.type === 'input' ||
+                f.type === 'select' ||
+                f.type === 'textarea' ||
+                f.type === 'date' ||
+                f.type === 'licenseModules' ||
+                f.type === 'roleActions');
+        });
+    }
+    isRoleActionEnabled(action) {
+        const actions = this.formData.actions || [];
+        return actions.includes(action);
+    }
+    toggleRoleAction(action, enabled) {
+        if (!this.formData.actions) {
+            this.formData.actions = [];
+        }
+        if (enabled) {
+            if (!this.formData.actions.includes(action)) {
+                this.formData.actions.push(action);
+            }
+        }
+        else {
+            this.formData.actions = this.formData.actions.filter((a) => a !== action);
+        }
+        this.cdr.detectChanges();
+    }
+    close() {
+        this.closeDrawer.emit();
+    }
+    onSave() {
+        this.save.emit({ ...this.formData });
+    }
+    onSubmit() {
+        this.submit.emit({ ...this.formData });
+    }
+    onOverlayClick(event) {
+        if (event.target.classList.contains('o-drawer-overlay')) {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FormDrawerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: FormDrawerComponent, isStandalone: true, selector: "o-form-drawer", inputs: { open: "open", title: "title", steps: "steps", rowData: "rowData", showSubmit: "showSubmit", readOnly: "readOnly", actionType: "actionType" }, outputs: { closeDrawer: "closeDrawer", save: "save", submit: "submit" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"o-drawer-overlay\" [class.open]=\"open\" (click)=\"onOverlayClick($event)\">\n  <div class=\"o-drawer\" [class.open]=\"open\">\n\n    <div class=\"o-drawer-header\">\n      <h3 class=\"o-drawer-title\">\n        {{ title }}\n        @if (formData.requestId) {\n          <span class=\"o-drawer-id\">({{ formData.requestId }})</span>\n        }\n      </h3>\n      <button class=\"o-drawer-close\" type=\"button\" (click)=\"close()\" aria-label=\"Close drawer\">&#x2715;</button>\n    </div>\n\n    <div class=\"o-drawer-body\">\n      @for (step of steps; track step.stepName) {\n        @if (step.stepName === 'step3') {\n          <div class=\"o-section-header span-3\">{{ step.label || 'License details' }}</div>\n          \n          <div class=\"o-license-details-table-wrapper\">\n            <table class=\"o-license-details-table\">\n              <thead>\n                <tr>\n                  <th>Product</th>\n                  <th>Users</th>\n                  <th>Grace Period (Days)</th>\n                  <th>Start Date</th>\n                  <th>End Date</th>\n                </tr>\n              </thead>\n              <tbody>\n                @if (selectedProducts.length === 0) {\n                  <tr>\n                    <td colspan=\"5\" style=\"text-align: center; color: #94a3b8; padding: 16px;\">\n                      No modules selected. Select modules in Step 2 to configure license details.\n                    </td>\n                  </tr>\n                } @else {\n                  @for (prod of selectedProducts; track prod) {\n                    @if (formData.productDetails && formData.productDetails[prod.toLowerCase()]) {\n                      <tr>\n                        <td class=\"o-module-name-cell\">{{ prod.toUpperCase() }}</td>\n                        <td>\n                          <input type=\"number\" class=\"o-input\" \n                                 [(ngModel)]=\"formData.productDetails[prod.toLowerCase()].userLimit\" \n                                 [disabled]=\"readOnly\"\n                                 placeholder=\"e.g. 80\">\n                        </td>\n                        <td>\n                          <input type=\"number\" class=\"o-input\" \n                                 [(ngModel)]=\"formData.productDetails[prod.toLowerCase()].gracePeriod\" \n                                 [disabled]=\"readOnly || actionType === 'renew'\"\n                                 placeholder=\"e.g. 30\">\n                        </td>\n                        <td>\n                          <input type=\"date\" class=\"o-input\" \n                                 [(ngModel)]=\"formData.productDetails[prod.toLowerCase()].startDate\"\n                                 [disabled]=\"readOnly\">\n                        </td>\n                        <td>\n                          <input type=\"date\" class=\"o-input\" \n                                 [(ngModel)]=\"formData.productDetails[prod.toLowerCase()].endDate\"\n                                 [disabled]=\"readOnly\">\n                        </td>\n                      </tr>\n                    }\n                  }\n                }\n              </tbody>\n            </table>\n          </div>\n        } @else {\n          @for (item of visibleFields(step); track item.name) {\n\n            @if (item.type === 'hidden' && item.sectionName) {\n              <div class=\"o-section-header\">{{ item.sectionName }}</div>\n            } @else if (item.type === 'licenseModules') {\n              <div class=\"o-field span-3\">\n                @if (item.label) {\n                  <label class=\"o-field-label\">{{ item.label }}</label>\n                }\n                <o-license-modules\n                  [configPath]=\"item['configPath'] || 'assets/application/pages/license-modules.json'\"\n                  [value]=\"formData[item.name]\"\n                  [disabled]=\"readOnly || actionType === 'renew'\"\n                  (valueChange)=\"onModulesChange($event)\"\n                ></o-license-modules>\n              </div>\n\n            } @else if (item.type === 'roleActions') {\n              <div class=\"o-field span-3\">\n                @if (item.label) {\n                  <label class=\"o-field-label\">{{ item.label }}</label>\n                }\n                \n                <div class=\"o-permissions-grid\">\n                  <div class=\"o-permission-toggle-item\">\n                    <span class=\"o-permission-label\">Edit Draft</span>\n                    <o-status-toggle \n                      [labels]=\"['On', 'Off']\" \n                      [value]=\"isRoleActionEnabled('edit')\"\n                      (valueChange)=\"toggleRoleAction('edit', $event)\"\n                      [disabled]=\"readOnly\">\n                    </o-status-toggle>\n                  </div>\n                  <div class=\"o-permission-toggle-item\">\n                    <span class=\"o-permission-label\">Save Request</span>\n                    <o-status-toggle \n                      [labels]=\"['On', 'Off']\" \n                      [value]=\"isRoleActionEnabled('save')\"\n                      (valueChange)=\"toggleRoleAction('save', $event)\"\n                      [disabled]=\"readOnly\">\n                    </o-status-toggle>\n                  </div>\n                  <div class=\"o-permission-toggle-item\">\n                    <span class=\"o-permission-label\">Send for Approval</span>\n                    <o-status-toggle \n                      [labels]=\"['On', 'Off']\" \n                      [value]=\"isRoleActionEnabled('submit')\"\n                      (valueChange)=\"toggleRoleAction('submit', $event)\"\n                      [disabled]=\"readOnly\">\n                    </o-status-toggle>\n                  </div>\n                  <div class=\"o-permission-toggle-item\">\n                    <span class=\"o-permission-label\">Approve</span>\n                    <o-status-toggle \n                      [labels]=\"['On', 'Off']\" \n                      [value]=\"isRoleActionEnabled('approve')\"\n                      (valueChange)=\"toggleRoleAction('approve', $event)\"\n                      [disabled]=\"readOnly\">\n                    </o-status-toggle>\n                  </div>\n                  <div class=\"o-permission-toggle-item\">\n                    <span class=\"o-permission-label\">Reject</span>\n                    <o-status-toggle \n                      [labels]=\"['On', 'Off']\" \n                      [value]=\"isRoleActionEnabled('reject')\"\n                      (valueChange)=\"toggleRoleAction('reject', $event)\"\n                      [disabled]=\"readOnly\">\n                    </o-status-toggle>\n                  </div>\n                  <div class=\"o-permission-toggle-item\">\n                    <span class=\"o-permission-label\">Return for Revision</span>\n                    <o-status-toggle \n                      [labels]=\"['On', 'Off']\" \n                      [value]=\"isRoleActionEnabled('return')\"\n                      (valueChange)=\"toggleRoleAction('return', $event)\"\n                      [disabled]=\"readOnly\">\n                    </o-status-toggle>\n                  </div>\n                </div>\n              </div>\n\n            } @else {\n              <div class=\"o-field\"\n                   [class.span-1]=\"!item.colSpan || item.colSpan === 'col-1'\"\n                   [class.span-2]=\"item.colSpan === 'col-2'\"\n                   [class.span-3]=\"item.colSpan === 'col-3'\">\n\n                <label class=\"o-field-label\">\n                  {{ item.label }}\n                  @if (item.required) {\n                    <span class=\"o-required\">*</span>\n                  }\n                </label>\n\n                @if (item.type === 'select') {\n                  <select class=\"o-input\"\n                          [(ngModel)]=\"formData[item.name]\"\n                          [disabled]=\"readOnly || actionType === 'renew' || item.isDisabled || false\">\n                    <option value=\"\">&#8212; Select &#8212;</option>\n                    @for (opt of (item.options || []); track opt.value) {\n                      <option [value]=\"opt.value\">{{ opt.label }}</option>\n                    }\n                  </select>\n                }\n\n                @if (item.type === 'textarea') {\n                  <textarea class=\"o-input o-textarea\"\n                            [placeholder]=\"item.placeholder || ''\"\n                            [(ngModel)]=\"formData[item.name]\"\n                            [disabled]=\"readOnly || actionType === 'renew' || item.isDisabled || false\">\n                  </textarea>\n                }\n\n                @if (!item.type || item.type === 'input' || item.type === 'date') {\n                  <input class=\"o-input\"\n                         [type]=\"item.inputType || 'text'\"\n                         [placeholder]=\"item.placeholder || ''\"\n                         [(ngModel)]=\"formData[item.name]\"\n                         [disabled]=\"readOnly || actionType === 'renew' || item.isDisabled || false\">\n                }\n\n              </div>\n            }\n\n          }\n        }\n      }\n    </div>\n\n    <div class=\"o-drawer-footer\">\n      @if (readOnly) {\n        <button class=\"o-btn-secondary\" type=\"button\" (click)=\"close()\">Close</button>\n      } @else {\n        <button class=\"o-btn-secondary\" type=\"button\" (click)=\"close()\">Cancel</button>\n        <button class=\"o-btn-primary\" type=\"button\" (click)=\"onSave()\">Save</button>\n      }\n    </div>\n\n  </div>\n</div>\n", styles: [".o-drawer-overlay{position:fixed;inset:0;background:#0000;z-index:200;pointer-events:none;transition:background .25s}.o-drawer-overlay.open{background:#0f172a59;pointer-events:all}.o-drawer{position:fixed;top:0;right:-720px;width:680px;max-width:96vw;height:100vh;background:#fff;box-shadow:-8px 0 32px #0f172a2e;display:flex;flex-direction:column;transition:right .28s cubic-bezier(.4,0,.2,1);z-index:201}.o-drawer.open{right:0}.o-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0}.o-drawer-title{font-size:1rem;font-weight:700;color:#1e293b;margin:0}.o-drawer-close{background:none;border:none;font-size:1.1rem;cursor:pointer;color:#94a3b8;padding:4px 8px;border-radius:4px;transition:background .15s}.o-drawer-close:hover{background:#f1f5f9;color:#334155}.o-drawer-body{flex:1;overflow-y:auto;padding:20px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 16px;align-content:start}.o-section-header{grid-column:1/-1;font-size:.72rem;font-weight:700;text-transform:uppercase;color:#94a3b8;letter-spacing:.08em;margin-top:8px;padding-bottom:4px;border-bottom:1px solid #f1f5f9}.o-field{display:flex;flex-direction:column;gap:5px}.o-field.span-1{grid-column:span 1}.o-field.span-2{grid-column:span 2}.o-field.span-3{grid-column:1/-1}.o-field-label{font-size:.78rem;font-weight:600;color:#475569}.o-required{color:#ef4444;margin-left:2px}.o-input{padding:8px 12px;border:1px solid #e2e8f0;border-radius:7px;font-size:.85rem;color:#1e293b;outline:none;transition:border-color .15s,box-shadow .15s;background:#fff;width:100%;box-sizing:border-box}.o-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.o-input:disabled{background:#f8fafc;color:#94a3b8;cursor:not-allowed}.o-textarea{resize:vertical;min-height:80px}.o-drawer-footer{display:flex;gap:10px;padding:16px 24px;border-top:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0}.o-btn-secondary{padding:8px 18px;border-radius:7px;border:1px solid #e2e8f0;background:#fff;color:#64748b;font-size:.82rem;cursor:pointer;transition:background .15s}.o-btn-secondary:hover{background:#f1f5f9}.o-btn-primary{padding:8px 18px;border-radius:7px;border:none;background:#3b82f6;color:#fff;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .15s}.o-btn-primary:hover{background:#2563eb}.o-btn-action{padding:8px 18px;border-radius:7px;border:none;background:#10b981;color:#fff;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .15s}.o-btn-action:hover{background:#059669}.o-drawer-id{font-size:.85rem;font-weight:500;color:#64748b;margin-left:8px}.o-license-details-table-wrapper{grid-column:1/-1;width:100%;overflow-x:auto;border:1px solid #e2e8f0;border-radius:8px;margin-top:10px;background:#fff}.o-license-details-table{width:100%;border-collapse:collapse;font-size:.85rem}.o-license-details-table th{background:#f8fafc;color:#475569;font-weight:600;text-align:left;padding:10px 12px;border-bottom:1px solid #e2e8f0;font-size:.78rem}.o-license-details-table td{padding:8px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle}.o-license-details-table tr:last-child td{border-bottom:none}.o-license-details-table .o-module-name-cell{font-weight:700;color:#15104e}.o-license-details-table .o-input{padding:6px 10px;font-size:.8rem;height:32px}.o-permissions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px;background:#f8fafc;padding:16px;border-radius:8px;border:1px solid #e2e8f0;margin-top:10px}.o-permission-toggle-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#fff;border:1px solid #e2e8f0;border-radius:7px;box-shadow:0 1px 2px #0f172a08}.o-permission-label{font-size:.8rem;font-weight:600;color:#334155}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[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: OLicenseModulesComponent, selector: "o-license-modules", inputs: ["configPath", "disabled", "value"], outputs: ["valueChange"] }, { kind: "component", type: OStatusToggleComponent, selector: "o-status-toggle", inputs: ["labels", "value", "disabled"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FormDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-form-drawer', standalone: true, imports: [CommonModule, FormsModule, OLicenseModulesComponent, OStatusToggleComponent], template: "<div class=\"o-drawer-overlay\" [class.open]=\"open\" (click)=\"onOverlayClick($event)\">\n  <div class=\"o-drawer\" [class.open]=\"open\">\n\n    <div class=\"o-drawer-header\">\n      <h3 class=\"o-drawer-title\">\n        {{ title }}\n        @if (formData.requestId) {\n          <span class=\"o-drawer-id\">({{ formData.requestId }})</span>\n        }\n      </h3>\n      <button class=\"o-drawer-close\" type=\"button\" (click)=\"close()\" aria-label=\"Close drawer\">&#x2715;</button>\n    </div>\n\n    <div class=\"o-drawer-body\">\n      @for (step of steps; track step.stepName) {\n        @if (step.stepName === 'step3') {\n          <div class=\"o-section-header span-3\">{{ step.label || 'License details' }}</div>\n          \n          <div class=\"o-license-details-table-wrapper\">\n            <table class=\"o-license-details-table\">\n              <thead>\n                <tr>\n                  <th>Product</th>\n                  <th>Users</th>\n                  <th>Grace Period (Days)</th>\n                  <th>Start Date</th>\n                  <th>End Date</th>\n                </tr>\n              </thead>\n              <tbody>\n                @if (selectedProducts.length === 0) {\n                  <tr>\n                    <td colspan=\"5\" style=\"text-align: center; color: #94a3b8; padding: 16px;\">\n                      No modules selected. Select modules in Step 2 to configure license details.\n                    </td>\n                  </tr>\n                } @else {\n                  @for (prod of selectedProducts; track prod) {\n                    @if (formData.productDetails && formData.productDetails[prod.toLowerCase()]) {\n                      <tr>\n                        <td class=\"o-module-name-cell\">{{ prod.toUpperCase() }}</td>\n                        <td>\n                          <input type=\"number\" class=\"o-input\" \n                                 [(ngModel)]=\"formData.productDetails[prod.toLowerCase()].userLimit\" \n                                 [disabled]=\"readOnly\"\n                                 placeholder=\"e.g. 80\">\n                        </td>\n                        <td>\n                          <input type=\"number\" class=\"o-input\" \n                                 [(ngModel)]=\"formData.productDetails[prod.toLowerCase()].gracePeriod\" \n                                 [disabled]=\"readOnly || actionType === 'renew'\"\n                                 placeholder=\"e.g. 30\">\n                        </td>\n                        <td>\n                          <input type=\"date\" class=\"o-input\" \n                                 [(ngModel)]=\"formData.productDetails[prod.toLowerCase()].startDate\"\n                                 [disabled]=\"readOnly\">\n                        </td>\n                        <td>\n                          <input type=\"date\" class=\"o-input\" \n                                 [(ngModel)]=\"formData.productDetails[prod.toLowerCase()].endDate\"\n                                 [disabled]=\"readOnly\">\n                        </td>\n                      </tr>\n                    }\n                  }\n                }\n              </tbody>\n            </table>\n          </div>\n        } @else {\n          @for (item of visibleFields(step); track item.name) {\n\n            @if (item.type === 'hidden' && item.sectionName) {\n              <div class=\"o-section-header\">{{ item.sectionName }}</div>\n            } @else if (item.type === 'licenseModules') {\n              <div class=\"o-field span-3\">\n                @if (item.label) {\n                  <label class=\"o-field-label\">{{ item.label }}</label>\n                }\n                <o-license-modules\n                  [configPath]=\"item['configPath'] || 'assets/application/pages/license-modules.json'\"\n                  [value]=\"formData[item.name]\"\n                  [disabled]=\"readOnly || actionType === 'renew'\"\n                  (valueChange)=\"onModulesChange($event)\"\n                ></o-license-modules>\n              </div>\n\n            } @else if (item.type === 'roleActions') {\n              <div class=\"o-field span-3\">\n                @if (item.label) {\n                  <label class=\"o-field-label\">{{ item.label }}</label>\n                }\n                \n                <div class=\"o-permissions-grid\">\n                  <div class=\"o-permission-toggle-item\">\n                    <span class=\"o-permission-label\">Edit Draft</span>\n                    <o-status-toggle \n                      [labels]=\"['On', 'Off']\" \n                      [value]=\"isRoleActionEnabled('edit')\"\n                      (valueChange)=\"toggleRoleAction('edit', $event)\"\n                      [disabled]=\"readOnly\">\n                    </o-status-toggle>\n                  </div>\n                  <div class=\"o-permission-toggle-item\">\n                    <span class=\"o-permission-label\">Save Request</span>\n                    <o-status-toggle \n                      [labels]=\"['On', 'Off']\" \n                      [value]=\"isRoleActionEnabled('save')\"\n                      (valueChange)=\"toggleRoleAction('save', $event)\"\n                      [disabled]=\"readOnly\">\n                    </o-status-toggle>\n                  </div>\n                  <div class=\"o-permission-toggle-item\">\n                    <span class=\"o-permission-label\">Send for Approval</span>\n                    <o-status-toggle \n                      [labels]=\"['On', 'Off']\" \n                      [value]=\"isRoleActionEnabled('submit')\"\n                      (valueChange)=\"toggleRoleAction('submit', $event)\"\n                      [disabled]=\"readOnly\">\n                    </o-status-toggle>\n                  </div>\n                  <div class=\"o-permission-toggle-item\">\n                    <span class=\"o-permission-label\">Approve</span>\n                    <o-status-toggle \n                      [labels]=\"['On', 'Off']\" \n                      [value]=\"isRoleActionEnabled('approve')\"\n                      (valueChange)=\"toggleRoleAction('approve', $event)\"\n                      [disabled]=\"readOnly\">\n                    </o-status-toggle>\n                  </div>\n                  <div class=\"o-permission-toggle-item\">\n                    <span class=\"o-permission-label\">Reject</span>\n                    <o-status-toggle \n                      [labels]=\"['On', 'Off']\" \n                      [value]=\"isRoleActionEnabled('reject')\"\n                      (valueChange)=\"toggleRoleAction('reject', $event)\"\n                      [disabled]=\"readOnly\">\n                    </o-status-toggle>\n                  </div>\n                  <div class=\"o-permission-toggle-item\">\n                    <span class=\"o-permission-label\">Return for Revision</span>\n                    <o-status-toggle \n                      [labels]=\"['On', 'Off']\" \n                      [value]=\"isRoleActionEnabled('return')\"\n                      (valueChange)=\"toggleRoleAction('return', $event)\"\n                      [disabled]=\"readOnly\">\n                    </o-status-toggle>\n                  </div>\n                </div>\n              </div>\n\n            } @else {\n              <div class=\"o-field\"\n                   [class.span-1]=\"!item.colSpan || item.colSpan === 'col-1'\"\n                   [class.span-2]=\"item.colSpan === 'col-2'\"\n                   [class.span-3]=\"item.colSpan === 'col-3'\">\n\n                <label class=\"o-field-label\">\n                  {{ item.label }}\n                  @if (item.required) {\n                    <span class=\"o-required\">*</span>\n                  }\n                </label>\n\n                @if (item.type === 'select') {\n                  <select class=\"o-input\"\n                          [(ngModel)]=\"formData[item.name]\"\n                          [disabled]=\"readOnly || actionType === 'renew' || item.isDisabled || false\">\n                    <option value=\"\">&#8212; Select &#8212;</option>\n                    @for (opt of (item.options || []); track opt.value) {\n                      <option [value]=\"opt.value\">{{ opt.label }}</option>\n                    }\n                  </select>\n                }\n\n                @if (item.type === 'textarea') {\n                  <textarea class=\"o-input o-textarea\"\n                            [placeholder]=\"item.placeholder || ''\"\n                            [(ngModel)]=\"formData[item.name]\"\n                            [disabled]=\"readOnly || actionType === 'renew' || item.isDisabled || false\">\n                  </textarea>\n                }\n\n                @if (!item.type || item.type === 'input' || item.type === 'date') {\n                  <input class=\"o-input\"\n                         [type]=\"item.inputType || 'text'\"\n                         [placeholder]=\"item.placeholder || ''\"\n                         [(ngModel)]=\"formData[item.name]\"\n                         [disabled]=\"readOnly || actionType === 'renew' || item.isDisabled || false\">\n                }\n\n              </div>\n            }\n\n          }\n        }\n      }\n    </div>\n\n    <div class=\"o-drawer-footer\">\n      @if (readOnly) {\n        <button class=\"o-btn-secondary\" type=\"button\" (click)=\"close()\">Close</button>\n      } @else {\n        <button class=\"o-btn-secondary\" type=\"button\" (click)=\"close()\">Cancel</button>\n        <button class=\"o-btn-primary\" type=\"button\" (click)=\"onSave()\">Save</button>\n      }\n    </div>\n\n  </div>\n</div>\n", styles: [".o-drawer-overlay{position:fixed;inset:0;background:#0000;z-index:200;pointer-events:none;transition:background .25s}.o-drawer-overlay.open{background:#0f172a59;pointer-events:all}.o-drawer{position:fixed;top:0;right:-720px;width:680px;max-width:96vw;height:100vh;background:#fff;box-shadow:-8px 0 32px #0f172a2e;display:flex;flex-direction:column;transition:right .28s cubic-bezier(.4,0,.2,1);z-index:201}.o-drawer.open{right:0}.o-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0}.o-drawer-title{font-size:1rem;font-weight:700;color:#1e293b;margin:0}.o-drawer-close{background:none;border:none;font-size:1.1rem;cursor:pointer;color:#94a3b8;padding:4px 8px;border-radius:4px;transition:background .15s}.o-drawer-close:hover{background:#f1f5f9;color:#334155}.o-drawer-body{flex:1;overflow-y:auto;padding:20px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 16px;align-content:start}.o-section-header{grid-column:1/-1;font-size:.72rem;font-weight:700;text-transform:uppercase;color:#94a3b8;letter-spacing:.08em;margin-top:8px;padding-bottom:4px;border-bottom:1px solid #f1f5f9}.o-field{display:flex;flex-direction:column;gap:5px}.o-field.span-1{grid-column:span 1}.o-field.span-2{grid-column:span 2}.o-field.span-3{grid-column:1/-1}.o-field-label{font-size:.78rem;font-weight:600;color:#475569}.o-required{color:#ef4444;margin-left:2px}.o-input{padding:8px 12px;border:1px solid #e2e8f0;border-radius:7px;font-size:.85rem;color:#1e293b;outline:none;transition:border-color .15s,box-shadow .15s;background:#fff;width:100%;box-sizing:border-box}.o-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.o-input:disabled{background:#f8fafc;color:#94a3b8;cursor:not-allowed}.o-textarea{resize:vertical;min-height:80px}.o-drawer-footer{display:flex;gap:10px;padding:16px 24px;border-top:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0}.o-btn-secondary{padding:8px 18px;border-radius:7px;border:1px solid #e2e8f0;background:#fff;color:#64748b;font-size:.82rem;cursor:pointer;transition:background .15s}.o-btn-secondary:hover{background:#f1f5f9}.o-btn-primary{padding:8px 18px;border-radius:7px;border:none;background:#3b82f6;color:#fff;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .15s}.o-btn-primary:hover{background:#2563eb}.o-btn-action{padding:8px 18px;border-radius:7px;border:none;background:#10b981;color:#fff;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .15s}.o-btn-action:hover{background:#059669}.o-drawer-id{font-size:.85rem;font-weight:500;color:#64748b;margin-left:8px}.o-license-details-table-wrapper{grid-column:1/-1;width:100%;overflow-x:auto;border:1px solid #e2e8f0;border-radius:8px;margin-top:10px;background:#fff}.o-license-details-table{width:100%;border-collapse:collapse;font-size:.85rem}.o-license-details-table th{background:#f8fafc;color:#475569;font-weight:600;text-align:left;padding:10px 12px;border-bottom:1px solid #e2e8f0;font-size:.78rem}.o-license-details-table td{padding:8px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle}.o-license-details-table tr:last-child td{border-bottom:none}.o-license-details-table .o-module-name-cell{font-weight:700;color:#15104e}.o-license-details-table .o-input{padding:6px 10px;font-size:.8rem;height:32px}.o-permissions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px;background:#f8fafc;padding:16px;border-radius:8px;border:1px solid #e2e8f0;margin-top:10px}.o-permission-toggle-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#fff;border:1px solid #e2e8f0;border-radius:7px;box-shadow:0 1px 2px #0f172a08}.o-permission-label{font-size:.8rem;font-weight:600;color:#334155}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { open: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], steps: [{
+                type: Input
+            }], rowData: [{
+                type: Input
+            }], showSubmit: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], actionType: [{
+                type: Input
+            }], closeDrawer: [{
+                type: Output
+            }], save: [{
+                type: Output
+            }], submit: [{
+                type: Output
+            }] } });
+
+class ContextMenuComponent {
+    el;
+    open = false;
+    position = { top: 0, left: 0 };
+    actions = [];
+    row = null;
+    menuType = '';
+    actionTriggered = new EventEmitter();
+    closed = new EventEmitter();
+    hoveredAction = null;
+    constructor(el) {
+        this.el = el;
+    }
+    visibleActions() {
+        if (!this.row)
+            return [];
+        return this.actions.filter(a => {
+            const typeMatch = !a.type || a.type === 'any' || a.type === this.menuType;
+            const statusMatch = !a.showWhen || a.showWhen.includes(this.row.status);
+            return typeMatch && statusMatch;
+        });
+    }
+    trigger(action) {
+        if (action.subActions && action.subActions.length > 0)
+            return;
+        this.actionTriggered.emit({ action: action.action, row: this.row });
+        this.hoveredAction = null;
+        this.closed.emit();
+    }
+    triggerSub(subAction) {
+        this.actionTriggered.emit({ action: subAction.action, row: this.row });
+        this.hoveredAction = null;
+        this.closed.emit();
+    }
+    setHovered(action) {
+        this.hoveredAction = action;
+    }
+    isDangerAction(action) {
+        return action === 'reject' || action === 'terminate';
+    }
+    onClickOutside() {
+        if (this.open) {
+            this.hoveredAction = null;
+            this.closed.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ContextMenuComponent, isStandalone: true, selector: "o-context-menu", inputs: { open: "open", position: "position", actions: "actions", row: "row", menuType: "menuType" }, outputs: { actionTriggered: "actionTriggered", closed: "closed" }, host: { listeners: { "document:click": "onClickOutside()" } }, ngImport: i0, template: "@if (open) {\n<div class=\"o-ctx-menu\"\n     [style.top.px]=\"position.top\"\n     [style.left.px]=\"position.left\">\n  @for (action of visibleActions(); track action.action) {\n    @if (action.subActions && action.subActions.length > 0) {\n      <div class=\"o-ctx-item o-ctx-item--has-sub\"\n           (mouseenter)=\"setHovered(action.action)\"\n           (mouseleave)=\"setHovered(null)\">\n        <span class=\"o-ctx-item-label\">{{ action.label }}</span>\n        <span class=\"o-ctx-arrow\">&#9654;</span>\n        @if (hoveredAction === action.action) {\n          <div class=\"o-ctx-submenu\">\n            @for (sub of action.subActions; track sub.action) {\n              <button type=\"button\"\n                      class=\"o-ctx-item\"\n                      [class.o-ctx-item--danger]=\"isDangerAction(sub.action)\"\n                      (click)=\"triggerSub(sub)\">\n                {{ sub.label }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <button type=\"button\"\n              class=\"o-ctx-item\"\n              [class.o-ctx-item--danger]=\"isDangerAction(action.action)\"\n              (click)=\"trigger(action)\">\n        {{ action.label }}\n      </button>\n    }\n  }\n  @if (visibleActions().length === 0) {\n  <div class=\"o-ctx-empty\">No actions</div>\n  }\n</div>\n}\n", styles: [".o-ctx-menu{position:fixed;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 8px 24px #0f172a24;min-width:190px;z-index:999;padding:4px 0;animation:o-ctx-fade-in .12s ease}@keyframes o-ctx-fade-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.o-ctx-item{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:.84rem;color:#334155;cursor:pointer;transition:background .12s,color .12s;width:100%;background:none;border:none;text-align:left}.o-ctx-item:hover{background:#f1f5f9}.o-ctx-item--danger{color:#dc2626}.o-ctx-item--danger:hover{background:#fef2f2;color:#b91c1c}.o-ctx-item--has-sub{position:relative;justify-content:space-between}.o-ctx-item--has-sub:hover{background:#f1f5f9}.o-ctx-item-label{flex:1}.o-ctx-arrow{font-size:.65rem;color:#94a3b8;margin-left:auto}.o-ctx-submenu{position:absolute;left:100%;top:0;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 8px 24px #0f172a24;min-width:160px;z-index:1000;padding:4px 0;animation:o-ctx-fade-in .1s ease}.o-ctx-empty{padding:10px 16px;color:#94a3b8;font-size:.82rem}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ContextMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-context-menu', standalone: true, imports: [], template: "@if (open) {\n<div class=\"o-ctx-menu\"\n     [style.top.px]=\"position.top\"\n     [style.left.px]=\"position.left\">\n  @for (action of visibleActions(); track action.action) {\n    @if (action.subActions && action.subActions.length > 0) {\n      <div class=\"o-ctx-item o-ctx-item--has-sub\"\n           (mouseenter)=\"setHovered(action.action)\"\n           (mouseleave)=\"setHovered(null)\">\n        <span class=\"o-ctx-item-label\">{{ action.label }}</span>\n        <span class=\"o-ctx-arrow\">&#9654;</span>\n        @if (hoveredAction === action.action) {\n          <div class=\"o-ctx-submenu\">\n            @for (sub of action.subActions; track sub.action) {\n              <button type=\"button\"\n                      class=\"o-ctx-item\"\n                      [class.o-ctx-item--danger]=\"isDangerAction(sub.action)\"\n                      (click)=\"triggerSub(sub)\">\n                {{ sub.label }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <button type=\"button\"\n              class=\"o-ctx-item\"\n              [class.o-ctx-item--danger]=\"isDangerAction(action.action)\"\n              (click)=\"trigger(action)\">\n        {{ action.label }}\n      </button>\n    }\n  }\n  @if (visibleActions().length === 0) {\n  <div class=\"o-ctx-empty\">No actions</div>\n  }\n</div>\n}\n", styles: [".o-ctx-menu{position:fixed;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 8px 24px #0f172a24;min-width:190px;z-index:999;padding:4px 0;animation:o-ctx-fade-in .12s ease}@keyframes o-ctx-fade-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.o-ctx-item{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:.84rem;color:#334155;cursor:pointer;transition:background .12s,color .12s;width:100%;background:none;border:none;text-align:left}.o-ctx-item:hover{background:#f1f5f9}.o-ctx-item--danger{color:#dc2626}.o-ctx-item--danger:hover{background:#fef2f2;color:#b91c1c}.o-ctx-item--has-sub{position:relative;justify-content:space-between}.o-ctx-item--has-sub:hover{background:#f1f5f9}.o-ctx-item-label{flex:1}.o-ctx-arrow{font-size:.65rem;color:#94a3b8;margin-left:auto}.o-ctx-submenu{position:absolute;left:100%;top:0;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 8px 24px #0f172a24;min-width:160px;z-index:1000;padding:4px 0;animation:o-ctx-fade-in .1s ease}.o-ctx-empty{padding:10px 16px;color:#94a3b8;font-size:.82rem}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { open: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], row: [{
+                type: Input
+            }], menuType: [{
+                type: Input
+            }], actionTriggered: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click']
+            }] } });
+
+class OSidePanelComponent {
+    open = false;
+    title = '';
+    row = null;
+    columns = [];
+    closed = new EventEmitter();
+    onClose() {
+        this.closed.emit();
+    }
+    getBadgeClass(value) {
+        if (!value)
+            return { 'o-side-panel__badge': true, 'o-badge--gray': true };
+        const v = value.toLowerCase();
+        const isGreen = ['active', 'approved', 'enabled'].includes(v);
+        const isRed = ['rejected', 'expired', 'inactive', 'terminated'].includes(v);
+        const isYellow = ['pending', 'in progress', 'submitted', 'pending_approval'].includes(v);
+        const isBlue = ['draft', 'returned'].includes(v);
+        return {
+            'o-side-panel__badge': true,
+            'o-badge--green': isGreen,
+            'o-badge--red': isRed,
+            'o-badge--yellow': isYellow,
+            'o-badge--blue': isBlue,
+            'o-badge--gray': !isGreen && !isRed && !isYellow && !isBlue
+        };
+    }
+    formatDate(value) {
+        if (!value)
+            return '—';
+        const d = new Date(value);
+        if (isNaN(d.getTime()))
+            return value;
+        return d.toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: '2-digit'
+        });
+    }
+    formatValue(val) {
+        if (val === null || val === undefined)
+            return '—';
+        if (typeof val === 'object') {
+            if (Array.isArray(val)) {
+                return val.join(', ') || '—';
+            }
+            const parts = [];
+            Object.keys(val).forEach(k => {
+                const list = val[k];
+                if (Array.isArray(list) && list.length > 0) {
+                    parts.push(`${k.toUpperCase()}: ${list.map(f => f.substring(f.lastIndexOf('/') + 1)).join(', ')}`);
+                }
+            });
+            return parts.join(' | ') || '—';
+        }
+        return val;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: OSidePanelComponent, isStandalone: true, selector: "o-side-panel", inputs: { open: "open", title: "title", row: "row", columns: "columns" }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (open) {\n<div class=\"o-side-panel__backdrop\" (click)=\"onClose()\" aria-hidden=\"true\"></div>\n}\n\n<div class=\"o-side-panel\" [class.o-side-panel--open]=\"open\" role=\"dialog\" [attr.aria-modal]=\"open\" [attr.aria-label]=\"title\">\n\n  <div class=\"o-side-panel__header\">\n    <span class=\"o-side-panel__title\">{{ title }}</span>\n    <button class=\"o-side-panel__close\" (click)=\"onClose()\" type=\"button\" aria-label=\"Close panel\">\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n           stroke=\"currentColor\" stroke-width=\"2\"\n           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  </div>\n\n  <div class=\"o-side-panel__body\">\n    @if (row) {\n      @for (col of columns; track col.name) {\n        @if (col.pipe === 'section') {\n          <div class=\"o-side-panel__section-header\" style=\"font-weight: 700; font-size: 15px; margin: 16px 0 8px 0; color: #15104E; border-bottom: 2px solid #CDCDCD; padding-bottom: 4px;\">\n            {{ col.label }}\n          </div>\n        } @else {\n          <div class=\"o-side-panel__field\" style=\"margin-bottom: 12px; display: flex; flex-direction: column;\">\n            <span class=\"o-side-panel__field-label\" style=\"font-size: 12px; color: #737373; font-weight: 500; margin-bottom: 2px;\">{{ col.label }}</span>\n            <span class=\"o-side-panel__field-value\" style=\"font-size: 14px; color: #333333; font-weight: 600;\">\n              @if (col.pipe === 'status') {\n                <span class=\"o-side-panel__badge\" [ngClass]=\"getBadgeClass(row[col.name])\">\n                  {{ row[col.name] || '\u2014' }}\n                </span>\n              } @else if (col.pipe === 'date') {\n                {{ formatDate(row[col.name]) }}\n              } @else {\n                {{ formatValue(row[col.name]) }}\n              }\n            </span>\n\n            @if (col.name === 'modules' && row.licenseDetails?.length) {\n              <span class=\"o-side-panel__field-label\" style=\"font-size: 12px; color: #737373; font-weight: 500; margin-top: 12px; margin-bottom: 4px;\">License Details per Product</span>\n              <div class=\"o-license-details-table-wrapper\" style=\"margin-top: 4px; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; background: #fff; width: 100%;\">\n                <table class=\"o-license-details-table\" style=\"width: 100%; border-collapse: collapse; font-size: 0.8rem;\">\n                  <thead>\n                    <tr style=\"background: #f8fafc; border-bottom: 1px solid #e2e8f0;\">\n                      <th style=\"padding: 8px 10px; text-align: left; font-weight: 600; color: #475569; font-size: 0.75rem;\">Product</th>\n                      <th style=\"padding: 8px 10px; text-align: left; font-weight: 600; color: #475569; font-size: 0.75rem;\">Users</th>\n                      <th style=\"padding: 8px 10px; text-align: left; font-weight: 600; color: #475569; font-size: 0.75rem;\">Grace Period (Days)</th>\n                      <th style=\"padding: 8px 10px; text-align: left; font-weight: 600; color: #475569; font-size: 0.75rem;\">Start Date</th>\n                      <th style=\"padding: 8px 10px; text-align: left; font-weight: 600; color: #475569; font-size: 0.75rem;\">End Date</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (prod of row.licenseDetails; track prod.productName) {\n                      <tr style=\"border-bottom: 1px solid #f1f5f9;\">\n                        <td style=\"padding: 8px 10px; font-weight: 700; color: #15104e; text-transform: uppercase;\">{{ prod.productName }}</td>\n                        <td style=\"padding: 8px 10px;\">{{ prod.userLimit || '\u2014' }}</td>\n                        <td style=\"padding: 8px 10px;\">{{ prod.gracePeriod || '\u2014' }}</td>\n                        <td style=\"padding: 8px 10px;\">{{ formatDate(prod.startDate) }}</td>\n                        <td style=\"padding: 8px 10px;\">{{ formatDate(prod.endDate) }}</td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        }\n      }\n    }\n  </div>\n\n  <div class=\"o-side-panel__footer\">\n    <button class=\"o-side-panel__btn-close\" (click)=\"onClose()\" type=\"button\">Close</button>\n  </div>\n\n</div>\n", styles: [".o-side-panel__backdrop{position:fixed;inset:0;background:#0f172a47;z-index:400;animation:o-fade-in .2s ease}.o-side-panel{position:fixed;top:0;right:0;height:100vh;width:480px;max-width:100vw;background:#fff;box-shadow:-4px 0 32px #0f172a29;z-index:401;display:flex;flex-direction:column;transform:translate(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}.o-side-panel--open{transform:translate(0)}.o-side-panel__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0}.o-side-panel__title{font-size:.95rem;font-weight:700;color:#1e293b;letter-spacing:-.01em}.o-side-panel__close{background:none;border:none;cursor:pointer;color:#94a3b8;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.o-side-panel__close:hover{background:#f1f5f9;color:#334155}.o-side-panel__body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:0}.o-side-panel__field{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #f1f5f9}.o-side-panel__field:last-child{border-bottom:none}.o-side-panel__field-label{font-size:.78rem;font-weight:600;color:#64748b;flex-shrink:0;min-width:140px;padding-top:1px;text-transform:uppercase;letter-spacing:.04em}.o-side-panel__field-value{font-size:.875rem;color:#1e293b;text-align:right;word-break:break-word}.o-side-panel__badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:600;letter-spacing:.02em}.o-badge--green{background:#dcfce7;color:#166534}.o-badge--red{background:#fee2e2;color:#991b1b}.o-badge--yellow{background:#fef9c3;color:#854d0e}.o-badge--gray{background:#f1f5f9;color:#475569}.o-badge--blue{background:#dbeafe;color:#1e40af}.o-side-panel__footer{padding:14px 24px;border-top:1px solid #e2e8f0;background:#f8fafc;display:flex;justify-content:flex-end;flex-shrink:0}.o-side-panel__btn-close{padding:8px 22px;background:#1e293b;color:#fff;border:none;border-radius:6px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}.o-side-panel__btn-close:hover{background:#0f172a}@keyframes o-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OSidePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-side-panel', standalone: true, imports: [NgClass], template: "@if (open) {\n<div class=\"o-side-panel__backdrop\" (click)=\"onClose()\" aria-hidden=\"true\"></div>\n}\n\n<div class=\"o-side-panel\" [class.o-side-panel--open]=\"open\" role=\"dialog\" [attr.aria-modal]=\"open\" [attr.aria-label]=\"title\">\n\n  <div class=\"o-side-panel__header\">\n    <span class=\"o-side-panel__title\">{{ title }}</span>\n    <button class=\"o-side-panel__close\" (click)=\"onClose()\" type=\"button\" aria-label=\"Close panel\">\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n           stroke=\"currentColor\" stroke-width=\"2\"\n           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  </div>\n\n  <div class=\"o-side-panel__body\">\n    @if (row) {\n      @for (col of columns; track col.name) {\n        @if (col.pipe === 'section') {\n          <div class=\"o-side-panel__section-header\" style=\"font-weight: 700; font-size: 15px; margin: 16px 0 8px 0; color: #15104E; border-bottom: 2px solid #CDCDCD; padding-bottom: 4px;\">\n            {{ col.label }}\n          </div>\n        } @else {\n          <div class=\"o-side-panel__field\" style=\"margin-bottom: 12px; display: flex; flex-direction: column;\">\n            <span class=\"o-side-panel__field-label\" style=\"font-size: 12px; color: #737373; font-weight: 500; margin-bottom: 2px;\">{{ col.label }}</span>\n            <span class=\"o-side-panel__field-value\" style=\"font-size: 14px; color: #333333; font-weight: 600;\">\n              @if (col.pipe === 'status') {\n                <span class=\"o-side-panel__badge\" [ngClass]=\"getBadgeClass(row[col.name])\">\n                  {{ row[col.name] || '\u2014' }}\n                </span>\n              } @else if (col.pipe === 'date') {\n                {{ formatDate(row[col.name]) }}\n              } @else {\n                {{ formatValue(row[col.name]) }}\n              }\n            </span>\n\n            @if (col.name === 'modules' && row.licenseDetails?.length) {\n              <span class=\"o-side-panel__field-label\" style=\"font-size: 12px; color: #737373; font-weight: 500; margin-top: 12px; margin-bottom: 4px;\">License Details per Product</span>\n              <div class=\"o-license-details-table-wrapper\" style=\"margin-top: 4px; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; background: #fff; width: 100%;\">\n                <table class=\"o-license-details-table\" style=\"width: 100%; border-collapse: collapse; font-size: 0.8rem;\">\n                  <thead>\n                    <tr style=\"background: #f8fafc; border-bottom: 1px solid #e2e8f0;\">\n                      <th style=\"padding: 8px 10px; text-align: left; font-weight: 600; color: #475569; font-size: 0.75rem;\">Product</th>\n                      <th style=\"padding: 8px 10px; text-align: left; font-weight: 600; color: #475569; font-size: 0.75rem;\">Users</th>\n                      <th style=\"padding: 8px 10px; text-align: left; font-weight: 600; color: #475569; font-size: 0.75rem;\">Grace Period (Days)</th>\n                      <th style=\"padding: 8px 10px; text-align: left; font-weight: 600; color: #475569; font-size: 0.75rem;\">Start Date</th>\n                      <th style=\"padding: 8px 10px; text-align: left; font-weight: 600; color: #475569; font-size: 0.75rem;\">End Date</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (prod of row.licenseDetails; track prod.productName) {\n                      <tr style=\"border-bottom: 1px solid #f1f5f9;\">\n                        <td style=\"padding: 8px 10px; font-weight: 700; color: #15104e; text-transform: uppercase;\">{{ prod.productName }}</td>\n                        <td style=\"padding: 8px 10px;\">{{ prod.userLimit || '\u2014' }}</td>\n                        <td style=\"padding: 8px 10px;\">{{ prod.gracePeriod || '\u2014' }}</td>\n                        <td style=\"padding: 8px 10px;\">{{ formatDate(prod.startDate) }}</td>\n                        <td style=\"padding: 8px 10px;\">{{ formatDate(prod.endDate) }}</td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        }\n      }\n    }\n  </div>\n\n  <div class=\"o-side-panel__footer\">\n    <button class=\"o-side-panel__btn-close\" (click)=\"onClose()\" type=\"button\">Close</button>\n  </div>\n\n</div>\n", styles: [".o-side-panel__backdrop{position:fixed;inset:0;background:#0f172a47;z-index:400;animation:o-fade-in .2s ease}.o-side-panel{position:fixed;top:0;right:0;height:100vh;width:480px;max-width:100vw;background:#fff;box-shadow:-4px 0 32px #0f172a29;z-index:401;display:flex;flex-direction:column;transform:translate(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}.o-side-panel--open{transform:translate(0)}.o-side-panel__header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc;flex-shrink:0}.o-side-panel__title{font-size:.95rem;font-weight:700;color:#1e293b;letter-spacing:-.01em}.o-side-panel__close{background:none;border:none;cursor:pointer;color:#94a3b8;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.o-side-panel__close:hover{background:#f1f5f9;color:#334155}.o-side-panel__body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:0}.o-side-panel__field{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #f1f5f9}.o-side-panel__field:last-child{border-bottom:none}.o-side-panel__field-label{font-size:.78rem;font-weight:600;color:#64748b;flex-shrink:0;min-width:140px;padding-top:1px;text-transform:uppercase;letter-spacing:.04em}.o-side-panel__field-value{font-size:.875rem;color:#1e293b;text-align:right;word-break:break-word}.o-side-panel__badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:600;letter-spacing:.02em}.o-badge--green{background:#dcfce7;color:#166534}.o-badge--red{background:#fee2e2;color:#991b1b}.o-badge--yellow{background:#fef9c3;color:#854d0e}.o-badge--gray{background:#f1f5f9;color:#475569}.o-badge--blue{background:#dbeafe;color:#1e40af}.o-side-panel__footer{padding:14px 24px;border-top:1px solid #e2e8f0;background:#f8fafc;display:flex;justify-content:flex-end;flex-shrink:0}.o-side-panel__btn-close{padding:8px 22px;background:#1e293b;color:#fff;border:none;border-radius:6px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}.o-side-panel__btn-close:hover{background:#0f172a}@keyframes o-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], propDecorators: { open: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], row: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }] } });
+
+class OTableToolsComponent {
+    config = { add: true };
+    toolAction = new EventEmitter();
+    emit(action) {
+        this.toolAction.emit(action);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OTableToolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: OTableToolsComponent, isStandalone: true, selector: "o-table-tools", inputs: { config: "config" }, outputs: { toolAction: "toolAction" }, ngImport: i0, template: "<div class=\"o-table-tools\">\n  <div class=\"o-table-tools__left\">\n    @if (config.add !== false) {\n      <button type=\"button\" class=\"o-table-tools__btn\" (click)=\"emit('add')\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path d=\"M12 6.85715H6.85715V12H5.14286V6.85715H0V5.14286H5.14286V0H6.85715V5.14286H12V6.85715Z\" fill=\"#737373\"/>\n        </svg>\n        <span>Add</span>\n      </button>\n    }\n\n    @if (config.edit) {\n      <button type=\"button\" class=\"o-table-tools__btn\" (click)=\"emit('edit')\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 9.50034V12H2.49965L9.87196 4.62768L7.37231 2.12803L0 9.50034ZM11.805 2.69462C12.065 2.43466 12.065 2.01471 11.805 1.75475L10.2453 0.19497C9.98529-0.06499 9.56534-0.06499 9.30538 0.19497L8.08555 1.4148L10.5852 3.91445L11.805 2.69462Z\" fill=\"#737373\"/>\n        </svg>\n        <span>Edit</span>\n      </button>\n    }\n\n    @if (config.duplicate) {\n      <button type=\"button\" class=\"o-table-tools__btn\" (click)=\"emit('duplicate')\">\n        <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.5 10.5V11.4375C7.5 11.7482 7.24816 12 6.9375 12H0.5625C0.25184 12 0 11.7482 0 11.4375V2.8125C0 2.50184 0.25184 2.25 0.5625 2.25H2.25V9.1875C2.25 9.91123 2.83877 10.5 3.5625 10.5H7.5ZM7.5 2.4375V0H3.5625C3.25184 0 3 0.25184 3 0.5625V9.1875C3 9.49816 3.25184 9.75 3.5625 9.75H9.9375C10.2482 9.75 10.5 9.49816 10.5 9.1875V3H8.0625C7.75313 3 7.5 2.74688 7.5 2.4375ZM10.3353 1.71026L8.78974 0.16474C8.68425 0.05926 8.54118 0 8.39201 0H8.25V2.25H10.5V2.10799C10.5 1.95881 10.4407 1.81575 10.3353 1.71026Z\" fill=\"#737373\"/>\n        </svg>\n        <span>Duplicate</span>\n      </button>\n    }\n\n    <button type=\"button\" class=\"o-table-tools__btn\" (click)=\"emit('refresh')\">\n      <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n        <path d=\"M10.836 1.7625C9.74783 0.675 8.2544 0 6.59586 0C3.27879 0 0.599609 2.685 0.599609 6C0.599609 9.315 3.27878 12 6.59586 12C9.39511 12 11.7291 10.0875 12.397 7.5H10.836C10.2206 9.2475 8.55458 10.5 6.59586 10.5C4.11181 10.5 2.09305 8.4825 2.09305 6C2.09305 3.5175 4.11181 1.5 6.59586 1.5C7.84164 1.5 8.95233 2.0175 9.76284 2.835L7.34633 5.25H12.5996V0L10.836 1.7625Z\" fill=\"#737373\"/>\n      </svg>\n      <span>Refresh</span>\n    </button>\n\n    @if (config.clear) {\n      <button type=\"button\" class=\"o-table-tools__btn\" (click)=\"emit('clear')\">\n        <svg width=\"14\" height=\"12\" viewBox=\"0 0 14 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <!-- brush / clear icon design -->\n          <path d=\"M2.5 10H11.5M4 8.5L2 6.5L3.5 5L9 10.5M4.5 3L11.5 10M5.5 2L12.5 9\" stroke=\"#737373\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        </svg>\n        <span>Clear</span>\n      </button>\n    }\n  </div>\n\n  <div class=\"o-table-tools__right\">\n    @if (config.import) {\n      <button type=\"button\" class=\"o-table-tools__btn\" (click)=\"emit('import')\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.375 6.75C0.16875 6.75 0 6.91875 0 7.125V7.875C0 8.08125 0.16875 8.25 0.375 8.25H3V6.75H0.375ZM11.8359 2.46094L9.54141 0.16407C9.43594 0.0586 9.29297 1e-05 9.14297 1e-05H9V3.00001H12V2.85704C12 2.70938 11.9414 2.56641 11.8359 2.46095V2.46094ZM8.25 3.1875V0H3.5625C3.25078 0 3 0.25078 3 0.5625V6.75H6V5.22188C6 4.88672 6.40547 4.72032 6.64219 4.95704L8.88281 7.21876C9.0375 7.37579 9.0375 7.62657 8.88281 7.78126L6.63984 10.0406C6.40312 10.2774 5.99765 10.1109 5.99765 9.7758V8.25002H2.99999V11.4375C2.99999 11.7492 3.25077 12 3.56249 12H11.4375C11.7492 12 12 11.7492 12 11.4375V3.75002H8.81249C8.50312 3.75002 8.24999 3.4969 8.24999 3.18752L8.25 3.1875Z\" fill=\"#737373\"/>\n        </svg>\n        <span>Import</span>\n      </button>\n    }\n\n    @if (config.export) {\n      <button type=\"button\" class=\"o-table-tools__btn\" (click)=\"emit('export')\">\n        <svg width=\"14\" height=\"12\" viewBox=\"0 0 14 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.14062 2.85703C9.14062 2.70937 9.08204 2.56641 8.97656 2.46094L6.68203 0.16407C6.57656 0.0586 6.4336 1e-05 6.2836 1e-05H6.14062V3.00001H9.14062V2.85703ZM13.5234 7.21875L11.2805 4.95937C11.0437 4.72265 10.6383 4.88906 10.6383 5.22421V6.74999H9.13828V8.24999H10.6383V9.77811C10.6383 10.1133 11.0437 10.2797 11.2805 10.0429L13.5234 7.78123C13.6781 7.62654 13.6781 7.37342 13.5234 7.21873V7.21875ZM4.64062 7.875V7.125C4.64062 6.91875 4.80937 6.75 5.01562 6.75H9.14062V3.75H5.95312C5.64374 3.75 5.39062 3.49688 5.39062 3.1875V0H0.703125C0.391405 0 0.140625 0.25078 0.140625 0.5625V11.4375C0.140625 11.7492 0.391405 12 0.703125 12H8.57812C8.88984 12 9.14062 11.7492 9.14062 11.4375V8.25H5.01562C4.80937 8.25 4.64062 8.08125 4.64062 7.875Z\" fill=\"#737373\"/>\n        </svg>\n        <span>Export</span>\n      </button>\n    }\n\n    @if (config.print) {\n      <button type=\"button\" class=\"o-table-tools__btn\" (click)=\"emit('print')\">\n        <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.8484 3H2.44844C1.45244 3 0.648438 3.804 0.648438 4.8V8.4H3.04844V10.8H10.2484V8.4H12.6484V4.8C12.6484 3.804 11.8444 3 10.8484 3ZM9.04844 9.6H4.24844V6.6H9.04844V9.6ZM10.8484 5.4C10.5184 5.4 10.2484 5.13 10.2484 4.8C10.2484 4.47 10.5184 4.2 10.8484 4.2C11.1784 4.2 11.4484 4.47 11.4484 4.8C11.4484 5.13 11.1784 5.4 10.8484 5.4ZM10.2484 0H3.04844V2.4H10.2484V0Z\" fill=\"#737373\"/>\n        </svg>\n        <span>Print</span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.o-table-tools{display:flex;align-items:center;height:44px;border-bottom:1px solid #e5e7eb;background:#f9fafb;box-sizing:border-box;overflow:hidden}.o-table-tools__left{display:flex;align-items:center;flex:1}.o-table-tools__right{display:flex;align-items:center;justify-content:flex-end}.o-table-tools__btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;font-size:12px;font-weight:500;color:#374151;background:none;border:none;cursor:pointer;white-space:nowrap;transition:background .12s;border-right:1px solid #e5e7eb;height:44px;box-sizing:border-box}.o-table-tools__btn:hover{background:#f5f5f5}.o-table-tools__btn:last-child{border-right:none}.o-table-tools__btn svg{flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OTableToolsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-table-tools', standalone: true, imports: [CommonModule], template: "<div class=\"o-table-tools\">\n  <div class=\"o-table-tools__left\">\n    @if (config.add !== false) {\n      <button type=\"button\" class=\"o-table-tools__btn\" (click)=\"emit('add')\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path d=\"M12 6.85715H6.85715V12H5.14286V6.85715H0V5.14286H5.14286V0H6.85715V5.14286H12V6.85715Z\" fill=\"#737373\"/>\n        </svg>\n        <span>Add</span>\n      </button>\n    }\n\n    @if (config.edit) {\n      <button type=\"button\" class=\"o-table-tools__btn\" (click)=\"emit('edit')\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 9.50034V12H2.49965L9.87196 4.62768L7.37231 2.12803L0 9.50034ZM11.805 2.69462C12.065 2.43466 12.065 2.01471 11.805 1.75475L10.2453 0.19497C9.98529-0.06499 9.56534-0.06499 9.30538 0.19497L8.08555 1.4148L10.5852 3.91445L11.805 2.69462Z\" fill=\"#737373\"/>\n        </svg>\n        <span>Edit</span>\n      </button>\n    }\n\n    @if (config.duplicate) {\n      <button type=\"button\" class=\"o-table-tools__btn\" (click)=\"emit('duplicate')\">\n        <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.5 10.5V11.4375C7.5 11.7482 7.24816 12 6.9375 12H0.5625C0.25184 12 0 11.7482 0 11.4375V2.8125C0 2.50184 0.25184 2.25 0.5625 2.25H2.25V9.1875C2.25 9.91123 2.83877 10.5 3.5625 10.5H7.5ZM7.5 2.4375V0H3.5625C3.25184 0 3 0.25184 3 0.5625V9.1875C3 9.49816 3.25184 9.75 3.5625 9.75H9.9375C10.2482 9.75 10.5 9.49816 10.5 9.1875V3H8.0625C7.75313 3 7.5 2.74688 7.5 2.4375ZM10.3353 1.71026L8.78974 0.16474C8.68425 0.05926 8.54118 0 8.39201 0H8.25V2.25H10.5V2.10799C10.5 1.95881 10.4407 1.81575 10.3353 1.71026Z\" fill=\"#737373\"/>\n        </svg>\n        <span>Duplicate</span>\n      </button>\n    }\n\n    <button type=\"button\" class=\"o-table-tools__btn\" (click)=\"emit('refresh')\">\n      <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n        <path d=\"M10.836 1.7625C9.74783 0.675 8.2544 0 6.59586 0C3.27879 0 0.599609 2.685 0.599609 6C0.599609 9.315 3.27878 12 6.59586 12C9.39511 12 11.7291 10.0875 12.397 7.5H10.836C10.2206 9.2475 8.55458 10.5 6.59586 10.5C4.11181 10.5 2.09305 8.4825 2.09305 6C2.09305 3.5175 4.11181 1.5 6.59586 1.5C7.84164 1.5 8.95233 2.0175 9.76284 2.835L7.34633 5.25H12.5996V0L10.836 1.7625Z\" fill=\"#737373\"/>\n      </svg>\n      <span>Refresh</span>\n    </button>\n\n    @if (config.clear) {\n      <button type=\"button\" class=\"o-table-tools__btn\" (click)=\"emit('clear')\">\n        <svg width=\"14\" height=\"12\" viewBox=\"0 0 14 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <!-- brush / clear icon design -->\n          <path d=\"M2.5 10H11.5M4 8.5L2 6.5L3.5 5L9 10.5M4.5 3L11.5 10M5.5 2L12.5 9\" stroke=\"#737373\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        </svg>\n        <span>Clear</span>\n      </button>\n    }\n  </div>\n\n  <div class=\"o-table-tools__right\">\n    @if (config.import) {\n      <button type=\"button\" class=\"o-table-tools__btn\" (click)=\"emit('import')\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.375 6.75C0.16875 6.75 0 6.91875 0 7.125V7.875C0 8.08125 0.16875 8.25 0.375 8.25H3V6.75H0.375ZM11.8359 2.46094L9.54141 0.16407C9.43594 0.0586 9.29297 1e-05 9.14297 1e-05H9V3.00001H12V2.85704C12 2.70938 11.9414 2.56641 11.8359 2.46095V2.46094ZM8.25 3.1875V0H3.5625C3.25078 0 3 0.25078 3 0.5625V6.75H6V5.22188C6 4.88672 6.40547 4.72032 6.64219 4.95704L8.88281 7.21876C9.0375 7.37579 9.0375 7.62657 8.88281 7.78126L6.63984 10.0406C6.40312 10.2774 5.99765 10.1109 5.99765 9.7758V8.25002H2.99999V11.4375C2.99999 11.7492 3.25077 12 3.56249 12H11.4375C11.7492 12 12 11.7492 12 11.4375V3.75002H8.81249C8.50312 3.75002 8.24999 3.4969 8.24999 3.18752L8.25 3.1875Z\" fill=\"#737373\"/>\n        </svg>\n        <span>Import</span>\n      </button>\n    }\n\n    @if (config.export) {\n      <button type=\"button\" class=\"o-table-tools__btn\" (click)=\"emit('export')\">\n        <svg width=\"14\" height=\"12\" viewBox=\"0 0 14 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.14062 2.85703C9.14062 2.70937 9.08204 2.56641 8.97656 2.46094L6.68203 0.16407C6.57656 0.0586 6.4336 1e-05 6.2836 1e-05H6.14062V3.00001H9.14062V2.85703ZM13.5234 7.21875L11.2805 4.95937C11.0437 4.72265 10.6383 4.88906 10.6383 5.22421V6.74999H9.13828V8.24999H10.6383V9.77811C10.6383 10.1133 11.0437 10.2797 11.2805 10.0429L13.5234 7.78123C13.6781 7.62654 13.6781 7.37342 13.5234 7.21873V7.21875ZM4.64062 7.875V7.125C4.64062 6.91875 4.80937 6.75 5.01562 6.75H9.14062V3.75H5.95312C5.64374 3.75 5.39062 3.49688 5.39062 3.1875V0H0.703125C0.391405 0 0.140625 0.25078 0.140625 0.5625V11.4375C0.140625 11.7492 0.391405 12 0.703125 12H8.57812C8.88984 12 9.14062 11.7492 9.14062 11.4375V8.25H5.01562C4.80937 8.25 4.64062 8.08125 4.64062 7.875Z\" fill=\"#737373\"/>\n        </svg>\n        <span>Export</span>\n      </button>\n    }\n\n    @if (config.print) {\n      <button type=\"button\" class=\"o-table-tools__btn\" (click)=\"emit('print')\">\n        <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.8484 3H2.44844C1.45244 3 0.648438 3.804 0.648438 4.8V8.4H3.04844V10.8H10.2484V8.4H12.6484V4.8C12.6484 3.804 11.8444 3 10.8484 3ZM9.04844 9.6H4.24844V6.6H9.04844V9.6ZM10.8484 5.4C10.5184 5.4 10.2484 5.13 10.2484 4.8C10.2484 4.47 10.5184 4.2 10.8484 4.2C11.1784 4.2 11.4484 4.47 11.4484 4.8C11.4484 5.13 11.1784 5.4 10.8484 5.4ZM10.2484 0H3.04844V2.4H10.2484V0Z\" fill=\"#737373\"/>\n        </svg>\n        <span>Print</span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.o-table-tools{display:flex;align-items:center;height:44px;border-bottom:1px solid #e5e7eb;background:#f9fafb;box-sizing:border-box;overflow:hidden}.o-table-tools__left{display:flex;align-items:center;flex:1}.o-table-tools__right{display:flex;align-items:center;justify-content:flex-end}.o-table-tools__btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;font-size:12px;font-weight:500;color:#374151;background:none;border:none;cursor:pointer;white-space:nowrap;transition:background .12s;border-right:1px solid #e5e7eb;height:44px;box-sizing:border-box}.o-table-tools__btn:hover{background:#f5f5f5}.o-table-tools__btn:last-child{border-right:none}.o-table-tools__btn svg{flex-shrink:0}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], toolAction: [{
+                type: Output
+            }] } });
+
+/** Context-menu actions hidden for each role */
+const ROLE_HIDDEN_ACTIONS = {
+    SYSTEM_ADMIN: ['edit'],
+    APPROVER: ['edit', 'save'],
+    REQUESTER: ['approve', 'reject', 'return', 'edit'],
+    VIEWER: ['approve', 'reject', 'return', 'edit', 'save', 'submit']
+};
+class PageRendererComponent {
+    cdr;
+    http;
+    page = null;
+    data = [];
+    userRole = 'SYSTEM_ADMIN';
+    /**
+     * If provided, forces this tab to be active.
+     * Parent sets this from route params.
+     */
+    activeTab = '';
+    actionTriggered = new EventEmitter();
+    /**
+     * Emitted when the user clicks a tab button so the parent
+     * can update the URL. The value is the tab's `.value` string.
+     */
+    tabChange = new EventEmitter();
+    filteredRows = [];
+    selectedRows = [];
+    drawerReadOnly = false;
+    drawerAction = 'new';
+    dynamicContextActions = [];
+    // Share dialog state
+    shareDialogOpen = false;
+    shareRow = null;
+    shareForm = { to: '', cc: '', subject: '', body: '' };
+    shareSending = false;
+    shareSuccess = false;
+    constructor(cdr, http) {
+        this.cdr = cdr;
+        this.http = http;
+    }
+    onSelectionChange(rows) {
+        this.selectedRows = rows;
+        this.cdr.detectChanges();
+    }
+    onTableToolAction(action) {
+        if (action === 'add') {
+            this.openFormNew();
+        }
+        else if (action === 'edit') {
+            if (this.selectedRows.length === 1) {
+                this.onContextAction({ action: 'edit', row: this.selectedRows[0] });
+            }
+        }
+        else if (action === 'duplicate') {
+            if (this.selectedRows.length === 1) {
+                const rowClone = { ...this.selectedRows[0] };
+                const idField = this.page?.tableUniqueFieldName || 'uuid';
+                delete rowClone[idField];
+                delete rowClone['requestId'];
+                this.drawerTitle = `New ${this.page?.title || 'Request'} (Clone)`;
+                this.drawerRowData = rowClone;
+                this.showSubmitBtn = true;
+                this.drawerOpen = true;
+                this.cdr.detectChanges();
+            }
+        }
+        else if (action === 'refresh') {
+            this.actionTriggered.emit({ action: 'refresh', row: null });
+        }
+        else if (action === 'clear') {
+            this.selectedRows = [];
+            this.actionTriggered.emit({ action: 'clear', row: null });
+        }
+        else if (action === 'export') {
+            this.actionTriggered.emit({ action: 'export', row: null, payload: this.selectedRows });
+        }
+        else if (action === 'import') {
+            this.actionTriggered.emit({ action: 'import', row: null });
+        }
+        this.cdr.detectChanges();
+    }
+    menuOpen = false;
+    menuPosition = { top: 0, left: 0 };
+    menuRow = null;
+    drawerOpen = false;
+    drawerTitle = '';
+    drawerRowData = null;
+    showSubmitBtn = true;
+    sidePanelOpen = false;
+    sidePanelTitle = '';
+    sidePanelRow = null;
+    sidePanelColumns = [];
+    // ── Lifecycle ──────────────────────────────────────────────────────────────
+    ngOnChanges(changes) {
+        // When page config loads, resolve initial active tab
+        if (changes['page'] && this.page?.toggleButton?.elements?.length) {
+            if (!this.activeTab) {
+                const defaultTab = this.page.toggleButton.elements.find(t => t.isDefault) ||
+                    this.page.toggleButton.elements[0];
+                this.activeTab = defaultTab.value;
+            }
+        }
+        this.applyTabFilter();
+    }
+    // ── Tab Handling ───────────────────────────────────────────────────────────
+    onTabChange(tab) {
+        this.activeTab = tab;
+        this.applyTabFilter();
+        this.tabChange.emit(tab);
+    }
+    applyTabFilter() {
+        if (!this.page?.toggleButton?.statusMap || !this.activeTab) {
+            this.filteredRows = this.data;
+            this.cdr.detectChanges();
+            return;
+        }
+        const statuses = this.page.toggleButton.statusMap[this.activeTab] || [];
+        const filtered = statuses.length
+            ? this.data.filter(r => statuses.includes(r.status))
+            : this.data;
+        this.filteredRows = filtered;
+        this.cdr.detectChanges();
+    }
+    // ── Role Visibility ────────────────────────────────────────────────────────
+    showAddButton() {
+        if (!this.page?.tableTool?.add)
+            return false;
+        return this.userRole !== 'APPROVER' && this.userRole !== 'VIEWER';
+    }
+    get computedTableToolConfig() {
+        if (!this.page?.tableTool)
+            return null;
+        // Pages without workflow tabs (system settings: users, roles, sessions, audits)
+        // show the toolbar as-is — no tab restriction needed
+        const hasWorkflowTabs = this.page.toggleButton?.elements?.some(t => t.value === 'Request' || t.value === 'Requests');
+        if (!hasWorkflowTabs) {
+            return { ...this.page.tableTool };
+        }
+        // Workflow pages (tenant, license): restrict Add/Edit/Duplicate to Request tab only
+        const isRequestTab = this.activeTab === 'Request' || this.activeTab === 'Requests';
+        return {
+            ...this.page.tableTool,
+            add: isRequestTab ? this.page.tableTool.add : false,
+            edit: isRequestTab ? this.page.tableTool.edit : false,
+            duplicate: isRequestTab ? this.page.tableTool.duplicate : false
+        };
+    }
+    get filteredContextActions() {
+        const hidden = ROLE_HIDDEN_ACTIONS[this.userRole] || [];
+        return (this.page?.contextMenuActions || []).filter(a => !hidden.includes(a.action));
+    }
+    // ── Menu Handling ──────────────────────────────────────────────────────────
+    onMenuOpen(event) {
+        this.menuRow = event.row;
+        const rect = event.event.target.getBoundingClientRect();
+        this.menuPosition = {
+            top: rect.bottom + window.scrollY,
+            left: Math.min(rect.left + window.scrollX - 100, window.innerWidth - 210)
+        };
+        this.menuOpen = true;
+        this.dynamicContextActions = [];
+        this.cdr.detectChanges();
+        if (this.menuRow && this.page) {
+            const uuid = this.menuRow[this.page.tableUniqueFieldName || 'uuid'];
+            const status = this.menuRow.status;
+            const storeName = this.page.store || '';
+            const type = (storeName.toLowerCase().includes('license')) ? 'license' : 'tenant';
+            this.http.post('http://localhost:8082/api/workflow-actions', { uuid, status, type }).subscribe({
+                next: (actions) => {
+                    const hidden = ROLE_HIDDEN_ACTIONS[this.userRole] || [];
+                    // Filter out 'edit' entirely — no edit from context menu
+                    const filtered = (actions || []).filter(a => !hidden.includes(a.action) && a.action !== 'edit');
+                    // Group approve + reject into a single hover-submenu item for In-Progress
+                    const hasApprove = filtered.some(a => a.action === 'approve');
+                    const hasReject = filtered.some(a => a.action === 'reject');
+                    if (hasApprove && hasReject) {
+                        const rest = filtered.filter(a => a.action !== 'approve' && a.action !== 'reject');
+                        this.dynamicContextActions = [
+                            {
+                                label: 'Approve',
+                                action: 'approve-group',
+                                subActions: [
+                                    { label: 'Approve', action: 'approve' },
+                                    { label: 'Reject', action: 'reject' }
+                                ]
+                            },
+                            ...rest
+                        ];
+                    }
+                    else {
+                        this.dynamicContextActions = filtered;
+                    }
+                    this.cdr.detectChanges();
+                },
+                error: (err) => {
+                    console.error('Failed to fetch dynamic actions:', err);
+                    this.dynamicContextActions = [];
+                    this.cdr.detectChanges();
+                }
+            });
+        }
+    }
+    onRowClick(row) {
+        this.actionTriggered.emit({ action: 'rowClick', row });
+    }
+    onContextAction(event) {
+        this.menuOpen = false;
+        if (event.action === 'share') {
+            this.openShareDialog(event.row);
+            return;
+        }
+        if (event.action === 'view') {
+            this.drawerTitle = 'View Request';
+            let rowData = { ...event.row };
+            this.populateLicenseDetails(rowData);
+            this.drawerRowData = rowData;
+            this.drawerReadOnly = true;
+            this.drawerAction = 'view';
+            this.showSubmitBtn = false;
+            this.drawerOpen = true;
+        }
+        else if (event.action === 'edit') {
+            this.drawerTitle = 'Edit Draft';
+            let rowData = { ...event.row };
+            this.populateLicenseDetails(rowData);
+            this.drawerRowData = rowData;
+            this.drawerReadOnly = false;
+            this.drawerAction = 'edit';
+            this.showSubmitBtn = true;
+            this.drawerOpen = true;
+        }
+        else if (event.action === 'renew') {
+            this.drawerTitle = 'Renew License';
+            let rowData = { ...event.row };
+            this.populateLicenseDetails(rowData);
+            this.drawerRowData = rowData;
+            this.drawerReadOnly = false;
+            this.drawerAction = 'renew';
+            this.showSubmitBtn = false;
+            this.drawerOpen = true;
+        }
+        else if (event.action === 'upgrade') {
+            this.drawerTitle = 'Upgrade License';
+            let rowData = { ...event.row };
+            this.populateLicenseDetails(rowData);
+            this.drawerRowData = rowData;
+            this.drawerReadOnly = false;
+            this.drawerAction = 'upgrade';
+            this.showSubmitBtn = false;
+            this.drawerOpen = true;
+        }
+        else {
+            this.actionTriggered.emit({ action: event.action, row: event.row });
+        }
+        this.cdr.detectChanges();
+    }
+    populateLicenseDetails(rowData) {
+        if (rowData.licenseDetails) {
+            const modulesMap = {};
+            const prodDetails = {};
+            rowData.licenseDetails.forEach((prod) => {
+                const pName = prod.productName.toLowerCase();
+                modulesMap[pName] = prod.features || [];
+                prodDetails[pName] = {
+                    userLimit: prod.userLimit || 80,
+                    concurrentLimit: prod.concurrentLimit || 15,
+                    startDate: prod.startDate || '',
+                    endDate: prod.endDate || '',
+                    gracePeriod: prod.gracePeriod || 30
+                };
+            });
+            rowData['modules'] = modulesMap;
+            rowData['productDetails'] = prodDetails;
+        }
+    }
+    // ── Share Dialog ───────────────────────────────────────────────────────────
+    openShareDialog(row) {
+        this.shareRow = row;
+        const name = row.companyName || row.tenantName || row.requestId || '';
+        this.shareForm = {
+            to: row.adminEmail || row.email || '',
+            cc: '',
+            subject: `OPAC — ${name} is now Active`,
+            body: `Dear Team,\n\nPlease be informed that the record for "${name}" has been activated on the OPAC platform.\n\nBest regards,\nOPAC System`
+        };
+        this.shareSending = false;
+        this.shareSuccess = false;
+        this.shareDialogOpen = true;
+        this.cdr.detectChanges();
+    }
+    closeShareDialog() {
+        this.shareDialogOpen = false;
+        this.shareRow = null;
+        this.cdr.detectChanges();
+    }
+    sendShareEmail() {
+        if (!this.shareForm.to)
+            return;
+        this.shareSending = true;
+        this.cdr.detectChanges();
+        const uuid = this.shareRow?.[this.page?.tableUniqueFieldName || 'uuid'];
+        const storeName = this.page?.store || '';
+        const type = storeName.toLowerCase().includes('license') ? 'license' : 'tenant';
+        this.http.post('http://localhost:8082/api/email/send', {
+            to: this.shareForm.to,
+            cc: this.shareForm.cc,
+            subject: this.shareForm.subject,
+            body: this.shareForm.body,
+            uuid,
+            type
+        }).subscribe({
+            next: () => {
+                this.shareSending = false;
+                this.shareSuccess = true;
+                this.cdr.detectChanges();
+                setTimeout(() => this.closeShareDialog(), 2000);
+            },
+            error: () => {
+                this.shareSending = false;
+                this.cdr.detectChanges();
+            }
+        });
+    }
+    // ── Side Panel ─────────────────────────────────────────────────────────────
+    openSidePanel(row) {
+        let sidePanelRow = { ...row };
+        if (sidePanelRow.licenseDetails) {
+            const modulesMap = {};
+            sidePanelRow.licenseDetails.forEach((prod) => {
+                const pName = prod.productName.toLowerCase();
+                modulesMap[pName] = prod.features || [];
+            });
+            sidePanelRow['modules'] = modulesMap;
+        }
+        this.sidePanelRow = sidePanelRow;
+        this.sidePanelTitle = `${this.page?.title || 'Record'} — Details`;
+        const fields = [];
+        if (this.page?.steps) {
+            this.page.steps.forEach(step => {
+                if (step.fields) {
+                    step.fields.forEach(f => {
+                        if (f.type !== 'hidden' || f.sectionName) {
+                            fields.push(f);
+                        }
+                    });
+                }
+            });
+        }
+        if (fields.length > 0) {
+            this.sidePanelColumns = fields.map(f => ({
+                name: f.name,
+                label: f.label || f.sectionName || '',
+                pipe: f.type === 'hidden' ? 'section' : (f.pipe || '')
+            }));
+        }
+        else {
+            this.sidePanelColumns = (this.page?.tableList || []).map((col) => ({
+                name: col.name,
+                label: col.label,
+                pipe: col.pipe
+            }));
+        }
+        this.sidePanelOpen = true;
+        this.actionTriggered.emit({ action: 'view', row });
+        this.cdr.detectChanges();
+    }
+    // ── Form Drawer ────────────────────────────────────────────────────────────
+    openFormNew() {
+        this.drawerTitle = `New ${this.page?.title || 'Request'}`;
+        this.drawerRowData = null;
+        this.drawerReadOnly = false;
+        this.showSubmitBtn = true;
+        this.drawerOpen = true;
+        this.cdr.detectChanges();
+    }
+    onSave(payload) {
+        this.drawerOpen = false;
+        const finalPayload = this.buildLicensePayload(payload);
+        const emittedAction = (this.drawerAction === 'renew' || this.drawerAction === 'upgrade')
+            ? this.drawerAction
+            : 'save';
+        this.actionTriggered.emit({ action: emittedAction, row: this.drawerRowData, payload: finalPayload });
+        this.cdr.detectChanges();
+    }
+    onSubmitForApproval(payload) {
+        this.drawerOpen = false;
+        const finalPayload = this.buildLicensePayload(payload);
+        this.actionTriggered.emit({ action: 'submit', row: this.drawerRowData, payload: finalPayload });
+        this.cdr.detectChanges();
+    }
+    buildLicensePayload(payload) {
+        let finalPayload = { ...payload };
+        if (this.page?.name === 'LicenseRequest' || finalPayload.modules) {
+            const licenseDetails = [];
+            const modules = finalPayload.modules || {};
+            const prodDetails = finalPayload.productDetails || {};
+            Object.keys(modules).forEach(prodKey => {
+                const features = modules[prodKey];
+                if (features && features.length > 0) {
+                    const detail = prodDetails[prodKey.toLowerCase()] || {};
+                    licenseDetails.push({
+                        productName: prodKey,
+                        startDate: detail.startDate || null,
+                        endDate: detail.endDate || null,
+                        userLimit: detail.userLimit ? Number(detail.userLimit) : null,
+                        concurrentLimit: detail.concurrentLimit ? Number(detail.concurrentLimit) : null,
+                        gracePeriod: detail.gracePeriod ? Number(detail.gracePeriod) : null,
+                        features: features
+                    });
+                }
+            });
+            finalPayload.licenseDetails = licenseDetails;
+            if (licenseDetails.length > 0) {
+                finalPayload.gracePeriod = Math.max(...licenseDetails.map(d => d.gracePeriod || 0));
+                finalPayload.totalUsers = Math.max(...licenseDetails.map(d => d.userLimit || 0));
+                finalPayload.maxConcurrent = Math.max(...licenseDetails.map(d => d.concurrentLimit || 0));
+                const startDates = licenseDetails.map(d => d.startDate).filter(Boolean);
+                if (startDates.length > 0) {
+                    finalPayload.startDate = startDates.reduce((min, d) => d < min ? d : min, startDates[0]);
+                }
+                const endDates = licenseDetails.map(d => d.endDate).filter(Boolean);
+                if (endDates.length > 0) {
+                    finalPayload.endDate = endDates.reduce((max, d) => d > max ? d : max, endDates[0]);
+                }
+            }
+        }
+        return finalPayload;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageRendererComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: PageRendererComponent, isStandalone: true, selector: "o-page-renderer", inputs: { page: "page", data: "data", userRole: "userRole", activeTab: "activeTab" }, outputs: { actionTriggered: "actionTriggered", tabChange: "tabChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"o-page\">\n\n  <!-- Page Header -->\n  <div class=\"o-page-header\">\n    <div class=\"o-page-title-row\">\n      <h2 class=\"o-page-title\">{{ page?.title }}</h2>\n    </div>\n\n    @if (page?.toggleButton?.elements?.length) {\n      <o-toggle-tabs\n        [tabs]=\"page!.toggleButton!.elements\"\n        [activeTab]=\"activeTab\"\n        (tabChange)=\"onTabChange($event)\">\n      </o-toggle-tabs>\n    }\n  </div>\n\n  @if (computedTableToolConfig) {\n    <o-table-tools\n      [config]=\"computedTableToolConfig\"\n      (toolAction)=\"onTableToolAction($event)\"\n    ></o-table-tools>\n  }\n\n  <!-- Data Table -->\n  <o-data-table\n    [columns]=\"page?.tableList || []\"\n    [rows]=\"filteredRows\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    (menuOpen)=\"onMenuOpen($event)\"\n    (rowClick)=\"onRowClick($event)\"\n    (actionClick)=\"onContextAction($event)\">\n  </o-data-table>\n\n  <!-- Context Menu -->\n  <o-context-menu\n    [open]=\"menuOpen\"\n    [position]=\"menuPosition\"\n    [actions]=\"dynamicContextActions\"\n    [row]=\"menuRow\"\n    [menuType]=\"page?.store || ''\"\n    (actionTriggered)=\"onContextAction($event)\"\n    (closed)=\"menuOpen = false\">\n  </o-context-menu>\n\n  <!-- Form Drawer -->\n  <o-form-drawer\n    [open]=\"drawerOpen\"\n    [title]=\"drawerTitle\"\n    [steps]=\"page?.steps || []\"\n    [rowData]=\"drawerRowData\"\n    [showSubmit]=\"showSubmitBtn\"\n    [readOnly]=\"drawerReadOnly\"\n    [actionType]=\"drawerAction\"\n    (closeDrawer)=\"drawerOpen = false\"\n    (save)=\"onSave($event)\"\n    (submit)=\"onSubmitForApproval($event)\">\n  </o-form-drawer>\n\n  <!-- Share / Email Dialog -->\n  @if (shareDialogOpen) {\n    <div class=\"o-share-overlay\"\n         (click)=\"closeShareDialog()\"\n         (keydown.escape)=\"closeShareDialog()\">\n      <div class=\"o-share-dialog\"\n           (click)=\"$event.stopPropagation()\"\n           (keydown.escape)=\"closeShareDialog()\">\n        <div class=\"o-share-header\">\n          <h3 class=\"o-share-title\">Share via Email</h3>\n          <button type=\"button\" class=\"o-share-close\" (click)=\"closeShareDialog()\" aria-label=\"Close dialog\">&#x2715;</button>\n        </div>\n\n        @if (shareSuccess) {\n          <div class=\"o-share-success\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#16a34a\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"20 6 9 17 4 12\"/>\n            </svg>\n            <p>Email sent successfully!</p>\n          </div>\n        } @else {\n          <div class=\"o-share-body\">\n            <div class=\"o-share-field\">\n              <label class=\"o-share-label\" for=\"share-to\">To <span class=\"o-required\">*</span></label>\n              <input id=\"share-to\" class=\"o-share-input\" type=\"email\" placeholder=\"recipient@email.com\" [(ngModel)]=\"shareForm.to\" />\n            </div>\n            <div class=\"o-share-field\">\n              <label class=\"o-share-label\" for=\"share-cc\">CC</label>\n              <input id=\"share-cc\" class=\"o-share-input\" type=\"text\" placeholder=\"cc@email.com (comma-separated)\" [(ngModel)]=\"shareForm.cc\" />\n            </div>\n            <div class=\"o-share-field\">\n              <label class=\"o-share-label\" for=\"share-subject\">Subject</label>\n              <input id=\"share-subject\" class=\"o-share-input\" type=\"text\" [(ngModel)]=\"shareForm.subject\" />\n            </div>\n            <div class=\"o-share-field\">\n              <label class=\"o-share-label\" for=\"share-body\">Message</label>\n              <textarea id=\"share-body\" class=\"o-share-input o-share-textarea\" rows=\"5\" [(ngModel)]=\"shareForm.body\"></textarea>\n            </div>\n          </div>\n          <div class=\"o-share-footer\">\n            <button type=\"button\" class=\"o-btn-secondary\" (click)=\"closeShareDialog()\">Cancel</button>\n            <button type=\"button\" class=\"o-btn-primary\" [disabled]=\"shareSending || !shareForm.to\" (click)=\"sendShareEmail()\">\n              @if (shareSending) { Sending\u2026 } @else { Send Email }\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n</div>\n", styles: [".o-page{display:flex;flex-direction:column;gap:16px;height:100%}.o-page-header{display:flex;flex-direction:column;gap:12px}.o-page-title-row{display:flex;align-items:center;justify-content:space-between}.o-page-title{font-size:1.1rem;font-weight:700;color:#1e293b;margin:0}.o-add-btn{padding:8px 18px;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}.o-add-btn:hover{background:#2563eb}.o-share-overlay{position:fixed;inset:0;background:#0f172a73;z-index:1100;display:flex;align-items:center;justify-content:center}.o-share-dialog{background:#fff;border-radius:14px;box-shadow:0 20px 60px #0f172a33;width:480px;max-width:96vw;display:flex;flex-direction:column;animation:o-share-in .18s ease}@keyframes o-share-in{0%{opacity:0;transform:scale(.96) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}.o-share-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid #e2e8f0}.o-share-title{margin:0;font-size:1rem;font-weight:700;color:#1e293b}.o-share-close{background:none;border:none;font-size:1rem;color:#64748b;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .12s}.o-share-close:hover{background:#f1f5f9}.o-share-body{padding:18px 22px;display:flex;flex-direction:column;gap:14px}.o-share-field{display:flex;flex-direction:column;gap:5px}.o-share-label{font-size:.82rem;font-weight:600;color:#374151}.o-share-input{padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:.86rem;font-family:inherit;color:#1e293b;outline:none;transition:border-color .15s}.o-share-input:focus{border-color:#6366f1}.o-share-textarea{resize:vertical;min-height:90px}.o-share-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px 18px;border-top:1px solid #e2e8f0}.o-share-success{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 22px;color:#16a34a;font-weight:600;font-size:.95rem}.o-btn-primary{padding:8px 20px;background:#4f46e5;color:#fff;border:none;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}.o-btn-primary:hover:not(:disabled){background:#4338ca}.o-btn-primary:disabled{opacity:.5;cursor:not-allowed}.o-btn-secondary{padding:8px 20px;background:#f1f5f9;color:#334155;border:1px solid #e2e8f0;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}.o-btn-secondary:hover{background:#e2e8f0}.o-required{color:#ef4444;margin-left:2px}\n"], dependencies: [{ kind: "component", type: ToggleTabsComponent, selector: "o-toggle-tabs", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }, { kind: "component", type: DataTableComponent, selector: "o-data-table", inputs: ["columns", "rows", "selectable", "actions"], outputs: ["rowClick", "menuOpen", "actionClick", "selectionChange"] }, { kind: "component", type: FormDrawerComponent, selector: "o-form-drawer", inputs: ["open", "title", "steps", "rowData", "showSubmit", "readOnly", "actionType"], outputs: ["closeDrawer", "save", "submit"] }, { kind: "component", type: ContextMenuComponent, selector: "o-context-menu", inputs: ["open", "position", "actions", "row", "menuType"], outputs: ["actionTriggered", "closed"] }, { kind: "component", type: OTableToolsComponent, selector: "o-table-tools", inputs: ["config"], outputs: ["toolAction"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-page-renderer', standalone: true, imports: [
+                        ToggleTabsComponent,
+                        DataTableComponent,
+                        FormDrawerComponent,
+                        ContextMenuComponent,
+                        OSidePanelComponent,
+                        OTableToolsComponent,
+                        FormsModule
+                    ], template: "<div class=\"o-page\">\n\n  <!-- Page Header -->\n  <div class=\"o-page-header\">\n    <div class=\"o-page-title-row\">\n      <h2 class=\"o-page-title\">{{ page?.title }}</h2>\n    </div>\n\n    @if (page?.toggleButton?.elements?.length) {\n      <o-toggle-tabs\n        [tabs]=\"page!.toggleButton!.elements\"\n        [activeTab]=\"activeTab\"\n        (tabChange)=\"onTabChange($event)\">\n      </o-toggle-tabs>\n    }\n  </div>\n\n  @if (computedTableToolConfig) {\n    <o-table-tools\n      [config]=\"computedTableToolConfig\"\n      (toolAction)=\"onTableToolAction($event)\"\n    ></o-table-tools>\n  }\n\n  <!-- Data Table -->\n  <o-data-table\n    [columns]=\"page?.tableList || []\"\n    [rows]=\"filteredRows\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    (menuOpen)=\"onMenuOpen($event)\"\n    (rowClick)=\"onRowClick($event)\"\n    (actionClick)=\"onContextAction($event)\">\n  </o-data-table>\n\n  <!-- Context Menu -->\n  <o-context-menu\n    [open]=\"menuOpen\"\n    [position]=\"menuPosition\"\n    [actions]=\"dynamicContextActions\"\n    [row]=\"menuRow\"\n    [menuType]=\"page?.store || ''\"\n    (actionTriggered)=\"onContextAction($event)\"\n    (closed)=\"menuOpen = false\">\n  </o-context-menu>\n\n  <!-- Form Drawer -->\n  <o-form-drawer\n    [open]=\"drawerOpen\"\n    [title]=\"drawerTitle\"\n    [steps]=\"page?.steps || []\"\n    [rowData]=\"drawerRowData\"\n    [showSubmit]=\"showSubmitBtn\"\n    [readOnly]=\"drawerReadOnly\"\n    [actionType]=\"drawerAction\"\n    (closeDrawer)=\"drawerOpen = false\"\n    (save)=\"onSave($event)\"\n    (submit)=\"onSubmitForApproval($event)\">\n  </o-form-drawer>\n\n  <!-- Share / Email Dialog -->\n  @if (shareDialogOpen) {\n    <div class=\"o-share-overlay\"\n         (click)=\"closeShareDialog()\"\n         (keydown.escape)=\"closeShareDialog()\">\n      <div class=\"o-share-dialog\"\n           (click)=\"$event.stopPropagation()\"\n           (keydown.escape)=\"closeShareDialog()\">\n        <div class=\"o-share-header\">\n          <h3 class=\"o-share-title\">Share via Email</h3>\n          <button type=\"button\" class=\"o-share-close\" (click)=\"closeShareDialog()\" aria-label=\"Close dialog\">&#x2715;</button>\n        </div>\n\n        @if (shareSuccess) {\n          <div class=\"o-share-success\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#16a34a\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"20 6 9 17 4 12\"/>\n            </svg>\n            <p>Email sent successfully!</p>\n          </div>\n        } @else {\n          <div class=\"o-share-body\">\n            <div class=\"o-share-field\">\n              <label class=\"o-share-label\" for=\"share-to\">To <span class=\"o-required\">*</span></label>\n              <input id=\"share-to\" class=\"o-share-input\" type=\"email\" placeholder=\"recipient@email.com\" [(ngModel)]=\"shareForm.to\" />\n            </div>\n            <div class=\"o-share-field\">\n              <label class=\"o-share-label\" for=\"share-cc\">CC</label>\n              <input id=\"share-cc\" class=\"o-share-input\" type=\"text\" placeholder=\"cc@email.com (comma-separated)\" [(ngModel)]=\"shareForm.cc\" />\n            </div>\n            <div class=\"o-share-field\">\n              <label class=\"o-share-label\" for=\"share-subject\">Subject</label>\n              <input id=\"share-subject\" class=\"o-share-input\" type=\"text\" [(ngModel)]=\"shareForm.subject\" />\n            </div>\n            <div class=\"o-share-field\">\n              <label class=\"o-share-label\" for=\"share-body\">Message</label>\n              <textarea id=\"share-body\" class=\"o-share-input o-share-textarea\" rows=\"5\" [(ngModel)]=\"shareForm.body\"></textarea>\n            </div>\n          </div>\n          <div class=\"o-share-footer\">\n            <button type=\"button\" class=\"o-btn-secondary\" (click)=\"closeShareDialog()\">Cancel</button>\n            <button type=\"button\" class=\"o-btn-primary\" [disabled]=\"shareSending || !shareForm.to\" (click)=\"sendShareEmail()\">\n              @if (shareSending) { Sending\u2026 } @else { Send Email }\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n</div>\n", styles: [".o-page{display:flex;flex-direction:column;gap:16px;height:100%}.o-page-header{display:flex;flex-direction:column;gap:12px}.o-page-title-row{display:flex;align-items:center;justify-content:space-between}.o-page-title{font-size:1.1rem;font-weight:700;color:#1e293b;margin:0}.o-add-btn{padding:8px 18px;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}.o-add-btn:hover{background:#2563eb}.o-share-overlay{position:fixed;inset:0;background:#0f172a73;z-index:1100;display:flex;align-items:center;justify-content:center}.o-share-dialog{background:#fff;border-radius:14px;box-shadow:0 20px 60px #0f172a33;width:480px;max-width:96vw;display:flex;flex-direction:column;animation:o-share-in .18s ease}@keyframes o-share-in{0%{opacity:0;transform:scale(.96) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}.o-share-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid #e2e8f0}.o-share-title{margin:0;font-size:1rem;font-weight:700;color:#1e293b}.o-share-close{background:none;border:none;font-size:1rem;color:#64748b;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .12s}.o-share-close:hover{background:#f1f5f9}.o-share-body{padding:18px 22px;display:flex;flex-direction:column;gap:14px}.o-share-field{display:flex;flex-direction:column;gap:5px}.o-share-label{font-size:.82rem;font-weight:600;color:#374151}.o-share-input{padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:.86rem;font-family:inherit;color:#1e293b;outline:none;transition:border-color .15s}.o-share-input:focus{border-color:#6366f1}.o-share-textarea{resize:vertical;min-height:90px}.o-share-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px 18px;border-top:1px solid #e2e8f0}.o-share-success{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 22px;color:#16a34a;font-weight:600;font-size:.95rem}.o-btn-primary{padding:8px 20px;background:#4f46e5;color:#fff;border:none;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}.o-btn-primary:hover:not(:disabled){background:#4338ca}.o-btn-primary:disabled{opacity:.5;cursor:not-allowed}.o-btn-secondary{padding:8px 20px;background:#f1f5f9;color:#334155;border:1px solid #e2e8f0;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}.o-btn-secondary:hover{background:#e2e8f0}.o-required{color:#ef4444;margin-left:2px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.HttpClient }], propDecorators: { page: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], userRole: [{
+                type: Input
+            }], activeTab: [{
+                type: Input
+            }], actionTriggered: [{
+                type: Output
+            }], tabChange: [{
+                type: Output
+            }] } });
+
+class PageHeaderComponent {
+    breadcrumbs = [];
+    title = '';
+    subtitle;
+    actionLabel;
+    showBack = false;
+    actionClick = new EventEmitter();
+    backClick = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: PageHeaderComponent, isStandalone: true, selector: "o-page-header", inputs: { breadcrumbs: "breadcrumbs", title: "title", subtitle: "subtitle", actionLabel: "actionLabel", showBack: "showBack" }, outputs: { actionClick: "actionClick", backClick: "backClick" }, ngImport: i0, template: "<div class=\"o-page-header\">\n  <!-- Breadcrumb -->\n  @if (breadcrumbs && breadcrumbs.length > 0) {\n    <nav class=\"o-ph-breadcrumb\">\n      @for (crumb of breadcrumbs; track crumb.label; let last = $last) {\n        @if (crumb.route && !last) {\n          <a class=\"o-ph-crumb o-ph-crumb--link\" [routerLink]=\"crumb.route\">\n            {{ crumb.label }}\n          </a>\n        }\n        @if (!crumb.route || last) {\n          <span class=\"o-ph-crumb\" [class.o-ph-crumb--active]=\"last\">\n            {{ crumb.label }}\n          </span>\n        }\n        @if (!last) {\n          <span class=\"o-ph-separator\" aria-hidden=\"true\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"9 18 15 12 9 6\"/>\n            </svg>\n          </span>\n        }\n      }\n    </nav>\n  }\n\n  <!-- Title row -->\n  <div class=\"o-ph-title-row\">\n    <!-- Back button -->\n    @if (showBack) {\n      <button class=\"o-ph-back-btn\" (click)=\"backClick.emit()\" aria-label=\"Go back\" type=\"button\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"/>\n          <polyline points=\"12 19 5 12 12 5\"/>\n        </svg>\n      </button>\n    }\n\n    <!-- Title + subtitle -->\n    <div class=\"o-ph-text\">\n      <h2 class=\"o-ph-title\">{{ title }}</h2>\n      @if (subtitle) {\n        <p class=\"o-ph-subtitle\">{{ subtitle }}</p>\n      }\n    </div>\n\n    <!-- Spacer -->\n    <div class=\"o-ph-spacer\"></div>\n\n    <!-- Primary action button -->\n    @if (actionLabel) {\n      <button class=\"o-ph-action-btn\" type=\"button\" (click)=\"actionClick.emit()\">\n        {{ actionLabel }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [".o-page-header{display:flex;flex-direction:column;gap:6px;padding:20px 24px 16px;border-bottom:1px solid #e2e8f0;background:#fff}.o-ph-breadcrumb{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.o-ph-crumb{font-size:.75rem;color:#94a3b8;text-decoration:none;white-space:nowrap}.o-ph-crumb--link{color:#64748b;text-decoration:none;cursor:pointer;transition:color .15s}.o-ph-crumb--link:hover{color:#15104e}.o-ph-crumb--active{color:#1e293b;font-weight:500}.o-ph-separator{display:flex;align-items:center;color:#cbd5e1}.o-ph-title-row{display:flex;align-items:center;gap:12px}.o-ph-back-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#475569;cursor:pointer;flex-shrink:0;transition:background .15s,border-color .15s,color .15s}.o-ph-back-btn:hover{background:#f1f5f9;border-color:#cbd5e1;color:#15104e}.o-ph-text{display:flex;flex-direction:column;gap:2px}.o-ph-title{margin:0;font-size:1.25rem;font-weight:700;color:#15104e;line-height:1.3}.o-ph-subtitle{margin:0;font-size:.8rem;color:#64748b}.o-ph-spacer{flex:1}.o-ph-action-btn{padding:8px 18px;background:#ff8200;color:#fff;border:none;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}.o-ph-action-btn:hover{background:#e67300}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PageHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-page-header', standalone: true, imports: [CommonModule, RouterModule], template: "<div class=\"o-page-header\">\n  <!-- Breadcrumb -->\n  @if (breadcrumbs && breadcrumbs.length > 0) {\n    <nav class=\"o-ph-breadcrumb\">\n      @for (crumb of breadcrumbs; track crumb.label; let last = $last) {\n        @if (crumb.route && !last) {\n          <a class=\"o-ph-crumb o-ph-crumb--link\" [routerLink]=\"crumb.route\">\n            {{ crumb.label }}\n          </a>\n        }\n        @if (!crumb.route || last) {\n          <span class=\"o-ph-crumb\" [class.o-ph-crumb--active]=\"last\">\n            {{ crumb.label }}\n          </span>\n        }\n        @if (!last) {\n          <span class=\"o-ph-separator\" aria-hidden=\"true\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"9 18 15 12 9 6\"/>\n            </svg>\n          </span>\n        }\n      }\n    </nav>\n  }\n\n  <!-- Title row -->\n  <div class=\"o-ph-title-row\">\n    <!-- Back button -->\n    @if (showBack) {\n      <button class=\"o-ph-back-btn\" (click)=\"backClick.emit()\" aria-label=\"Go back\" type=\"button\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"/>\n          <polyline points=\"12 19 5 12 12 5\"/>\n        </svg>\n      </button>\n    }\n\n    <!-- Title + subtitle -->\n    <div class=\"o-ph-text\">\n      <h2 class=\"o-ph-title\">{{ title }}</h2>\n      @if (subtitle) {\n        <p class=\"o-ph-subtitle\">{{ subtitle }}</p>\n      }\n    </div>\n\n    <!-- Spacer -->\n    <div class=\"o-ph-spacer\"></div>\n\n    <!-- Primary action button -->\n    @if (actionLabel) {\n      <button class=\"o-ph-action-btn\" type=\"button\" (click)=\"actionClick.emit()\">\n        {{ actionLabel }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [".o-page-header{display:flex;flex-direction:column;gap:6px;padding:20px 24px 16px;border-bottom:1px solid #e2e8f0;background:#fff}.o-ph-breadcrumb{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.o-ph-crumb{font-size:.75rem;color:#94a3b8;text-decoration:none;white-space:nowrap}.o-ph-crumb--link{color:#64748b;text-decoration:none;cursor:pointer;transition:color .15s}.o-ph-crumb--link:hover{color:#15104e}.o-ph-crumb--active{color:#1e293b;font-weight:500}.o-ph-separator{display:flex;align-items:center;color:#cbd5e1}.o-ph-title-row{display:flex;align-items:center;gap:12px}.o-ph-back-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#475569;cursor:pointer;flex-shrink:0;transition:background .15s,border-color .15s,color .15s}.o-ph-back-btn:hover{background:#f1f5f9;border-color:#cbd5e1;color:#15104e}.o-ph-text{display:flex;flex-direction:column;gap:2px}.o-ph-title{margin:0;font-size:1.25rem;font-weight:700;color:#15104e;line-height:1.3}.o-ph-subtitle{margin:0;font-size:.8rem;color:#64748b}.o-ph-spacer{flex:1}.o-ph-action-btn{padding:8px 18px;background:#ff8200;color:#fff;border:none;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}.o-ph-action-btn:hover{background:#e67300}\n"] }]
+        }], propDecorators: { breadcrumbs: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], actionLabel: [{
+                type: Input
+            }], showBack: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }], backClick: [{
+                type: Output
+            }] } });
+
+class SideNavComponent {
+    navItems = [];
+    activeKey = '';
+    showLogout = true;
+    navChange = new EventEmitter();
+    logout = new EventEmitter();
+    onNavClick(key) {
+        this.navChange.emit(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: SideNavComponent, isStandalone: true, selector: "o-side-nav", inputs: { navItems: "navItems", activeKey: "activeKey", showLogout: "showLogout" }, outputs: { navChange: "navChange", logout: "logout" }, ngImport: i0, template: "<nav class=\"o-side-nav\">\n  <!-- Logo -->\n  <div class=\"o-sn-logo\" aria-label=\"Orque Platform\">\n    <span class=\"o-sn-logo-letter\">O</span>\n  </div>\n\n  <!-- Nav items -->\n  <div class=\"o-sn-items\">\n    @for (item of navItems; track item.key) {\n      <button\n        class=\"o-sn-item\"\n        type=\"button\"\n        [class.o-sn-item--active]=\"item.key === activeKey\"\n        [title]=\"item.tooltip || item.label\"\n        [attr.aria-label]=\"item.label\"\n        [attr.aria-current]=\"item.key === activeKey ? 'page' : null\"\n        (click)=\"onNavClick(item.key)\"\n      >\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path [attr.d]=\"item.svgPath\"/>\n        </svg>\n      </button>\n    }\n  </div>\n\n  <!-- Spacer -->\n  <div class=\"o-sn-spacer\"></div>\n\n  <!-- Logout -->\n  @if (showLogout) {\n    <button\n      class=\"o-sn-item o-sn-item--logout\"\n      type=\"button\"\n      title=\"Logout\"\n      aria-label=\"Logout\"\n      (click)=\"logout.emit()\"\n    >\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n           stroke=\"currentColor\" stroke-width=\"2\"\n           stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/>\n        <polyline points=\"16 17 21 12 16 7\"/>\n        <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n      </svg>\n    </button>\n  }\n</nav>\n", styles: [".o-side-nav{display:flex;flex-direction:column;align-items:center;width:70px;min-height:100vh;background:#15104e;padding:0;box-sizing:border-box;flex-shrink:0}.o-sn-logo{display:flex;align-items:center;justify-content:center;width:70px;height:64px;flex-shrink:0}.o-sn-logo-letter{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:#fff;color:#15104e;font-size:1.1rem;font-weight:800;border-radius:8px;letter-spacing:-.5px}.o-sn-items{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:8px 0}.o-sn-item{position:relative;display:flex;align-items:center;justify-content:center;width:70px;height:52px;background:none;border:none;color:#ffffff80;cursor:pointer;transition:color .15s,background .15s;outline:none;flex-shrink:0}.o-sn-item:before{content:\"\";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;background:transparent;transition:background .15s}.o-sn-item:hover{color:#fff;background:#ffffff12}.o-sn-item--active{color:#fff;background:#ff82001f}.o-sn-item--active:before{background:#ff8200}.o-sn-spacer{flex:1}.o-sn-item--logout{margin-bottom:16px;color:#fff6}.o-sn-item--logout:before{display:none}.o-sn-item--logout:hover{color:#ff4d4f;background:#ff4d4f1a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SideNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-side-nav', standalone: true, imports: [CommonModule], template: "<nav class=\"o-side-nav\">\n  <!-- Logo -->\n  <div class=\"o-sn-logo\" aria-label=\"Orque Platform\">\n    <span class=\"o-sn-logo-letter\">O</span>\n  </div>\n\n  <!-- Nav items -->\n  <div class=\"o-sn-items\">\n    @for (item of navItems; track item.key) {\n      <button\n        class=\"o-sn-item\"\n        type=\"button\"\n        [class.o-sn-item--active]=\"item.key === activeKey\"\n        [title]=\"item.tooltip || item.label\"\n        [attr.aria-label]=\"item.label\"\n        [attr.aria-current]=\"item.key === activeKey ? 'page' : null\"\n        (click)=\"onNavClick(item.key)\"\n      >\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path [attr.d]=\"item.svgPath\"/>\n        </svg>\n      </button>\n    }\n  </div>\n\n  <!-- Spacer -->\n  <div class=\"o-sn-spacer\"></div>\n\n  <!-- Logout -->\n  @if (showLogout) {\n    <button\n      class=\"o-sn-item o-sn-item--logout\"\n      type=\"button\"\n      title=\"Logout\"\n      aria-label=\"Logout\"\n      (click)=\"logout.emit()\"\n    >\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n           stroke=\"currentColor\" stroke-width=\"2\"\n           stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/>\n        <polyline points=\"16 17 21 12 16 7\"/>\n        <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\n      </svg>\n    </button>\n  }\n</nav>\n", styles: [".o-side-nav{display:flex;flex-direction:column;align-items:center;width:70px;min-height:100vh;background:#15104e;padding:0;box-sizing:border-box;flex-shrink:0}.o-sn-logo{display:flex;align-items:center;justify-content:center;width:70px;height:64px;flex-shrink:0}.o-sn-logo-letter{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:#fff;color:#15104e;font-size:1.1rem;font-weight:800;border-radius:8px;letter-spacing:-.5px}.o-sn-items{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:8px 0}.o-sn-item{position:relative;display:flex;align-items:center;justify-content:center;width:70px;height:52px;background:none;border:none;color:#ffffff80;cursor:pointer;transition:color .15s,background .15s;outline:none;flex-shrink:0}.o-sn-item:before{content:\"\";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;background:transparent;transition:background .15s}.o-sn-item:hover{color:#fff;background:#ffffff12}.o-sn-item--active{color:#fff;background:#ff82001f}.o-sn-item--active:before{background:#ff8200}.o-sn-spacer{flex:1}.o-sn-item--logout{margin-bottom:16px;color:#fff6}.o-sn-item--logout:before{display:none}.o-sn-item--logout:hover{color:#ff4d4f;background:#ff4d4f1a}\n"] }]
+        }], propDecorators: { navItems: [{
+                type: Input
+            }], activeKey: [{
+                type: Input
+            }], showLogout: [{
+                type: Input
+            }], navChange: [{
+                type: Output
+            }], logout: [{
+                type: Output
+            }] } });
+
+class SearchFilterComponent {
+    placeholder;
+    value;
+    search = new EventEmitter();
+    searchInputRef;
+    inputValue = '';
+    subject = new Subject();
+    sub;
+    ngOnInit() {
+        if (this.value !== undefined) {
+            this.inputValue = this.value;
+        }
+        this.sub = this.subject.pipe(debounceTime(300), distinctUntilChanged()).subscribe(val => this.search.emit(val));
+    }
+    ngOnChanges(changes) {
+        if (changes['value'] && changes['value'].currentValue !== this.inputValue) {
+            this.inputValue = changes['value'].currentValue ?? '';
+        }
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+        this.subject.complete();
+    }
+    onInput() {
+        this.subject.next(this.inputValue);
+    }
+    clear() {
+        this.inputValue = '';
+        this.subject.next('');
+        this.searchInputRef?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SearchFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: SearchFilterComponent, isStandalone: true, selector: "o-search-filter", inputs: { placeholder: "placeholder", value: "value" }, outputs: { search: "search" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"o-search-filter\">\n  <span class=\"o-sf-icon\" aria-hidden=\"true\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n         stroke=\"currentColor\" stroke-width=\"2\"\n         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  </span>\n  <input\n    #searchInput\n    class=\"o-sf-input\"\n    type=\"text\"\n    [placeholder]=\"placeholder || 'Search...'\"\n    [(ngModel)]=\"inputValue\"\n    (input)=\"onInput()\"\n    (keydown.escape)=\"clear()\"\n    [attr.aria-label]=\"placeholder || 'Search'\"\n    autocomplete=\"off\"\n  />\n  @if (inputValue) {\n    <button\n      class=\"o-sf-clear\"\n      type=\"button\"\n      (click)=\"clear()\"\n      aria-label=\"Clear search\"\n    >\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n           stroke=\"currentColor\" stroke-width=\"2\"\n           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: [".o-search-filter{display:flex;align-items:center;gap:0;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:0 10px;height:38px;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}.o-search-filter:focus-within{border-color:#15104e;box-shadow:0 0 0 3px #15104e1a}.o-sf-icon{display:flex;align-items:center;color:#94a3b8;flex-shrink:0;margin-right:8px}.o-sf-input{flex:1;border:none;outline:none;background:transparent;font-size:.85rem;color:#1e293b;min-width:0}.o-sf-input::placeholder{color:#94a3b8}.o-sf-clear{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:2px;margin-left:4px;color:#94a3b8;cursor:pointer;border-radius:4px;flex-shrink:0;transition:color .12s,background .12s}.o-sf-clear:hover{color:#475569;background:#f1f5f9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SearchFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-search-filter', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"o-search-filter\">\n  <span class=\"o-sf-icon\" aria-hidden=\"true\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n         stroke=\"currentColor\" stroke-width=\"2\"\n         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  </span>\n  <input\n    #searchInput\n    class=\"o-sf-input\"\n    type=\"text\"\n    [placeholder]=\"placeholder || 'Search...'\"\n    [(ngModel)]=\"inputValue\"\n    (input)=\"onInput()\"\n    (keydown.escape)=\"clear()\"\n    [attr.aria-label]=\"placeholder || 'Search'\"\n    autocomplete=\"off\"\n  />\n  @if (inputValue) {\n    <button\n      class=\"o-sf-clear\"\n      type=\"button\"\n      (click)=\"clear()\"\n      aria-label=\"Clear search\"\n    >\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n           stroke=\"currentColor\" stroke-width=\"2\"\n           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: [".o-search-filter{display:flex;align-items:center;gap:0;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:0 10px;height:38px;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}.o-search-filter:focus-within{border-color:#15104e;box-shadow:0 0 0 3px #15104e1a}.o-sf-icon{display:flex;align-items:center;color:#94a3b8;flex-shrink:0;margin-right:8px}.o-sf-input{flex:1;border:none;outline:none;background:transparent;font-size:.85rem;color:#1e293b;min-width:0}.o-sf-input::placeholder{color:#94a3b8}.o-sf-clear{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:2px;margin-left:4px;color:#94a3b8;cursor:pointer;border-radius:4px;flex-shrink:0;transition:color .12s,background .12s}.o-sf-clear:hover{color:#475569;background:#f1f5f9}\n"] }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], search: [{
+                type: Output
+            }], searchInputRef: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }] } });
+
+class ConfirmationDialogComponent {
+    open = false;
+    title = '';
+    message = '';
+    confirmLabel = 'Confirm';
+    cancelLabel = 'Cancel';
+    type = 'info';
+    confirmed = new EventEmitter();
+    cancelled = new EventEmitter();
+    onConfirm() {
+        this.confirmed.emit();
+    }
+    onCancel() {
+        this.cancelled.emit();
+    }
+    onOverlayClick() {
+        this.cancelled.emit();
+    }
+    onEscape() {
+        if (this.open) {
+            this.cancelled.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ConfirmationDialogComponent, isStandalone: true, selector: "o-confirmation-dialog", inputs: { open: "open", title: "title", message: "message", confirmLabel: "confirmLabel", cancelLabel: "cancelLabel", type: "type" }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (open) {\n<div class=\"o-cd-overlay\" (click)=\"onOverlayClick()\" role=\"dialog\" aria-modal=\"true\"\n     [attr.aria-label]=\"title\">\n  <div class=\"o-cd-card\" (click)=\"$event.stopPropagation()\">\n\n    <div class=\"o-cd-header\">\n      <span class=\"o-cd-icon\" [class]=\"'o-cd-icon--' + (type || 'info')\">\n        @if (type === 'danger') {\n        <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n          <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/>\n          <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n        </svg>\n        } @else if (type === 'warning') {\n        <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/>\n          <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/>\n          <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n        </svg>\n        } @else {\n        <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n          <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n          <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n        </svg>\n        }\n      </span>\n      <h3 class=\"o-cd-title\">{{ title }}</h3>\n    </div>\n\n    <div class=\"o-cd-body\">\n      <p class=\"o-cd-message\">{{ message }}</p>\n    </div>\n\n    <div class=\"o-cd-footer\">\n      <button class=\"o-cd-btn o-cd-btn--cancel\" type=\"button\" (click)=\"onCancel()\">\n        {{ cancelLabel || 'Cancel' }}\n      </button>\n      <button class=\"o-cd-btn o-cd-btn--confirm\"\n              [class]=\"'o-cd-btn o-cd-btn--confirm o-cd-btn--confirm--' + (type || 'info')\"\n              type=\"button\"\n              (click)=\"onConfirm()\">\n        {{ confirmLabel || 'Confirm' }}\n      </button>\n    </div>\n\n  </div>\n</div>\n}\n", styles: [".o-cd-overlay{position:fixed;inset:0;background:#0f172a73;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:o-cd-fade-in .15s ease}@keyframes o-cd-fade-in{0%{opacity:0}to{opacity:1}}.o-cd-card{background:#fff;border-radius:14px;box-shadow:0 20px 60px #0f172a38;width:420px;max-width:95vw;display:flex;flex-direction:column;animation:o-cd-slide-up .18s ease;overflow:hidden}@keyframes o-cd-slide-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.o-cd-header{display:flex;align-items:center;gap:12px;padding:20px 24px 12px}.o-cd-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;flex-shrink:0}.o-cd-icon--danger{background:#fef2f2;color:#dc2626}.o-cd-icon--warning{background:#fffbeb;color:#d97706}.o-cd-icon--info{background:#eff6ff;color:#2563eb}.o-cd-title{margin:0;font-size:1rem;font-weight:700;color:#1e293b;line-height:1.3}.o-cd-body{padding:4px 24px 20px}.o-cd-message{margin:0;font-size:.875rem;color:#64748b;line-height:1.55}.o-cd-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid #f1f5f9;background:#f8fafc}.o-cd-btn{padding:8px 18px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;border:none;transition:background .15s,color .15s;outline:none}.o-cd-btn--cancel{background:#fff;color:#475569;border:1px solid #e2e8f0}.o-cd-btn--cancel:hover{background:#f1f5f9;border-color:#cbd5e1}.o-cd-btn--confirm{color:#fff}.o-cd-btn--confirm--danger{background:#dc2626}.o-cd-btn--confirm--danger:hover{background:#b91c1c}.o-cd-btn--confirm--warning{background:#d97706}.o-cd-btn--confirm--warning:hover{background:#b45309}.o-cd-btn--confirm--info{background:#2563eb}.o-cd-btn--confirm--info:hover{background:#1d4ed8}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-confirmation-dialog', standalone: true, imports: [], template: "@if (open) {\n<div class=\"o-cd-overlay\" (click)=\"onOverlayClick()\" role=\"dialog\" aria-modal=\"true\"\n     [attr.aria-label]=\"title\">\n  <div class=\"o-cd-card\" (click)=\"$event.stopPropagation()\">\n\n    <div class=\"o-cd-header\">\n      <span class=\"o-cd-icon\" [class]=\"'o-cd-icon--' + (type || 'info')\">\n        @if (type === 'danger') {\n        <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n          <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/>\n          <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n        </svg>\n        } @else if (type === 'warning') {\n        <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/>\n          <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/>\n          <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n        </svg>\n        } @else {\n        <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n          <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n          <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n        </svg>\n        }\n      </span>\n      <h3 class=\"o-cd-title\">{{ title }}</h3>\n    </div>\n\n    <div class=\"o-cd-body\">\n      <p class=\"o-cd-message\">{{ message }}</p>\n    </div>\n\n    <div class=\"o-cd-footer\">\n      <button class=\"o-cd-btn o-cd-btn--cancel\" type=\"button\" (click)=\"onCancel()\">\n        {{ cancelLabel || 'Cancel' }}\n      </button>\n      <button class=\"o-cd-btn o-cd-btn--confirm\"\n              [class]=\"'o-cd-btn o-cd-btn--confirm o-cd-btn--confirm--' + (type || 'info')\"\n              type=\"button\"\n              (click)=\"onConfirm()\">\n        {{ confirmLabel || 'Confirm' }}\n      </button>\n    </div>\n\n  </div>\n</div>\n}\n", styles: [".o-cd-overlay{position:fixed;inset:0;background:#0f172a73;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:o-cd-fade-in .15s ease}@keyframes o-cd-fade-in{0%{opacity:0}to{opacity:1}}.o-cd-card{background:#fff;border-radius:14px;box-shadow:0 20px 60px #0f172a38;width:420px;max-width:95vw;display:flex;flex-direction:column;animation:o-cd-slide-up .18s ease;overflow:hidden}@keyframes o-cd-slide-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.o-cd-header{display:flex;align-items:center;gap:12px;padding:20px 24px 12px}.o-cd-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;flex-shrink:0}.o-cd-icon--danger{background:#fef2f2;color:#dc2626}.o-cd-icon--warning{background:#fffbeb;color:#d97706}.o-cd-icon--info{background:#eff6ff;color:#2563eb}.o-cd-title{margin:0;font-size:1rem;font-weight:700;color:#1e293b;line-height:1.3}.o-cd-body{padding:4px 24px 20px}.o-cd-message{margin:0;font-size:.875rem;color:#64748b;line-height:1.55}.o-cd-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid #f1f5f9;background:#f8fafc}.o-cd-btn{padding:8px 18px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;border:none;transition:background .15s,color .15s;outline:none}.o-cd-btn--cancel{background:#fff;color:#475569;border:1px solid #e2e8f0}.o-cd-btn--cancel:hover{background:#f1f5f9;border-color:#cbd5e1}.o-cd-btn--confirm{color:#fff}.o-cd-btn--confirm--danger{background:#dc2626}.o-cd-btn--confirm--danger:hover{background:#b91c1c}.o-cd-btn--confirm--warning{background:#d97706}.o-cd-btn--confirm--warning:hover{background:#b45309}.o-cd-btn--confirm--info{background:#2563eb}.o-cd-btn--confirm--info:hover{background:#1d4ed8}\n"] }]
+        }], propDecorators: { open: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], confirmLabel: [{
+                type: Input
+            }], cancelLabel: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], confirmed: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+class OTableComponent {
+    columns = [];
+    rows = [];
+    showActions = true;
+    showAdd = true;
+    addLabel = 'Add';
+    pagination = {
+        page: 1,
+        total: 0,
+        total_pages: 1,
+        startRow: 1,
+        endRow: 0,
+        pageLinks: []
+    };
+    openForm = new EventEmitter();
+    paginationIndex = new EventEmitter();
+    rowSelect = new EventEmitter();
+    selectedRows = [];
+    allSelected = false;
+    ngOnChanges(changes) {
+        if (changes['rows']) {
+            this.selectedRows = [];
+            this.allSelected = false;
+        }
+    }
+    onRowClick(row) {
+        this.rowSelect.emit(row);
+    }
+    toggleAll(event) {
+        const checked = event.target.checked;
+        this.allSelected = checked;
+        this.selectedRows = checked ? [...this.rows] : [];
+    }
+    toggleRow(row) {
+        const idx = this.selectedRows.indexOf(row);
+        if (idx >= 0) {
+            this.selectedRows.splice(idx, 1);
+        }
+        else {
+            this.selectedRows.push(row);
+        }
+        this.allSelected = this.selectedRows.length === this.rows.length;
+    }
+    isSelected(row) {
+        return this.selectedRows.includes(row);
+    }
+    prevPage() {
+        if (this.pagination.page > 1) {
+            this.paginationIndex.emit(this.pagination.page - 1);
+        }
+    }
+    nextPage() {
+        if (this.pagination.page < this.pagination.total_pages) {
+            this.paginationIndex.emit(this.pagination.page + 1);
+        }
+    }
+    showPage(page) {
+        this.paginationIndex.emit(page);
+    }
+    onAddClick() {
+        this.openForm.emit({ status: 'new' });
+    }
+    getCellValue(row, field) {
+        return field.split('.').reduce((obj, key) => obj?.[key], row);
+    }
+    formatDate(value) {
+        if (!value)
+            return '';
+        const d = new Date(value);
+        if (isNaN(d.getTime()))
+            return value;
+        return d.toLocaleDateString('en-GB', {
+            day: '2-digit',
+            month: 'short',
+            year: 'numeric'
+        });
+    }
+    statusClass(status) {
+        if (!status)
+            return '';
+        switch (status.toLowerCase()) {
+            case 'draft':
+                return 'o-status-badge--draft';
+            case 'active':
+            case 'approved':
+                return 'o-status-badge--active';
+            case 'pending':
+            case 'returned':
+            case 'in progress':
+                return 'o-status-badge--progress';
+            case 'rejected':
+            case 'cancelled':
+            case 'expired':
+                return 'o-status-badge--rejected';
+            default:
+                return 'o-status-badge--inactive';
+        }
+    }
+    columnWidth(col) {
+        return col.width ?? '10rem';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: OTableComponent, isStandalone: true, selector: "o-table", inputs: { columns: "columns", rows: "rows", showActions: "showActions", showAdd: "showAdd", addLabel: "addLabel", pagination: "pagination" }, outputs: { openForm: "openForm", paginationIndex: "paginationIndex", rowSelect: "rowSelect" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"o-table-wrapper\">\n  <div class=\"o-table-scroll\">\n    <table class=\"o-table\">\n      <thead class=\"o-table__head\">\n        <tr>\n          <!-- Checkbox column -->\n          <th class=\"o-table__th o-table__th--checkbox\">\n            <input\n              type=\"checkbox\"\n              class=\"o-table__checkbox\"\n              [checked]=\"allSelected\"\n              (change)=\"toggleAll($event)\"\n              aria-label=\"Select all rows\"\n            />\n          </th>\n\n          <!-- Actions column -->\n          @if (showActions) {\n            <th class=\"o-table__th o-table__th--actions\">Actions</th>\n          }\n\n          <!-- Data columns -->\n          @for (col of columns; track col.field) {\n            <th\n              class=\"o-table__th\"\n              [style.min-width]=\"columnWidth(col)\"\n            >\n              {{ col.header }}\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody class=\"o-table__body\">\n        @if (rows && rows.length > 0) {\n          @for (row of rows; track $index) {\n            <tr\n              class=\"o-table__row\"\n              [class.o-table__row--selected]=\"isSelected(row)\"\n              (click)=\"onRowClick(row)\"\n            >\n              <!-- Checkbox cell -->\n              <td class=\"o-table__td o-table__td--checkbox\" (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  class=\"o-table__checkbox\"\n                  [checked]=\"isSelected(row)\"\n                  (change)=\"toggleRow(row)\"\n                  aria-label=\"Select row\"\n                />\n              </td>\n\n              <!-- Actions cell -->\n              @if (showActions) {\n                <td class=\"o-table__td o-table__td--actions\" (click)=\"$event.stopPropagation()\">\n                  <ng-content select=\"[slot=actions]\"></ng-content>\n                </td>\n              }\n\n              <!-- Data cells -->\n              @for (col of columns; track col.field) {\n                <td class=\"o-table__td\">\n                  @if (col.pipe === 'status') {\n                    <span\n                      class=\"o-status-badge\"\n                      [ngClass]=\"statusClass(getCellValue(row, col.field))\"\n                    >\n                      {{ getCellValue(row, col.field) }}\n                    </span>\n                  } @else if (col.pipe === 'date') {\n                    {{ formatDate(getCellValue(row, col.field)) }}\n                  } @else {\n                    {{ getCellValue(row, col.field) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Empty state -->\n  @if (!rows || rows.length === 0) {\n    <div class=\"o-table__empty\">\n      <svg\n        class=\"o-table__empty-icon\"\n        width=\"58\"\n        height=\"59\"\n        viewBox=\"0 0 58 59\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M8.0001 58.389H7.9991H3.9996C1.79421 58.389 0 56.5944 0 54.3885V29.3883C0 27.1829 1.79421 25.3887 3.9996 25.3887V27.3885C3.46577 27.3894 2.96412 27.5976 2.58606 27.9757C2.20801 28.3537 1.9998 28.8554 1.9998 29.3883V54.3885C1.9998 55.4912 2.89691 56.3883 3.9996 56.3883H8.0001V58.388V58.389ZM50.0004 38.3892H49.9994H47.9997V29.3883C47.9997 28.2856 47.1026 27.3885 45.9999 27.3885H44.0001V25.3887L45.9999 25.3887C48.2058 25.3887 50.0004 27.1829 50.0004 29.3883V38.3882V38.3892Z\"\n          fill=\"#14034E\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M8.25974 44.3889H8.25774V44.3879L6.63794 44.3889V3.68279V1.96918C6.63974 1.44823 6.84654 0.96047 7.22024 0.59578C7.58294 0.24118 8.06238 0.0459 8.57024 0.0459H8.60714H31.1341C31.161 0.0459 31.1899 0.04192 31.213 0.03873C31.2393 0.03511 31.2657 0.0315 31.2916 0.0315C31.2988 0.0315 31.3069 0.0315 31.3141 0.03239C31.3518 0.01895 31.391 0.00804 31.4302 0C31.605 0 31.7785 0.0585 31.9189 0.16472C32.1548 0.26776 32.365 0.41191 32.5435 0.5931L40.6003 8.8371C40.6778 8.91638 40.7505 9.00572 40.8163 9.1026C41.0875 9.29115 41.2151 9.62155 41.1412 9.94409C41.1541 10.0369 41.1611 10.1279 41.1619 10.2141V32.3892H39.5401V10.5894H32.5885C31.5027 10.5813 30.6193 9.69185 30.6193 8.60669V1.66859L8.60714 1.66861C8.39935 1.66861 8.25974 1.78941 8.25974 1.96919V6.16769V44.3889ZM32.2411 2.60459V8.60668C32.2402 8.80225 32.3928 8.96039 32.5885 8.96668H38.4475L32.2411 2.60459Z\"\n          fill=\"#32BCF3\"\n        />\n      </svg>\n      <p class=\"o-table__empty-text\">No data available</p>\n      @if (showAdd) {\n        <button class=\"o-table__empty-btn\" type=\"button\" (click)=\"onAddClick()\">\n          {{ addLabel }}\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Pagination -->\n  @if (rows && rows.length > 0) {\n    <div class=\"o-table__pagination\">\n      <p class=\"o-table__pagination-info\">\n        Showing\n        <span class=\"o-table__pagination-info--bold\">{{ pagination.startRow }}</span>\n        to\n        <span class=\"o-table__pagination-info--bold\">{{ pagination.endRow }}</span>\n        of\n        <span class=\"o-table__pagination-info--bold\">{{ pagination.total }}</span>\n        results\n      </p>\n\n      <nav class=\"o-table__pagination-nav\" aria-label=\"Pagination\">\n        <button\n          class=\"o-table__page-btn o-table__page-btn--prev\"\n          type=\"button\"\n          [disabled]=\"pagination.page <= 1\"\n          (click)=\"prevPage()\"\n          aria-label=\"Previous page\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n\n        @for (pageNum of pagination.pageLinks; track pageNum) {\n          <button\n            class=\"o-table__page-btn\"\n            type=\"button\"\n            [class.o-table__page-btn--active]=\"pageNum === pagination.page\"\n            (click)=\"showPage(pageNum)\"\n            [attr.aria-current]=\"pageNum === pagination.page ? 'page' : null\"\n          >\n            {{ pageNum }}\n          </button>\n        }\n\n        <button\n          class=\"o-table__page-btn o-table__page-btn--next\"\n          type=\"button\"\n          [disabled]=\"pagination.page >= pagination.total_pages\"\n          (click)=\"nextPage()\"\n          aria-label=\"Next page\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      </nav>\n    </div>\n  }\n</div>\n", styles: [".o-table-wrapper{display:flex;flex-direction:column;width:100%;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;background:#fff}.o-table-scroll{overflow-x:auto;overflow-y:auto}.o-table{width:100%;border-collapse:collapse;table-layout:fixed;box-sizing:border-box}.o-table__head{position:sticky;top:0;z-index:10;background:#d9dbde}.o-table__th{padding:10px 14px;font-size:.75rem;font-weight:600;color:#374151;text-align:left;white-space:nowrap;min-width:10rem;border-right:1px solid #c9cdd3;border-bottom:2px solid #c9cdd3;box-sizing:border-box}.o-table__th:last-child{border-right:none}.o-table__th--checkbox{width:40px;min-width:40px;max-width:40px;text-align:center;padding:10px 8px}.o-table__th--actions{width:128px;min-width:128px;max-width:128px}.o-table__body{background:#fff}.o-table__row{cursor:pointer;transition:background .12s;border-bottom:1px solid #f1f5f9}.o-table__row:hover{background:#f8fafc}.o-table__row--selected{background:#eff6ff}.o-table__row--selected:hover{background:#dbeafe}.o-table__td{padding:10px 14px;font-size:.82rem;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:1px solid #f1f5f9;box-sizing:border-box}.o-table__td:last-child{border-right:none}.o-table__td--checkbox{width:40px;min-width:40px;max-width:40px;text-align:center;padding:10px 8px}.o-table__td--actions{width:128px;min-width:128px;max-width:128px}.o-table__checkbox{width:16px;height:16px;cursor:pointer;accent-color:#15104e}.o-status-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:99px;font-size:.72rem;font-weight:600;text-transform:capitalize;white-space:nowrap}.o-status-badge--active{background:#dcfce7;color:#166534}.o-status-badge--inactive{background:#f1f5f9;color:#64748b}.o-status-badge--draft{background:#fef9c3;color:#854d0e}.o-status-badge--progress{background:#fef3c7;color:#92400e}.o-status-badge--rejected{background:#fee2e2;color:#991b1b}.o-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px}.o-table__empty-icon{opacity:.6}.o-table__empty-text{margin:0;font-size:.875rem;color:#64748b}.o-table__empty-btn{padding:8px 24px;background:#ff8200;color:#fff;border:none;border-radius:6px;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s}.o-table__empty-btn:hover{background:#e67300}.o-table__pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid #e2e8f0;background:#f9fafb;flex-wrap:wrap;gap:8px}.o-table__pagination-info{font-size:.75rem;color:#6b7280;margin:0}.o-table__pagination-info--bold{font-weight:600;color:#374151}.o-table__pagination-nav{display:flex;align-items:center;gap:2px}.o-table__page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border:1px solid #e2e8f0;background:#fff;color:#374151;font-size:.78rem;cursor:pointer;transition:background .12s,border-color .12s;border-radius:4px}.o-table__page-btn:hover:not(:disabled){background:#f1f5f9;border-color:#cbd5e1}.o-table__page-btn:disabled{opacity:.4;cursor:default}.o-table__page-btn--active{background:#15104e;border-color:#15104e;color:#fff;font-weight:600}.o-table__page-btn--active:hover{background:#15104e}.o-table__page-btn--prev,.o-table__page-btn--next{padding:0 6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-table', standalone: true, imports: [CommonModule], template: "<div class=\"o-table-wrapper\">\n  <div class=\"o-table-scroll\">\n    <table class=\"o-table\">\n      <thead class=\"o-table__head\">\n        <tr>\n          <!-- Checkbox column -->\n          <th class=\"o-table__th o-table__th--checkbox\">\n            <input\n              type=\"checkbox\"\n              class=\"o-table__checkbox\"\n              [checked]=\"allSelected\"\n              (change)=\"toggleAll($event)\"\n              aria-label=\"Select all rows\"\n            />\n          </th>\n\n          <!-- Actions column -->\n          @if (showActions) {\n            <th class=\"o-table__th o-table__th--actions\">Actions</th>\n          }\n\n          <!-- Data columns -->\n          @for (col of columns; track col.field) {\n            <th\n              class=\"o-table__th\"\n              [style.min-width]=\"columnWidth(col)\"\n            >\n              {{ col.header }}\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody class=\"o-table__body\">\n        @if (rows && rows.length > 0) {\n          @for (row of rows; track $index) {\n            <tr\n              class=\"o-table__row\"\n              [class.o-table__row--selected]=\"isSelected(row)\"\n              (click)=\"onRowClick(row)\"\n            >\n              <!-- Checkbox cell -->\n              <td class=\"o-table__td o-table__td--checkbox\" (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  class=\"o-table__checkbox\"\n                  [checked]=\"isSelected(row)\"\n                  (change)=\"toggleRow(row)\"\n                  aria-label=\"Select row\"\n                />\n              </td>\n\n              <!-- Actions cell -->\n              @if (showActions) {\n                <td class=\"o-table__td o-table__td--actions\" (click)=\"$event.stopPropagation()\">\n                  <ng-content select=\"[slot=actions]\"></ng-content>\n                </td>\n              }\n\n              <!-- Data cells -->\n              @for (col of columns; track col.field) {\n                <td class=\"o-table__td\">\n                  @if (col.pipe === 'status') {\n                    <span\n                      class=\"o-status-badge\"\n                      [ngClass]=\"statusClass(getCellValue(row, col.field))\"\n                    >\n                      {{ getCellValue(row, col.field) }}\n                    </span>\n                  } @else if (col.pipe === 'date') {\n                    {{ formatDate(getCellValue(row, col.field)) }}\n                  } @else {\n                    {{ getCellValue(row, col.field) }}\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Empty state -->\n  @if (!rows || rows.length === 0) {\n    <div class=\"o-table__empty\">\n      <svg\n        class=\"o-table__empty-icon\"\n        width=\"58\"\n        height=\"59\"\n        viewBox=\"0 0 58 59\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M8.0001 58.389H7.9991H3.9996C1.79421 58.389 0 56.5944 0 54.3885V29.3883C0 27.1829 1.79421 25.3887 3.9996 25.3887V27.3885C3.46577 27.3894 2.96412 27.5976 2.58606 27.9757C2.20801 28.3537 1.9998 28.8554 1.9998 29.3883V54.3885C1.9998 55.4912 2.89691 56.3883 3.9996 56.3883H8.0001V58.388V58.389ZM50.0004 38.3892H49.9994H47.9997V29.3883C47.9997 28.2856 47.1026 27.3885 45.9999 27.3885H44.0001V25.3887L45.9999 25.3887C48.2058 25.3887 50.0004 27.1829 50.0004 29.3883V38.3882V38.3892Z\"\n          fill=\"#14034E\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M8.25974 44.3889H8.25774V44.3879L6.63794 44.3889V3.68279V1.96918C6.63974 1.44823 6.84654 0.96047 7.22024 0.59578C7.58294 0.24118 8.06238 0.0459 8.57024 0.0459H8.60714H31.1341C31.161 0.0459 31.1899 0.04192 31.213 0.03873C31.2393 0.03511 31.2657 0.0315 31.2916 0.0315C31.2988 0.0315 31.3069 0.0315 31.3141 0.03239C31.3518 0.01895 31.391 0.00804 31.4302 0C31.605 0 31.7785 0.0585 31.9189 0.16472C32.1548 0.26776 32.365 0.41191 32.5435 0.5931L40.6003 8.8371C40.6778 8.91638 40.7505 9.00572 40.8163 9.1026C41.0875 9.29115 41.2151 9.62155 41.1412 9.94409C41.1541 10.0369 41.1611 10.1279 41.1619 10.2141V32.3892H39.5401V10.5894H32.5885C31.5027 10.5813 30.6193 9.69185 30.6193 8.60669V1.66859L8.60714 1.66861C8.39935 1.66861 8.25974 1.78941 8.25974 1.96919V6.16769V44.3889ZM32.2411 2.60459V8.60668C32.2402 8.80225 32.3928 8.96039 32.5885 8.96668H38.4475L32.2411 2.60459Z\"\n          fill=\"#32BCF3\"\n        />\n      </svg>\n      <p class=\"o-table__empty-text\">No data available</p>\n      @if (showAdd) {\n        <button class=\"o-table__empty-btn\" type=\"button\" (click)=\"onAddClick()\">\n          {{ addLabel }}\n        </button>\n      }\n    </div>\n  }\n\n  <!-- Pagination -->\n  @if (rows && rows.length > 0) {\n    <div class=\"o-table__pagination\">\n      <p class=\"o-table__pagination-info\">\n        Showing\n        <span class=\"o-table__pagination-info--bold\">{{ pagination.startRow }}</span>\n        to\n        <span class=\"o-table__pagination-info--bold\">{{ pagination.endRow }}</span>\n        of\n        <span class=\"o-table__pagination-info--bold\">{{ pagination.total }}</span>\n        results\n      </p>\n\n      <nav class=\"o-table__pagination-nav\" aria-label=\"Pagination\">\n        <button\n          class=\"o-table__page-btn o-table__page-btn--prev\"\n          type=\"button\"\n          [disabled]=\"pagination.page <= 1\"\n          (click)=\"prevPage()\"\n          aria-label=\"Previous page\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n\n        @for (pageNum of pagination.pageLinks; track pageNum) {\n          <button\n            class=\"o-table__page-btn\"\n            type=\"button\"\n            [class.o-table__page-btn--active]=\"pageNum === pagination.page\"\n            (click)=\"showPage(pageNum)\"\n            [attr.aria-current]=\"pageNum === pagination.page ? 'page' : null\"\n          >\n            {{ pageNum }}\n          </button>\n        }\n\n        <button\n          class=\"o-table__page-btn o-table__page-btn--next\"\n          type=\"button\"\n          [disabled]=\"pagination.page >= pagination.total_pages\"\n          (click)=\"nextPage()\"\n          aria-label=\"Next page\"\n        >\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n              clip-rule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      </nav>\n    </div>\n  }\n</div>\n", styles: [".o-table-wrapper{display:flex;flex-direction:column;width:100%;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;background:#fff}.o-table-scroll{overflow-x:auto;overflow-y:auto}.o-table{width:100%;border-collapse:collapse;table-layout:fixed;box-sizing:border-box}.o-table__head{position:sticky;top:0;z-index:10;background:#d9dbde}.o-table__th{padding:10px 14px;font-size:.75rem;font-weight:600;color:#374151;text-align:left;white-space:nowrap;min-width:10rem;border-right:1px solid #c9cdd3;border-bottom:2px solid #c9cdd3;box-sizing:border-box}.o-table__th:last-child{border-right:none}.o-table__th--checkbox{width:40px;min-width:40px;max-width:40px;text-align:center;padding:10px 8px}.o-table__th--actions{width:128px;min-width:128px;max-width:128px}.o-table__body{background:#fff}.o-table__row{cursor:pointer;transition:background .12s;border-bottom:1px solid #f1f5f9}.o-table__row:hover{background:#f8fafc}.o-table__row--selected{background:#eff6ff}.o-table__row--selected:hover{background:#dbeafe}.o-table__td{padding:10px 14px;font-size:.82rem;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:1px solid #f1f5f9;box-sizing:border-box}.o-table__td:last-child{border-right:none}.o-table__td--checkbox{width:40px;min-width:40px;max-width:40px;text-align:center;padding:10px 8px}.o-table__td--actions{width:128px;min-width:128px;max-width:128px}.o-table__checkbox{width:16px;height:16px;cursor:pointer;accent-color:#15104e}.o-status-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:99px;font-size:.72rem;font-weight:600;text-transform:capitalize;white-space:nowrap}.o-status-badge--active{background:#dcfce7;color:#166534}.o-status-badge--inactive{background:#f1f5f9;color:#64748b}.o-status-badge--draft{background:#fef9c3;color:#854d0e}.o-status-badge--progress{background:#fef3c7;color:#92400e}.o-status-badge--rejected{background:#fee2e2;color:#991b1b}.o-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px}.o-table__empty-icon{opacity:.6}.o-table__empty-text{margin:0;font-size:.875rem;color:#64748b}.o-table__empty-btn{padding:8px 24px;background:#ff8200;color:#fff;border:none;border-radius:6px;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s}.o-table__empty-btn:hover{background:#e67300}.o-table__pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid #e2e8f0;background:#f9fafb;flex-wrap:wrap;gap:8px}.o-table__pagination-info{font-size:.75rem;color:#6b7280;margin:0}.o-table__pagination-info--bold{font-weight:600;color:#374151}.o-table__pagination-nav{display:flex;align-items:center;gap:2px}.o-table__page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border:1px solid #e2e8f0;background:#fff;color:#374151;font-size:.78rem;cursor:pointer;transition:background .12s,border-color .12s;border-radius:4px}.o-table__page-btn:hover:not(:disabled){background:#f1f5f9;border-color:#cbd5e1}.o-table__page-btn:disabled{opacity:.4;cursor:default}.o-table__page-btn--active{background:#15104e;border-color:#15104e;color:#fff;font-weight:600}.o-table__page-btn--active:hover{background:#15104e}.o-table__page-btn--prev,.o-table__page-btn--next{padding:0 6px}\n"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], showActions: [{
+                type: Input
+            }], showAdd: [{
+                type: Input
+            }], addLabel: [{
+                type: Input
+            }], pagination: [{
+                type: Input
+            }], openForm: [{
+                type: Output
+            }], paginationIndex: [{
+                type: Output
+            }], rowSelect: [{
+                type: Output
+            }] } });
+
+class OToggleButtonComponent {
+    elements = [];
+    selectedValue;
+    toggleChange = new EventEmitter();
+    activeIndex = 0;
+    ngOnChanges(changes) {
+        if (changes['selectedValue'] || changes['elements']) {
+            const idx = this.elements.findIndex(e => e.value === this.selectedValue);
+            this.activeIndex = idx >= 0 ? idx : 0;
+        }
+    }
+    select(index, element) {
+        this.activeIndex = index;
+        this.toggleChange.emit(element);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: OToggleButtonComponent, isStandalone: true, selector: "o-toggle-button", inputs: { elements: "elements", selectedValue: "selectedValue" }, outputs: { toggleChange: "toggleChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"o-toggle-button\" role=\"group\" aria-label=\"Toggle options\">\n  @for (element of elements; track element.value; let i = $index) {\n    <button\n      type=\"button\"\n      class=\"o-toggle-button__item\"\n      [class.o-toggle-button__item--active]=\"i === activeIndex\"\n      (click)=\"select(i, element)\"\n      [attr.aria-pressed]=\"i === activeIndex\"\n    >\n      {{ element.label }}\n    </button>\n  }\n</div>\n", styles: [".o-toggle-button{display:inline-flex;align-items:center}.o-toggle-button__item{display:inline-flex;align-items:center;justify-content:center;height:40px;min-width:100px;padding:0 16px;font-size:.82rem;font-weight:500;color:#374151;background:#fff;border:1px solid #9ca3af;cursor:pointer;transition:background .12s,color .12s,border-color .12s;white-space:nowrap;margin-right:-1px}.o-toggle-button__item:first-child{border-radius:6px 0 0 6px}.o-toggle-button__item:last-child{border-radius:0 6px 6px 0;margin-right:0}.o-toggle-button__item:only-child{border-radius:6px}.o-toggle-button__item:hover:not(.o-toggle-button__item--active){background:#f3f4f6;border-color:#6b7280;z-index:1}.o-toggle-button__item--active{background:#1d4ed8;border-color:#1d4ed8;color:#fff;z-index:2}.o-toggle-button__item--active:hover{background:#1e40af;border-color:#1e40af}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OToggleButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-toggle-button', standalone: true, imports: [CommonModule], template: "<div class=\"o-toggle-button\" role=\"group\" aria-label=\"Toggle options\">\n  @for (element of elements; track element.value; let i = $index) {\n    <button\n      type=\"button\"\n      class=\"o-toggle-button__item\"\n      [class.o-toggle-button__item--active]=\"i === activeIndex\"\n      (click)=\"select(i, element)\"\n      [attr.aria-pressed]=\"i === activeIndex\"\n    >\n      {{ element.label }}\n    </button>\n  }\n</div>\n", styles: [".o-toggle-button{display:inline-flex;align-items:center}.o-toggle-button__item{display:inline-flex;align-items:center;justify-content:center;height:40px;min-width:100px;padding:0 16px;font-size:.82rem;font-weight:500;color:#374151;background:#fff;border:1px solid #9ca3af;cursor:pointer;transition:background .12s,color .12s,border-color .12s;white-space:nowrap;margin-right:-1px}.o-toggle-button__item:first-child{border-radius:6px 0 0 6px}.o-toggle-button__item:last-child{border-radius:0 6px 6px 0;margin-right:0}.o-toggle-button__item:only-child{border-radius:6px}.o-toggle-button__item:hover:not(.o-toggle-button__item--active){background:#f3f4f6;border-color:#6b7280;z-index:1}.o-toggle-button__item--active{background:#1d4ed8;border-color:#1d4ed8;color:#fff;z-index:2}.o-toggle-button__item--active:hover{background:#1e40af;border-color:#1e40af}\n"] }]
+        }], propDecorators: { elements: [{
+                type: Input
+            }], selectedValue: [{
+                type: Input
+            }], toggleChange: [{
+                type: Output
+            }] } });
+
+class ODialogComponent {
+    open = false;
+    title = '';
+    width = '600px';
+    valid = true;
+    showFooter = true;
+    submitLabel = 'Submit';
+    onClose = new EventEmitter();
+    onSubmit = new EventEmitter();
+    close() {
+        this.onClose.emit();
+    }
+    submit() {
+        if (this.valid) {
+            this.onSubmit.emit();
+        }
+    }
+    onOverlayClick(event) {
+        if (event.target.classList.contains('o-dialog__overlay')) {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ODialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ODialogComponent, isStandalone: true, selector: "o-dialog", inputs: { open: "open", title: "title", width: "width", valid: "valid", showFooter: "showFooter", submitLabel: "submitLabel" }, outputs: { onClose: "onClose", onSubmit: "onSubmit" }, ngImport: i0, template: "@if (open) {\n  <div\n    class=\"o-dialog__overlay\"\n    role=\"dialog\"\n    [attr.aria-label]=\"title\"\n    aria-modal=\"true\"\n    (click)=\"onOverlayClick($event)\"\n  >\n    <div class=\"o-dialog__card\" [style.width]=\"width\">\n      <!-- Header -->\n      <div class=\"o-dialog__header\">\n        <h3 class=\"o-dialog__title\">{{ title }}</h3>\n        <button\n          type=\"button\"\n          class=\"o-dialog__close-btn\"\n          (click)=\"close()\"\n          aria-label=\"Close dialog\"\n        >\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n            <path\n              d=\"M15.6449 13.9999L20.6616 8.99489C20.8813 8.7752 21.0047 8.47724 21.0047 8.16656C21.0047 7.85587 20.8813 7.55791 20.6616 7.33822C20.4419 7.11854 20.1439 6.99512 19.8333 6.99512C19.5226 6.99512 19.2246 7.11854 19.0049 7.33822L13.9999 12.3549L8.99493 7.33822C8.77524 7.11854 8.47728 6.99512 8.1666 6.99512C7.85591 6.99512 7.55795 7.11854 7.33826 7.33822C7.11857 7.55791 6.99516 7.85587 6.99516 8.16656C6.99516 8.47724 7.11857 8.7752 7.33826 8.99489L12.3549 13.9999L7.33826 19.0049C7.22891 19.1133 7.14212 19.2424 7.08289 19.3846C7.02366 19.5267 6.99316 19.6792 6.99316 19.8332C6.99316 19.9872 7.02366 20.1397 7.08289 20.2819C7.14212 20.4241 7.22891 20.5531 7.33826 20.6616C7.44672 20.7709 7.57575 20.8577 7.71792 20.9169C7.86009 20.9762 8.01258 21.0067 8.1666 21.0067C8.32061 21.0067 8.4731 20.9762 8.61527 20.9169C8.75744 20.8577 8.88647 20.7709 8.99493 20.6616L13.9999 15.6449L19.0049 20.6616C19.1134 20.7709 19.2424 20.8577 19.3846 20.9169C19.5268 20.9762 19.6792 21.0067 19.8333 21.0067C19.9873 21.0067 20.1398 20.9762 20.2819 20.9169C20.4241 20.8577 20.5531 20.7709 20.6616 20.6616C20.7709 20.5531 20.8577 20.4241 20.917 20.2819C20.9762 20.1397 21.0067 19.9872 21.0067 19.8332C21.0067 19.6792 20.9762 19.5267 20.917 19.3846C20.8577 19.2424 20.7709 19.1133 20.6616 19.0049L15.6449 13.9999Z\"\n              fill=\"#374151\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Body -->\n      <div class=\"o-dialog__body\">\n        <ng-content></ng-content>\n      </div>\n\n      <!-- Footer -->\n      @if (showFooter) {\n        <div class=\"o-dialog__footer\">\n          <button type=\"button\" class=\"o-dialog__btn o-dialog__btn--close\" (click)=\"close()\">\n            Close\n          </button>\n          <button\n            type=\"button\"\n            class=\"o-dialog__btn o-dialog__btn--submit\"\n            [disabled]=\"!valid\"\n            [class.o-dialog__btn--submit-disabled]=\"!valid\"\n            (click)=\"submit()\"\n          >\n            {{ submitLabel }}\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".o-dialog__overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:1000;padding:24px;box-sizing:border-box}.o-dialog__card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:10px;box-shadow:0 20px 60px #0003;max-height:calc(100vh - 48px);overflow:hidden;z-index:1001}.o-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e2e8f0;flex-shrink:0}.o-dialog__title{margin:0;font-size:1.1rem;font-weight:600;color:#15104e;line-height:1.3}.o-dialog__close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:6px;color:#374151;flex-shrink:0;transition:background .12s}.o-dialog__close-btn:hover{background:#f1f5f9}.o-dialog__body{flex:1;overflow-y:auto;padding:24px}.o-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e2e8f0;flex-shrink:0}.o-dialog__btn{padding:8px 24px;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .12s,border-color .12s;border:1px solid transparent}.o-dialog__btn--close{background:#f1f5f9;color:#374151;border-color:#e2e8f0}.o-dialog__btn--close:hover{background:#e2e8f0}.o-dialog__btn--submit{background:#ff8200;color:#fff;border-color:#ff8200}.o-dialog__btn--submit:hover:not(:disabled){background:#e67300;border-color:#e67300}.o-dialog__btn--submit:disabled,.o-dialog__btn--submit--submit-disabled{background:#fbb47a;border-color:#fbb47a;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ODialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-dialog', standalone: true, imports: [CommonModule], template: "@if (open) {\n  <div\n    class=\"o-dialog__overlay\"\n    role=\"dialog\"\n    [attr.aria-label]=\"title\"\n    aria-modal=\"true\"\n    (click)=\"onOverlayClick($event)\"\n  >\n    <div class=\"o-dialog__card\" [style.width]=\"width\">\n      <!-- Header -->\n      <div class=\"o-dialog__header\">\n        <h3 class=\"o-dialog__title\">{{ title }}</h3>\n        <button\n          type=\"button\"\n          class=\"o-dialog__close-btn\"\n          (click)=\"close()\"\n          aria-label=\"Close dialog\"\n        >\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n            <path\n              d=\"M15.6449 13.9999L20.6616 8.99489C20.8813 8.7752 21.0047 8.47724 21.0047 8.16656C21.0047 7.85587 20.8813 7.55791 20.6616 7.33822C20.4419 7.11854 20.1439 6.99512 19.8333 6.99512C19.5226 6.99512 19.2246 7.11854 19.0049 7.33822L13.9999 12.3549L8.99493 7.33822C8.77524 7.11854 8.47728 6.99512 8.1666 6.99512C7.85591 6.99512 7.55795 7.11854 7.33826 7.33822C7.11857 7.55791 6.99516 7.85587 6.99516 8.16656C6.99516 8.47724 7.11857 8.7752 7.33826 8.99489L12.3549 13.9999L7.33826 19.0049C7.22891 19.1133 7.14212 19.2424 7.08289 19.3846C7.02366 19.5267 6.99316 19.6792 6.99316 19.8332C6.99316 19.9872 7.02366 20.1397 7.08289 20.2819C7.14212 20.4241 7.22891 20.5531 7.33826 20.6616C7.44672 20.7709 7.57575 20.8577 7.71792 20.9169C7.86009 20.9762 8.01258 21.0067 8.1666 21.0067C8.32061 21.0067 8.4731 20.9762 8.61527 20.9169C8.75744 20.8577 8.88647 20.7709 8.99493 20.6616L13.9999 15.6449L19.0049 20.6616C19.1134 20.7709 19.2424 20.8577 19.3846 20.9169C19.5268 20.9762 19.6792 21.0067 19.8333 21.0067C19.9873 21.0067 20.1398 20.9762 20.2819 20.9169C20.4241 20.8577 20.5531 20.7709 20.6616 20.6616C20.7709 20.5531 20.8577 20.4241 20.917 20.2819C20.9762 20.1397 21.0067 19.9872 21.0067 19.8332C21.0067 19.6792 20.9762 19.5267 20.917 19.3846C20.8577 19.2424 20.7709 19.1133 20.6616 19.0049L15.6449 13.9999Z\"\n              fill=\"#374151\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Body -->\n      <div class=\"o-dialog__body\">\n        <ng-content></ng-content>\n      </div>\n\n      <!-- Footer -->\n      @if (showFooter) {\n        <div class=\"o-dialog__footer\">\n          <button type=\"button\" class=\"o-dialog__btn o-dialog__btn--close\" (click)=\"close()\">\n            Close\n          </button>\n          <button\n            type=\"button\"\n            class=\"o-dialog__btn o-dialog__btn--submit\"\n            [disabled]=\"!valid\"\n            [class.o-dialog__btn--submit-disabled]=\"!valid\"\n            (click)=\"submit()\"\n          >\n            {{ submitLabel }}\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".o-dialog__overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:1000;padding:24px;box-sizing:border-box}.o-dialog__card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:10px;box-shadow:0 20px 60px #0003;max-height:calc(100vh - 48px);overflow:hidden;z-index:1001}.o-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e2e8f0;flex-shrink:0}.o-dialog__title{margin:0;font-size:1.1rem;font-weight:600;color:#15104e;line-height:1.3}.o-dialog__close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:6px;color:#374151;flex-shrink:0;transition:background .12s}.o-dialog__close-btn:hover{background:#f1f5f9}.o-dialog__body{flex:1;overflow-y:auto;padding:24px}.o-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e2e8f0;flex-shrink:0}.o-dialog__btn{padding:8px 24px;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .12s,border-color .12s;border:1px solid transparent}.o-dialog__btn--close{background:#f1f5f9;color:#374151;border-color:#e2e8f0}.o-dialog__btn--close:hover{background:#e2e8f0}.o-dialog__btn--submit{background:#ff8200;color:#fff;border-color:#ff8200}.o-dialog__btn--submit:hover:not(:disabled){background:#e67300;border-color:#e67300}.o-dialog__btn--submit:disabled,.o-dialog__btn--submit--submit-disabled{background:#fbb47a;border-color:#fbb47a;cursor:not-allowed}\n"] }]
+        }], propDecorators: { open: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], valid: [{
+                type: Input
+            }], showFooter: [{
+                type: Input
+            }], submitLabel: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }], onSubmit: [{
+                type: Output
+            }] } });
+
+class ODotsActionComponent {
+    el;
+    items = [];
+    open = false;
+    itemClick = new EventEmitter();
+    toggled = new EventEmitter();
+    constructor(el) {
+        this.el = el;
+    }
+    toggle(event) {
+        event.stopPropagation();
+        this.open = !this.open;
+        this.toggled.emit(this.open);
+    }
+    onItemClick(event, item) {
+        event.stopPropagation();
+        this.itemClick.emit(item);
+        this.open = false;
+        this.toggled.emit(false);
+    }
+    onDocumentClick(event) {
+        if (!this.el.nativeElement.contains(event.target)) {
+            if (this.open) {
+                this.open = false;
+                this.toggled.emit(false);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ODotsActionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ODotsActionComponent, isStandalone: true, selector: "o-dots-action", inputs: { items: "items", open: "open" }, outputs: { itemClick: "itemClick", toggled: "toggled" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"o-dots-action\">\n  <button\n    type=\"button\"\n    class=\"o-dots-action__trigger\"\n    (click)=\"toggle($event)\"\n    [class.o-dots-action__trigger--open]=\"open\"\n    aria-label=\"Actions menu\"\n    [attr.aria-expanded]=\"open\"\n  >\n    <svg width=\"4\" height=\"16\" viewBox=\"0 0 4 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"#6B7280\"/>\n      <circle cx=\"2\" cy=\"9\" r=\"2\" fill=\"#6B7280\"/>\n      <circle cx=\"2\" cy=\"16\" r=\"2\" fill=\"#6B7280\"/>\n    </svg>\n  </button>\n\n  @if (open) {\n    <div class=\"o-dots-action__menu\" role=\"menu\">\n      @for (item of items; track item.action) {\n        <button\n          type=\"button\"\n          class=\"o-dots-action__item\"\n          [class.o-dots-action__item--danger]=\"item.isDanger\"\n          (click)=\"onItemClick($event, item)\"\n          role=\"menuitem\"\n        >\n          {{ item.label }}\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".o-dots-action{position:relative;display:inline-flex}.o-dots-action__trigger{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;border-radius:6px;cursor:pointer;transition:background .12s}.o-dots-action__trigger:hover,.o-dots-action__trigger--open{background:#f1f5f9}.o-dots-action__menu{position:absolute;top:calc(100% + 4px);right:0;z-index:50;min-width:160px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 8px 24px #0000001f;overflow:hidden;padding:4px 0}.o-dots-action__item{display:block;width:100%;padding:8px 16px;font-size:.8rem;font-weight:400;color:#374151;background:none;border:none;text-align:left;cursor:pointer;white-space:nowrap;transition:background .1s}.o-dots-action__item:hover{background:#f8fafc;color:#15104e}.o-dots-action__item--danger{color:#dc2626}.o-dots-action__item--danger:hover{background:#fef2f2;color:#b91c1c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ODotsActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-dots-action', standalone: true, imports: [CommonModule], template: "<div class=\"o-dots-action\">\n  <button\n    type=\"button\"\n    class=\"o-dots-action__trigger\"\n    (click)=\"toggle($event)\"\n    [class.o-dots-action__trigger--open]=\"open\"\n    aria-label=\"Actions menu\"\n    [attr.aria-expanded]=\"open\"\n  >\n    <svg width=\"4\" height=\"16\" viewBox=\"0 0 4 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"#6B7280\"/>\n      <circle cx=\"2\" cy=\"9\" r=\"2\" fill=\"#6B7280\"/>\n      <circle cx=\"2\" cy=\"16\" r=\"2\" fill=\"#6B7280\"/>\n    </svg>\n  </button>\n\n  @if (open) {\n    <div class=\"o-dots-action__menu\" role=\"menu\">\n      @for (item of items; track item.action) {\n        <button\n          type=\"button\"\n          class=\"o-dots-action__item\"\n          [class.o-dots-action__item--danger]=\"item.isDanger\"\n          (click)=\"onItemClick($event, item)\"\n          role=\"menuitem\"\n        >\n          {{ item.label }}\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: [".o-dots-action{position:relative;display:inline-flex}.o-dots-action__trigger{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;border-radius:6px;cursor:pointer;transition:background .12s}.o-dots-action__trigger:hover,.o-dots-action__trigger--open{background:#f1f5f9}.o-dots-action__menu{position:absolute;top:calc(100% + 4px);right:0;z-index:50;min-width:160px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 8px 24px #0000001f;overflow:hidden;padding:4px 0}.o-dots-action__item{display:block;width:100%;padding:8px 16px;font-size:.8rem;font-weight:400;color:#374151;background:none;border:none;text-align:left;cursor:pointer;white-space:nowrap;transition:background .1s}.o-dots-action__item:hover{background:#f8fafc;color:#15104e}.o-dots-action__item--danger{color:#dc2626}.o-dots-action__item--danger:hover{background:#fef2f2;color:#b91c1c}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], toggled: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class OToastService {
+    _messages$ = new BehaviorSubject([]);
+    get messages$() {
+        return this._messages$.asObservable();
+    }
+    add(heading, message, type, autoHide = true, delay = 5000) {
+        const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+        const toast = { id, heading, message, type, autoHide, delay };
+        const current = this._messages$.getValue();
+        this._messages$.next([...current, toast]);
+        if (autoHide) {
+            setTimeout(() => this.remove(id), delay);
+        }
+    }
+    addSuccess(heading, message, autoHide = true, delay = 5000) {
+        this.add(heading, message, 'success', autoHide, delay);
+    }
+    addError(heading, message, autoHide = true, delay = 5000) {
+        this.add(heading, message, 'error', autoHide, delay);
+    }
+    addWarning(heading, message, autoHide = true, delay = 5000) {
+        this.add(heading, message, 'warning', autoHide, delay);
+    }
+    addInfo(heading, message, autoHide = true, delay = 5000) {
+        this.add(heading, message, 'info', autoHide, delay);
+    }
+    remove(id) {
+        const current = this._messages$.getValue();
+        this._messages$.next(current.filter(m => m.id !== id));
+    }
+    clear() {
+        this._messages$.next([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class OToastComponent {
+    toastService;
+    cdr;
+    messages = [];
+    sub;
+    constructor(toastService, cdr) {
+        this.toastService = toastService;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.sub = this.toastService.messages$.subscribe(msgs => {
+            this.messages = msgs;
+            this.cdr.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    remove(id) {
+        this.toastService.remove(id);
+    }
+    typeColor(type) {
+        switch (type) {
+            case 'success': return '#16a34a';
+            case 'error': return '#dc2626';
+            case 'warning': return '#d97706';
+            case 'info': return '#2563eb';
+            default: return '#2563eb';
+        }
+    }
+    typeLabel(type) {
+        switch (type) {
+            case 'success': return 'Success';
+            case 'error': return 'Error';
+            case 'warning': return 'Warning';
+            case 'info': return 'Info';
+            default: return '';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OToastComponent, deps: [{ token: OToastService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: OToastComponent, isStandalone: true, selector: "o-toast", ngImport: i0, template: "<div class=\"o-toast-container\" aria-live=\"polite\" aria-atomic=\"false\">\n  @for (msg of messages; track msg.id) {\n    <div class=\"o-toast\" [class]=\"'o-toast--' + msg.type\" role=\"alert\">\n      <!-- Type bar -->\n      <div class=\"o-toast__bar\" [style.background]=\"typeColor(msg.type)\"></div>\n\n      <div class=\"o-toast__content\">\n        <!-- Icon area -->\n        <div class=\"o-toast__icon-wrap\" [style.background]=\"typeColor(msg.type) + '18'\">\n          @if (msg.type === 'success') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" [style.color]=\"typeColor(msg.type)\" aria-hidden=\"true\">\n              <polyline points=\"20 6 9 17 4 12\"/>\n            </svg>\n          }\n          @if (msg.type === 'error') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" [style.color]=\"typeColor(msg.type)\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n              <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/>\n              <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n            </svg>\n          }\n          @if (msg.type === 'warning') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" [style.color]=\"typeColor(msg.type)\" aria-hidden=\"true\">\n              <path d=\"M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\"/>\n              <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n            </svg>\n          }\n          @if (msg.type === 'info') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" [style.color]=\"typeColor(msg.type)\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n              <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"/>\n              <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"/>\n            </svg>\n          }\n        </div>\n\n        <!-- Text -->\n        <div class=\"o-toast__text\">\n          @if (msg.heading) {\n            <p class=\"o-toast__heading\">{{ msg.heading }}</p>\n          }\n          <p class=\"o-toast__message\">{{ msg.message }}</p>\n        </div>\n\n        <!-- Close -->\n        <button\n          type=\"button\"\n          class=\"o-toast__close\"\n          (click)=\"remove(msg.id)\"\n          aria-label=\"Dismiss notification\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\" width=\"12\" height=\"12\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path d=\"M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["@keyframes o-toast-slide-in{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.o-toast-container{position:fixed;top:20px;right:20px;width:360px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}.o-toast{display:flex;flex-direction:column;background:#fff;border-radius:8px;box-shadow:0 8px 24px #00000024;overflow:hidden;pointer-events:all;animation:o-toast-slide-in .22s ease-out forwards}.o-toast__bar{height:4px;width:100%;flex-shrink:0}.o-toast__content{display:flex;align-items:flex-start;gap:12px;padding:14px 14px 14px 16px}.o-toast__icon-wrap{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;flex-shrink:0;margin-top:1px}.o-toast__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.o-toast__heading{margin:0;font-size:.85rem;font-weight:600;color:#1e293b;line-height:1.3}.o-toast__message{margin:0;font-size:.8rem;color:#475569;line-height:1.4}.o-toast__close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;background:none;border:none;cursor:pointer;color:#94a3b8;border-radius:4px;margin-top:2px;transition:color .12s,background .12s}.o-toast__close:hover{color:#64748b;background:#f1f5f9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-toast', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"o-toast-container\" aria-live=\"polite\" aria-atomic=\"false\">\n  @for (msg of messages; track msg.id) {\n    <div class=\"o-toast\" [class]=\"'o-toast--' + msg.type\" role=\"alert\">\n      <!-- Type bar -->\n      <div class=\"o-toast__bar\" [style.background]=\"typeColor(msg.type)\"></div>\n\n      <div class=\"o-toast__content\">\n        <!-- Icon area -->\n        <div class=\"o-toast__icon-wrap\" [style.background]=\"typeColor(msg.type) + '18'\">\n          @if (msg.type === 'success') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" [style.color]=\"typeColor(msg.type)\" aria-hidden=\"true\">\n              <polyline points=\"20 6 9 17 4 12\"/>\n            </svg>\n          }\n          @if (msg.type === 'error') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" [style.color]=\"typeColor(msg.type)\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n              <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"/>\n              <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"/>\n            </svg>\n          }\n          @if (msg.type === 'warning') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" [style.color]=\"typeColor(msg.type)\" aria-hidden=\"true\">\n              <path d=\"M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\"/>\n              <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n            </svg>\n          }\n          @if (msg.type === 'info') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" [style.color]=\"typeColor(msg.type)\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n              <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"/>\n              <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"/>\n            </svg>\n          }\n        </div>\n\n        <!-- Text -->\n        <div class=\"o-toast__text\">\n          @if (msg.heading) {\n            <p class=\"o-toast__heading\">{{ msg.heading }}</p>\n          }\n          <p class=\"o-toast__message\">{{ msg.message }}</p>\n        </div>\n\n        <!-- Close -->\n        <button\n          type=\"button\"\n          class=\"o-toast__close\"\n          (click)=\"remove(msg.id)\"\n          aria-label=\"Dismiss notification\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\" width=\"12\" height=\"12\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path d=\"M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["@keyframes o-toast-slide-in{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.o-toast-container{position:fixed;top:20px;right:20px;width:360px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}.o-toast{display:flex;flex-direction:column;background:#fff;border-radius:8px;box-shadow:0 8px 24px #00000024;overflow:hidden;pointer-events:all;animation:o-toast-slide-in .22s ease-out forwards}.o-toast__bar{height:4px;width:100%;flex-shrink:0}.o-toast__content{display:flex;align-items:flex-start;gap:12px;padding:14px 14px 14px 16px}.o-toast__icon-wrap{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;flex-shrink:0;margin-top:1px}.o-toast__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.o-toast__heading{margin:0;font-size:.85rem;font-weight:600;color:#1e293b;line-height:1.3}.o-toast__message{margin:0;font-size:.8rem;color:#475569;line-height:1.4}.o-toast__close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;background:none;border:none;cursor:pointer;color:#94a3b8;border-radius:4px;margin-top:2px;transition:color .12s,background .12s}.o-toast__close:hover{color:#64748b;background:#f1f5f9}\n"] }]
+        }], ctorParameters: () => [{ type: OToastService }, { type: i0.ChangeDetectorRef }] });
+
+class OSelectComponent {
+    options = [];
+    placeholder = 'Select';
+    value = null;
+    disabled = false;
+    valueChange = new EventEmitter();
+    onChange = () => { };
+    onTouched = () => { };
+    onSelectChange(event) {
+        const el = event.target;
+        const selected = this.options.find(o => String(o.value) === el.value);
+        const val = selected ? selected.value : null;
+        this.value = val;
+        this.onChange(val);
+        this.onTouched();
+        this.valueChange.emit(val);
+    }
+    optionStringValue(val) {
+        return val == null ? '' : String(val);
+    }
+    writeValue(val) {
+        this.value = val ?? null;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn; // eslint-disable-line @typescript-eslint/no-empty-function
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: OSelectComponent, isStandalone: true, selector: "o-select", inputs: { options: "options", placeholder: "placeholder", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => OSelectComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div class=\"o-select-wrapper\" [class.o-select-wrapper--disabled]=\"disabled\">\n  <select\n    class=\"o-select\"\n    [disabled]=\"disabled\"\n    [value]=\"optionStringValue(value)\"\n    (change)=\"onSelectChange($event)\"\n    (blur)=\"onTouched()\"\n    [attr.aria-label]=\"placeholder\"\n  >\n    <option value=\"\" disabled [selected]=\"value === null || value === undefined || value === ''\">\n      {{ placeholder }}\n    </option>\n    @for (option of options; track option.value) {\n      <option\n        [value]=\"optionStringValue(option.value)\"\n        [selected]=\"optionStringValue(option.value) === optionStringValue(value)\"\n      >\n        {{ option.label }}\n      </option>\n    }\n  </select>\n</div>\n", styles: [".o-select-wrapper{position:relative;display:block;width:100%}.o-select-wrapper:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6b7280;pointer-events:none}.o-select-wrapper--disabled{opacity:.6;cursor:not-allowed}.o-select{display:block;width:100%;height:40px;padding:0 36px 0 12px;border:1px solid #d1d5db;border-radius:6px;background:#fff;font-size:.875rem;color:#374151;cursor:pointer;appearance:none;-webkit-appearance:none;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}.o-select:focus{border-color:#15104e;box-shadow:0 0 0 3px #15104e1a}.o-select:disabled{cursor:not-allowed;background:#f9fafb}.o-select option[value=\"\"][disabled]{color:#9ca3af}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: OSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'o-select', standalone: true, imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => OSelectComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"o-select-wrapper\" [class.o-select-wrapper--disabled]=\"disabled\">\n  <select\n    class=\"o-select\"\n    [disabled]=\"disabled\"\n    [value]=\"optionStringValue(value)\"\n    (change)=\"onSelectChange($event)\"\n    (blur)=\"onTouched()\"\n    [attr.aria-label]=\"placeholder\"\n  >\n    <option value=\"\" disabled [selected]=\"value === null || value === undefined || value === ''\">\n      {{ placeholder }}\n    </option>\n    @for (option of options; track option.value) {\n      <option\n        [value]=\"optionStringValue(option.value)\"\n        [selected]=\"optionStringValue(option.value) === optionStringValue(value)\"\n      >\n        {{ option.label }}\n      </option>\n    }\n  </select>\n</div>\n", styles: [".o-select-wrapper{position:relative;display:block;width:100%}.o-select-wrapper:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6b7280;pointer-events:none}.o-select-wrapper--disabled{opacity:.6;cursor:not-allowed}.o-select{display:block;width:100%;height:40px;padding:0 36px 0 12px;border:1px solid #d1d5db;border-radius:6px;background:#fff;font-size:.875rem;color:#374151;cursor:pointer;appearance:none;-webkit-appearance:none;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}.o-select:focus{border-color:#15104e;box-shadow:0 0 0 3px #15104e1a}.o-select:disabled{cursor:not-allowed;background:#f9fafb}.o-select option[value=\"\"][disabled]{color:#9ca3af}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of o-ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ConfirmationDialogComponent, ContextMenuComponent, ContextSwitcherComponent, DataTableComponent, FormDrawerComponent, ODialogComponent, ODotsActionComponent, OLicenseModulesComponent, OSelectComponent, OSidePanelComponent, OStatusToggleComponent, OTableComponent, OTableToolsComponent, OToastComponent, OToastService, OToggleButtonComponent, OUi, PageHeaderComponent, PageRendererComponent, SearchFilterComponent, SideNavComponent, ToggleTabsComponent };
+//# sourceMappingURL=orque-ui.mjs.map