@memberjunction/ng-dashboards 5.0.0 → 5.1.0

package/dist/Communication/communication-dashboard.component.js

@@ -260,5 +260,5 @@ export { CommunicationDashboardComponent };
         type: Component,
         args: [{ standalone: false, selector: 'mj-communication-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"communication-dashboard-container\">\n  <!-- TOOLBAR -->\n  <div class=\"studio-toolbar\">\n    <div class=\"toolbar-brand\">\n      <div class=\"brand-icon\"><i class=\"fa-solid fa-satellite-dish\"></i></div>\n      <span class=\"brand-label\">Communications</span>\n    </div>\n    <div class=\"toolbar-divider\"></div>\n    <div class=\"toolbar-spacer\"></div>\n    <button class=\"tb-btn\" (click)=\"onRefresh()\">\n      <i class=\"fa-solid fa-rotate\" [class.spinning]=\"isRefreshing\"></i> Refresh\n    </button>\n  </div>\n\n  <!-- BODY -->\n  <div class=\"dashboard-body\">\n    <!-- SIDEBAR -->\n    <div class=\"sidebar\">\n      <div class=\"sidebar-section-label\">Dashboard</div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'monitor'\"\n        (click)=\"onTabChange('monitor')\">\n        <i class=\"fa-solid fa-chart-line\"></i>\n        <span>Monitor</span>\n      </div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'logs'\"\n        (click)=\"onTabChange('logs')\">\n        <i class=\"fa-solid fa-list-ul\"></i>\n        <span>Message Logs</span>\n      </div>\n\n      <div class=\"sidebar-section-label\">Configuration</div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'providers'\"\n        (click)=\"onTabChange('providers')\">\n        <i class=\"fa-solid fa-server\"></i>\n        <span>Providers</span>\n      </div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'templates'\"\n        (click)=\"onTabChange('templates')\">\n        <i class=\"fa-solid fa-file-lines\"></i>\n        <span>Templates</span>\n      </div>\n\n      <div class=\"sidebar-section-label\">Operations</div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'runs'\"\n        (click)=\"onTabChange('runs')\">\n        <i class=\"fa-solid fa-play-circle\"></i>\n        <span>Bulk Runs</span>\n      </div>\n\n      <div class=\"sidebar-footer\">\n        <div class=\"nav-item\" [class.selected]=\"activeTab === 'settings'\"\n          (click)=\"onTabChange('settings')\">\n          <i class=\"fa-solid fa-gear\"></i>\n          <span>Settings</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- MAIN CONTENT -->\n    <div class=\"main-content\">\n      <div class=\"tab-container\">\n        @switch (activeTab) {\n          @case ('monitor') {\n            <div class=\"tab-content\">\n              @if (hasVisited('monitor')) {\n                <mj-communication-monitor-resource></mj-communication-monitor-resource>\n              }\n            </div>\n          }\n          @case ('logs') {\n            <div class=\"tab-content\">\n              @if (hasVisited('logs')) {\n                <mj-communication-logs-resource></mj-communication-logs-resource>\n              }\n            </div>\n          }\n          @case ('providers') {\n            <div class=\"tab-content\">\n              @if (hasVisited('providers')) {\n                <mj-communication-providers-resource></mj-communication-providers-resource>\n              }\n            </div>\n          }\n          @case ('templates') {\n            <div class=\"tab-content\">\n              @if (hasVisited('templates')) {\n                <mj-communication-templates-resource></mj-communication-templates-resource>\n              }\n            </div>\n          }\n          @case ('runs') {\n            <div class=\"tab-content\">\n              @if (hasVisited('runs')) {\n                <mj-communication-runs-resource></mj-communication-runs-resource>\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["/* ============================================================ */\n/* MD3 COMMUNICATION DASHBOARD                                  */\n/* ============================================================ */\n.communication-dashboard-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    background: var(--mat-sys-surface-container);\n    color: var(--mat-sys-on-surface);\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    overflow: hidden;\n}\n\n/* ============================================================ */\n/* TOOLBAR                                                      */\n/* ============================================================ */\n.studio-toolbar {\n    display: flex;\n    align-items: center;\n    padding: 0 12px;\n    background: var(--mat-sys-surface-container-lowest);\n    border-bottom: 1px solid var(--mat-sys-outline-variant);\n    min-height: 48px;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.toolbar-brand {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 0 8px;\n}\n\n.brand-icon {\n    width: 32px;\n    height: 32px;\n    border-radius: var(--mat-sys-corner-small, 8px);\n    background: linear-gradient(135deg, var(--mat-sys-primary-container), color-mix(in srgb, var(--mat-sys-primary-container) 60%, var(--mat-sys-primary)));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mat-sys-primary);\n    font-size: 14px;\n}\n\n.brand-label {\n    font-weight: 700;\n    font-size: 14px;\n    color: var(--mat-sys-on-surface);\n    letter-spacing: -0.01em;\n}\n\n.toolbar-divider {\n    width: 1px;\n    height: 24px;\n    background: var(--mat-sys-outline-variant);\n    margin: 0 4px;\n}\n\n.toolbar-spacer {\n    flex: 1;\n}\n\n.tb-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border: 1px solid var(--mat-sys-outline-variant);\n    border-radius: var(--mat-sys-corner-extra-small, 4px);\n    background: var(--mat-sys-surface-container-lowest);\n    color: var(--mat-sys-on-surface-variant);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-family: inherit;\n}\n\n.tb-btn:hover {\n    background: var(--mat-sys-surface-container-high);\n    border-color: var(--mat-sys-outline);\n    color: var(--mat-sys-on-surface);\n}\n\n.tb-btn i {\n    font-size: 12px;\n}\n\n@keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n.spinning {\n    animation: spin 1s linear infinite;\n}\n\n/* ============================================================ */\n/* BODY LAYOUT                                                  */\n/* ============================================================ */\n.dashboard-body {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n/* ============================================================ */\n/* SIDEBAR                                                      */\n/* ============================================================ */\n.sidebar {\n    width: 220px;\n    background: var(--mat-sys-surface-container-lowest);\n    border-right: 1px solid var(--mat-sys-outline-variant);\n    padding: 12px 8px;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    flex-shrink: 0;\n}\n\n.sidebar-section-label {\n    font-size: 10px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.8px;\n    color: var(--mat-sys-on-surface-variant);\n    padding: 12px 12px 6px;\n}\n\n.nav-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    border-radius: var(--mat-sys-corner-small, 8px);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    color: var(--mat-sys-on-surface-variant);\n    font-size: 13px;\n    font-weight: 500;\n}\n\n.nav-item:hover {\n    background: var(--mat-sys-surface-container);\n    color: var(--mat-sys-on-surface);\n}\n\n.nav-item.selected {\n    background: var(--mat-sys-primary-container);\n    color: var(--mat-sys-on-primary-container);\n    font-weight: 600;\n}\n\n.nav-item i {\n    width: 18px;\n    text-align: center;\n    font-size: 13px;\n}\n\n.sidebar-footer {\n    margin-top: auto;\n    padding-top: 8px;\n    border-top: 1px solid var(--mat-sys-outline-variant);\n}\n\n/* ============================================================ */\n/* MAIN CONTENT                                                 */\n/* ============================================================ */\n.main-content {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: var(--mat-sys-surface-container);\n}\n\n.tab-container {\n    height: 100%;\n}\n\n.tab-content {\n    height: 100%;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationDashboardComponent, { className: "CommunicationDashboardComponent", filePath: "src/communication/communication-dashboard.component.ts", lineNumber: 21 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationDashboardComponent, { className: "CommunicationDashboardComponent", filePath: "src/Communication/communication-dashboard.component.ts", lineNumber: 21 }); })();
 //# sourceMappingURL=communication-dashboard.component.js.map

package/dist/Communication/communication-logs-resource.component.js

@@ -376,5 +376,5 @@ export { CommunicationLogsResourceComponent };
     </div>
     `, styles: ["\n    .logs-wrapper {\n        height: 100%;\n        padding: 24px;\n        background: var(--mat-sys-surface-container);\n    }\n    .card {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n    }\n\n    /* TOOLBAR */\n    .logs-toolbar {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 12px 20px;\n        border-bottom: 1px solid var(--mat-sys-outline-variant);\n        background: var(--mat-sys-surface-container-low);\n        flex-shrink: 0;\n    }\n    .search-input-wrapper {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        flex: 1;\n        max-width: 400px;\n        padding: 6px 12px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-small, 8px);\n        background: var(--mat-sys-surface-container-lowest);\n        transition: border-color 0.15s, box-shadow 0.15s;\n    }\n    .search-input-wrapper:focus-within {\n        border-color: var(--mat-sys-primary);\n        box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);\n    }\n    .search-input-wrapper i { color: var(--mat-sys-on-surface-variant); font-size: 12px; }\n    .search-input-wrapper input {\n        flex: 1; border: none; outline: none;\n        background: transparent; font-size: 12px;\n        font-family: inherit; color: var(--mat-sys-on-surface);\n    }\n    .search-input-wrapper input::placeholder { color: var(--mat-sys-on-surface-variant); }\n\n    .filter-chip {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 4px 10px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: 16px;\n        background: var(--mat-sys-surface-container-lowest);\n        font-size: 11px; font-weight: 500;\n        color: var(--mat-sys-on-surface-variant);\n        cursor: pointer; transition: all 0.15s;\n    }\n    .filter-chip:hover {\n        border-color: var(--mat-sys-outline);\n        background: var(--mat-sys-surface-container);\n    }\n    .filter-chip.active {\n        border-color: var(--mat-sys-primary);\n        background: var(--mat-sys-primary-container);\n        color: var(--mat-sys-on-primary-container);\n    }\n    .filter-chip i { font-size: 10px; }\n\n    .toolbar-spacer { flex: 1; }\n\n    .tb-btn {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 6px 12px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        background: var(--mat-sys-surface-container-lowest);\n        color: var(--mat-sys-on-surface-variant);\n        font-size: 12px; font-weight: 500;\n        cursor: pointer; transition: all 0.15s ease;\n        font-family: inherit;\n    }\n    .tb-btn:hover {\n        background: var(--mat-sys-surface-container-high);\n        border-color: var(--mat-sys-outline);\n        color: var(--mat-sys-on-surface);\n    }\n    .tb-btn i { font-size: 12px; }\n\n    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n    .spinning { animation: spin 1s linear infinite; }\n\n    /* TABLE */\n    .table-wrapper { flex: 1; overflow-y: auto; }\n\n    .log-table {\n        width: 100%;\n        border-collapse: collapse;\n        font-size: 12px;\n    }\n    .log-table thead {\n        background: var(--mat-sys-surface-container-low);\n        position: sticky; top: 0; z-index: 1;\n    }\n    .log-table th {\n        padding: 10px 16px;\n        text-align: left;\n        font-weight: 700; font-size: 10px;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mat-sys-on-surface-variant);\n        border-bottom: 1px solid var(--mat-sys-outline-variant);\n        white-space: nowrap;\n    }\n    .log-table td {\n        padding: 12px 16px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        color: var(--mat-sys-on-surface);\n        vertical-align: middle;\n    }\n    .log-table tbody tr { transition: background 0.15s; }\n    .log-table tbody tr:hover { background: var(--mat-sys-surface-container-low); }\n\n    .log-status-badge {\n        display: inline-flex; align-items: center;\n        gap: 4px; font-size: 11px; font-weight: 600;\n        padding: 3px 10px;\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n    }\n    .log-status-badge.complete { background: #d4f8e0; color: #1b873f; }\n    .log-status-badge.failed { background: #ffdce0; color: #cf222e; }\n    .log-status-badge.pending { background: #fff0c7; color: #9a6700; }\n    .log-status-badge.in-progress { background: #ddf4ff; color: #0969da; }\n\n    .log-direction {\n        display: flex; align-items: center;\n        gap: 4px; font-size: 11px;\n        color: var(--mat-sys-on-surface-variant);\n    }\n    .log-direction i { font-size: 10px; }\n    .log-direction.sending i { color: var(--mat-sys-primary); }\n    .log-direction.receiving i { color: #1b873f; }\n\n    .log-provider-badge {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 3px 10px;\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        background: var(--mat-sys-surface-container);\n        font-weight: 500;\n    }\n\n    .log-error-text {\n        color: #cf222e;\n        max-width: 200px;\n        overflow: hidden; text-overflow: ellipsis;\n        white-space: nowrap; font-size: 11px;\n        display: block;\n    }\n    .no-error { color: var(--mat-sys-on-surface-variant); }\n\n    .no-data { padding: 0 !important; }\n    .empty-state {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 48px 0; color: var(--mat-sys-on-surface-variant);\n    }\n    .empty-state i { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state p { margin: 0; font-size: 13px; }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationLogsResourceComponent, { className: "CommunicationLogsResourceComponent", filePath: "src/communication/communication-logs-resource.component.ts", lineNumber: 273 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationLogsResourceComponent, { className: "CommunicationLogsResourceComponent", filePath: "src/Communication/communication-logs-resource.component.ts", lineNumber: 273 }); })();
 //# sourceMappingURL=communication-logs-resource.component.js.map

package/dist/Communication/communication-monitor-resource.component.js

@@ -661,5 +661,5 @@ export { CommunicationMonitorResourceComponent };
     </div>
     `, styles: ["\n    /* ============================================================ */\n    /* MD3 MONITOR RESOURCE                                        */\n    /* ============================================================ */\n    .monitor-wrapper {\n        height: 100%;\n        overflow-y: auto;\n        background: var(--mat-sys-surface-container);\n    }\n    .monitor-container {\n        padding: 24px;\n        min-height: 100%;\n        max-width: 1600px;\n        margin: 0 auto;\n    }\n\n    /* KPI STRIP */\n    .kpi-strip {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 16px;\n        margin-bottom: 24px;\n    }\n    .kpi-card {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        padding: 20px;\n        display: flex;\n        align-items: flex-start;\n        gap: 16px;\n        transition: all 0.15s ease;\n        position: relative;\n        overflow: hidden;\n    }\n    .kpi-card:hover {\n        box-shadow: var(--mat-sys-elevation-1);\n        border-color: var(--mat-sys-outline);\n    }\n    .kpi-card::before {\n        content: '';\n        position: absolute;\n        top: 0; left: 0; right: 0;\n        height: 3px;\n    }\n    .kpi-card.sent::before { background: var(--mat-sys-primary); }\n    .kpi-card.delivered::before { background: #1b873f; }\n    .kpi-card.pending::before { background: #9a6700; }\n    .kpi-card.failed::before { background: #cf222e; }\n\n    .kpi-icon {\n        width: 44px; height: 44px;\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .kpi-card.sent .kpi-icon { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .kpi-card.delivered .kpi-icon { background: #d4f8e0; color: #1b873f; }\n    .kpi-card.pending .kpi-icon { background: #fff0c7; color: #9a6700; }\n    .kpi-card.failed .kpi-icon { background: #ffdce0; color: #cf222e; }\n\n    .kpi-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }\n    .kpi-label {\n        font-size: 11px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mat-sys-on-surface-variant);\n    }\n    .kpi-value {\n        font-size: 28px; font-weight: 800;\n        color: var(--mat-sys-on-surface);\n        letter-spacing: -0.02em; line-height: 1.1;\n    }\n    .kpi-delta {\n        display: inline-flex; align-items: center;\n        gap: 4px; font-size: 11px; font-weight: 600;\n        margin-top: 4px; padding: 2px 8px;\n        border-radius: 10px; width: fit-content;\n    }\n    .kpi-delta.up { background: #d4f8e0; color: #1b873f; }\n    .kpi-delta.down { background: #ffdce0; color: #cf222e; }\n    .kpi-delta.neutral { background: var(--mat-sys-surface-container); color: var(--mat-sys-on-surface-variant); }\n\n    .delivery-bar {\n        height: 6px; margin-top: 10px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .delivery-fill {\n        height: 100%; border-radius: 3px;\n        background: #1b873f; transition: width 0.6s ease;\n    }\n\n    /* CONTENT GRID */\n    .content-grid {\n        display: grid;\n        grid-template-columns: 1.6fr 1fr;\n        gap: 16px;\n        margin-bottom: 16px;\n    }\n\n    .card {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        overflow: hidden;\n    }\n    .card-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 16px 20px 12px;\n        border-bottom: 1px solid var(--mat-sys-outline-variant);\n    }\n    .card-header h3 {\n        font-size: 13px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        display: flex; align-items: center; gap: 8px;\n        margin: 0;\n    }\n    .card-header h3 i {\n        color: var(--mat-sys-on-surface-variant);\n        font-size: 12px;\n    }\n    .card-body { padding: 16px 20px; }\n    .card-body.no-padding { padding: 0; }\n\n    .chart-container-inner {\n        padding: 16px 20px;\n        min-height: 300px;\n    }\n\n    /* ACTIVITY FEED */\n    .activity-feed { max-height: 370px; overflow-y: auto; }\n    .activity-item {\n        display: flex; align-items: center; gap: 12px;\n        padding: 12px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        transition: background 0.15s ease; cursor: pointer;\n    }\n    .activity-item:last-child { border-bottom: none; }\n    .activity-item:hover { background: var(--mat-sys-surface-container-low); }\n\n    .activity-icon {\n        width: 34px; height: 34px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 12px; flex-shrink: 0;\n    }\n    .activity-icon.email { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .activity-icon.sms { background: #e8f5e9; color: #2e7d32; }\n    .activity-icon.error { background: #ffdce0; color: #cf222e; }\n\n    .activity-body { flex: 1; min-width: 0; }\n    .activity-title {\n        font-size: 12px; font-weight: 600;\n        color: var(--mat-sys-on-surface);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n        display: block;\n    }\n    .activity-meta {\n        font-size: 11px; color: var(--mat-sys-on-surface-variant); margin-top: 1px;\n        display: block;\n    }\n    .activity-status {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.3px;\n        padding: 3px 8px;\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        flex-shrink: 0;\n    }\n    .activity-status.complete { background: #d4f8e0; color: #1b873f; }\n    .activity-status.failed { background: #ffdce0; color: #cf222e; }\n    .activity-status.pending { background: #fff0c7; color: #9a6700; }\n\n    /* PROVIDER HEALTH */\n    .provider-health-list { display: flex; flex-direction: column; }\n    .provider-row {\n        display: flex; align-items: center; gap: 12px;\n        padding: 14px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        transition: background 0.15s ease;\n    }\n    .provider-row:last-child { border-bottom: none; }\n    .provider-row:hover { background: var(--mat-sys-surface-container-low); }\n\n    .provider-status-dot {\n        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;\n        background: var(--mat-sys-outline);\n    }\n    .provider-status-dot.active { background: #1b873f; }\n\n    .provider-logo {\n        width: 36px; height: 36px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        background: var(--mat-sys-surface-container);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .provider-logo.sendgrid { color: #1A82E2; }\n    .provider-logo.twilio { color: #F22F46; }\n    .provider-logo.gmail { color: #EA4335; }\n    .provider-logo.msgraph { color: #0078D4; }\n\n    .provider-info { flex: 1; }\n    .provider-name { font-size: 13px; font-weight: 600; color: var(--mat-sys-on-surface); }\n    .provider-type { font-size: 11px; color: var(--mat-sys-on-surface-variant); }\n\n    .provider-health-bar {\n        width: 80px; height: 6px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .provider-health-fill {\n        height: 100%; border-radius: 3px;\n        transition: width 0.4s ease;\n    }\n    .provider-health-fill.excellent { background: #1b873f; }\n    .provider-health-fill.good { background: #66bb6a; }\n    .provider-health-fill.warning { background: #9a6700; }\n    .provider-health-fill.critical { background: #cf222e; }\n\n    .provider-rate {\n        font-size: 12px; font-weight: 700;\n        min-width: 44px; text-align: right;\n    }\n    .provider-rate.excellent { color: #1b873f; }\n    .provider-rate.good { color: #66bb6a; }\n    .provider-rate.warning { color: #9a6700; }\n    .provider-rate.critical { color: #cf222e; }\n\n    /* CHANNEL BREAKDOWN */\n    .channel-breakdown { display: flex; flex-direction: column; }\n    .channel-row {\n        display: flex; align-items: center; gap: 12px;\n        padding: 14px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n    }\n    .channel-row:last-child { border-bottom: none; }\n    .channel-icon {\n        width: 32px; height: 32px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 13px; flex-shrink: 0;\n    }\n    .channel-icon.email { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .channel-icon.sms { background: #e8f5e9; color: #2e7d32; }\n\n    .channel-info { flex: 1; }\n    .channel-name { font-size: 12px; font-weight: 600; color: var(--mat-sys-on-surface); }\n    .channel-count { font-size: 11px; color: var(--mat-sys-on-surface-variant); }\n\n    .channel-bar-wrapper {\n        width: 100px; height: 6px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .channel-bar-fill { height: 100%; border-radius: 3px; }\n    .channel-pct {\n        font-size: 12px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        min-width: 36px; text-align: right;\n    }\n\n    /* EMPTY STATE */\n    .empty-state {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 40px 0; color: var(--mat-sys-on-surface-variant);\n    }\n    .empty-state i { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state p { margin: 0; font-size: 13px; }\n\n    @media (max-width: 1200px) {\n        .kpi-strip { grid-template-columns: repeat(2, 1fr); }\n        .content-grid { grid-template-columns: 1fr; }\n    }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationMonitorResourceComponent, { className: "CommunicationMonitorResourceComponent", filePath: "src/communication/communication-monitor-resource.component.ts", lineNumber: 479 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationMonitorResourceComponent, { className: "CommunicationMonitorResourceComponent", filePath: "src/Communication/communication-monitor-resource.component.ts", lineNumber: 479 }); })();
 //# sourceMappingURL=communication-monitor-resource.component.js.map

package/dist/Communication/communication-providers-resource.component.js

@@ -372,5 +372,5 @@ export { CommunicationProvidersResourceComponent };
     </div>
     `, styles: ["\n    .providers-wrapper {\n        height: 100%;\n        padding: 24px;\n        overflow-y: auto;\n        background: var(--mat-sys-surface-container);\n    }\n    .providers-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-start;\n        margin-bottom: 20px;\n    }\n    .providers-header h2 {\n        margin: 0;\n        font-size: 18px;\n        font-weight: 800;\n        color: var(--mat-sys-on-surface);\n    }\n    .providers-header p {\n        margin: 4px 0 0;\n        font-size: 13px;\n        color: var(--mat-sys-on-surface-variant);\n    }\n\n    .tb-btn {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 8px 16px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        background: var(--mat-sys-surface-container-lowest);\n        color: var(--mat-sys-on-surface-variant);\n        font-size: 12px; font-weight: 600;\n        cursor: pointer; transition: all 0.15s ease;\n        font-family: inherit;\n    }\n    .tb-btn.primary {\n        background: var(--mat-sys-primary);\n        color: var(--mat-sys-on-primary, #fff);\n        border-color: var(--mat-sys-primary);\n    }\n    .tb-btn.primary:hover { filter: brightness(1.1); }\n\n    .loading-state {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 80px 0;\n    }\n\n    /* GRID */\n    .providers-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n        gap: 16px;\n    }\n    .provider-card {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        overflow: hidden;\n        transition: all 0.15s ease;\n    }\n    .provider-card:hover {\n        box-shadow: 0 2px 6px 2px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);\n        border-color: var(--mat-sys-outline);\n    }\n    .provider-card.disabled { opacity: 0.65; }\n\n    .provider-card-header {\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        padding: 20px 20px 16px;\n    }\n    .provider-card-logo {\n        width: 48px; height: 48px;\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 22px; flex-shrink: 0;\n        background: var(--mat-sys-surface-container);\n    }\n    .provider-card-logo.sendgrid { background: #E8F4FD; color: #1A82E2; }\n    .provider-card-logo.twilio { background: #FEECEE; color: #F22F46; }\n    .provider-card-logo.gmail { background: #FEECED; color: #EA4335; }\n    .provider-card-logo.msgraph { background: #E6F0FA; color: #0078D4; }\n\n    .provider-card-title { flex: 1; min-width: 0; }\n    .provider-card-name {\n        font-size: 15px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .provider-card-desc {\n        font-size: 12px;\n        color: var(--mat-sys-on-surface-variant);\n        margin-top: 2px;\n    }\n    .provider-card-status {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        padding: 3px 10px; border-radius: 10px;\n        flex-shrink: 0;\n    }\n    .provider-card-status.active { background: #d4f8e0; color: #1b873f; }\n    .provider-card-status.disabled { background: var(--mat-sys-surface-container-high); color: var(--mat-sys-on-surface-variant); }\n\n    .provider-card-body { padding: 0 20px 16px; }\n\n    .provider-capabilities {\n        display: flex; flex-wrap: wrap;\n        gap: 6px; margin-bottom: 16px;\n    }\n    .capability-chip {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 4px 10px;\n        border-radius: 12px; font-size: 11px; font-weight: 500;\n    }\n    .capability-chip.supported { background: #d4f8e0; color: #1b873f; }\n    .capability-chip.unsupported {\n        background: var(--mat-sys-surface-container);\n        color: var(--mat-sys-outline);\n        text-decoration: line-through;\n    }\n\n    .provider-card-stats {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 12px; padding: 12px;\n        background: var(--mat-sys-surface-container-low);\n        border-radius: var(--mat-sys-corner-small, 8px);\n    }\n    .provider-stat { text-align: center; }\n    .provider-stat-value {\n        font-size: 16px; font-weight: 800;\n        color: var(--mat-sys-on-surface);\n    }\n    .provider-stat-label {\n        font-size: 10px;\n        color: var(--mat-sys-on-surface-variant);\n        text-transform: uppercase; letter-spacing: 0.3px;\n    }\n\n    .provider-card-footer {\n        display: flex;\n        border-top: 1px solid var(--mat-sys-outline-variant);\n    }\n    .provider-card-footer button {\n        flex: 1; padding: 12px;\n        border: none; background: transparent;\n        font-size: 12px; font-weight: 600;\n        color: var(--mat-sys-primary);\n        cursor: pointer; transition: background 0.15s;\n        font-family: inherit;\n        display: flex; align-items: center;\n        justify-content: center; gap: 6px;\n    }\n    .provider-card-footer button:hover {\n        background: var(--mat-sys-surface-container-low);\n    }\n    .provider-card-footer button + button {\n        border-left: 1px solid var(--mat-sys-outline-variant);\n    }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.NavigationService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationProvidersResourceComponent, { className: "CommunicationProvidersResourceComponent", filePath: "src/communication/communication-providers-resource.component.ts", lineNumber: 276 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationProvidersResourceComponent, { className: "CommunicationProvidersResourceComponent", filePath: "src/Communication/communication-providers-resource.component.ts", lineNumber: 276 }); })();
 //# sourceMappingURL=communication-providers-resource.component.js.map

package/dist/Communication/communication-runs-resource.component.js

@@ -296,5 +296,5 @@ export { CommunicationRunsResourceComponent };
     </div>
     `, styles: ["\n    .runs-wrapper {\n        height: 100%;\n        padding: 24px;\n        overflow-y: auto;\n        background: var(--mat-sys-surface-container);\n    }\n    .card {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        overflow: hidden;\n    }\n    .card-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 16px 20px 12px;\n        border-bottom: 1px solid var(--mat-sys-outline-variant);\n    }\n    .card-header h3 {\n        font-size: 13px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        display: flex; align-items: center; gap: 8px;\n        margin: 0;\n    }\n    .card-header h3 i {\n        color: var(--mat-sys-on-surface-variant); font-size: 12px;\n    }\n    .header-actions { display: flex; gap: 8px; }\n\n    .tb-btn {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 6px 12px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        background: var(--mat-sys-surface-container-lowest);\n        color: var(--mat-sys-on-surface-variant);\n        font-size: 12px; font-weight: 500;\n        cursor: pointer; transition: all 0.15s ease;\n        font-family: inherit;\n    }\n    .tb-btn:hover {\n        background: var(--mat-sys-surface-container-high);\n        border-color: var(--mat-sys-outline);\n        color: var(--mat-sys-on-surface);\n    }\n    .tb-btn i { font-size: 12px; }\n\n    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n    .spinning { animation: spin 1s linear infinite; }\n\n    .card-body.no-padding { padding: 0; }\n\n    /* SUMMARY */\n    .runs-summary {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 16px;\n        padding: 20px;\n    }\n    .run-stat-card {\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        padding: 16px 20px;\n        text-align: center;\n    }\n    .run-stat-card.info { background: #ddf4ff; }\n    .run-stat-card.success { background: #d4f8e0; }\n    .run-stat-card.neutral { background: var(--mat-sys-surface-container-low); }\n\n    .run-stat-value {\n        font-size: 24px; font-weight: 800;\n        color: var(--mat-sys-on-surface);\n    }\n    .run-stat-card.info .run-stat-value { color: #0969da; }\n    .run-stat-card.success .run-stat-value { color: #1b873f; }\n\n    .run-stat-label {\n        font-size: 11px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mat-sys-on-surface-variant);\n        margin-top: 2px;\n    }\n\n    /* TIMELINE */\n    .run-timeline { padding: 8px 20px 20px; }\n    .run-entry {\n        display: flex; gap: 16px;\n        padding: 16px 0;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        align-items: flex-start;\n    }\n    .run-entry:last-child { border-bottom: none; }\n\n    .run-timeline-dot {\n        width: 12px; height: 12px;\n        border-radius: 50%;\n        margin-top: 4px; flex-shrink: 0;\n    }\n    .run-timeline-dot.complete { background: #1b873f; }\n    .run-timeline-dot.failed { background: #cf222e; }\n    .run-timeline-dot.in-progress {\n        background: #0969da;\n        animation: pulse-dot 1.5s ease-in-out infinite;\n    }\n    .run-timeline-dot.pending { background: #9a6700; }\n\n    @keyframes pulse-dot {\n        0%, 100% { box-shadow: 0 0 0 0 rgba(9,105,218,0.4); }\n        50% { box-shadow: 0 0 0 6px rgba(9,105,218,0); }\n    }\n\n    .run-entry-content { flex: 1; }\n    .run-entry-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .run-entry-title {\n        font-size: 13px; font-weight: 600;\n        color: var(--mat-sys-on-surface);\n    }\n    .run-status-badge {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.3px;\n        padding: 3px 8px;\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n    }\n    .run-status-badge.complete { background: #d4f8e0; color: #1b873f; }\n    .run-status-badge.failed { background: #ffdce0; color: #cf222e; }\n    .run-status-badge.pending { background: #fff0c7; color: #9a6700; }\n    .run-status-badge.in-progress { background: #ddf4ff; color: #0969da; }\n\n    .run-entry-meta {\n        font-size: 11px;\n        color: var(--mat-sys-on-surface-variant);\n        margin-top: 4px;\n        display: flex; align-items: center; gap: 12px;\n    }\n    .run-entry-meta span {\n        display: flex; align-items: center; gap: 4px;\n    }\n    .run-entry-meta i { font-size: 10px; }\n\n    .run-entry-comments {\n        font-size: 12px;\n        color: var(--mat-sys-on-surface-variant);\n        margin-top: 6px;\n        font-style: italic;\n    }\n\n    /* EMPTY STATE */\n    .empty-state {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 48px 0; color: var(--mat-sys-on-surface-variant);\n    }\n    .empty-state i { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state p { margin: 0; font-size: 13px; }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationRunsResourceComponent, { className: "CommunicationRunsResourceComponent", filePath: "src/communication/communication-runs-resource.component.ts", lineNumber: 238 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationRunsResourceComponent, { className: "CommunicationRunsResourceComponent", filePath: "src/Communication/communication-runs-resource.component.ts", lineNumber: 238 }); })();
 //# sourceMappingURL=communication-runs-resource.component.js.map

package/dist/Communication/communication-templates-resource.component.js

@@ -384,5 +384,5 @@ export { CommunicationTemplatesResourceComponent };
     </div>
     `, styles: ["\n    .templates-wrapper {\n        height: 100%;\n        padding: 24px;\n        overflow-y: auto;\n        background: var(--mat-sys-surface-container);\n    }\n\n    /* HEADER */\n    .templates-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-start;\n        margin-bottom: 20px;\n    }\n    .templates-header h2 {\n        margin: 0;\n        font-size: 18px;\n        font-weight: 800;\n        color: var(--mat-sys-on-surface);\n    }\n    .templates-header p {\n        margin: 4px 0 0;\n        font-size: 13px;\n        color: var(--mat-sys-on-surface-variant);\n    }\n    .header-actions {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n    }\n    .search-input-wrapper {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 6px 12px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-small, 8px);\n        background: var(--mat-sys-surface-container-lowest);\n        transition: border-color 0.15s, box-shadow 0.15s;\n        min-width: 220px;\n    }\n    .search-input-wrapper:focus-within {\n        border-color: var(--mat-sys-primary);\n        box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);\n    }\n    .search-input-wrapper i { color: var(--mat-sys-on-surface-variant); font-size: 12px; }\n    .search-input-wrapper input {\n        flex: 1; border: none; outline: none;\n        background: transparent; font-size: 12px;\n        font-family: inherit; color: var(--mat-sys-on-surface);\n    }\n    .search-input-wrapper input::placeholder { color: var(--mat-sys-on-surface-variant); }\n\n    .tb-btn {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 8px 16px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        background: var(--mat-sys-surface-container-lowest);\n        color: var(--mat-sys-on-surface-variant);\n        font-size: 12px; font-weight: 600;\n        cursor: pointer; transition: all 0.15s ease;\n        font-family: inherit;\n    }\n    .tb-btn.primary {\n        background: var(--mat-sys-primary);\n        color: var(--mat-sys-on-primary, #fff);\n        border-color: var(--mat-sys-primary);\n    }\n    .tb-btn.primary:hover { filter: brightness(1.1); }\n\n    .loading-state {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 80px 0;\n    }\n\n    /* CATEGORY FILTERS */\n    .category-filters {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 8px;\n        margin-bottom: 20px;\n    }\n    .filter-chip {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 5px 14px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: 16px;\n        background: var(--mat-sys-surface-container-lowest);\n        font-size: 12px; font-weight: 500;\n        color: var(--mat-sys-on-surface-variant);\n        cursor: pointer; transition: all 0.15s;\n    }\n    .filter-chip:hover {\n        border-color: var(--mat-sys-outline);\n        background: var(--mat-sys-surface-container);\n    }\n    .filter-chip.active {\n        border-color: var(--mat-sys-primary);\n        background: var(--mat-sys-primary-container);\n        color: var(--mat-sys-on-primary-container);\n    }\n\n    /* GRID */\n    .templates-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n        gap: 16px;\n    }\n\n    .template-card {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        padding: 20px;\n        cursor: pointer;\n        transition: all 0.15s ease;\n    }\n    .template-card:hover {\n        box-shadow: 0 2px 6px 2px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);\n        border-color: var(--mat-sys-outline);\n    }\n\n    .template-card-header {\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        margin-bottom: 12px;\n    }\n    .template-icon {\n        width: 40px; height: 40px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        background: var(--mat-sys-primary-container);\n        color: var(--mat-sys-on-primary-container);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .template-title-area { flex: 1; min-width: 0; }\n    .template-name {\n        font-size: 14px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .template-category {\n        font-size: 11px;\n        color: var(--mat-sys-on-surface-variant);\n        margin-top: 2px;\n    }\n\n    .template-description {\n        font-size: 12px;\n        color: var(--mat-sys-on-surface-variant);\n        line-height: 1.5;\n        margin-bottom: 12px;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n    }\n\n    .template-meta {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .template-content-types {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 6px;\n    }\n    .content-type-chip {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 3px 8px;\n        border-radius: 10px; font-size: 10px; font-weight: 500;\n        background: var(--mat-sys-surface-container);\n        color: var(--mat-sys-on-surface-variant);\n    }\n    .content-type-chip.empty {\n        font-style: italic;\n    }\n    .template-updated {\n        font-size: 10px;\n        color: var(--mat-sys-on-surface-variant);\n        white-space: nowrap;\n    }\n\n    /* EMPTY STATE */\n    .empty-state {\n        grid-column: 1 / -1;\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 64px 0; color: var(--mat-sys-on-surface-variant);\n    }\n    .empty-state i { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state p { margin: 0; font-size: 13px; }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.NavigationService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationTemplatesResourceComponent, { className: "CommunicationTemplatesResourceComponent", filePath: "src/communication/communication-templates-resource.component.ts", lineNumber: 311 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationTemplatesResourceComponent, { className: "CommunicationTemplatesResourceComponent", filePath: "src/Communication/communication-templates-resource.component.ts", lineNumber: 311 }); })();
 //# sourceMappingURL=communication-templates-resource.component.js.map

package/dist/ComponentStudio/component-studio-dashboard.component.js

@@ -988,5 +988,5 @@ export { ComponentStudioDashboardComponent };
             type: HostListener,
             args: ['document:click', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentStudioDashboardComponent, { className: "ComponentStudioDashboardComponent", filePath: "src/componentstudio/component-studio-dashboard.component.ts", lineNumber: 54 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentStudioDashboardComponent, { className: "ComponentStudioDashboardComponent", filePath: "src/ComponentStudio/component-studio-dashboard.component.ts", lineNumber: 54 }); })();
 //# sourceMappingURL=component-studio-dashboard.component.js.map

package/dist/ComponentStudio/components/ai-assistant/ai-assistant-panel.component.js

@@ -396,5 +396,5 @@ export class AIAssistantPanelComponent {
             type: ViewChild,
             args: ['chatInput']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAssistantPanelComponent, { className: "AIAssistantPanelComponent", filePath: "src/componentstudio/components/ai-assistant/ai-assistant-panel.component.ts", lineNumber: 43 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAssistantPanelComponent, { className: "AIAssistantPanelComponent", filePath: "src/ComponentStudio/components/ai-assistant/ai-assistant-panel.component.ts", lineNumber: 43 }); })();
 //# sourceMappingURL=ai-assistant-panel.component.js.map

package/dist/ComponentStudio/components/artifact-load-dialog.component.js

@@ -833,5 +833,5 @@ export class ArtifactLoadDialogComponent {
         type: Component,
         args: [{ standalone: false, selector: 'app-artifact-load-dialog', template: "<div>\n  <kendo-dialog-titlebar (close)=\"cancel()\">\n    <div style=\"font-size: 18px;\">\n      <i class=\"fa-solid fa-database\"></i> Load Component from Artifact\n    </div>\n  </kendo-dialog-titlebar>\n\n  <div class=\"artifact-load-content\">\n    <!-- Left Filter Panel -->\n    <div class=\"filter-panel\" [style.width]=\"isFilterPanelCollapsed ? '40px' : '280px'\">\n      <div class=\"panel-header\">\n        @if (!isFilterPanelCollapsed) {\n          <span>Filters</span>\n        }\n        <button kendoButton (click)=\"toggleFilterPanel()\"\n                [fillMode]=\"'flat'\"\n                [class.filter-active]=\"getActiveFilterCount() > 0\"\n                [themeColor]=\"getActiveFilterCount() > 0 ? 'primary' : 'base'\">\n          <i class=\"fa-solid fa-filter\"></i>\n          @if (isFilterPanelCollapsed && getActiveFilterCount() > 0) {\n            <span class=\"filter-count\">{{ getActiveFilterCount() }}</span>\n          }\n        </button>\n      </div>\n\n      @if (!isFilterPanelCollapsed) {\n        <div class=\"filter-content\">\n          <!-- Search -->\n          <div class=\"filter-group\">\n            <label>Search</label>\n            <input type=\"text\"\n                   [(ngModel)]=\"searchTerm\"\n                   (input)=\"onSearchInput()\"\n                   placeholder=\"Name or description...\"\n                   class=\"filter-input\">\n          </div>\n\n          <!-- Artifact Type -->\n          <div class=\"filter-group\">\n            <label>Artifact Type</label>\n            <select [(ngModel)]=\"selectedArtifactType\"\n                    (change)=\"onArtifactTypeChange()\"\n                    class=\"filter-select\">\n              <option value=\"\">Component (default)</option>\n              <option value=\"Component\">Component</option>\n              <option value=\"Report\">Report</option>\n              <option value=\"Dashboard\">Dashboard</option>\n            </select>\n          </div>\n\n          <!-- User Email -->\n          <div class=\"filter-group\">\n            <label>Filter by User</label>\n            <input type=\"text\"\n                   [(ngModel)]=\"userEmail\"\n                   (input)=\"filterArtifacts()\"\n                   placeholder=\"Enter user email...\"\n                   class=\"filter-input\">\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Main Content Area -->\n    <div class=\"main-content\">\n      <!-- Tabs -->\n      <div class=\"tabs\">\n        <button class=\"tab\"\n                [class.active]=\"activeTab === 0\"\n                (click)=\"onTabSelect(0)\">\n          <i class=\"fa-solid fa-file-code\"></i> All Artifacts\n        </button>\n        <button class=\"tab\"\n                [class.active]=\"activeTab === 1\"\n                (click)=\"onTabSelect(1)\">\n          <i class=\"fa-solid fa-folder\"></i> Collections\n        </button>\n      </div>\n\n      <!-- Tab Content -->\n      <div class=\"tab-content\">\n        <!-- Artifacts Tab -->\n        @if (activeTab === 0) {\n          <div class=\"artifacts-view\">\n            <!-- Paging Controls -->\n            <div class=\"paging-controls\">\n              <button kendoButton\n                      (click)=\"previousPage()\"\n                      [disabled]=\"!canGoPrevious()\"\n                      [themeColor]=\"'base'\">\n                <i class=\"fa-solid fa-chevron-left\"></i> Previous\n              </button>\n              <span class=\"page-info\">\n                Page {{ currentPage + 1 }} of {{ getTotalPages() }}\n                ({{ totalArtifacts }} total)\n              </span>\n              <button kendoButton\n                      (click)=\"nextPage()\"\n                      [disabled]=\"!canGoNext()\"\n                      [themeColor]=\"'base'\">\n                Next <i class=\"fa-solid fa-chevron-right\"></i>\n              </button>\n            </div>\n\n            <!-- Artifacts List -->\n            <div class=\"artifacts-list\">\n              @if (isLoading) {\n                <div class=\"loading-state\">\n                  <mj-loading text=\"Loading artifacts...\" size=\"small\"></mj-loading>\n                </div>\n              }\n              @else if (artifacts.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-inbox\"></i>\n                  <p>No artifacts found</p>\n                </div>\n              }\n              @else {\n                @for (artifact of artifacts; track artifact.ID) {\n                  <div class=\"artifact-item\"\n                       [class.selected]=\"selectedArtifact?.ID === artifact.ID\"\n                       (click)=\"selectArtifact(artifact)\">\n                    <div class=\"artifact-content\">\n                      <div class=\"artifact-main\">\n                        <div class=\"artifact-name\">\n                          <i class=\"fa-solid fa-file-code\"></i>\n                          <span>{{ artifact.Name }}</span>\n                        </div>\n                        @if (artifact.Description) {\n                          <div class=\"artifact-description\">\n                            {{ artifact.Description }}\n                          </div>\n                        }\n                      </div>\n                      <div class=\"artifact-meta\">\n                        <div>{{ artifact.Type }}</div>\n                        <div>{{ artifact.__mj_UpdatedAt | date:'short' }}</div>\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Collections Tab -->\n        @if (activeTab === 1) {\n          <div class=\"collections-view\">\n            <div class=\"collections-list\">\n              @if (isLoadingCollections) {\n                <div class=\"loading-state\">\n                  <mj-loading text=\"Loading collections...\" size=\"small\"></mj-loading>\n                </div>\n              }\n              @else if (collections.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-folder-open\"></i>\n                  <p>No collections found</p>\n                </div>\n              }\n              @else {\n                @for (collection of collections; track collection.ID) {\n                  <div class=\"collection-item\"\n                       [class.selected]=\"selectedCollection?.ID === collection.ID\"\n                       (click)=\"selectCollection(collection)\">\n                    <div class=\"collection-icon\">\n                      <i class=\"fa-solid fa-folder\"></i>\n                    </div>\n                    <div class=\"collection-info\">\n                      <div class=\"collection-name\">{{ collection.Name }}</div>\n                      @if (collection.Description) {\n                        <div class=\"collection-description\">{{ collection.Description }}</div>\n                      }\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n\n            @if (selectedCollection) {\n              <div class=\"collection-artifacts\">\n                <div class=\"section-header\">\n                  <i class=\"fa-solid fa-file-code\"></i>\n                  Artifacts in \"{{ selectedCollection.Name }}\"\n                </div>\n                @if (collectionArtifacts.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-inbox\"></i>\n                    <p>No artifacts in this collection</p>\n                  </div>\n                }\n                @else {\n                  @for (artifact of collectionArtifacts; track artifact.ID) {\n                    <div class=\"artifact-item\"\n                         [class.selected]=\"selectedArtifact?.ID === artifact.ID\"\n                         (click)=\"selectArtifact(artifact)\">\n                      <div class=\"artifact-content\">\n                        <div class=\"artifact-main\">\n                          <div class=\"artifact-name\">\n                            <i class=\"fa-solid fa-file-code\"></i>\n                            <span>{{ artifact.Name }}</span>\n                          </div>\n                          @if (artifact.Description) {\n                            <div class=\"artifact-description\">\n                              {{ artifact.Description }}\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right Version/Preview Panel -->\n    @if (selectedArtifact) {\n      <div class=\"version-panel\">\n        <div class=\"panel-header\">\n          <h4><i class=\"fa-solid fa-code-branch\"></i> Versions</h4>\n        </div>\n\n        <div class=\"version-content\">\n          @if (isLoadingVersions) {\n            <div class=\"loading-state\">\n              <mj-loading text=\"Loading versions...\" size=\"small\"></mj-loading>\n            </div>\n          }\n          @else if (artifactVersions.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-info-circle\"></i>\n              <p>No versions available</p>\n            </div>\n          }\n          @else {\n            <div class=\"version-list\">\n              @for (version of artifactVersions; track version.ID) {\n                <div class=\"version-item\"\n                     [class.selected]=\"selectedVersion?.ID === version.ID\"\n                     (click)=\"selectVersion(version)\">\n                  <div class=\"version-number\">\n                    <i class=\"fa-solid fa-code-branch\"></i>\n                    Version {{ version.VersionNumber }}\n                  </div>\n                  <div class=\"version-meta\">\n                    <div>{{ version.__mj_UpdatedAt | date:'short' }}</div>\n                    @if (version.Comments) {\n                      <div class=\"version-comments\">{{ version.Comments }}</div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n\n            <!-- Preview Section -->\n            @if (selectedVersion) {\n              <div class=\"preview-section\">\n                <div class=\"preview-header\">\n                  <i class=\"fa-solid fa-eye\"></i> Preview\n                </div>\n                @if (previewError) {\n                  <div class=\"preview-error\">\n                    <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                    {{ previewError }}\n                  </div>\n                }\n                @else if (previewSpec) {\n                  <div class=\"preview-content\">\n                    <div class=\"preview-item\">\n                      <strong>Name:</strong> {{ previewSpec.name }}\n                    </div>\n                    @if (previewSpec.description) {\n                      <div class=\"preview-item\">\n                        <strong>Description:</strong> {{ previewSpec.description }}\n                      </div>\n                    }\n                    @if (previewSpec.type) {\n                      <div class=\"preview-item\">\n                        <strong>Type:</strong> {{ previewSpec.type }}\n                      </div>\n                    }\n                    @if (previewSpec.namespace) {\n                      <div class=\"preview-item\">\n                        <strong>Namespace:</strong> {{ previewSpec.namespace }}\n                      </div>\n                    }\n                    <div class=\"preview-item\">\n                      <strong>Has Code:</strong> {{ previewSpec.code ? 'Yes' : 'No' }}\n                    </div>\n                    @if (previewSpec.dependencies && previewSpec.dependencies.length > 0) {\n                      <div class=\"preview-item\">\n                        <strong>Dependencies:</strong> {{ previewSpec.dependencies.length }}\n                      </div>\n                    }\n\n                    <!-- Full Spec JSON Viewer -->\n                    <div class=\"preview-json-section\">\n                      <div class=\"preview-json-header\" (click)=\"toggleJsonPreview()\">\n                        <i class=\"fa-solid\" [class.fa-chevron-right]=\"!showJsonPreview\" [class.fa-chevron-down]=\"showJsonPreview\"></i>\n                        <strong>Full Specification (JSON)</strong>\n                      </div>\n                      @if (showJsonPreview) {\n                        <div class=\"preview-json-content\">\n                          <mj-code-editor\n                            [value]=\"getPreviewJSON()\"\n                            [language]=\"'json'\"\n                            [readonly]=\"true\"\n                            [lineWrapping]=\"true\"\n                            [setup]=\"'basic'\"\n                            style=\"height: 300px; width: 100%;\">\n                          </mj-code-editor>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <kendo-dialog-actions>\n    <button kendoButton\n            [themeColor]=\"'primary'\"\n            (click)=\"load()\"\n            [disabled]=\"!canLoad()\">\n      <i class=\"fa-solid fa-download\"></i>\n      Load Component\n    </button>\n    <button kendoButton (click)=\"cancel()\">Cancel</button>\n  </kendo-dialog-actions>\n</div>\n", styles: ["/* Main container */\n.artifact-load-content {\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n\n/* Filter Panel */\n.filter-panel {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid #ddd;\n  transition: width 0.3s ease;\n  flex-shrink: 0;\n  background: #fafafa;\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  border-bottom: 1px solid #eee;\n  font-weight: bold;\n  color: #666;\n}\n\n.filter-content {\n  flex: 1;\n  padding: 15px;\n  overflow-y: auto;\n}\n\n.filter-group {\n  margin-bottom: 15px;\n}\n\n.filter-group label {\n  display: block;\n  margin-bottom: 5px;\n  font-weight: 500;\n  color: #555;\n}\n\n.filter-input,\n.filter-select {\n  width: 100%;\n  padding: 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.filter-input:focus,\n.filter-select:focus {\n  outline: none;\n  border-color: #2196f3;\n  box-shadow: 0 0 3px rgba(33, 150, 243, 0.3);\n}\n\n.filter-count {\n  background: #fff;\n  color: #2196f3;\n  border-radius: 50%;\n  min-width: 18px;\n  height: 18px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  font-weight: bold;\n  margin-left: 4px;\n}\n\n/* Main Content Panel */\n.main-content {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  min-width: 0;\n}\n\n/* Tabs */\n.tabs {\n  display: flex;\n  border-bottom: 1px solid #ddd;\n  background: #fafafa;\n}\n\n.tab {\n  padding: 12px 20px;\n  border: none;\n  background: transparent;\n  color: #666;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  border-bottom: 2px solid transparent;\n  transition: all 0.2s;\n}\n\n.tab:hover {\n  background: #f0f0f0;\n  color: #333;\n}\n\n.tab.active {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n  background: white;\n}\n\n.tab i {\n  margin-right: 6px;\n}\n\n/* Tab Content */\n.tab-content {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.artifacts-view,\n.collections-view {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* Paging Controls */\n.paging-controls {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n  border-bottom: 1px solid #eee;\n  background: white;\n}\n\n.page-info {\n  color: #666;\n  font-size: 14px;\n}\n\n/* Artifacts List */\n.artifacts-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 10px 15px;\n  background: white;\n}\n\n.artifact-item {\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  margin: 10px 0;\n  padding: 15px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: white;\n}\n\n.artifact-item:hover {\n  border-color: #2196f3;\n  background: #fafafa;\n}\n\n.artifact-item.selected {\n  border-color: #2196f3;\n  background: #e8f4f8;\n}\n\n.artifact-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n.artifact-main {\n  flex: 1;\n}\n\n.artifact-name {\n  display: flex;\n  align-items: center;\n  margin-bottom: 5px;\n}\n\n.artifact-name i {\n  color: #666;\n  margin-right: 8px;\n}\n\n.artifact-name span {\n  font-weight: 600;\n  color: #333;\n}\n\n.artifact-description {\n  color: #666;\n  font-size: 14px;\n  margin-top: 4px;\n}\n\n.artifact-meta {\n  text-align: right;\n  color: #999;\n  font-size: 12px;\n}\n\n/* Collections View */\n.collections-view {\n  display: grid;\n  grid-template-columns: 1fr 1.5fr;\n  gap: 15px;\n  padding: 15px;\n  overflow: hidden;\n}\n\n.collections-list {\n  overflow-y: auto;\n  border-right: 1px solid #eee;\n  padding-right: 15px;\n}\n\n.collection-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: white;\n}\n\n.collection-item:hover {\n  border-color: #2196f3;\n  background: #fafafa;\n}\n\n.collection-item.selected {\n  border-color: #2196f3;\n  background: #e8f4f8;\n}\n\n.collection-icon {\n  font-size: 24px;\n  color: #2196f3;\n}\n\n.collection-info {\n  flex: 1;\n}\n\n.collection-name {\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 4px;\n}\n\n.collection-description {\n  font-size: 13px;\n  color: #666;\n}\n\n.collection-artifacts {\n  overflow-y: auto;\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px;\n  background: #f8f9fa;\n  border-radius: 4px;\n  font-weight: 600;\n  color: #555;\n  margin-bottom: 10px;\n}\n\n/* Version Panel */\n.version-panel {\n  width: 350px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid #ddd;\n  flex-shrink: 0;\n  background: #fafafa;\n}\n\n.version-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 15px;\n}\n\n.version-list {\n  margin-bottom: 20px;\n}\n\n.version-item {\n  padding: 12px;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: white;\n}\n\n.version-item:hover {\n  border-color: #2196f3;\n  background: #fafafa;\n}\n\n.version-item.selected {\n  border-color: #2196f3;\n  background: #e8f4f8;\n}\n\n.version-number {\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.version-number i {\n  font-size: 14px;\n  color: #2196f3;\n}\n\n.version-meta {\n  font-size: 12px;\n  color: #666;\n}\n\n.version-comments {\n  margin-top: 4px;\n  font-style: italic;\n  color: #888;\n}\n\n/* Preview Section */\n.preview-section {\n  border-top: 2px solid #ddd;\n  padding-top: 15px;\n  margin-top: 15px;\n}\n\n.preview-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  color: #555;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #eee;\n}\n\n.preview-content {\n  background: white;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  padding: 12px;\n}\n\n.preview-item {\n  margin-bottom: 8px;\n  font-size: 13px;\n}\n\n.preview-item strong {\n  color: #555;\n  font-weight: 600;\n  margin-right: 6px;\n}\n\n.preview-error {\n  background: #fff3cd;\n  border: 1px solid #ffeaa7;\n  border-radius: 4px;\n  padding: 10px;\n  color: #856404;\n  font-size: 13px;\n}\n\n.preview-error i {\n  margin-right: 6px;\n}\n\n/* Loading & Empty States */\n.loading-state,\n.empty-state {\n  text-align: center;\n  padding: 40px;\n  color: #666;\n}\n\n.loading-state i,\n.empty-state i {\n  font-size: 36px;\n  margin-bottom: 15px;\n  color: #999;\n}\n\n.loading-state i.fa-spin {\n  color: #2196f3;\n}\n\n.empty-state p {\n  margin: 5px 0;\n  font-size: 14px;\n}\n\n/* JSON Preview Section */\n.preview-json-section {\n  margin-top: 15px;\n  border-top: 1px solid #e0e0e0;\n  padding-top: 10px;\n}\n\n.preview-json-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px;\n  cursor: pointer;\n  background: #f8f9fa;\n  border-radius: 4px;\n  transition: background 0.2s;\n}\n\n.preview-json-header:hover {\n  background: #e9ecef;\n}\n\n.preview-json-header i {\n  font-size: 12px;\n  color: #666;\n}\n\n.preview-json-header strong {\n  font-size: 13px;\n  color: #333;\n}\n\n.preview-json-content {\n  margin-top: 10px;\n  border: 1px solid #dee2e6;\n  border-radius: 4px;\n  overflow: hidden;\n}\n"] }]
     }], () => [{ type: i1.DialogRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArtifactLoadDialogComponent, { className: "ArtifactLoadDialogComponent", filePath: "src/componentstudio/components/artifact-load-dialog.component.ts", lineNumber: 29 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArtifactLoadDialogComponent, { className: "ArtifactLoadDialogComponent", filePath: "src/ComponentStudio/components/artifact-load-dialog.component.ts", lineNumber: 29 }); })();
 //# sourceMappingURL=artifact-load-dialog.component.js.map

package/dist/ComponentStudio/components/artifact-selection-dialog.component.js

@@ -606,5 +606,5 @@ export class ArtifactSelectionDialogComponent {
         type: Component,
         args: [{ standalone: false, selector: 'app-artifact-selection-dialog', template: "<div>\n    <kendo-dialog-titlebar (close)=\"cancel()\">\n        <div style=\"font-size: 18px;\">\n        <i class=\"fa-solid fa-save\"></i> Save Component to Artifact\n        </div>\n    </kendo-dialog-titlebar>\n\n    <div class=\"artifact-selection-content\">\n        <!-- Left Filter Panel -->\n        <div class=\"filter-panel\" [style.width]=\"isFilterPanelCollapsed ? '40px' : '280px'\">\n            <!-- Panel Header -->\n            <div class=\"panel-header\">\n                @if (!isFilterPanelCollapsed) {\n                    <span>Filters</span>\n                }\n                <button kendoButton (click)=\"toggleFilterPanel()\" \n                        [fillMode]=\"'flat'\"\n                        [class.filter-active]=\"getActiveFilterCount() > 0\"\n                        [themeColor]=\"getActiveFilterCount() > 0 ? 'primary' : 'base'\">\n                    <i class=\"fa-solid fa-filter\"></i>\n                    @if (isFilterPanelCollapsed && getActiveFilterCount() > 0) {\n                        <span class=\"filter-count\">{{ getActiveFilterCount() }}</span>\n                    }\n                </button>\n            </div>\n\n            @if (!isFilterPanelCollapsed) {\n                <div class=\"filter-content\">\n                    <!-- Search -->\n                    <div class=\"filter-group\">\n                        <label>Search</label>\n                        <input type=\"text\" \n                               [(ngModel)]=\"searchTerm\"\n                               (input)=\"onSearchInput()\"\n                               placeholder=\"Name or description...\"\n                               class=\"filter-input\">\n                    </div>\n\n                    <!-- Artifact Type -->\n                    <div class=\"filter-group\">\n                        <label>Artifact Type</label>\n                        <select [(ngModel)]=\"selectedArtifactType\" \n                                (change)=\"onArtifactTypeChange()\"\n                                class=\"filter-select\">\n                            <option value=\"\">All Types</option>\n                            <option value=\"Component\">Component</option>\n                            <option value=\"Report\">Report</option>\n                            <option value=\"Dashboard\">Dashboard</option>\n                        </select>\n                    </div>\n                    \n                    <!-- User Email -->\n                    <div class=\"filter-group\">\n                        <label>Filter by User</label>\n                        <input type=\"text\" \n                               [(ngModel)]=\"userEmail\"\n                               (input)=\"filterArtifacts()\"\n                               placeholder=\"Enter user email...\"\n                               class=\"filter-input\">\n                    </div>\n                </div>\n            }\n        </div>\n\n        <!-- Main Content Area -->\n        <div class=\"main-content\">\n            <!-- Paging Controls -->\n            <div class=\"paging-controls\">\n                <button kendoButton \n                    (click)=\"previousPage()\" \n                    [disabled]=\"!canGoPrevious()\"\n                    [themeColor]=\"'base'\">\n                    <i class=\"fa-solid fa-chevron-left\"></i> Previous\n                </button>\n                <span class=\"page-info\">\n                    Page {{ currentPage + 1 }} of {{ getTotalPages() }}\n                    ({{ totalArtifacts }} total items)\n                </span>\n                <button kendoButton \n                    (click)=\"nextPage()\" \n                    [disabled]=\"!canGoNext()\"\n                    [themeColor]=\"'base'\">\n                    Next <i class=\"fa-solid fa-chevron-right\"></i>\n                </button>\n            </div>\n\n            <!-- Existing Artifacts -->\n            <div class=\"artifacts-list\">\n                @if (isLoading) {\n                    <div class=\"loading-state\">\n                        <mj-loading text=\"Loading artifacts...\" size=\"small\"></mj-loading>\n                    </div>\n                } \n                @else if (artifacts.length === 0) {\n                    <div class=\"empty-state\">\n                        <i class=\"fa-solid fa-inbox\"></i>\n                        <p>No artifacts found</p>\n                    </div>\n                } \n                @else {\n                    @for (artifact of artifacts; track artifact.ID) {\n                        <div class=\"artifact-item\" \n                            [class.selected]=\"selectedArtifact?.ID === artifact.ID\"\n                            (click)=\"selectArtifact(artifact)\">\n                            <div class=\"artifact-content\">\n                                <div class=\"artifact-main\">\n                                    <div class=\"artifact-name\">\n                                        <i class=\"fa-solid fa-file-code\"></i>\n                                        <span>{{ artifact.Name }}</span>\n                                    </div>\n                                    @if (artifact.Description) {\n                                        <div class=\"artifact-description\">\n                                            {{ artifact.Description }}\n                                        </div>\n                                    }\n                                </div>\n                                <div class=\"artifact-meta\">\n                                    <div>{{ artifact.Type }}</div>\n                                    <div>{{ artifact.__mj_UpdatedAt | date:'short' }}</div>\n                                </div>\n                            </div>\n                        </div>\n                    }\n                }\n            </div>\n            \n            <!-- Create New Artifact Section (at bottom) -->\n            <div class=\"create-section\">\n                <div class=\"divider\">OR CREATE NEW ARTIFACT</div>\n                \n                <button kendoButton \n                (click)=\"selectCreateNew()\"\n                [themeColor]=\"'primary'\"\n                class=\"create-btn\">\n                <i class=\"fa-solid fa-plus\"></i> Create New Artifact\n                </button>\n                \n                @if (showNewArtifactForm) {\n                    <div class=\"new-artifact-form\">\n                        <kendo-textbox \n                        [(value)]=\"newArtifactName\"\n                        placeholder=\"Artifact name...\">\n                        </kendo-textbox>\n                        <kendo-textarea \n                        [(value)]=\"newArtifactDescription\"\n                        placeholder=\"Description (optional)...\">\n                        </kendo-textarea>\n                    </div>\n                }\n            </div>\n        </div>\n\n        <!-- Right Version Panel (only show when artifact selected) -->\n        @if (selectedArtifact) {\n            <div class=\"version-panel\">\n                <div class=\"panel-header\">\n                    <h4><i class=\"fa-solid fa-code-branch\"></i> Version</h4>\n                </div>\n                \n                @if (artifactVersions.length > 0) {\n                    <div class=\"version-content\">\n                        <div class=\"version-actions\">\n                            <label>Action</label>\n                            <label class=\"radio-label\">\n                                <input type=\"radio\" \n                                    name=\"versionAction\" \n                                    value=\"new\"\n                                    [(ngModel)]=\"versionAction\"\n                                    (change)=\"selectedVersion = null\">\n                                <span>Create New Version (v{{ getNextVersionNumber() }})</span>\n                            </label>\n                            \n                            <label class=\"radio-label\">\n                                <input type=\"radio\" \n                                    name=\"versionAction\" \n                                    value=\"update\"\n                                    [(ngModel)]=\"versionAction\">\n                                <span>Update Existing Version</span>\n                            </label>\n                        </div>\n                        \n                        @if (versionAction === 'update') {\n                            <div class=\"version-selection\">\n                                <label>Select Version</label>\n                                @for (version of artifactVersions; track version.ID) {\n                                    <label class=\"version-item\" \n                                           [class.selected]=\"selectedVersion?.ID === version.ID\">\n                                        <input type=\"radio\"\n                                            name=\"selectedVersion\"\n                                            [value]=\"version\"\n                                            [(ngModel)]=\"selectedVersion\">\n                                        <div class=\"version-info\">\n                                            <div class=\"version-number\">Version {{ version.VersionNumber }}</div>\n                                            <div class=\"version-date\">{{ version.__mj_UpdatedAt | date:'short' }}</div>\n                                        </div>\n                                    </label>\n                                }\n                            </div>\n                            \n                            @if (selectedVersion) {\n                                <div class=\"warning\">\n                                    <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                                    <span>Warning: This will overwrite version {{ selectedVersion.VersionNumber }}</span>\n                                </div>\n                            }\n                        }\n                    </div>\n                } @else {\n                    <div class=\"info-state\">\n                        <i class=\"fa-solid fa-info-circle\"></i>\n                        <p>No versions available for this artifact.</p>\n                        <p>A new version will be created.</p>\n                    </div>\n                }\n            </div>\n        }\n    </div>\n\n    <kendo-dialog-actions>\n        <button kendoButton \n            [themeColor]=\"versionAction === 'update' && selectedVersion ? 'warning' : 'primary'\" \n            (click)=\"save()\"\n            [disabled]=\"!canSave()\">\n            <i class=\"fa-solid fa-save\"></i> \n            {{ getSaveButtonText() }}\n        </button>\n        <button kendoButton (click)=\"cancel()\">Cancel</button>\n    </kendo-dialog-actions>\n</div>\n", styles: ["/* Main container */\n.artifact-selection-content {\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n}\n\n/* Filter Panel */\n.filter-panel {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    border-right: 1px solid #ddd;\n    transition: width 0.3s ease;\n    flex-shrink: 0;\n    background: #fafafa;\n}\n\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px;\n    border-bottom: 1px solid #eee;\n    font-weight: bold;\n    color: #666;\n}\n\n.filter-content {\n    flex: 1;\n    padding: 15px;\n    overflow-y: auto;\n}\n\n.filter-group {\n    margin-bottom: 15px;\n}\n\n.filter-group label {\n    display: block;\n    margin-bottom: 5px;\n    font-weight: 500;\n    color: #555;\n}\n\n.filter-input,\n.filter-select {\n    width: 100%;\n    padding: 8px;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    font-size: 14px;\n}\n\n.filter-input:focus,\n.filter-select:focus {\n    outline: none;\n    border-color: #2196f3;\n    box-shadow: 0 0 3px rgba(33, 150, 243, 0.3);\n}\n\n/* Main Content Panel */\n.main-content {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    flex: 2;\n    min-width: 0; /* Prevents flex item from growing beyond container */\n}\n\n.paging-controls {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 15px;\n    border-bottom: 1px solid #eee;\n}\n\n.page-info {\n    color: #666;\n    font-size: 14px;\n}\n\n.artifacts-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0 15px;\n}\n\n.loading-state,\n.empty-state {\n    text-align: center;\n    padding: 40px;\n    color: #666;\n}\n\n.empty-state i {\n    font-size: 48px;\n    margin-bottom: 15px;\n    color: #999;\n}\n\n.create-section {\n    padding: 15px;\n    border-top: 1px solid #eee;\n}\n\n.create-btn {\n    width: 100%;\n}\n\n.new-artifact-form {\n    margin-top: 15px;\n}\n\n.new-artifact-form kendo-textbox {\n    width: 100%;\n    margin-bottom: 10px;\n}\n\n.new-artifact-form kendo-textarea {\n    width: 100%;\n    height: 60px;\n}\n\n.divider {\n    text-align: center;\n    padding: 10px;\n    background: #f8f9fa;\n    color: #666;\n    font-size: 12px;\n    margin-bottom: 10px;\n}\n\n.artifact-item {\n    border: 1px solid #ddd;\n    border-radius: 6px;\n    margin: 10px 0;\n    padding: 15px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.artifact-item:hover {\n    border-color: #2196f3;\n    background: #fafafa;\n}\n\n.artifact-item.selected {\n    border-color: #2196f3;\n    background: #e8f4f8;\n}\n\n.artifact-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n}\n\n.artifact-main {\n    flex: 1;\n}\n\n.artifact-name {\n    display: flex;\n    align-items: center;\n    margin-bottom: 5px;\n}\n\n.artifact-name i {\n    color: #666;\n    margin-right: 8px;\n}\n\n.artifact-name span {\n    font-weight: 600;\n    color: #333;\n}\n\n.artifact-description {\n    color: #666;\n    font-size: 14px;\n    margin-bottom: 8px;\n}\n\n.artifact-meta {\n    text-align: right;\n    color: #999;\n    font-size: 12px;\n}\n\n/* Version Panel */\n.version-panel {\n    width: 320px;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    border-left: 1px solid #ddd;\n    flex-shrink: 0;\n    background: #fafafa;\n}\n\n.version-content {\n    flex: 1;\n    padding: 15px;\n    overflow-y: auto;\n}\n\n.version-actions {\n    margin-bottom: 20px;\n}\n\n.version-actions label:first-child {\n    display: block;\n    margin-bottom: 10px;\n    font-weight: 500;\n    color: #555;\n}\n\n.radio-label {\n    display: flex;\n    align-items: center;\n    margin-bottom: 8px;\n    cursor: pointer;\n}\n\n.radio-label input {\n    margin-right: 8px;\n}\n\n.version-selection {\n    margin-bottom: 15px;\n}\n\n.version-selection > label:first-child {\n    display: block;\n    margin-bottom: 8px;\n    font-weight: 500;\n    color: #555;\n}\n\n.version-item {\n    display: flex;\n    align-items: center;\n    margin-bottom: 8px;\n    padding: 8px;\n    border: 1px solid #eee;\n    border-radius: 4px;\n    cursor: pointer;\n}\n\n.version-item.selected {\n    background: #f0f8ff;\n}\n\n.version-item input {\n    margin-right: 8px;\n}\n\n.version-info {\n    flex: 1;\n}\n\n.version-number {\n    font-weight: 500;\n}\n\n.version-date {\n    font-size: 12px;\n    color: #666;\n}\n\n.warning {\n    background: #fff3cd;\n    border: 1px solid #ffeaa7;\n    border-radius: 4px;\n    padding: 10px;\n}\n\n.warning i {\n    color: #856404;\n    margin-right: 5px;\n}\n\n.warning span {\n    color: #856404;\n    font-size: 14px;\n}\n\n.info-state,\n.empty-state {\n    padding: 15px;\n    text-align: center;\n    color: #666;\n}\n\n.info-state i,\n.empty-state i {\n    margin-bottom: 10px;\n    font-size: 24px;\n}\n\n.info-state p,\n.empty-state p {\n    margin: 5px 0;\n}\n\n.info-state p:last-child {\n    font-size: 14px;\n}\n\n/* Filter button styling */\n.filter-count {\n    background: #fff;\n    color: #2196f3;\n    border-radius: 50%;\n    min-width: 18px;\n    height: 18px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 10px;\n    font-weight: bold;\n    margin-left: 4px;\n}\n\n.filter-active .filter-count {\n    background: #fff;\n    color: #2196f3;\n}"] }]
     }], () => [{ type: i1.DialogRef }, { type: i2.MJNotificationService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArtifactSelectionDialogComponent, { className: "ArtifactSelectionDialogComponent", filePath: "src/componentstudio/components/artifact-selection-dialog.component.ts", lineNumber: 21 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArtifactSelectionDialogComponent, { className: "ArtifactSelectionDialogComponent", filePath: "src/ComponentStudio/components/artifact-selection-dialog.component.ts", lineNumber: 21 }); })();
 //# sourceMappingURL=artifact-selection-dialog.component.js.map

package/dist/ComponentStudio/components/browser/component-browser.component.js

@@ -634,5 +634,5 @@ export class ComponentBrowserComponent {
         }], ImportFromArtifact: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentBrowserComponent, { className: "ComponentBrowserComponent", filePath: "src/componentstudio/components/browser/component-browser.component.ts", lineNumber: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentBrowserComponent, { className: "ComponentBrowserComponent", filePath: "src/ComponentStudio/components/browser/component-browser.component.ts", lineNumber: 22 }); })();
 //# sourceMappingURL=component-browser.component.js.map

package/dist/ComponentStudio/components/editors/code-editor-panel.component.js

@@ -376,5 +376,5 @@ export class CodeEditorPanelComponent {
             type: ViewChild,
             args: ['diffEditor']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CodeEditorPanelComponent, { className: "CodeEditorPanelComponent", filePath: "src/componentstudio/components/editors/code-editor-panel.component.ts", lineNumber: 332 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CodeEditorPanelComponent, { className: "CodeEditorPanelComponent", filePath: "src/ComponentStudio/components/editors/code-editor-panel.component.ts", lineNumber: 332 }); })();
 //# sourceMappingURL=code-editor-panel.component.js.map

package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js

@@ -217,5 +217,5 @@ export class DataRequirementsEditorComponent {
     </div>
   `, styles: ["\n    .data-requirements-editor {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n    .editor-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--mat-sys-outline-variant);\n      background: var(--mat-sys-surface-container-lowest);\n      flex-shrink: 0;\n    }\n    .header-title {\n      font-weight: 600;\n      font-size: 13px;\n      color: var(--mat-sys-on-surface);\n    }\n    .header-title i {\n      margin-right: 6px;\n      color: var(--mat-sys-on-surface-variant);\n    }\n    .action-buttons {\n      display: flex;\n      gap: 6px;\n    }\n    .summary-bar {\n      display: flex;\n      gap: 12px;\n      padding: 6px 12px;\n      background: var(--mat-sys-primary-container);\n      border-bottom: 1px solid var(--mat-sys-outline-variant);\n      font-size: 12px;\n      color: var(--mat-sys-on-primary-container);\n      flex-shrink: 0;\n    }\n    .summary-item {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n    .mode-badge {\n      background: var(--mat-sys-surface-container-high);\n      color: var(--mat-sys-on-surface);\n      padding: 1px 8px;\n      border-radius: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      font-size: 10px;\n    }\n    .editor-body {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n    .json-editor-container {\n      flex: 1;\n      overflow: hidden;\n    }\n    .json-editor-container mj-code-editor {\n      display: block;\n      height: 100%;\n    }\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px 20px;\n      color: var(--mat-sys-on-surface-variant);\n      flex: 1;\n    }\n    .empty-state i {\n      font-size: 32px;\n      margin-bottom: 12px;\n    }\n    .empty-state p {\n      margin: 0;\n      font-size: 13px;\n      text-align: center;\n    }\n  "] }]
     }], () => [{ type: i1.ComponentStudioStateService }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataRequirementsEditorComponent, { className: "DataRequirementsEditorComponent", filePath: "src/componentstudio/components/editors/data-requirements-editor.component.ts", lineNumber: 148 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataRequirementsEditorComponent, { className: "DataRequirementsEditorComponent", filePath: "src/ComponentStudio/components/editors/data-requirements-editor.component.ts", lineNumber: 148 }); })();
 //# sourceMappingURL=data-requirements-editor.component.js.map

package/dist/ComponentStudio/components/editors/requirements-editor.component.js

@@ -259,5 +259,5 @@ export class RequirementsEditorComponent {
         }], Title: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RequirementsEditorComponent, { className: "RequirementsEditorComponent", filePath: "src/componentstudio/components/editors/requirements-editor.component.ts", lineNumber: 247 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RequirementsEditorComponent, { className: "RequirementsEditorComponent", filePath: "src/ComponentStudio/components/editors/requirements-editor.component.ts", lineNumber: 247 }); })();
 //# sourceMappingURL=requirements-editor.component.js.map

package/dist/ComponentStudio/components/editors/spec-editor.component.js

@@ -303,5 +303,5 @@ export class SpecEditorComponent {
     </div>
   `, styles: ["\n    .spec-editor {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .editor-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--mat-sys-outline-variant);\n      background: var(--mat-sys-surface);\n      flex-shrink: 0;\n    }\n\n    .mode-toggle {\n      display: inline-flex;\n      border: 1px solid var(--mat-sys-outline);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .mode-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 12px;\n      border: none;\n      background: transparent;\n      color: var(--mat-sys-on-surface-variant);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n\n    .mode-btn:not(:last-child) {\n      border-right: 1px solid var(--mat-sys-outline);\n    }\n\n    .mode-btn:hover {\n      background: var(--mat-sys-surface-container);\n    }\n\n    .mode-btn.active {\n      background: var(--mat-sys-primary);\n      color: var(--mat-sys-on-primary, #fff);\n    }\n\n    .mode-btn i {\n      font-size: 11px;\n    }\n\n    .action-buttons {\n      display: flex;\n      gap: 6px;\n    }\n\n    .action-btn {\n      font-size: 12px;\n    }\n\n    .editor-body {\n      flex: 1;\n      overflow: auto;\n    }\n\n    .form-mode {\n      padding: 16px;\n      display: flex;\n      flex-direction: column;\n      gap: 14px;\n    }\n\n    .form-field {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      flex: 1;\n    }\n\n    .form-label {\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mat-sys-on-surface-variant);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .form-input {\n      padding: 8px 12px;\n      border: 1px solid var(--mat-sys-outline);\n      border-radius: 6px;\n      background: var(--mat-sys-surface);\n      color: var(--mat-sys-on-surface);\n      font-size: 13px;\n      font-family: inherit;\n      outline: none;\n      transition: border-color 0.15s ease;\n    }\n\n    .form-input:focus {\n      border-color: var(--mat-sys-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);\n    }\n\n    .form-textarea {\n      padding: 8px 12px;\n      border: 1px solid var(--mat-sys-outline);\n      border-radius: 6px;\n      background: var(--mat-sys-surface);\n      color: var(--mat-sys-on-surface);\n      font-size: 13px;\n      font-family: inherit;\n      resize: vertical;\n      min-height: 60px;\n      outline: none;\n      transition: border-color 0.15s ease;\n    }\n\n    .form-textarea:focus {\n      border-color: var(--mat-sys-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);\n    }\n\n    .form-select {\n      padding: 8px 12px;\n      border: 1px solid var(--mat-sys-outline);\n      border-radius: 6px;\n      background: var(--mat-sys-surface);\n      color: var(--mat-sys-on-surface);\n      font-size: 13px;\n      font-family: inherit;\n      outline: none;\n      cursor: pointer;\n      transition: border-color 0.15s ease;\n    }\n\n    .form-select:focus {\n      border-color: var(--mat-sys-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);\n    }\n\n    .form-row {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 12px;\n    }\n\n    .json-mode {\n      height: 100%;\n    }\n\n    .json-mode mj-code-editor {\n      display: block;\n      height: 100%;\n    }\n  "] }]
     }], () => [{ type: i1.ComponentStudioStateService }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SpecEditorComponent, { className: "SpecEditorComponent", filePath: "src/componentstudio/components/editors/spec-editor.component.ts", lineNumber: 260 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SpecEditorComponent, { className: "SpecEditorComponent", filePath: "src/ComponentStudio/components/editors/spec-editor.component.ts", lineNumber: 260 }); })();
 //# sourceMappingURL=spec-editor.component.js.map

package/dist/ComponentStudio/components/new-component-dialog/new-component-dialog.component.js

@@ -155,5 +155,5 @@ export class NewComponentDialogComponent {
         }], Close: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NewComponentDialogComponent, { className: "NewComponentDialogComponent", filePath: "src/componentstudio/components/new-component-dialog/new-component-dialog.component.ts", lineNumber: 18 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NewComponentDialogComponent, { className: "NewComponentDialogComponent", filePath: "src/ComponentStudio/components/new-component-dialog/new-component-dialog.component.ts", lineNumber: 18 }); })();
 //# sourceMappingURL=new-component-dialog.component.js.map

package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js

@@ -188,5 +188,5 @@ export class SaveVersionDialogComponent {
         }], Cancel: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SaveVersionDialogComponent, { className: "SaveVersionDialogComponent", filePath: "src/componentstudio/components/save-version-dialog/save-version-dialog.component.ts", lineNumber: 162 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SaveVersionDialogComponent, { className: "SaveVersionDialogComponent", filePath: "src/ComponentStudio/components/save-version-dialog/save-version-dialog.component.ts", lineNumber: 162 }); })();
 //# sourceMappingURL=save-version-dialog.component.js.map

package/dist/ComponentStudio/components/text-import-dialog.component.js

@@ -117,5 +117,5 @@ export class TextImportDialogComponent {
         }], cancelDialog: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TextImportDialogComponent, { className: "TextImportDialogComponent", filePath: "src/componentstudio/components/text-import-dialog.component.ts", lineNumber: 97 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TextImportDialogComponent, { className: "TextImportDialogComponent", filePath: "src/ComponentStudio/components/text-import-dialog.component.ts", lineNumber: 97 }); })();
 //# sourceMappingURL=text-import-dialog.component.js.map

package/dist/ComponentStudio/components/workspace/component-preview.component.js

@@ -339,5 +339,5 @@ export class ComponentPreviewComponent {
         }], AskAIToFix: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentPreviewComponent, { className: "ComponentPreviewComponent", filePath: "src/componentstudio/components/workspace/component-preview.component.ts", lineNumber: 42 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentPreviewComponent, { className: "ComponentPreviewComponent", filePath: "src/ComponentStudio/components/workspace/component-preview.component.ts", lineNumber: 42 }); })();
 //# sourceMappingURL=component-preview.component.js.map

package/dist/ComponentStudio/components/workspace/editor-tabs.component.js

@@ -140,5 +140,5 @@ export class EditorTabsComponent {
     </div>
   `, styles: ["\n    :host {\n      display: flex;\n      flex: 1;\n      overflow: hidden;\n    }\n\n    .editor-tabs-container {\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      overflow: hidden;\n    }\n\n    .tab-bar {\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      height: 38px;\n      background: var(--mat-sys-surface-container-low);\n      border-bottom: 1px solid var(--mat-sys-outline-variant);\n      flex-shrink: 0;\n      gap: 2px;\n    }\n\n    .tab-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 5px 12px;\n      border: none;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mat-sys-on-surface-variant);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      white-space: nowrap;\n      font-family: inherit;\n    }\n\n    .tab-pill:hover {\n      background: var(--mat-sys-surface-container);\n      color: var(--mat-sys-on-surface);\n    }\n\n    .tab-pill.active {\n      background: var(--mat-sys-surface);\n      color: var(--mat-sys-primary);\n      font-weight: 600;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    }\n\n    .tab-pill i {\n      font-size: 11px;\n    }\n\n    .tab-spacer {\n      flex: 1;\n    }\n\n    .tab-content {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .tab-content > * {\n      flex: 1;\n      overflow: hidden;\n    }\n  "] }]
     }], () => [{ type: i1.ComponentStudioStateService }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditorTabsComponent, { className: "EditorTabsComponent", filePath: "src/componentstudio/components/workspace/editor-tabs.component.ts", lineNumber: 125 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditorTabsComponent, { className: "EditorTabsComponent", filePath: "src/ComponentStudio/components/workspace/editor-tabs.component.ts", lineNumber: 125 }); })();
 //# sourceMappingURL=editor-tabs.component.js.map

package/dist/Credentials/components/credentials-audit-resource.component.js

@@ -864,5 +864,5 @@ export { CredentialsAuditResourceComponent };
         type: Component,
         args: [{ standalone: false, selector: 'mj-credentials-audit-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"audit-container\">\n  @if (isLoading) {\n    <mj-loading text=\"Loading audit logs...\"></mj-loading>\n  }\n\n  @if (!isLoading) {\n    <!-- Header -->\n    <div class=\"audit-header\">\n      <div class=\"header-info\">\n        <h2 class=\"audit-title\">Audit Trail</h2>\n        <p class=\"audit-subtitle\">Credential access and modification history</p>\n      </div>\n      <div class=\"header-actions\">\n        <button class=\"btn-secondary\" (click)=\"exportToCSV()\" title=\"Export to CSV\">\n          <i class=\"fa-solid fa-download\"></i>\n          <span>Export</span>\n        </button>\n        <button class=\"btn-icon\" (click)=\"refresh()\" title=\"Refresh\">\n          <i class=\"fa-solid fa-refresh\"></i>\n        </button>\n      </div>\n    </div>\n    <!-- Stats Cards -->\n    <div class=\"stats-grid\">\n      <div class=\"stat-card\">\n        <div class=\"stat-icon total\">\n          <i class=\"fa-solid fa-clipboard-list\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value\">{{auditLogs.length}}</div>\n          <div class=\"stat-label\">Total Events</div>\n        </div>\n      </div>\n      <div class=\"stat-card\">\n        <div class=\"stat-icon success\">\n          <i class=\"fa-solid fa-check-circle\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value success\">{{getSuccessCount()}}</div>\n          <div class=\"stat-label\">Successful</div>\n        </div>\n        <div class=\"stat-rate\">{{getSuccessRate()}}%</div>\n      </div>\n      <div class=\"stat-card\">\n        <div class=\"stat-icon failed\">\n          <i class=\"fa-solid fa-times-circle\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value failed\">{{getFailedCount()}}</div>\n          <div class=\"stat-label\">Failed</div>\n        </div>\n      </div>\n      <div class=\"stat-card\">\n        <div class=\"stat-icon users\">\n          <i class=\"fa-solid fa-users\"></i>\n        </div>\n        <div class=\"stat-content\">\n          <div class=\"stat-value\">{{getUniqueUserCount()}}</div>\n          <div class=\"stat-label\">Unique Users</div>\n        </div>\n      </div>\n    </div>\n    <!-- Activity Chart -->\n    @if (hourlyData.length > 0) {\n      <div class=\"activity-chart\">\n        <div class=\"chart-header\">\n          <h3>\n            <i class=\"fa-solid fa-chart-bar\"></i>\n            Today's Activity\n          </h3>\n        </div>\n        <div class=\"chart-container\">\n          <div class=\"chart-bars\">\n            @for (data of hourlyData; track data) {\n              <div\n                class=\"chart-bar-wrapper\"\n                [title]=\"data.hour + ': ' + (data.success + data.failed) + ' events'\"\n                >\n                <div class=\"chart-bar\">\n                  <div\n                    class=\"bar-segment success\"\n                    [style.height.%]=\"(data.success / getMaxHourlyCount()) * 100\"\n                  ></div>\n                  <div\n                    class=\"bar-segment failed\"\n                    [style.height.%]=\"(data.failed / getMaxHourlyCount()) * 100\"\n                  ></div>\n                </div>\n                <span class=\"chart-label\">{{data.hour.split(':')[0]}}</span>\n              </div>\n            }\n          </div>\n        </div>\n        <div class=\"chart-legend\">\n          <span class=\"legend-item\">\n            <span class=\"legend-color success\"></span>\n            Success\n          </span>\n          <span class=\"legend-item\">\n            <span class=\"legend-color failed\"></span>\n            Failed\n          </span>\n        </div>\n      </div>\n    }\n    <!-- Toolbar -->\n    <div class=\"toolbar\">\n      <div class=\"toolbar-left\">\n        <div class=\"search-container\">\n          <i class=\"fa-solid fa-search\"></i>\n          <input\n            type=\"text\"\n            placeholder=\"Search logs...\"\n            [value]=\"searchText\"\n            (input)=\"onSearchChange($any($event.target).value)\"\n            />\n          @if (searchText) {\n            <button class=\"search-clear\" (click)=\"clearSearch()\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n        <select\n          class=\"filter-select\"\n          [value]=\"selectedStatus\"\n          (change)=\"onStatusFilterChange($any($event.target).value)\"\n          >\n          <option value=\"\">All Statuses</option>\n          <option value=\"Success\">Success</option>\n          <option value=\"Failed\">Failed</option>\n        </select>\n        <select\n          class=\"filter-select\"\n          [value]=\"selectedOperation\"\n          (change)=\"onOperationFilterChange($any($event.target).value)\"\n          >\n          <option value=\"\">All Operations</option>\n          @for (op of getOperationList(); track op) {\n            <option [value]=\"op\">{{op}}</option>\n          }\n        </select>\n        <select\n          class=\"filter-select\"\n          [value]=\"dateRange\"\n          (change)=\"onDateRangeChange($any($event.target).value)\"\n          >\n          <option value=\"1\">Last 24 hours</option>\n          <option value=\"7\">Last 7 days</option>\n          <option value=\"30\">Last 30 days</option>\n          <option value=\"90\">Last 90 days</option>\n        </select>\n      </div>\n      <div class=\"toolbar-right\">\n        <div class=\"results-info\">\n          {{filteredLogs.length}} of {{auditLogs.length}} events\n        </div>\n        <div class=\"view-toggle\">\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"viewMode === 'timeline'\"\n            (click)=\"setViewMode('timeline')\"\n            title=\"Timeline View\"\n            >\n            <i class=\"fa-solid fa-timeline\"></i>\n          </button>\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"viewMode === 'table'\"\n            (click)=\"setViewMode('table')\"\n            title=\"Table View\"\n            >\n            <i class=\"fa-solid fa-table\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n    <!-- Timeline View -->\n    @if (viewMode === 'timeline' && timelineGroups.length > 0) {\n      <div class=\"timeline-container\">\n        @for (group of timelineGroups; track group) {\n          <div class=\"timeline-group\">\n            <div class=\"timeline-date\">\n              <span class=\"date-label\">{{group.displayDate}}</span>\n              <span class=\"date-count\">{{group.logs.length}} events</span>\n            </div>\n            <div class=\"timeline-items\">\n              @for (log of group.logs; track log) {\n                <div\n                  class=\"timeline-item\"\n                  [class.expanded]=\"expandedLogId === log.ID\"\n                  [class.failed]=\"log.Status === 'Failed'\"\n                  >\n                  <div class=\"timeline-line\">\n                    <div\n                      class=\"timeline-dot\"\n                      [style.backgroundColor]=\"getOperationColor(getOperationType(log))\"\n                    ></div>\n                  </div>\n                  <div class=\"timeline-content\" (click)=\"toggleLogExpand(log.ID)\">\n                    <div class=\"timeline-header\">\n                      <div class=\"timeline-operation\">\n                        <i [class]=\"getOperationIcon(getOperationType(log))\" [style.color]=\"getOperationColor(getOperationType(log))\"></i>\n                        <span class=\"operation-name\">{{getOperationType(log)}}</span>\n                      </div>\n                      <div class=\"timeline-time\">{{formatTime(log.__mj_CreatedAt)}}</div>\n                    </div>\n                    <div class=\"timeline-body\">\n                      <div class=\"timeline-user\">\n                        <i class=\"fa-solid fa-user\"></i>\n                        {{log.User || 'Unknown'}}\n                      </div>\n                      @if (log.Description) {\n                        <div class=\"timeline-description\">\n                          {{log.Description}}\n                        </div>\n                      }\n                      <div class=\"timeline-badges\">\n                        <span class=\"status-badge\" [ngClass]=\"getStatusClass(log.Status)\">\n                          <i [class]=\"log.Status === 'Success' ? 'fa-solid fa-check' : 'fa-solid fa-times'\"></i>\n                          {{log.Status}}\n                        </span>\n                        @if (getSubsystem(log)) {\n                          <span class=\"subsystem-badge\">\n                            {{getSubsystem(log)}}\n                          </span>\n                        }\n                        @if (log.parsedDetails?.credentialType) {\n                          <span class=\"type-badge\">\n                            <i class=\"fa-solid fa-key\"></i>\n                            {{log.parsedDetails?.credentialType}}\n                          </span>\n                        }\n                      </div>\n                    </div>\n                    @if (expandedLogId === log.ID) {\n                      <div class=\"timeline-details\">\n                        <div class=\"detail-grid\">\n                          @if (log.parsedDetails?.ipAddress) {\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">IP Address</span>\n                              <span class=\"detail-value\">{{log.parsedDetails?.ipAddress}}</span>\n                            </div>\n                          }\n                          @if (log.parsedDetails?.duration) {\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">Duration</span>\n                              <span class=\"detail-value\">{{formatDuration(log.parsedDetails?.duration)}}</span>\n                            </div>\n                          }\n                          @if (log.parsedDetails?.credentialId) {\n                            <div class=\"detail-item\">\n                              <span class=\"detail-label\">Credential ID</span>\n                              <span class=\"detail-value mono\">{{log.parsedDetails?.credentialId}}</span>\n                            </div>\n                          }\n                          @if (log.parsedDetails?.errorMessage) {\n                            <div class=\"detail-item full-width\">\n                              <span class=\"detail-label\">Error Message</span>\n                              <span class=\"detail-value error\">{{log.parsedDetails?.errorMessage}}</span>\n                            </div>\n                          }\n                          @if (log.parsedDetails?.userAgent) {\n                            <div class=\"detail-item full-width\">\n                              <span class=\"detail-label\">User Agent</span>\n                              <span class=\"detail-value mono small\">{{log.parsedDetails?.userAgent}}</span>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                    <button class=\"expand-btn\">\n                      <i [class]=\"expandedLogId === log.ID ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n                    </button>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n    <!-- Table View -->\n    @if (viewMode === 'table' && filteredLogs.length > 0) {\n      <div class=\"audit-table-container\">\n        <table class=\"audit-table\">\n          <thead>\n            <tr>\n              <th>Timestamp</th>\n              <th>User</th>\n              <th>Operation</th>\n              <th>Description</th>\n              <th>Subsystem</th>\n              <th>Status</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (log of filteredLogs; track log) {\n              <tr [class.failed-row]=\"log.Status === 'Failed'\">\n                <td class=\"timestamp\">{{formatDate(log.__mj_CreatedAt)}}</td>\n                <td class=\"user\">{{log.User || 'Unknown'}}</td>\n                <td class=\"operation\">\n                  <span class=\"operation-badge\" [style.backgroundColor]=\"getOperationColor(getOperationType(log)) + '20'\" [style.color]=\"getOperationColor(getOperationType(log))\">\n                    <i [class]=\"getOperationIcon(getOperationType(log))\"></i>\n                    {{getOperationType(log)}}\n                  </span>\n                </td>\n                <td class=\"description\">{{log.Description || '-'}}</td>\n                <td class=\"subsystem\">{{getSubsystem(log) || '-'}}</td>\n                <td class=\"status\">\n                  <span class=\"status-badge\" [ngClass]=\"getStatusClass(log.Status)\">\n                    <i [class]=\"log.Status === 'Success' ? 'fa-solid fa-check' : 'fa-solid fa-times'\"></i>\n                    {{log.Status}}\n                  </span>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n    <!-- Empty State -->\n    @if (filteredLogs.length === 0) {\n      <div class=\"empty-state\">\n        <div class=\"empty-icon\">\n          <i class=\"fa-solid fa-clipboard-list\"></i>\n        </div>\n        <h3>No Audit Logs</h3>\n        @if (searchText || selectedStatus || selectedOperation) {\n          <p>\n            No events match your current filters.\n            <button class=\"btn-link\" (click)=\"searchText = ''; selectedStatus = ''; selectedOperation = ''; applyFilters()\">Clear filters</button>\n          </p>\n        }\n        @if (!searchText && !selectedStatus && !selectedOperation) {\n          <p>\n            No credential access events in the selected time range.\n          </p>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [".audit-container {\n    padding: 24px;\n    height: 100%;\n    overflow-y: auto;\n    background: var(--background-secondary, #f8fafc);\n}\n\n/* Header */\n.audit-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    margin-bottom: 24px;\n}\n\n.header-info {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.audit-title {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0;\n}\n\n.audit-subtitle {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n.header-actions {\n    display: flex;\n    gap: 8px;\n}\n\n.btn-secondary {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary, #374151);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-secondary:hover {\n    background: var(--hover-background, #f9fafb);\n    border-color: var(--accent-color, #6366f1);\n    color: var(--accent-color, #6366f1);\n}\n\n.btn-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon:hover {\n    background: var(--hover-background, #f9fafb);\n    color: var(--accent-color, #6366f1);\n}\n\n/* Stats Grid */\n.stats-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.stat-card {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    position: relative;\n}\n\n.stat-icon {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 12px;\n    flex-shrink: 0;\n}\n\n.stat-icon.total {\n    background: rgba(99, 102, 241, 0.1);\n    color: #6366f1;\n}\n\n.stat-icon.success {\n    background: rgba(16, 185, 129, 0.1);\n    color: #10b981;\n}\n\n.stat-icon.failed {\n    background: rgba(239, 68, 68, 0.1);\n    color: #ef4444;\n}\n\n.stat-icon.users {\n    background: rgba(139, 92, 246, 0.1);\n    color: #8b5cf6;\n}\n\n.stat-icon i {\n    font-size: 20px;\n}\n\n.stat-content {\n    flex: 1;\n}\n\n.stat-value {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    line-height: 1;\n}\n\n.stat-value.success {\n    color: #10b981;\n}\n\n.stat-value.failed {\n    color: #ef4444;\n}\n\n.stat-label {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 4px;\n}\n\n.stat-rate {\n    position: absolute;\n    top: 12px;\n    right: 16px;\n    font-size: 12px;\n    font-weight: 600;\n    color: #10b981;\n    background: rgba(16, 185, 129, 0.1);\n    padding: 4px 8px;\n    border-radius: 8px;\n}\n\n/* Activity Chart */\n.activity-chart {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    padding: 20px;\n    margin-bottom: 20px;\n}\n\n.chart-header {\n    margin-bottom: 16px;\n}\n\n.chart-header h3 {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0;\n}\n\n.chart-header h3 i {\n    color: var(--accent-color, #6366f1);\n}\n\n.chart-container {\n    height: 120px;\n    padding: 0 4px;\n}\n\n.chart-bars {\n    display: flex;\n    align-items: flex-end;\n    height: 100%;\n    gap: 2px;\n}\n\n.chart-bar-wrapper {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n}\n\n.chart-bar {\n    flex: 1;\n    width: 100%;\n    max-width: 24px;\n    display: flex;\n    flex-direction: column-reverse;\n    border-radius: 4px 4px 0 0;\n    overflow: hidden;\n    background: var(--bar-background, #f3f4f6);\n}\n\n.bar-segment {\n    width: 100%;\n    transition: height 0.3s ease;\n}\n\n.bar-segment.success {\n    background: linear-gradient(180deg, #10b981 0%, #059669 100%);\n}\n\n.bar-segment.failed {\n    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);\n}\n\n.chart-label {\n    font-size: 10px;\n    color: var(--text-secondary, #9ca3af);\n    margin-top: 4px;\n}\n\n.chart-legend {\n    display: flex;\n    justify-content: center;\n    gap: 24px;\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px solid var(--border-color, #f3f4f6);\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.legend-color {\n    width: 12px;\n    height: 12px;\n    border-radius: 3px;\n}\n\n.legend-color.success {\n    background: #10b981;\n}\n\n.legend-color.failed {\n    background: #ef4444;\n}\n\n/* Toolbar */\n.toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    margin-bottom: 20px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.toolbar-left {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.toolbar-right {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n/* Search */\n.search-container {\n    position: relative;\n    min-width: 200px;\n}\n\n.search-container i.fa-search {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--text-secondary, #9ca3af);\n    font-size: 13px;\n}\n\n.search-container input {\n    width: 100%;\n    padding: 8px 36px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    font-size: 13px;\n    background: var(--input-background, #f9fafb);\n    transition: all 0.2s ease;\n}\n\n.search-container input:focus {\n    outline: none;\n    border-color: var(--accent-color, #6366f1);\n    background: white;\n    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.search-clear {\n    position: absolute;\n    right: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: var(--button-hover, #e5e7eb);\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--text-secondary, #6b7280);\n    font-size: 10px;\n}\n\n.search-clear:hover {\n    background: var(--text-secondary, #9ca3af);\n    color: white;\n}\n\n.filter-select {\n    padding: 8px 12px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    background: var(--input-background, #f9fafb);\n    font-size: 13px;\n    color: var(--text-primary, #1f2937);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.filter-select:focus {\n    outline: none;\n    border-color: var(--accent-color, #6366f1);\n}\n\n.results-info {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n/* View Toggle */\n.view-toggle {\n    display: flex;\n    background: var(--toggle-background, #f3f4f6);\n    border-radius: 8px;\n    padding: 4px;\n}\n\n.toggle-btn {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    border-radius: 6px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.toggle-btn:hover {\n    color: var(--text-primary, #1f2937);\n}\n\n.toggle-btn.active {\n    background: var(--card-background, #ffffff);\n    color: var(--accent-color, #6366f1);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Timeline View */\n.timeline-container {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n.timeline-group {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.timeline-date {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    background: var(--header-background, #f9fafb);\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.date-label {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n}\n\n.date-count {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n    background: var(--badge-background, #e5e7eb);\n    padding: 4px 10px;\n    border-radius: 12px;\n}\n\n.timeline-items {\n    padding: 8px 0;\n}\n\n.timeline-item {\n    display: flex;\n    padding: 12px 20px;\n    transition: background 0.2s ease;\n}\n\n.timeline-item:hover {\n    background: var(--hover-background, #f9fafb);\n}\n\n.timeline-item.failed {\n    background: rgba(239, 68, 68, 0.02);\n}\n\n.timeline-item.failed:hover {\n    background: rgba(239, 68, 68, 0.05);\n}\n\n.timeline-line {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 24px;\n    margin-right: 16px;\n    flex-shrink: 0;\n}\n\n.timeline-dot {\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n.timeline-content {\n    flex: 1;\n    min-width: 0;\n    cursor: pointer;\n    position: relative;\n}\n\n.timeline-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 8px;\n}\n\n.timeline-operation {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-operation i {\n    font-size: 14px;\n}\n\n.operation-name {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n}\n\n.timeline-time {\n    font-size: 12px;\n    font-family: monospace;\n    color: var(--text-secondary, #6b7280);\n}\n\n.timeline-body {\n    margin-bottom: 8px;\n}\n\n.timeline-user {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    margin-bottom: 4px;\n}\n\n.timeline-user i {\n    font-size: 11px;\n}\n\n.timeline-description {\n    font-size: 13px;\n    color: var(--text-primary, #374151);\n    margin-bottom: 8px;\n}\n\n.timeline-badges {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.status-badge.success {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.status-badge.failed {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n.status-badge.unknown {\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n.status-badge i {\n    font-size: 10px;\n}\n\n.subsystem-badge,\n.type-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    background: var(--badge-background, #f3f4f6);\n    border-radius: 12px;\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.type-badge {\n    background: rgba(99, 102, 241, 0.1);\n    color: var(--accent-color, #6366f1);\n}\n\n.type-badge i {\n    font-size: 10px;\n}\n\n/* Timeline Details */\n.timeline-details {\n    margin-top: 12px;\n    padding: 16px;\n    background: var(--detail-background, #f9fafb);\n    border-radius: 8px;\n    border: 1px solid var(--border-color, #e5e7eb);\n}\n\n.detail-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.detail-item.full-width {\n    grid-column: 1 / -1;\n}\n\n.detail-label {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.detail-value {\n    font-size: 13px;\n    color: var(--text-primary, #1f2937);\n}\n\n.detail-value.mono {\n    font-family: monospace;\n    font-size: 12px;\n}\n\n.detail-value.small {\n    font-size: 11px;\n    word-break: break-all;\n}\n\n.detail-value.error {\n    color: #dc2626;\n}\n\n.expand-btn {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    color: var(--text-secondary, #9ca3af);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.expand-btn:hover {\n    color: var(--accent-color, #6366f1);\n}\n\n.expand-btn i {\n    font-size: 10px;\n}\n\n/* Table View */\n.audit-table-container {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.audit-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.audit-table th {\n    padding: 14px 16px;\n    text-align: left;\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-secondary, #6b7280);\n    background: var(--header-background, #f9fafb);\n    border-bottom: 1px solid var(--border-color, #e5e7eb);\n}\n\n.audit-table td {\n    padding: 14px 16px;\n    font-size: 13px;\n    color: var(--text-primary, #1f2937);\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.audit-table tr:last-child td {\n    border-bottom: none;\n}\n\n.audit-table tr:hover td {\n    background: var(--hover-background, #f9fafb);\n}\n\n.audit-table tr.failed-row td {\n    background: rgba(239, 68, 68, 0.02);\n}\n\n.audit-table tr.failed-row:hover td {\n    background: rgba(239, 68, 68, 0.05);\n}\n\n.timestamp {\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n    white-space: nowrap;\n}\n\n.user {\n    font-weight: 500;\n}\n\n.operation-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.operation-badge i {\n    font-size: 10px;\n}\n\n.description {\n    max-width: 300px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.subsystem {\n    color: var(--text-secondary, #6b7280);\n}\n\n/* Empty State */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 64px 24px;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    text-align: center;\n}\n\n.empty-icon {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--icon-background, #f3f4f6);\n    border-radius: 50%;\n    margin-bottom: 20px;\n}\n\n.empty-icon i {\n    font-size: 32px;\n    color: var(--text-secondary, #d1d5db);\n}\n\n.empty-state h3 {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.empty-state p {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n.btn-link {\n    background: none;\n    border: none;\n    color: var(--accent-color, #6366f1);\n    cursor: pointer;\n    font-size: inherit;\n    padding: 0;\n    text-decoration: underline;\n}\n\n.btn-link:hover {\n    color: var(--accent-hover, #4f46e5);\n}\n\n/* Responsive */\n@media (max-width: 1200px) {\n    .stats-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (max-width: 768px) {\n    .audit-container {\n        padding: 16px;\n    }\n\n    .audit-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .stats-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .toolbar {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .toolbar-left {\n        flex-direction: column;\n    }\n\n    .search-container {\n        width: 100%;\n    }\n\n    .filter-select {\n        width: 100%;\n    }\n\n    .toolbar-right {\n        justify-content: space-between;\n    }\n\n    .detail-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .chart-label {\n        display: none;\n    }\n\n    .chart-label:nth-child(4n+1) {\n        display: block;\n    }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialsAuditResourceComponent, { className: "CredentialsAuditResourceComponent", filePath: "src/credentials/components/credentials-audit-resource.component.ts", lineNumber: 38 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialsAuditResourceComponent, { className: "CredentialsAuditResourceComponent", filePath: "src/Credentials/components/credentials-audit-resource.component.ts", lineNumber: 38 }); })();
 //# sourceMappingURL=credentials-audit-resource.component.js.map

package/dist/Credentials/components/credentials-categories-resource.component.js

@@ -817,5 +817,5 @@ export { CredentialsCategoriesResourceComponent };
             type: ViewChild,
             args: ['categoryEditPanel']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialsCategoriesResourceComponent, { className: "CredentialsCategoriesResourceComponent", filePath: "src/credentials/components/credentials-categories-resource.component.ts", lineNumber: 24 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialsCategoriesResourceComponent, { className: "CredentialsCategoriesResourceComponent", filePath: "src/Credentials/components/credentials-categories-resource.component.ts", lineNumber: 24 }); })();
 //# sourceMappingURL=credentials-categories-resource.component.js.map

package/dist/Credentials/components/credentials-list-resource.component.js

@@ -1260,5 +1260,5 @@ export { CredentialsListResourceComponent };
             type: ViewChild,
             args: ['editPanel']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialsListResourceComponent, { className: "CredentialsListResourceComponent", filePath: "src/credentials/components/credentials-list-resource.component.ts", lineNumber: 20 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialsListResourceComponent, { className: "CredentialsListResourceComponent", filePath: "src/Credentials/components/credentials-list-resource.component.ts", lineNumber: 20 }); })();
 //# sourceMappingURL=credentials-list-resource.component.js.map