@noatgnu/cupcake-vanilla 1.3.1 → 1.3.4

package/fesm2022/noatgnu-cupcake-vanilla.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
 import { Injectable, signal, computed, EventEmitter, inject, Output, Input, Component, effect, ViewChild } from '@angular/core';
 import * as i3 from '@noatgnu/cupcake-core';
-import { BaseApiService, WebSocketService, NotificationService as NotificationService$1, LabGroupService, ToastService, TaskStatus, TaskType, ResourceVisibility } from '@noatgnu/cupcake-core';
-import { switchMap, map, tap, takeUntil, filter as filter$1 } from 'rxjs/operators';
-import { from, Observable, throwError, NEVER, debounceTime, distinctUntilChanged, filter, switchMap as switchMap$1, map as map$1, catchError, of, tap as tap$1, Subject, BehaviorSubject, firstValueFrom, takeUntil as takeUntil$1 } from 'rxjs';
+import { BaseApiService, WebSocketService, NotificationService as NotificationService$1, LabGroupService, ToastService, AsyncTaskMonitorService, TaskStatus, TaskType, ResourceVisibility } from '@noatgnu/cupcake-core';
+import { switchMap, map, tap, takeUntil } from 'rxjs/operators';
+import { from, Observable, throwError, NEVER, debounceTime, distinctUntilChanged, filter, switchMap as switchMap$1, map as map$1, catchError, of, tap as tap$1, Subject, firstValueFrom, takeUntil as takeUntil$1 } from 'rxjs';
 import jsSHA from 'jssha';
-import * as i3$1 from '@angular/common';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTypeahead, NgbModule, NgbNavModule, NgbActiveModal, NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i5 from '@angular/cdk/drag-drop';
+import * as i5$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
@@ -1218,8 +1218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
 class Websocket extends WebSocketService {
     constructor(authService) {
         super(authService);
-        this.endpoint = 'notifications';
-        this.config.endpoint = 'notifications';
+        this.endpoint = 'ccc/notifications';
+        this.config.endpoint = 'ccc/notifications';
         this.config.url = this.getWebSocketUrl();
     }
     getMetadataTableUpdates() {
@@ -1238,29 +1238,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i3.AuthService }] });
 
-class AdminWebSocketService extends WebSocketService {
-    constructor(authService) {
-        super(authService);
-        this.endpoint = 'ccv/admin';
-        this.config.endpoint = 'ccv/admin';
-        this.config.url = this.getWebSocketUrl();
-    }
-    getAdminNotifications() {
-        return this.filterMessages('admin.notification');
-    }
-    getSystemNotifications() {
-        return this.filterMessages('system.notification');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AdminWebSocketService, deps: [{ token: i3.AuthService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AdminWebSocketService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AdminWebSocketService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i3.AuthService }] });
-
 var NotificationType;
 (function (NotificationType) {
     NotificationType["SYSTEM"] = "system";
@@ -1273,15 +1250,11 @@ var NotificationType;
 })(NotificationType || (NotificationType = {}));
 class NotificationService extends NotificationService$1 {
     websocketService;
-    adminWebSocketService;
     isConnected = signal(false, ...(ngDevMode ? [{ debugName: "isConnected" }] : []));
-    isAdminConnected = signal(false, ...(ngDevMode ? [{ debugName: "isAdminConnected" }] : []));
     isWebSocketConnected = computed(() => this.isConnected(), ...(ngDevMode ? [{ debugName: "isWebSocketConnected" }] : []));
-    isAdminWebSocketConnected = computed(() => this.isAdminConnected(), ...(ngDevMode ? [{ debugName: "isAdminWebSocketConnected" }] : []));
-    constructor(websocketService, adminWebSocketService, toastService) {
+    constructor(websocketService, toastService) {
         super(toastService);
         this.websocketService = websocketService;
-        this.adminWebSocketService = adminWebSocketService;
         this.initializeWebSocket();
     }
     initializeWebSocket() {
@@ -1291,18 +1264,9 @@ class NotificationService extends NotificationService$1 {
                 console.log('CCV WebSocket connected - notifications active');
             }
         });
-        this.adminWebSocketService.isConnected$.subscribe(connected => {
-            this.isAdminConnected.set(connected);
-            if (connected) {
-                console.log('CCV Admin WebSocket connected - admin notifications active');
-            }
-        });
         this.websocketService.messages$.subscribe(message => {
             this.handleWebSocketMessage(message);
         });
-        this.adminWebSocketService.messages$.subscribe(message => {
-            this.handleAdminWebSocketMessage(message);
-        });
         this.setupNotificationHandlers();
     }
     setupNotificationHandlers() {
@@ -1322,25 +1286,6 @@ class NotificationService extends NotificationService$1 {
                 this.toastService.info(message.message || message['title']);
             }
         });
-        this.adminWebSocketService.getAdminNotifications().subscribe(message => {
-            const notification = this.createNotificationFromWebSocket(message, NotificationType.SYSTEM);
-            this.addNotification(notification);
-            const level = message['level'] || 'info';
-            const title = message['title'] || 'Admin Notification';
-            const messageText = message.message || '';
-            if (level === 'error') {
-                this.toastService.error(`${title}: ${messageText}`, 10000);
-            }
-            else if (level === 'warning') {
-                this.toastService.warning(`${title}: ${messageText}`, 8000);
-            }
-            else if (level === 'success') {
-                this.toastService.success(`${title}: ${messageText}`, 6000);
-            }
-            else {
-                this.toastService.info(`${title}: ${messageText}`, 5000);
-            }
-        });
         this.websocketService.getMetadataTableUpdates().subscribe(message => {
             const notification = this.createNotificationFromWebSocket(message, NotificationType.METADATA_TABLE);
             this.addNotification(notification);
@@ -1522,31 +1467,19 @@ class NotificationService extends NotificationService$1 {
                 return 'info';
         }
     }
-    handleAdminWebSocketMessage(message) {
-        if (message.type === 'admin.notification') {
-            const notification = this.createNotificationFromWebSocket(message, NotificationType.SYSTEM);
-            this.addNotification(notification);
-        }
-    }
     connect() {
         this.websocketService.connect();
     }
-    connectAdmin() {
-        this.adminWebSocketService.connect();
-    }
     disconnect() {
         this.websocketService.disconnect();
     }
-    disconnectAdmin() {
-        this.adminWebSocketService.disconnect();
-    }
     subscribeToMetadataTable(tableId) {
         this.websocketService.subscribe('metadata_table_updates', { table_id: tableId });
     }
     createVanillaNotification(type, title, message, level = 'info', autoClose = true) {
         this.createLocalNotification(type, title, message, level, autoClose);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NotificationService, deps: [{ token: Websocket }, { token: AdminWebSocketService }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NotificationService, deps: [{ token: Websocket }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NotificationService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NotificationService, decorators: [{
@@ -1554,7 +1487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: Websocket }, { type: AdminWebSocketService }, { type: i3.ToastService }] });
+        }], ctorParameters: () => [{ type: Websocket }, { type: i3.ToastService }] });
 
 class OntologySearchService extends BaseApiService {
     /**
@@ -3754,7 +3687,7 @@ class MetadataValueEditModal {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataValueEditModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }, { token: i3.AuthService }, { token: FavouriteMetadataOptionService }, { token: MetadataColumnService }, { token: MetadataColumnTemplateService }, { token: i3.LabGroupService }, { token: OntologySearchService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MetadataValueEditModal, isStandalone: true, selector: "ccv-metadata-value-edit-modal", inputs: { config: "config" }, outputs: { valueSaved: "valueSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-pencil-square me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <div class=\"row\">\n    <!-- Main Content -->\n    <div [class]=\"hasMultiSampleEdit ? 'col-md-8' : 'col-12'\">\n      <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Column Information -->\n    <div class=\"mb-3\">\n      <div class=\"row\">\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">Column Name:</small>\n          <div class=\"fw-semibold\">{{ config.columnName }}</div>\n        </div>\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">Column Type:</small>\n          <div><span class=\"badge bg-light text-dark\">{{ config.columnType }}</span></div>\n        </div>\n      </div>\n      @if (hasOntologyType) {\n        <div class=\"mt-2\">\n          <small class=\"text-muted\">Ontology Type:</small>\n          <div><span class=\"badge bg-info\">{{ ontologyTypeLabel }}</span></div>\n        </div>\n      }\n    </div>\n\n    <hr class=\"mb-4\">\n\n    <!-- Favorite Options Section -->\n    @if (hasFavorites && !isLoadingFavorites()) {\n      <div class=\"mb-4\">\n        <h6 class=\"text-muted mb-3\">\n          <i class=\"bi bi-heart-fill me-2 text-danger\"></i>Recommended Values\n        </h6>\n\n        <!-- Favorites Navigation Tabs -->\n        <ul ngbNav #favoritesNav=\"ngbNav\" [(activeId)]=\"activeFavoritesTab\" class=\"nav-tabs\">\n          @if (userFavorites().length > 0) {\n            <li [ngbNavItem]=\"'user'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-person-fill me-1\"></i>Your Favorites\n                <span class=\"badge bg-primary ms-1\">{{ userFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, userFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of userFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Your personal favorite values for this column\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n\n          @if (labGroupFavorites().length > 0) {\n            <li [ngbNavItem]=\"'lab_group'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-people-fill me-1\"></i>Lab Group\n                <span class=\"badge bg-info ms-1\">{{ labGroupFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, labGroupFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of labGroupFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Favorite values shared by your lab group\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n\n          @if (globalFavorites().length > 0) {\n            <li [ngbNavItem]=\"'global'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-globe me-1\"></i>Global\n                <span class=\"badge bg-success ms-1\">{{ globalFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, globalFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of globalFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Globally recommended values for this column\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n        </ul>\n\n        <div [ngbNavOutlet]=\"favoritesNav\" class=\"mt-3\"></div>\n\n        <hr class=\"my-3\">\n      </div>\n    }\n\n    @if (isLoadingFavorites()) {\n      <div class=\"text-center mb-4\">\n        <div class=\"spinner-border spinner-border-sm text-primary me-2\"></div>\n        <small class=\"text-muted\">Loading favorite options...</small>\n      </div>\n      <hr class=\"my-3\">\n    }\n\n    <!-- Value Input Section -->\n    <div class=\"mb-3\">\n      <div class=\"d-flex justify-content-between align-items-center mb-2\">\n        <label for=\"metadataValue\" class=\"form-label mb-0\">\n          Metadata Value\n          @if (hasOntologyType) {\n            <span class=\"badge bg-success ms-2\">\n              <i class=\"bi bi-search me-1\"></i>Autocomplete Available\n            </span>\n          }\n          @if (specialSyntaxType()) {\n            <span class=\"badge bg-info ms-2\">\n              <i class=\"bi bi-gear me-1\"></i>{{ getSpecialInputTitle() }}\n            </span>\n          }\n        </label>\n\n        @if (specialSyntaxType()) {\n          <div class=\"form-check form-switch\">\n            <input\n              class=\"form-check-input\"\n              type=\"checkbox\"\n              id=\"specialInputToggle\"\n              [checked]=\"showSpecialInput()\"\n              (change)=\"toggleSpecialInput()\">\n            <label class=\"form-check-label small text-muted\" for=\"specialInputToggle\">\n              Enhanced Editor\n            </label>\n          </div>\n        }\n      </div>\n\n      <!-- Quick-select buttons for standard values -->\n      @if (config.allowNotApplicable || config.allowNotAvailable) {\n        <div class=\"mb-2\">\n          <small class=\"text-muted d-block mb-1\">Quick Select:</small>\n          <div class=\"btn-group btn-group-sm\" role=\"group\">\n            @if (config.allowNotApplicable) {\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-secondary\"\n                (click)=\"setValue('not applicable')\">\n                <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n              </button>\n            }\n            @if (config.allowNotAvailable) {\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-secondary\"\n                (click)=\"setValue('not available')\">\n                <i class=\"bi bi-question-circle me-1\"></i>Not Available\n              </button>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Special SDRF Syntax Input Components -->\n      @if (showSpecialInput() && specialSyntaxType()) {\n        <div class=\"border rounded p-3 mb-3 bg-body-secondary\">\n          <div class=\"mb-2\">\n            <small class=\"text-muted fw-semibold\">\n              <i class=\"bi bi-gear me-1\"></i>{{ getSpecialInputTitle() }}\n            </small>\n          </div>\n\n          @switch (specialSyntaxType()) {\n            @case ('age') {\n              <ccv-sdrf-age-input\n                [value]=\"specialInputValue()\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-age-input>\n            }\n            @case ('modification') {\n              <ccv-sdrf-modification-input\n                [value]=\"specialInputValue()\"\n                [columnId]=\"config.columnId ?? null\"\n                [templateId]=\"config.templateId ?? null\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-modification-input>\n            }\n            @case ('cleavage') {\n              <ccv-sdrf-cleavage-input\n                [value]=\"specialInputValue()\"\n                [columnId]=\"config.columnId ?? null\"\n                [templateId]=\"config.templateId ?? null\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-cleavage-input>\n            }\n            @case ('spiked_compound') {\n              <ccv-sdrf-spiked-compound-input\n                [value]=\"specialInputValue()\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-spiked-compound-input>\n            }\n          }\n\n          <div class=\"form-text mt-2\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Use the enhanced editor for structured input, or toggle off for manual text entry.\n          </div>\n        </div>\n      }\n\n      @if (hasOntologyType && !showSpecialInput()) {\n        <!-- Search type selection for ontology -->\n        <div class=\"mb-2\">\n          <small class=\"text-muted d-block mb-1\">Search Mode:</small>\n          <div class=\"btn-group btn-group-sm\" role=\"group\">\n            <button\n              type=\"button\"\n              class=\"btn\"\n              [class]=\"searchType() === 'icontains' ? 'btn-primary' : 'btn-outline-primary'\"\n              (click)=\"onSearchTypeChange('icontains')\">\n              <i class=\"bi bi-search me-1\"></i>Contains\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn\"\n              [class]=\"searchType() === 'istartswith' ? 'btn-primary' : 'btn-outline-primary'\"\n              (click)=\"onSearchTypeChange('istartswith')\">\n              <i class=\"bi bi-arrow-right me-1\"></i>Starts with\n            </button>\n          </div>\n        </div>\n\n        <!-- Typeahead input for ontology suggestions -->\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            [class.border-success]=\"selectedFavorite() !== null\"\n            id=\"metadataValue\"\n            formControlName=\"value\"\n            placeholder=\"Type to search ontology suggestions...\"\n            [ngbTypeahead]=\"searchOntology\"\n            [resultFormatter]=\"formatSuggestion\"\n            [inputFormatter]=\"inputFormatter\"\n            (selectItem)=\"onSuggestionSelected($event)\"\n            [editable]=\"true\"\n            [showHint]=\"true\"\n            [focusFirst]=\"false\"\n            container=\"body\">\n          @if (isLoadingSuggestions()) {\n            <span class=\"input-group-text\">\n              <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n              </div>\n            </span>\n          } @else {\n            <span class=\"input-group-text\">\n              <i class=\"bi bi-search text-muted\"></i>\n            </span>\n          }\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary\"\n            (click)=\"clearValue()\"\n            title=\"Clear value\">\n            <i class=\"bi bi-x\"></i>\n          </button>\n        </div>\n        <div class=\"form-text\">\n          <i class=\"bi bi-info-circle me-1\"></i>\n          Search {{ searchType() === 'icontains' ? 'contains' : 'starts with' }} for {{ ontologyTypeLabel }} ontology\n        </div>\n      } @else if (!showSpecialInput()) {\n        <!-- Regular input when no ontology type or special input is disabled -->\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            [class.border-success]=\"selectedFavorite() !== null\"\n            id=\"metadataValue\"\n            formControlName=\"value\"\n            placeholder=\"Enter metadata value\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary\"\n            (click)=\"clearValue()\"\n            title=\"Clear value\">\n            <i class=\"bi bi-x\"></i>\n          </button>\n        </div>\n        <div class=\"form-text text-muted\">\n          @if (specialSyntaxType()) {\n            Manual text entry mode. Use the Enhanced Editor toggle for structured {{ specialSyntaxType() }} input.\n          } @else {\n            Enter the value manually (no ontology suggestions available for this column type)\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Character count and value info -->\n    <div class=\"mb-3\">\n      <div class=\"d-flex justify-content-between align-items-center\">\n        <small class=\"text-muted\">\n          Characters: {{ editForm.get('value')?.value?.length || 0 }}/500\n        </small>\n        @if (getSelectedFavoriteInfo()) {\n          <small class=\"text-info\">\n            <i class=\"bi bi-info-circle me-1\"></i>{{ getSelectedFavoriteInfo() }}\n          </small>\n        }\n      </div>\n    </div>\n\n      </form>\n    </div>\n\n    <!-- Sample Selection Panel -->\n    @if (hasMultiSampleEdit) {\n      <div class=\"col-md-4\">\n        <div class=\"border-start ps-3\">\n          <div class=\"d-flex justify-content-between align-items-center mb-3\">\n            <h6 class=\"mb-0 text-muted\">\n              <i class=\"bi bi-list-check me-1\"></i>Apply to Samples\n            </h6>\n            <span class=\"badge bg-primary\">\n              {{ selectedSampleCount }}/{{ totalSampleCount }}\n            </span>\n          </div>\n\n          <!-- Select All/Clear All Controls -->\n          <div class=\"d-flex gap-1 mb-3\">\n            <button \n              type=\"button\" \n              class=\"btn btn-outline-primary btn-sm flex-fill\"\n              (click)=\"selectAllSamples()\"\n              [disabled]=\"selectedSampleCount === totalSampleCount\">\n              <i class=\"bi bi-check-all me-1\"></i>All\n            </button>\n            <button \n              type=\"button\" \n              class=\"btn btn-outline-secondary btn-sm flex-fill\"\n              (click)=\"clearSampleSelection()\"\n              [disabled]=\"selectedSampleCount === 0\">\n              <i class=\"bi bi-x me-1\"></i>Clear\n            </button>\n          </div>\n\n          <!-- Sample List -->\n          <div class=\"sample-list\" style=\"max-height: 400px; overflow-y: auto;\">\n            @for (sample of sampleData; track sample.index) {\n              <div class=\"form-check d-flex align-items-center mb-2 p-2 rounded border-bottom\">\n                <input \n                  class=\"form-check-input me-2\" \n                  type=\"checkbox\" \n                  [id]=\"'sample-' + sample.index\"\n                  [checked]=\"isSampleSelected(sample.index)\"\n                  (change)=\"toggleSampleSelection(sample.index)\">\n                <label \n                  [for]=\"'sample-' + sample.index\" \n                  class=\"form-check-label flex-grow-1 cursor-pointer\">\n                  <div class=\"d-flex justify-content-between align-items-center\">\n                    <div>\n                      <div class=\"fw-semibold\">Sample {{ sample.index }}</div>\n                      @if (sample.sourceName) {\n                        <small class=\"text-muted\">{{ sample.sourceName }}</small>\n                      }\n                    </div>\n                    <div class=\"text-end\">\n                      <small class=\"text-muted\">Current:</small>\n                      <div class=\"small fw-mono\" [title]=\"sample.value || ''\">\n                        {{ (sample.value && sample.value.length > 15) ? (sample.value | slice:0:15) + '...' : (sample.value || '-') }}\n                      </div>\n                    </div>\n                  </div>\n                </label>\n              </div>\n            }\n          </div>\n\n          @if (selectedSampleCount > 0) {\n            <div class=\"alert alert-info mt-3 p-2\">\n              <small>\n                <i class=\"bi bi-info-circle me-1\"></i>\n                The value will be applied to {{ selectedSampleCount }} selected sample{{ selectedSampleCount !== 1 ? 's' : '' }}.\n              </small>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n<div class=\"modal-footer\">\n  <div class=\"me-auto\">\n    @if (editForm.get('value')?.value && !isLoading() && !isFromFavoriteManagement) {\n      <div class=\"btn-group dropup\" ngbDropdown>\n        <button\n          type=\"button\"\n          class=\"btn btn-outline-warning btn-sm dropdown-toggle\"\n          ngbDropdownToggle>\n          <i class=\"bi bi-heart me-1\"></i>Add to Favorites\n        </button>\n        <div class=\"dropdown-menu\" ngbDropdownMenu>\n          <button\n            type=\"button\"\n            class=\"dropdown-item\"\n            (click)=\"addToFavorites('user')\">\n            <i class=\"bi bi-person me-2\"></i>Personal Favorite\n          </button>\n          <button\n            type=\"button\"\n            class=\"dropdown-item\"\n            (click)=\"addToFavorites('lab_group')\">\n            <i class=\"bi bi-people me-2\"></i>Lab Group Favorite\n          </button>\n          <button\n            type=\"button\"\n            class=\"dropdown-item\"\n            (click)=\"addToFavorites('global')\">\n            <i class=\"bi bi-globe me-2\"></i>Global Recommendation\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"d-flex gap-2\">\n    <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n      <i class=\"bi bi-x-circle me-1\"></i>Cancel\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      (click)=\"onSubmit()\"\n      [disabled]=\"editForm.invalid || isLoading()\">\n      @if (isLoading()) {\n        <span class=\"spinner-border spinner-border-sm me-2\"></span>\n      }\n      <i class=\"bi bi-check-circle me-1\"></i>\n      Save Value\n    </button>\n  </div>\n</div>\n", styles: [".sample-list .form-check{border:1px solid transparent;transition:all .2s ease}.sample-list .form-check:hover{background-color:rgba(var(--bs-primary-rgb),.05);border-color:rgba(var(--bs-primary-rgb),.2)}.sample-list .form-check .form-check-input:checked~.form-check-label .fw-semibold{color:var(--bs-primary)}.cursor-pointer{cursor:pointer}.fw-mono{font-family:var(--bs-font-monospace)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2.NgbNavLinkButton, selector: "button[ngbNavLink]" }, { kind: "directive", type: i2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "directive", type: i2.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "ngmodule", type: NgbNavModule }, { kind: "component", type: SdrfAgeInput, selector: "ccv-sdrf-age-input", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: SdrfModificationInput, selector: "ccv-sdrf-modification-input", inputs: ["value", "templateId", "columnId"], outputs: ["valueChange"] }, { kind: "component", type: SdrfCleavageInput, selector: "ccv-sdrf-cleavage-input", inputs: ["value", "templateId", "columnId"], outputs: ["valueChange"] }, { kind: "component", type: SdrfSpikedCompoundInput, selector: "ccv-sdrf-spiked-compound-input", inputs: ["value"], outputs: ["valueChange"] }, { kind: "pipe", type: i3$1.SlicePipe, name: "slice" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MetadataValueEditModal, isStandalone: true, selector: "ccv-metadata-value-edit-modal", inputs: { config: "config" }, outputs: { valueSaved: "valueSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-pencil-square me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <div class=\"row\">\n    <!-- Main Content -->\n    <div [class]=\"hasMultiSampleEdit ? 'col-md-8' : 'col-12'\">\n      <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Column Information -->\n    <div class=\"mb-3\">\n      <div class=\"row\">\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">Column Name:</small>\n          <div class=\"fw-semibold\">{{ config.columnName }}</div>\n        </div>\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">Column Type:</small>\n          <div><span class=\"badge bg-light text-dark\">{{ config.columnType }}</span></div>\n        </div>\n      </div>\n      @if (hasOntologyType) {\n        <div class=\"mt-2\">\n          <small class=\"text-muted\">Ontology Type:</small>\n          <div><span class=\"badge bg-info\">{{ ontologyTypeLabel }}</span></div>\n        </div>\n      }\n    </div>\n\n    <hr class=\"mb-4\">\n\n    <!-- Favorite Options Section -->\n    @if (hasFavorites && !isLoadingFavorites()) {\n      <div class=\"mb-4\">\n        <h6 class=\"text-muted mb-3\">\n          <i class=\"bi bi-heart-fill me-2 text-danger\"></i>Recommended Values\n        </h6>\n\n        <!-- Favorites Navigation Tabs -->\n        <ul ngbNav #favoritesNav=\"ngbNav\" [(activeId)]=\"activeFavoritesTab\" class=\"nav-tabs\">\n          @if (userFavorites().length > 0) {\n            <li [ngbNavItem]=\"'user'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-person-fill me-1\"></i>Your Favorites\n                <span class=\"badge bg-primary ms-1\">{{ userFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, userFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of userFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Your personal favorite values for this column\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n\n          @if (labGroupFavorites().length > 0) {\n            <li [ngbNavItem]=\"'lab_group'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-people-fill me-1\"></i>Lab Group\n                <span class=\"badge bg-info ms-1\">{{ labGroupFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, labGroupFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of labGroupFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Favorite values shared by your lab group\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n\n          @if (globalFavorites().length > 0) {\n            <li [ngbNavItem]=\"'global'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-globe me-1\"></i>Global\n                <span class=\"badge bg-success ms-1\">{{ globalFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, globalFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of globalFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Globally recommended values for this column\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n        </ul>\n\n        <div [ngbNavOutlet]=\"favoritesNav\" class=\"mt-3\"></div>\n\n        <hr class=\"my-3\">\n      </div>\n    }\n\n    @if (isLoadingFavorites()) {\n      <div class=\"text-center mb-4\">\n        <div class=\"spinner-border spinner-border-sm text-primary me-2\"></div>\n        <small class=\"text-muted\">Loading favorite options...</small>\n      </div>\n      <hr class=\"my-3\">\n    }\n\n    <!-- Value Input Section -->\n    <div class=\"mb-3\">\n      <div class=\"d-flex justify-content-between align-items-center mb-2\">\n        <label for=\"metadataValue\" class=\"form-label mb-0\">\n          Metadata Value\n          @if (hasOntologyType) {\n            <span class=\"badge bg-success ms-2\">\n              <i class=\"bi bi-search me-1\"></i>Autocomplete Available\n            </span>\n          }\n          @if (specialSyntaxType()) {\n            <span class=\"badge bg-info ms-2\">\n              <i class=\"bi bi-gear me-1\"></i>{{ getSpecialInputTitle() }}\n            </span>\n          }\n        </label>\n\n        @if (specialSyntaxType()) {\n          <div class=\"form-check form-switch\">\n            <input\n              class=\"form-check-input\"\n              type=\"checkbox\"\n              id=\"specialInputToggle\"\n              [checked]=\"showSpecialInput()\"\n              (change)=\"toggleSpecialInput()\">\n            <label class=\"form-check-label small text-muted\" for=\"specialInputToggle\">\n              Enhanced Editor\n            </label>\n          </div>\n        }\n      </div>\n\n      <!-- Quick-select buttons for standard values -->\n      @if (config.allowNotApplicable || config.allowNotAvailable) {\n        <div class=\"mb-2\">\n          <small class=\"text-muted d-block mb-1\">Quick Select:</small>\n          <div class=\"btn-group btn-group-sm\" role=\"group\">\n            @if (config.allowNotApplicable) {\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-secondary\"\n                (click)=\"setValue('not applicable')\">\n                <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n              </button>\n            }\n            @if (config.allowNotAvailable) {\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-secondary\"\n                (click)=\"setValue('not available')\">\n                <i class=\"bi bi-question-circle me-1\"></i>Not Available\n              </button>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Special SDRF Syntax Input Components -->\n      @if (showSpecialInput() && specialSyntaxType()) {\n        <div class=\"border rounded p-3 mb-3 bg-body-secondary\">\n          <div class=\"mb-2\">\n            <small class=\"text-muted fw-semibold\">\n              <i class=\"bi bi-gear me-1\"></i>{{ getSpecialInputTitle() }}\n            </small>\n          </div>\n\n          @switch (specialSyntaxType()) {\n            @case ('age') {\n              <ccv-sdrf-age-input\n                [value]=\"specialInputValue()\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-age-input>\n            }\n            @case ('modification') {\n              <ccv-sdrf-modification-input\n                [value]=\"specialInputValue()\"\n                [columnId]=\"config.columnId ?? null\"\n                [templateId]=\"config.templateId ?? null\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-modification-input>\n            }\n            @case ('cleavage') {\n              <ccv-sdrf-cleavage-input\n                [value]=\"specialInputValue()\"\n                [columnId]=\"config.columnId ?? null\"\n                [templateId]=\"config.templateId ?? null\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-cleavage-input>\n            }\n            @case ('spiked_compound') {\n              <ccv-sdrf-spiked-compound-input\n                [value]=\"specialInputValue()\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-spiked-compound-input>\n            }\n          }\n\n          <div class=\"form-text mt-2\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Use the enhanced editor for structured input, or toggle off for manual text entry.\n          </div>\n        </div>\n      }\n\n      @if (hasOntologyType && !showSpecialInput()) {\n        <!-- Search type selection for ontology -->\n        <div class=\"mb-2\">\n          <small class=\"text-muted d-block mb-1\">Search Mode:</small>\n          <div class=\"btn-group btn-group-sm\" role=\"group\">\n            <button\n              type=\"button\"\n              class=\"btn\"\n              [class]=\"searchType() === 'icontains' ? 'btn-primary' : 'btn-outline-primary'\"\n              (click)=\"onSearchTypeChange('icontains')\">\n              <i class=\"bi bi-search me-1\"></i>Contains\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn\"\n              [class]=\"searchType() === 'istartswith' ? 'btn-primary' : 'btn-outline-primary'\"\n              (click)=\"onSearchTypeChange('istartswith')\">\n              <i class=\"bi bi-arrow-right me-1\"></i>Starts with\n            </button>\n          </div>\n        </div>\n\n        <!-- Typeahead input for ontology suggestions -->\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            [class.border-success]=\"selectedFavorite() !== null\"\n            id=\"metadataValue\"\n            formControlName=\"value\"\n            placeholder=\"Type to search ontology suggestions...\"\n            [ngbTypeahead]=\"searchOntology\"\n            [resultFormatter]=\"formatSuggestion\"\n            [inputFormatter]=\"inputFormatter\"\n            (selectItem)=\"onSuggestionSelected($event)\"\n            [editable]=\"true\"\n            [showHint]=\"true\"\n            [focusFirst]=\"false\"\n            container=\"body\">\n          @if (isLoadingSuggestions()) {\n            <span class=\"input-group-text\">\n              <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n              </div>\n            </span>\n          } @else {\n            <span class=\"input-group-text\">\n              <i class=\"bi bi-search text-muted\"></i>\n            </span>\n          }\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary\"\n            (click)=\"clearValue()\"\n            title=\"Clear value\">\n            <i class=\"bi bi-x\"></i>\n          </button>\n        </div>\n        <div class=\"form-text\">\n          <i class=\"bi bi-info-circle me-1\"></i>\n          Search {{ searchType() === 'icontains' ? 'contains' : 'starts with' }} for {{ ontologyTypeLabel }} ontology\n        </div>\n      } @else if (!showSpecialInput()) {\n        <!-- Regular input when no ontology type or special input is disabled -->\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            [class.border-success]=\"selectedFavorite() !== null\"\n            id=\"metadataValue\"\n            formControlName=\"value\"\n            placeholder=\"Enter metadata value\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary\"\n            (click)=\"clearValue()\"\n            title=\"Clear value\">\n            <i class=\"bi bi-x\"></i>\n          </button>\n        </div>\n        <div class=\"form-text text-muted\">\n          @if (specialSyntaxType()) {\n            Manual text entry mode. Use the Enhanced Editor toggle for structured {{ specialSyntaxType() }} input.\n          } @else {\n            Enter the value manually (no ontology suggestions available for this column type)\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Character count and value info -->\n    <div class=\"mb-3\">\n      <div class=\"d-flex justify-content-between align-items-center\">\n        <small class=\"text-muted\">\n          Characters: {{ editForm.get('value')?.value?.length || 0 }}/500\n        </small>\n        @if (getSelectedFavoriteInfo()) {\n          <small class=\"text-info\">\n            <i class=\"bi bi-info-circle me-1\"></i>{{ getSelectedFavoriteInfo() }}\n          </small>\n        }\n      </div>\n    </div>\n\n      </form>\n    </div>\n\n    <!-- Sample Selection Panel -->\n    @if (hasMultiSampleEdit) {\n      <div class=\"col-md-4\">\n        <div class=\"border-start ps-3\">\n          <div class=\"d-flex justify-content-between align-items-center mb-3\">\n            <h6 class=\"mb-0 text-muted\">\n              <i class=\"bi bi-list-check me-1\"></i>Apply to Samples\n            </h6>\n            <span class=\"badge bg-primary\">\n              {{ selectedSampleCount }}/{{ totalSampleCount }}\n            </span>\n          </div>\n\n          <!-- Select All/Clear All Controls -->\n          <div class=\"d-flex gap-1 mb-3\">\n            <button \n              type=\"button\" \n              class=\"btn btn-outline-primary btn-sm flex-fill\"\n              (click)=\"selectAllSamples()\"\n              [disabled]=\"selectedSampleCount === totalSampleCount\">\n              <i class=\"bi bi-check-all me-1\"></i>All\n            </button>\n            <button \n              type=\"button\" \n              class=\"btn btn-outline-secondary btn-sm flex-fill\"\n              (click)=\"clearSampleSelection()\"\n              [disabled]=\"selectedSampleCount === 0\">\n              <i class=\"bi bi-x me-1\"></i>Clear\n            </button>\n          </div>\n\n          <!-- Sample List -->\n          <div class=\"sample-list\" style=\"max-height: 400px; overflow-y: auto;\">\n            @for (sample of sampleData; track sample.index) {\n              <div class=\"form-check d-flex align-items-center mb-2 p-2 rounded border-bottom\">\n                <input \n                  class=\"form-check-input me-2\" \n                  type=\"checkbox\" \n                  [id]=\"'sample-' + sample.index\"\n                  [checked]=\"isSampleSelected(sample.index)\"\n                  (change)=\"toggleSampleSelection(sample.index)\">\n                <label \n                  [for]=\"'sample-' + sample.index\" \n                  class=\"form-check-label flex-grow-1 cursor-pointer\">\n                  <div class=\"d-flex justify-content-between align-items-center\">\n                    <div>\n                      <div class=\"fw-semibold\">Sample {{ sample.index }}</div>\n                      @if (sample.sourceName) {\n                        <small class=\"text-muted\">{{ sample.sourceName }}</small>\n                      }\n                    </div>\n                    <div class=\"text-end\">\n                      <small class=\"text-muted\">Current:</small>\n                      <div class=\"small fw-mono\" [title]=\"sample.value || ''\">\n                        {{ (sample.value && sample.value.length > 15) ? (sample.value | slice:0:15) + '...' : (sample.value || '-') }}\n                      </div>\n                    </div>\n                  </div>\n                </label>\n              </div>\n            }\n          </div>\n\n          @if (selectedSampleCount > 0) {\n            <div class=\"alert alert-info mt-3 p-2\">\n              <small>\n                <i class=\"bi bi-info-circle me-1\"></i>\n                The value will be applied to {{ selectedSampleCount }} selected sample{{ selectedSampleCount !== 1 ? 's' : '' }}.\n              </small>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n<div class=\"modal-footer\">\n  <div class=\"me-auto\">\n    @if (editForm.get('value')?.value && !isLoading() && !isFromFavoriteManagement) {\n      <div class=\"btn-group dropup\" ngbDropdown>\n        <button\n          type=\"button\"\n          class=\"btn btn-outline-warning btn-sm dropdown-toggle\"\n          ngbDropdownToggle>\n          <i class=\"bi bi-heart me-1\"></i>Add to Favorites\n        </button>\n        <div class=\"dropdown-menu\" ngbDropdownMenu>\n          <button\n            type=\"button\"\n            class=\"dropdown-item\"\n            (click)=\"addToFavorites('user')\">\n            <i class=\"bi bi-person me-2\"></i>Personal Favorite\n          </button>\n          <button\n            type=\"button\"\n            class=\"dropdown-item\"\n            (click)=\"addToFavorites('lab_group')\">\n            <i class=\"bi bi-people me-2\"></i>Lab Group Favorite\n          </button>\n          <button\n            type=\"button\"\n            class=\"dropdown-item\"\n            (click)=\"addToFavorites('global')\">\n            <i class=\"bi bi-globe me-2\"></i>Global Recommendation\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"d-flex gap-2\">\n    <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n      <i class=\"bi bi-x-circle me-1\"></i>Cancel\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      (click)=\"onSubmit()\"\n      [disabled]=\"editForm.invalid || isLoading()\">\n      @if (isLoading()) {\n        <span class=\"spinner-border spinner-border-sm me-2\"></span>\n      }\n      <i class=\"bi bi-check-circle me-1\"></i>\n      Save Value\n    </button>\n  </div>\n</div>\n", styles: [".sample-list .form-check{border:1px solid transparent;transition:all .2s ease}.sample-list .form-check:hover{background-color:rgba(var(--bs-primary-rgb),.05);border-color:rgba(var(--bs-primary-rgb),.2)}.sample-list .form-check .form-check-input:checked~.form-check-label .fw-semibold{color:var(--bs-primary)}.cursor-pointer{cursor:pointer}.fw-mono{font-family:var(--bs-font-monospace)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2.NgbNavLinkButton, selector: "button[ngbNavLink]" }, { kind: "directive", type: i2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "directive", type: i2.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "ngmodule", type: NgbNavModule }, { kind: "component", type: SdrfAgeInput, selector: "ccv-sdrf-age-input", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: SdrfModificationInput, selector: "ccv-sdrf-modification-input", inputs: ["value", "templateId", "columnId"], outputs: ["valueChange"] }, { kind: "component", type: SdrfCleavageInput, selector: "ccv-sdrf-cleavage-input", inputs: ["value", "templateId", "columnId"], outputs: ["valueChange"] }, { kind: "component", type: SdrfSpikedCompoundInput, selector: "ccv-sdrf-spiked-compound-input", inputs: ["value"], outputs: ["valueChange"] }, { kind: "pipe", type: i5.SlicePipe, name: "slice" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataValueEditModal, decorators: [{
             type: Component,
@@ -3878,82 +3811,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
 
 class AsyncTaskUIService {
     destroy$ = new Subject();
-    tasksSubject = new BehaviorSubject([]);
-    isSubscribed = false;
     metadataTableRefreshSubject = new Subject();
     taskCompletedSubject = new Subject();
     exportTaskCompletedSubject = new Subject();
     sessionId = this.generateSessionId();
     initiatedTasks = new Set();
+    processedCompletedTasks = new Set();
     libraryAsyncTaskService = inject(AsyncTaskService);
     asyncExportService = inject(AsyncExportService);
     asyncImportService = inject(AsyncImportService);
     asyncValidationService = inject(AsyncValidationService);
     toastService = inject(ToastService);
-    websocket = inject(Websocket);
+    asyncTaskMonitor = inject(AsyncTaskMonitorService);
     modalService = inject(NgbModal);
     electronService = inject(ElectronService);
-    tasks$ = this.tasksSubject.asObservable();
-    activeTasks$ = this.tasks$.pipe(map(tasks => {
-        const taskArray = Array.isArray(tasks) ? tasks : [];
-        const active = taskArray.filter(task => task.status === TaskStatus.QUEUED || task.status === TaskStatus.STARTED);
-        console.log('AsyncTaskUIService: activeTasks$ emitting:', active.length, 'active tasks out of', taskArray.length, 'total');
-        return active;
-    }));
+    tasks$ = this.asyncTaskMonitor.tasks$;
+    activeTasks$ = this.asyncTaskMonitor.activeTasks$;
     metadataTableRefresh$ = this.metadataTableRefreshSubject.asObservable();
     taskCompleted$ = this.taskCompletedSubject.asObservable();
     exportTaskCompleted$ = this.exportTaskCompletedSubject.asObservable();
     constructor() {
+        this.asyncTaskMonitor.tasks$.pipe(takeUntil(this.destroy$)).subscribe(tasks => {
+            this.handleTasksUpdate(tasks);
+        });
     }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    startRealtimeUpdates() {
-        if (this.isSubscribed) {
-            console.log('AsyncTaskUIService: Already subscribed to real-time updates');
-            return;
-        }
-        console.log('AsyncTaskUIService: Starting real-time updates');
-        this.isSubscribed = true;
-        if (!this.websocket.connectionState$() || this.websocket.connectionState$() === 'disconnected') {
-            console.log('AsyncTaskUIService: WebSocket not connected, connecting now...');
-            this.websocket.connect();
-        }
-        else {
-            console.log('AsyncTaskUIService: WebSocket already connected');
-        }
-        this.websocket.isConnected$.pipe(takeUntil(this.destroy$), filter$1(connected => connected)).subscribe(() => {
-            console.log('AsyncTaskUIService: WebSocket connected, subscribing to async_task_updates');
-            this.websocket.subscribe('async_task_updates');
-        });
-        this.websocket.filterMessages('async_task.update').pipe(takeUntil(this.destroy$)).subscribe((message) => {
-            console.log('AsyncTaskUIService: Received async_task.update message:', message);
-            this.handleTaskUpdate(message);
-        });
-        this.getTasks().subscribe({
-            next: tasks => {
-                const taskArray = Array.isArray(tasks) ? tasks : [];
-                this.tasksSubject.next(taskArray);
-            },
-            error: error => {
-                console.error('Error loading initial tasks:', error);
+    handleTasksUpdate(tasks) {
+        tasks.forEach(task => {
+            const wasRunning = task.status === TaskStatus.QUEUED || task.status === TaskStatus.STARTED;
+            if (task.status === TaskStatus.SUCCESS || task.status === TaskStatus.FAILURE || task.status === TaskStatus.CANCELLED) {
+                const isTaskFromThisTab = this.isTaskInitiatedByThisTab(task.id);
+                if (this.processedCompletedTasks.has(task.id)) {
+                    return;
+                }
+                this.taskCompletedSubject.next(task);
+                if (task.status === TaskStatus.SUCCESS && isTaskFromThisTab) {
+                    if (this.isImportTask(task.taskType) && task.metadataTable) {
+                        this.metadataTableRefreshSubject.next(task.metadataTable);
+                    }
+                    if (this.isExportTask(task.taskType)) {
+                        this.exportTaskCompletedSubject.next(task);
+                        this.handleExportTaskCompletion(task);
+                    }
+                    if (task.taskType === TaskType.VALIDATE_TABLE && task.metadataTable) {
+                        this.metadataTableRefreshSubject.next(task.metadataTable);
+                    }
+                    if ((task.taskType === TaskType.REORDER_TABLE_COLUMNS) && task.metadataTable) {
+                        this.metadataTableRefreshSubject.next(task.metadataTable);
+                    }
+                }
+                if (isTaskFromThisTab) {
+                    this.showTaskCompletionNotification(task);
+                }
+                this.processedCompletedTasks.add(task.id);
             }
         });
     }
-    stopRealtimeUpdates() {
-        console.log('AsyncTaskUIService: Stopping real-time updates');
-        this.isSubscribed = false;
-        this.destroy$.next();
-    }
-    getTasks() {
-        return this.libraryAsyncTaskService.getAsyncTasks().pipe(map(response => response.results || []));
-    }
-    getTask(taskId) {
-        return this.libraryAsyncTaskService.getAsyncTask(taskId);
-    }
     cancelTask(taskId) {
-        return this.libraryAsyncTaskService.cancelTask(taskId);
+        return this.asyncTaskMonitor.cancelTask(taskId);
     }
     generateSessionId() {
         return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
@@ -3961,37 +3879,45 @@ class AsyncTaskUIService {
     isTaskInitiatedByThisTab(taskId) {
         return this.initiatedTasks.has(taskId);
     }
-    /**
-     * Mark a task as initiated by this tab for tracking purposes
-     */
     monitorTask(taskId) {
         this.initiatedTasks.add(taskId);
+        this.asyncTaskMonitor.loadSingleTask(taskId);
     }
     queueExcelExport(request) {
         return this.asyncExportService.excelTemplate(request).pipe(tap(response => {
             this.initiatedTasks.add(response.taskId);
+            this.asyncTaskMonitor.loadSingleTask(response.taskId);
         }));
     }
     queueSdrfExport(request) {
         return this.asyncExportService.sdrfFile(request).pipe(tap(response => {
             this.initiatedTasks.add(response.taskId);
+            this.asyncTaskMonitor.loadSingleTask(response.taskId);
         }));
     }
     queueSdrfImport(request) {
         return this.asyncImportService.sdrfFile(request).pipe(tap(response => {
             this.initiatedTasks.add(response.taskId);
+            this.asyncTaskMonitor.loadSingleTask(response.taskId);
         }));
     }
     queueExcelImport(request) {
-        return this.asyncImportService.excelFile(request);
+        return this.asyncImportService.excelFile(request).pipe(tap(response => {
+            this.initiatedTasks.add(response.taskId);
+            this.asyncTaskMonitor.loadSingleTask(response.taskId);
+        }));
     }
     queueBulkSdrfExport(request) {
         return this.asyncExportService.multipleSdrfFiles(request).pipe(tap(response => {
             this.initiatedTasks.add(response.taskId);
+            this.asyncTaskMonitor.loadSingleTask(response.taskId);
         }));
     }
     queueBulkExcelExport(request) {
-        return this.asyncExportService.multipleExcelTemplates(request);
+        return this.asyncExportService.multipleExcelTemplates(request).pipe(tap(response => {
+            this.initiatedTasks.add(response.taskId);
+            this.asyncTaskMonitor.loadSingleTask(response.taskId);
+        }));
     }
     downloadTaskResult(taskId) {
         this.libraryAsyncTaskService.getDownloadUrl(taskId).subscribe({
@@ -4026,91 +3952,9 @@ class AsyncTaskUIService {
     validateMetadataTable(validationRequest) {
         return this.asyncValidationService.metadataTable(validationRequest).pipe(tap(response => {
             this.initiatedTasks.add(response.taskId);
+            this.asyncTaskMonitor.loadSingleTask(response.taskId);
         }));
     }
-    handleTaskUpdate(message) {
-        console.log('AsyncTaskUIService: handleTaskUpdate called with message:', message);
-        const taskId = message.task_id;
-        const currentTasks = this.tasksSubject.value;
-        console.log('AsyncTaskUIService: Current tasks in subject:', currentTasks.length);
-        const existingTaskIndex = currentTasks.findIndex(t => t.id === taskId);
-        console.log('AsyncTaskUIService: Existing task index:', existingTaskIndex);
-        if (existingTaskIndex >= 0) {
-            const existingTask = currentTasks[existingTaskIndex];
-            const wasRunning = existingTask.status === TaskStatus.QUEUED || existingTask.status === TaskStatus.STARTED;
-            const updatedTask = {
-                ...existingTask,
-                status: message.status,
-                progressPercentage: message.progress_percentage || existingTask.progressPercentage,
-                progressDescription: message.progress_description || existingTask.progressDescription,
-                errorMessage: message.error_message || existingTask.errorMessage,
-                result: message.result || existingTask.result,
-            };
-            const updatedTasks = [...currentTasks];
-            updatedTasks[existingTaskIndex] = updatedTask;
-            console.log('AsyncTaskUIService: Emitting updated tasks:', updatedTasks.length, 'active tasks:', updatedTasks.filter(t => t.status === TaskStatus.QUEUED || t.status === TaskStatus.STARTED).length);
-            this.tasksSubject.next(updatedTasks);
-            if (message.status === TaskStatus.STARTED) {
-                this.showTaskProgressNotification(updatedTask, existingTask);
-            }
-            if (wasRunning && (message.status === TaskStatus.SUCCESS || message.status === TaskStatus.FAILURE || message.status === TaskStatus.CANCELLED)) {
-                this.showTaskCompletionNotification(updatedTask);
-                const isTaskFromThisTab = this.isTaskInitiatedByThisTab(updatedTask.id);
-                this.taskCompletedSubject.next(updatedTask);
-                if (message.status === TaskStatus.SUCCESS) {
-                    if (this.isImportTask(updatedTask.taskType) && updatedTask.metadataTable) {
-                        this.metadataTableRefreshSubject.next(updatedTask.metadataTable);
-                    }
-                    if (this.isExportTask(updatedTask.taskType)) {
-                        this.exportTaskCompletedSubject.next(updatedTask);
-                        this.handleExportTaskCompletion(updatedTask);
-                    }
-                    if (updatedTask.taskType === TaskType.VALIDATE_TABLE && updatedTask.metadataTable) {
-                        this.metadataTableRefreshSubject.next(updatedTask.metadataTable);
-                    }
-                    if ((updatedTask.taskType === TaskType.REORDER_TABLE_COLUMNS) && updatedTask.metadataTable) {
-                        this.metadataTableRefreshSubject.next(updatedTask.metadataTable);
-                    }
-                }
-                if (isTaskFromThisTab) {
-                    this.initiatedTasks.delete(updatedTask.id);
-                }
-            }
-        }
-        else {
-            console.log('AsyncTaskUIService: Task not found in current list, fetching all tasks');
-            this.getTasks().subscribe(tasks => {
-                const taskArray = Array.isArray(tasks) ? tasks : [];
-                console.log('AsyncTaskUIService: Fetched tasks from server:', taskArray.length);
-                this.tasksSubject.next(taskArray);
-                const refreshedTask = taskArray.find(t => t.id === taskId);
-                console.log('AsyncTaskUIService: Found refreshed task:', refreshedTask ? refreshedTask.id : 'not found');
-                if (refreshedTask && (message.status === TaskStatus.SUCCESS || message.status === TaskStatus.FAILURE || message.status === TaskStatus.CANCELLED)) {
-                    this.showTaskCompletionNotification(refreshedTask);
-                    const isTaskFromThisTab = this.isTaskInitiatedByThisTab(refreshedTask.id);
-                    this.taskCompletedSubject.next(refreshedTask);
-                    if (message.status === TaskStatus.SUCCESS) {
-                        if (this.isImportTask(refreshedTask.taskType) && refreshedTask.metadataTable) {
-                            this.metadataTableRefreshSubject.next(refreshedTask.metadataTable);
-                        }
-                        if (this.isExportTask(refreshedTask.taskType)) {
-                            this.exportTaskCompletedSubject.next(refreshedTask);
-                            this.handleExportTaskCompletion(refreshedTask);
-                        }
-                        if (refreshedTask.taskType === TaskType.VALIDATE_TABLE && refreshedTask.metadataTable) {
-                            this.metadataTableRefreshSubject.next(refreshedTask.metadataTable);
-                        }
-                        if ((refreshedTask.taskType === TaskType.REORDER_TABLE_COLUMNS) && refreshedTask.metadataTable) {
-                            this.metadataTableRefreshSubject.next(refreshedTask.metadataTable);
-                        }
-                    }
-                    if (isTaskFromThisTab) {
-                        this.initiatedTasks.delete(refreshedTask.id);
-                    }
-                }
-            });
-        }
-    }
     showTaskProgressNotification(updatedTask, previousTask) {
         const taskName = this.getTaskDisplayName(updatedTask.taskType);
         const tableName = updatedTask.metadataTableName ? ` for "${updatedTask.metadataTableName}"` : '';
@@ -4214,15 +4058,19 @@ class AsyncTaskUIService {
             taskType === TaskType.EXPORT_MULTIPLE_SDRF || taskType === TaskType.EXPORT_MULTIPLE_EXCEL;
     }
     handleExportTaskCompletion(task) {
+        console.log('AsyncTaskUIService: handleExportTaskCompletion called for task:', task.id, 'type:', task.taskType);
         const taskName = this.getTaskDisplayName(task.taskType);
         const tableName = task.metadataTableName ? ` for "${task.metadataTableName}"` : '';
         if (task.taskType === TaskType.EXPORT_SDRF || task.taskType === TaskType.EXPORT_EXCEL) {
+            console.log('AsyncTaskUIService: Single export task - starting download in 1500ms');
             setTimeout(() => {
+                console.log('AsyncTaskUIService: Calling downloadTaskResult for task:', task.id);
                 this.downloadTaskResult(task.id);
             }, 1500);
             this.toastService.success(`${taskName}${tableName} completed! Starting download...`, 4000);
         }
         else {
+            console.log('AsyncTaskUIService: Bulk export task - no auto-download');
             this.toastService.success(`${taskName}${tableName} completed! Check your downloads.`, 6000);
         }
     }
@@ -5576,7 +5424,7 @@ class MetadataTableTemplateEditModal {
         columns.push(...regroupedColumns);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataTableTemplateEditModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }, { token: i2.NgbModal }, { token: MetadataTableTemplateService }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MetadataTableTemplateEditModal, isStandalone: true, selector: "ccv-metadata-table-template-edit-modal", inputs: { template: "template", labGroups: "labGroups", isEdit: "isEdit" }, outputs: { templateSaved: "templateSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-file-earmark-text me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"row\">\n      <!-- Basic Information -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-info-circle me-2\"></i>Basic Information\n        </h6>\n      </div>\n      \n      <div class=\"col-12 mb-3\">\n        <label for=\"templateName\" class=\"form-label\">Template Name *</label>\n        <input \n          type=\"text\" \n          class=\"form-control\"\n          id=\"templateName\"\n          formControlName=\"name\"\n          [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n          placeholder=\"Enter template name\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('name') }}\n        </div>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"description\" class=\"form-label\">Description</label>\n        <textarea \n          class=\"form-control\" \n          id=\"description\"\n          formControlName=\"description\"\n          rows=\"3\"\n          placeholder=\"Optional description\"></textarea>\n      </div>\n\n      <!-- Configuration -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-gear me-2\"></i>Configuration\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"labGroup\" class=\"form-label\">Lab Group</label>\n        <select \n          class=\"form-select\"\n          id=\"labGroup\"\n          formControlName=\"labGroupId\">\n          <option [ngValue]=\"null\">No Lab Group</option>\n          @for (group of labGroups; track group.id) {\n            <option [ngValue]=\"group.id\">{{ group.name }}</option>\n          }\n        </select>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <label for=\"visibility\" class=\"form-label\">Visibility</label>\n            <select \n              class=\"form-select\"\n              id=\"visibility\"\n              formControlName=\"visibility\">\n              @for (option of visibilityOptions; track option.value) {\n                <option [value]=\"option.value\">{{ option.label }}</option>\n              }\n            </select>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"form-check form-switch\">\n              <input \n                class=\"form-check-input\" \n                type=\"checkbox\" \n                id=\"isDefault\"\n                formControlName=\"isDefault\">\n              <label class=\"form-check-label\" for=\"isDefault\">\n                <i class=\"bi bi-star me-1\"></i>Default Template\n              </label>\n              <small class=\"form-text text-muted d-block\">Use as default for new projects</small>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Column Management -->\n      <div class=\"col-12 mb-3\">\n        <div class=\"d-flex justify-content-between align-items-center border-bottom pb-2\">\n          <h6 class=\"text-muted mb-0\">\n            <i class=\"bi bi-columns-gap me-2\"></i>Template Columns\n          </h6>\n          <div class=\"d-flex gap-2\">\n            <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"addColumn()\">\n              <i class=\"bi bi-plus me-1\"></i>Add Column\n            </button>\n            @if (isEdit && template?.id) {\n              <button type=\"button\" class=\"btn btn-sm btn-success\" (click)=\"addColumnWithAutoReorder()\"\n                      [disabled]=\"isLoading()\"\n                      title=\"Add column with automatic schema-based reordering\">\n                <i class=\"bi bi-plus-circle me-1\"></i>Add Column (Auto-Reorder)\n              </button>\n            }\n          </div>\n        </div>\n        @if (selectedColumnIds().size > 0) {\n          <div class=\"alert alert-info py-2 px-3 mt-2 mb-0\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <span>\n                <i class=\"bi bi-check-square me-1\"></i>\n                {{ selectedColumnIds().size }} column(s) selected\n              </span>\n              <div class=\"btn-group btn-group-sm\">\n                <button type=\"button\" class=\"btn btn-warning\" (click)=\"bulkToggleStaffOnly(true)\" title=\"Mark selected as Staff Only\" [disabled]=\"isLoading() || !isEdit || !template?.id\">\n                  <i class=\"bi bi-shield-lock me-1\"></i>Mark Staff Only\n                </button>\n                <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"bulkToggleStaffOnly(false)\" title=\"Mark selected as User Visible\" [disabled]=\"isLoading() || !isEdit || !template?.id\">\n                  <i class=\"bi bi-person me-1\"></i>Mark User Visible\n                </button>\n                <button type=\"button\" class=\"btn btn-danger\" (click)=\"bulkDeleteColumns()\" title=\"Delete selected columns\" [disabled]=\"isLoading() || !isEdit || !template?.id\">\n                  <i class=\"bi bi-trash me-1\"></i>Delete\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        @if (templateColumns().length > 0) {\n          <div class=\"table-responsive\">\n            <table class=\"table table-sm table-hover\">\n              <thead class=\"table-light\">\n                <tr>\n                  <th style=\"width: 40px;\">\n                    <input type=\"checkbox\" class=\"form-check-input\"\n                           [checked]=\"allColumnsSelected()\"\n                           [indeterminate]=\"someColumnsSelected()\"\n                           (change)=\"toggleAllColumns()\"\n                           title=\"Select all columns\">\n                  </th>\n                  <th style=\"width: 40px;\"><i class=\"bi bi-arrows-move\"></i></th>\n                  <th>Position</th>\n                  <th>Column Name</th>\n                  <th>Type</th>\n                  <th>Default Value</th>\n                  <th>Options</th>\n                  <th style=\"width: 120px;\">Actions</th>\n                </tr>\n              </thead>\n              <tbody cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" [cdkDropListData]=\"_templateColumns()\">\n                @for (column of _templateColumns(); track column.id; let i = $index) {\n                  <tr cdkDrag [cdkDragData]=\"column\" class=\"column-row\" [attr.data-column-id]=\"column.id\">\n                    <td class=\"text-center\">\n                      <input type=\"checkbox\" class=\"form-check-input\"\n                             [checked]=\"column.id && selectedColumnIds().has(column.id)\"\n                             (change)=\"column.id && toggleColumnSelection(column.id)\"\n                             (click)=\"$event.stopPropagation()\">\n                    </td>\n                    <td class=\"text-center\">\n                      <i class=\"bi bi-grip-vertical drag-handle\" cdkDragHandle></i>\n                    </td>\n                    <td>\n                      <span class=\"badge bg-secondary\">{{ i + 1 }}</span>\n                    </td>\n                    <td>\n                      <strong>{{ column.displayName || column.name }}</strong>\n                    </td>\n                    <td>\n                      <span class=\"badge bg-info\">{{ column.type }}</span>\n                    </td>\n                    <td>\n                      <span class=\"text-muted\">{{ column.value || '-' }}</span>\n                    </td>\n                    <td>\n                      <div class=\"d-flex gap-1\">\n                        @if (column.mandatory) {\n                          <span class=\"badge badge-pill bg-warning\" title=\"Mandatory\">\n                            <i class=\"bi bi-exclamation-circle\"></i>\n                          </span>\n                        }\n                        @if (column.hidden) {\n                          <span class=\"badge badge-pill bg-secondary\" title=\"Hidden\">\n                            <i class=\"bi bi-eye-slash\"></i>\n                          </span>\n                        }\n                        @if (column.readonly) {\n                          <span class=\"badge badge-pill bg-dark\" title=\"Read Only\">\n                            <i class=\"bi bi-lock\"></i>\n                          </span>\n                        }\n                        @if (column.staffOnly) {\n                          <span class=\"badge badge-pill bg-warning text-dark\" title=\"Staff Only\">\n                            <i class=\"bi bi-shield-lock\"></i>\n                          </span>\n                        }\n                        @if (column.ontologyType) {\n                          <span class=\"badge badge-pill bg-success\" title=\"Has Ontology\">\n                            <i class=\"bi bi-tags\"></i>\n                          </span>\n                        }\n                      </div>\n                    </td>\n                    <td>\n                      <div class=\"btn-group btn-group-sm\" role=\"group\">\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-primary\" \n                          (click)=\"editColumn(column)\"\n                          title=\"Edit column\">\n                          <i class=\"bi bi-pencil\"></i>\n                        </button>\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-info\" \n                          (click)=\"duplicateColumn(column)\"\n                          title=\"Duplicate column\">\n                          <i class=\"bi bi-copy\"></i>\n                        </button>\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-danger\" \n                          (click)=\"removeColumn(column)\"\n                          title=\"Remove column\">\n                          <i class=\"bi bi-trash\"></i>\n                        </button>\n                      </div>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n        } @else {\n          <div class=\"text-center py-4 text-muted\">\n            <i class=\"bi bi-columns-gap fs-1 mb-2\"></i>\n            <p>No columns in this template yet.</p>\n            <div class=\"d-flex gap-2 justify-content-center\">\n              <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addColumn()\">\n                <i class=\"bi bi-plus me-1\"></i>Add First Column\n              </button>\n              @if (isEdit && template?.id) {\n                <button type=\"button\" class=\"btn btn-success btn-sm\" (click)=\"addColumnWithAutoReorder()\" \n                        [disabled]=\"isLoading()\"\n                        title=\"Add column with automatic schema-based reordering\">\n                  <i class=\"bi bi-plus-circle me-1\"></i>Add with Auto-Reorder\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\n  </button>\n  <button \n    type=\"button\" \n    class=\"btn btn-primary\" \n    (click)=\"onSubmit()\"\n    [disabled]=\"editForm.invalid || isLoading()\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-check-circle me-1\"></i>\n    {{ isEdit ? 'Update' : 'Create' }} Template\n  </button>\n</div>\n", styles: [".column-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.column-row.cdk-drag-disabled{opacity:.5}.column-row.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-row.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:var(--cupcake-card-bg)}.column-row.cdk-drag-preview td{border:none!important}.column-row.cdk-drag-placeholder{opacity:0}.drag-handle{cursor:grab;color:var(--cupcake-text-muted)}.drag-handle:hover{color:var(--cupcake-text)}.drag-handle:active{cursor:grabbing}.column-row[data-column-group]{position:relative}.column-row[data-column-group]:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bs-primary)}.badge.badge-pill{border-radius:50px;font-size:.65em;padding:.25em .5em}.modal-lg{max-width:900px}.table-responsive{border-radius:.375rem;overflow:hidden}.table-sm{font-size:.875rem}.table-sm th,.table-sm td{padding:.5rem;vertical-align:middle}.text-center.py-4{background:var(--cupcake-bg-tertiary);border-radius:.375rem;margin:1rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MetadataTableTemplateEditModal, isStandalone: true, selector: "ccv-metadata-table-template-edit-modal", inputs: { template: "template", labGroups: "labGroups", isEdit: "isEdit" }, outputs: { templateSaved: "templateSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-file-earmark-text me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"row\">\n      <!-- Basic Information -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-info-circle me-2\"></i>Basic Information\n        </h6>\n      </div>\n      \n      <div class=\"col-12 mb-3\">\n        <label for=\"templateName\" class=\"form-label\">Template Name *</label>\n        <input \n          type=\"text\" \n          class=\"form-control\"\n          id=\"templateName\"\n          formControlName=\"name\"\n          [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n          placeholder=\"Enter template name\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('name') }}\n        </div>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"description\" class=\"form-label\">Description</label>\n        <textarea \n          class=\"form-control\" \n          id=\"description\"\n          formControlName=\"description\"\n          rows=\"3\"\n          placeholder=\"Optional description\"></textarea>\n      </div>\n\n      <!-- Configuration -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-gear me-2\"></i>Configuration\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"labGroup\" class=\"form-label\">Lab Group</label>\n        <select \n          class=\"form-select\"\n          id=\"labGroup\"\n          formControlName=\"labGroupId\">\n          <option [ngValue]=\"null\">No Lab Group</option>\n          @for (group of labGroups; track group.id) {\n            <option [ngValue]=\"group.id\">{{ group.name }}</option>\n          }\n        </select>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <label for=\"visibility\" class=\"form-label\">Visibility</label>\n            <select \n              class=\"form-select\"\n              id=\"visibility\"\n              formControlName=\"visibility\">\n              @for (option of visibilityOptions; track option.value) {\n                <option [value]=\"option.value\">{{ option.label }}</option>\n              }\n            </select>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"form-check form-switch\">\n              <input \n                class=\"form-check-input\" \n                type=\"checkbox\" \n                id=\"isDefault\"\n                formControlName=\"isDefault\">\n              <label class=\"form-check-label\" for=\"isDefault\">\n                <i class=\"bi bi-star me-1\"></i>Default Template\n              </label>\n              <small class=\"form-text text-muted d-block\">Use as default for new projects</small>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Column Management -->\n      <div class=\"col-12 mb-3\">\n        <div class=\"d-flex justify-content-between align-items-center border-bottom pb-2\">\n          <h6 class=\"text-muted mb-0\">\n            <i class=\"bi bi-columns-gap me-2\"></i>Template Columns\n          </h6>\n          <div class=\"d-flex gap-2\">\n            <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"addColumn()\">\n              <i class=\"bi bi-plus me-1\"></i>Add Column\n            </button>\n            @if (isEdit && template?.id) {\n              <button type=\"button\" class=\"btn btn-sm btn-success\" (click)=\"addColumnWithAutoReorder()\"\n                      [disabled]=\"isLoading()\"\n                      title=\"Add column with automatic schema-based reordering\">\n                <i class=\"bi bi-plus-circle me-1\"></i>Add Column (Auto-Reorder)\n              </button>\n            }\n          </div>\n        </div>\n        @if (selectedColumnIds().size > 0) {\n          <div class=\"alert alert-info py-2 px-3 mt-2 mb-0\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <span>\n                <i class=\"bi bi-check-square me-1\"></i>\n                {{ selectedColumnIds().size }} column(s) selected\n              </span>\n              <div class=\"btn-group btn-group-sm\">\n                <button type=\"button\" class=\"btn btn-warning\" (click)=\"bulkToggleStaffOnly(true)\" title=\"Mark selected as Staff Only\" [disabled]=\"isLoading() || !isEdit || !template?.id\">\n                  <i class=\"bi bi-shield-lock me-1\"></i>Mark Staff Only\n                </button>\n                <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"bulkToggleStaffOnly(false)\" title=\"Mark selected as User Visible\" [disabled]=\"isLoading() || !isEdit || !template?.id\">\n                  <i class=\"bi bi-person me-1\"></i>Mark User Visible\n                </button>\n                <button type=\"button\" class=\"btn btn-danger\" (click)=\"bulkDeleteColumns()\" title=\"Delete selected columns\" [disabled]=\"isLoading() || !isEdit || !template?.id\">\n                  <i class=\"bi bi-trash me-1\"></i>Delete\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        @if (templateColumns().length > 0) {\n          <div class=\"table-responsive\">\n            <table class=\"table table-sm table-hover\">\n              <thead class=\"table-light\">\n                <tr>\n                  <th style=\"width: 40px;\">\n                    <input type=\"checkbox\" class=\"form-check-input\"\n                           [checked]=\"allColumnsSelected()\"\n                           [indeterminate]=\"someColumnsSelected()\"\n                           (change)=\"toggleAllColumns()\"\n                           title=\"Select all columns\">\n                  </th>\n                  <th style=\"width: 40px;\"><i class=\"bi bi-arrows-move\"></i></th>\n                  <th>Position</th>\n                  <th>Column Name</th>\n                  <th>Type</th>\n                  <th>Default Value</th>\n                  <th>Options</th>\n                  <th style=\"width: 120px;\">Actions</th>\n                </tr>\n              </thead>\n              <tbody cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" [cdkDropListData]=\"_templateColumns()\">\n                @for (column of _templateColumns(); track column.id; let i = $index) {\n                  <tr cdkDrag [cdkDragData]=\"column\" class=\"column-row\" [attr.data-column-id]=\"column.id\">\n                    <td class=\"text-center\">\n                      <input type=\"checkbox\" class=\"form-check-input\"\n                             [checked]=\"column.id && selectedColumnIds().has(column.id)\"\n                             (change)=\"column.id && toggleColumnSelection(column.id)\"\n                             (click)=\"$event.stopPropagation()\">\n                    </td>\n                    <td class=\"text-center\">\n                      <i class=\"bi bi-grip-vertical drag-handle\" cdkDragHandle></i>\n                    </td>\n                    <td>\n                      <span class=\"badge bg-secondary\">{{ i + 1 }}</span>\n                    </td>\n                    <td>\n                      <strong>{{ column.displayName || column.name }}</strong>\n                    </td>\n                    <td>\n                      <span class=\"badge bg-info\">{{ column.type }}</span>\n                    </td>\n                    <td>\n                      <span class=\"text-muted\">{{ column.value || '-' }}</span>\n                    </td>\n                    <td>\n                      <div class=\"d-flex gap-1\">\n                        @if (column.mandatory) {\n                          <span class=\"badge badge-pill bg-warning\" title=\"Mandatory\">\n                            <i class=\"bi bi-exclamation-circle\"></i>\n                          </span>\n                        }\n                        @if (column.hidden) {\n                          <span class=\"badge badge-pill bg-secondary\" title=\"Hidden\">\n                            <i class=\"bi bi-eye-slash\"></i>\n                          </span>\n                        }\n                        @if (column.readonly) {\n                          <span class=\"badge badge-pill bg-dark\" title=\"Read Only\">\n                            <i class=\"bi bi-lock\"></i>\n                          </span>\n                        }\n                        @if (column.staffOnly) {\n                          <span class=\"badge badge-pill bg-warning text-dark\" title=\"Staff Only\">\n                            <i class=\"bi bi-shield-lock\"></i>\n                          </span>\n                        }\n                        @if (column.ontologyType) {\n                          <span class=\"badge badge-pill bg-success\" title=\"Has Ontology\">\n                            <i class=\"bi bi-tags\"></i>\n                          </span>\n                        }\n                      </div>\n                    </td>\n                    <td>\n                      <div class=\"btn-group btn-group-sm\" role=\"group\">\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-primary\" \n                          (click)=\"editColumn(column)\"\n                          title=\"Edit column\">\n                          <i class=\"bi bi-pencil\"></i>\n                        </button>\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-info\" \n                          (click)=\"duplicateColumn(column)\"\n                          title=\"Duplicate column\">\n                          <i class=\"bi bi-copy\"></i>\n                        </button>\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-danger\" \n                          (click)=\"removeColumn(column)\"\n                          title=\"Remove column\">\n                          <i class=\"bi bi-trash\"></i>\n                        </button>\n                      </div>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n        } @else {\n          <div class=\"text-center py-4 text-muted\">\n            <i class=\"bi bi-columns-gap fs-1 mb-2\"></i>\n            <p>No columns in this template yet.</p>\n            <div class=\"d-flex gap-2 justify-content-center\">\n              <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addColumn()\">\n                <i class=\"bi bi-plus me-1\"></i>Add First Column\n              </button>\n              @if (isEdit && template?.id) {\n                <button type=\"button\" class=\"btn btn-success btn-sm\" (click)=\"addColumnWithAutoReorder()\" \n                        [disabled]=\"isLoading()\"\n                        title=\"Add column with automatic schema-based reordering\">\n                  <i class=\"bi bi-plus-circle me-1\"></i>Add with Auto-Reorder\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\n  </button>\n  <button \n    type=\"button\" \n    class=\"btn btn-primary\" \n    (click)=\"onSubmit()\"\n    [disabled]=\"editForm.invalid || isLoading()\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-check-circle me-1\"></i>\n    {{ isEdit ? 'Update' : 'Create' }} Template\n  </button>\n</div>\n", styles: [".column-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.column-row.cdk-drag-disabled{opacity:.5}.column-row.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-row.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:var(--cupcake-card-bg)}.column-row.cdk-drag-preview td{border:none!important}.column-row.cdk-drag-placeholder{opacity:0}.drag-handle{cursor:grab;color:var(--cupcake-text-muted)}.drag-handle:hover{color:var(--cupcake-text)}.drag-handle:active{cursor:grabbing}.column-row[data-column-group]{position:relative}.column-row[data-column-group]:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bs-primary)}.badge.badge-pill{border-radius:50px;font-size:.65em;padding:.25em .5em}.modal-lg{max-width:900px}.table-responsive{border-radius:.375rem;overflow:hidden}.table-sm{font-size:.875rem}.table-sm th,.table-sm td{padding:.5rem;vertical-align:middle}.text-center.py-4{background:var(--cupcake-bg-tertiary);border-radius:.375rem;margin:1rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataTableTemplateEditModal, decorators: [{
             type: Component,
@@ -6308,7 +6156,6 @@ class MetadataTableTemplates {
                 this.toastService.success(`Template column reorder task queued successfully! Task ID: ${response.taskId}`);
                 // Mark task for monitoring and start real-time updates (same pattern as other async operations)
                 this.asyncTaskService.monitorTask(response.taskId);
-                this.asyncTaskService.startRealtimeUpdates();
                 this.isLoading.set(false);
             },
             error: (error) => {
@@ -6329,15 +6176,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
 class ColumnTemplateEditModal {
     fb;
     activeModal;
+    templateService;
+    ontologySearchService;
     template = null;
     labGroups = [];
     isEdit = false;
     templateSaved = new EventEmitter();
     editForm;
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    // Make Object available in template
+    isLoadingSuggestions = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingSuggestions" }] : []));
     Object = Object;
-    // Available options for dropdowns
     columnTypes = COLUMN_TYPE_CONFIGS;
     visibilityOptions = [
         { value: 'private', label: 'Private' },
@@ -6346,9 +6194,11 @@ class ColumnTemplateEditModal {
         { value: 'global', label: 'Global' }
     ];
     ontologyTypes = ONTOLOGY_TYPE_CONFIGS;
-    constructor(fb, activeModal) {
+    constructor(fb, activeModal, templateService, ontologySearchService) {
         this.fb = fb;
         this.activeModal = activeModal;
+        this.templateService = templateService;
+        this.ontologySearchService = ontologySearchService;
         this.editForm = this.fb.group({
             name: ['', [Validators.required, Validators.minLength(3)]],
             description: [''],
@@ -6382,6 +6232,7 @@ class ColumnTemplateEditModal {
     }
     populateForm() {
         if (this.template) {
+            const ontologyValue = this.getOntologyValueForTemplate(this.template.ontologyType, this.template.customOntologyFilters);
             this.editForm.patchValue({
                 name: this.template.name,
                 description: this.template.description || '',
@@ -6389,7 +6240,7 @@ class ColumnTemplateEditModal {
                 columnType: this.template.columnType,
                 defaultValue: this.template.defaultValue || '',
                 defaultPosition: this.template.defaultPosition || 0,
-                ontologyType: this.template.ontologyType || '',
+                ontologyType: ontologyValue,
                 customOntologyFilters: this.template.customOntologyFilters || {},
                 visibility: this.template.visibility || 'private',
                 labGroup: this.template.labGroup || null,
@@ -6403,6 +6254,27 @@ class ColumnTemplateEditModal {
             });
         }
     }
+    getOntologyValueForTemplate(ontologyType, customFilters) {
+        if (!ontologyType)
+            return '';
+        if (!customFilters || Object.keys(customFilters).length === 0) {
+            return ontologyType;
+        }
+        const matchingOption = this.ontologyTypes.find(opt => {
+            if (opt.value !== ontologyType)
+                return false;
+            if (!opt.customFilters)
+                return true;
+            const optFilters = JSON.stringify(opt.customFilters);
+            const templateFilters = JSON.stringify(customFilters);
+            return optFilters === templateFilters;
+        });
+        if (matchingOption) {
+            const index = this.ontologyTypes.indexOf(matchingOption);
+            return `${matchingOption.value}__${index}`;
+        }
+        return ontologyType;
+    }
     onVisibilityChange() {
         const visibility = this.editForm.get('visibility')?.value;
         const labGroupControl = this.editForm.get('labGroup');
@@ -6417,17 +6289,33 @@ class ColumnTemplateEditModal {
         }
         labGroupControl?.updateValueAndValidity();
     }
+    getOptionValue(ontology, index) {
+        const hasMultipleSameValues = this.ontologyTypes.filter(o => o.value === ontology.value).length > 1;
+        if (hasMultipleSameValues) {
+            return `${ontology.value}__${index}`;
+        }
+        return ontology.value;
+    }
     onOntologyTypeChange() {
-        const ontologyType = this.editForm.get('ontologyType')?.value;
+        const ontologyValue = this.editForm.get('ontologyType')?.value;
         const customFiltersControl = this.editForm.get('customOntologyFilters');
-        // Find the selected ontology type configuration
-        const selectedOntology = this.ontologyTypes.find(ont => ont.value === ontologyType);
+        if (!ontologyValue) {
+            customFiltersControl?.setValue({});
+            customFiltersControl?.markAsDirty();
+            return;
+        }
+        let selectedOntology;
+        if (ontologyValue.includes('__')) {
+            const index = parseInt(ontologyValue.split('__')[1]);
+            selectedOntology = this.ontologyTypes[index];
+        }
+        else {
+            selectedOntology = this.ontologyTypes.find(ont => ont.value === ontologyValue);
+        }
         if (selectedOntology && selectedOntology.customFilters) {
-            // Apply the custom filter from the ontology type
             customFiltersControl?.setValue(selectedOntology.customFilters);
         }
         else {
-            // Clear custom filters if no ontology type selected or no custom filter defined
             customFiltersControl?.setValue({});
         }
         customFiltersControl?.markAsDirty();
@@ -6436,9 +6324,13 @@ class ColumnTemplateEditModal {
         if (this.editForm.valid) {
             this.isLoading.set(true);
             const formValue = this.editForm.value;
-            // Clean up form data
+            let ontologyType = formValue.ontologyType;
+            if (ontologyType && ontologyType.includes('__')) {
+                ontologyType = ontologyType.split('__')[0];
+            }
             const templateData = {
                 ...formValue,
+                ontologyType: ontologyType,
                 labGroup: formValue.visibility === 'labGroup' ? formValue.labGroup : null,
                 defaultPosition: Number(formValue.defaultPosition) || 0
             };
@@ -6482,13 +6374,100 @@ class ColumnTemplateEditModal {
     get title() {
         return this.isEdit ? 'Edit Column Template' : 'Create Column Template';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColumnTemplateEditModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: ColumnTemplateEditModal, isStandalone: true, selector: "ccv-column-template-edit-modal", inputs: { template: "template", labGroups: "labGroups", isEdit: "isEdit" }, outputs: { templateSaved: "templateSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-clipboard-list me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"row\">\n      <!-- Basic Information -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-info-circle me-2\"></i>Basic Information\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"templateName\" class=\"form-label\">Template Name *</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"templateName\"\n          formControlName=\"name\"\n          [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n          placeholder=\"Enter template name\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('name') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnName\" class=\"form-label\">Column Name *</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"columnName\"\n          formControlName=\"columnName\"\n          [class.is-invalid]=\"editForm.get('columnName')?.invalid && editForm.get('columnName')?.touched\"\n          placeholder=\"columnName\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('columnName') }}\n        </div>\n        <small class=\"form-text text-muted\">Column name based on column type and template name. Example: characteristics[biological replicate]</small>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"description\" class=\"form-label\">Description</label>\n        <textarea\n          class=\"form-control\"\n          id=\"description\"\n          formControlName=\"description\"\n          rows=\"2\"\n          placeholder=\"Optional description\"></textarea>\n      </div>\n\n      <!-- Column Configuration -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-gear me-2\"></i>Column Configuration\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnType\" class=\"form-label\">Column Type *</label>\n        <select\n          class=\"form-select\"\n          id=\"columnType\"\n          formControlName=\"columnType\"\n          [class.is-invalid]=\"editForm.get('columnType')?.invalid && editForm.get('columnType')?.touched\">\n          @for (type of columnTypes; track type.value) {\n            <option [value]=\"type.value\">{{ type.label }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('columnType') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"defaultPosition\" class=\"form-label\">Default Position</label>\n        <input\n          type=\"number\"\n          class=\"form-control\"\n          id=\"defaultPosition\"\n          formControlName=\"defaultPosition\"\n          [class.is-invalid]=\"editForm.get('defaultPosition')?.invalid && editForm.get('defaultPosition')?.touched\"\n          min=\"0\"\n          placeholder=\"0\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('defaultPosition') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"defaultValue\" class=\"form-label\">Default Value</label>\n        @if (editForm.get('notApplicable')?.value || editForm.get('notAvailable')?.value) {\n          <div class=\"mb-2\">\n            <div class=\"btn-group btn-group-sm\" role=\"group\">\n              @if (editForm.get('notApplicable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not applicable')\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </button>\n              }\n              @if (editForm.get('notAvailable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not available')\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </button>\n              }\n            </div>\n          </div>\n        }\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"defaultValue\"\n          formControlName=\"defaultValue\"\n          placeholder=\"Optional default value\">\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"ontologyType\" class=\"form-label\">Ontology Type</label>\n        <select\n          class=\"form-select\"\n          id=\"ontologyType\"\n          formControlName=\"ontologyType\"\n          (change)=\"onOntologyTypeChange()\">\n          @for (ontology of ontologyTypes; track $index) {\n            <option [value]=\"ontology.value\">{{ ontology.label }}</option>\n          }\n        </select>\n      </div>\n\n      @if (editForm.get('ontologyType')?.value && editForm.get('customOntologyFilters')?.value && Object.keys(editForm.get('customOntologyFilters')?.value || {}).length > 0) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-info\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-filter me-2\"></i>Custom Ontology Filters Applied\n            </h6>\n            <small class=\"mb-0\">\n              The following custom filters will be automatically applied for this ontology type:\n              <code class=\"ms-1\">{{ editForm.get('customOntologyFilters')?.value | json }}</code>\n            </small>\n          </div>\n        </div>\n      }\n\n      <!-- Visibility and Access -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-eye me-2\"></i>Visibility and Access\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"visibility\" class=\"form-label\">Visibility *</label>\n        <select\n          class=\"form-select\"\n          id=\"visibility\"\n          formControlName=\"visibility\"\n          (change)=\"onVisibilityChange()\"\n          [class.is-invalid]=\"editForm.get('visibility')?.invalid && editForm.get('visibility')?.touched\">\n          @for (option of visibilityOptions; track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('visibility') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"labGroup\" class=\"form-label\">Lab Group</label>\n        <select\n          class=\"form-select\"\n          id=\"labGroup\"\n          formControlName=\"labGroup\"\n          [class.is-invalid]=\"editForm.get('labGroup')?.invalid && editForm.get('labGroup')?.touched\">\n          <option [ngValue]=\"null\">Select Lab Group</option>\n          @for (group of labGroups; track group.id) {\n            <option [ngValue]=\"group.id\">{{ group.name }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('labGroup') }}\n        </div>\n      </div>\n\n      <!-- Additional Options -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-sliders me-2\"></i>Additional Options\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"category\" class=\"form-label\">Category</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"category\"\n          formControlName=\"category\"\n          placeholder=\"Template category\">\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"tags\" class=\"form-label\">Tags</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"tags\"\n          formControlName=\"tags\"\n          placeholder=\"Comma-separated tags\">\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"enableTypeahead\"\n                formControlName=\"enableTypeahead\">\n              <label class=\"form-check-label\" for=\"enableTypeahead\">\n                Enable Typeahead\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"notApplicable\"\n                formControlName=\"notApplicable\">\n              <label class=\"form-check-label\" for=\"notApplicable\">\n                <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"notAvailable\"\n                formControlName=\"notAvailable\">\n              <label class=\"form-check-label\" for=\"notAvailable\">\n                <i class=\"bi bi-question-circle me-1\"></i>Not Available\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"excelValidation\"\n                formControlName=\"excelValidation\">\n              <label class=\"form-check-label\" for=\"excelValidation\">\n                Excel Validation\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"isActive\"\n                formControlName=\"isActive\">\n              <label class=\"form-check-label\" for=\"isActive\">\n                Active\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\n  </button>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary\"\n    (click)=\"onSubmit()\"\n    [disabled]=\"editForm.invalid || isLoading()\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-check-circle me-1\"></i>\n    {{ isEdit ? 'Update' : 'Create' }} Template\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbModule }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }] });
+    get hasOntologyType() {
+        const ontologyValue = this.editForm.get('ontologyType')?.value;
+        return !!ontologyValue && ontologyValue !== '';
+    }
+    searchDefaultValue = (text$) => {
+        return text$.pipe(debounceTime(300), distinctUntilChanged(), tap$1(() => this.isLoadingSuggestions.set(true)), switchMap$1(term => {
+            if (!term || term.length < 2) {
+                this.isLoadingSuggestions.set(false);
+                return of([]);
+            }
+            const ontologyValue = this.editForm.get('ontologyType')?.value;
+            if (!ontologyValue) {
+                this.isLoadingSuggestions.set(false);
+                return of([]);
+            }
+            let ontologyType = ontologyValue;
+            if (ontologyValue.includes('__')) {
+                ontologyType = ontologyValue.split('__')[0];
+            }
+            const customFilters = this.editForm.get('customOntologyFilters')?.value;
+            if (this.template?.id) {
+                return this.templateService.getOntologySuggestions({
+                    search: term,
+                    templateId: this.template.id,
+                    limit: 10
+                }).pipe(map$1(response => response.suggestions || []), catchError(error => {
+                    console.error('Error getting ontology suggestions:', error);
+                    return of([]);
+                }), tap$1(() => this.isLoadingSuggestions.set(false)));
+            }
+            else if (ontologyType) {
+                return this.ontologySearchService.suggest({
+                    q: term,
+                    type: ontologyType,
+                    match: 'contains',
+                    customFilters: customFilters,
+                    limit: 10
+                }).pipe(map$1(response => response.suggestions || []), catchError(error => {
+                    console.error('Error getting ontology suggestions:', error);
+                    return of([]);
+                }), tap$1(() => this.isLoadingSuggestions.set(false)));
+            }
+            else {
+                this.isLoadingSuggestions.set(false);
+                return of([]);
+            }
+        }));
+    };
+    formatSuggestion = (suggestion) => {
+        return suggestion.displayName || suggestion.value;
+    };
+    inputFormatter = (suggestion) => {
+        if (suggestion.fullData && suggestion.fullData.name) {
+            if (suggestion.fullData.accession) {
+                return `NT=${suggestion.fullData.name};AC=${suggestion.fullData.accession}`;
+            }
+            else {
+                return suggestion.fullData.name;
+            }
+        }
+        return suggestion.displayName || suggestion.value || String(suggestion);
+    };
+    onSuggestionSelected = (event) => {
+        if (event.item) {
+            const suggestion = event.item;
+            let displayValue;
+            if (suggestion.fullData && suggestion.fullData.name) {
+                if (suggestion.fullData.accession) {
+                    displayValue = `NT=${suggestion.fullData.name};AC=${suggestion.fullData.accession}`;
+                }
+                else {
+                    displayValue = suggestion.fullData.name;
+                }
+            }
+            else if (suggestion.displayName) {
+                displayValue = suggestion.displayName;
+            }
+            else if (suggestion.value) {
+                displayValue = suggestion.value;
+            }
+            else {
+                displayValue = String(suggestion);
+            }
+            this.editForm.get('defaultValue')?.setValue(displayValue);
+            this.editForm.get('defaultValue')?.markAsTouched();
+        }
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColumnTemplateEditModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }, { token: MetadataColumnTemplateService }, { token: OntologySearchService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: ColumnTemplateEditModal, isStandalone: true, selector: "ccv-column-template-edit-modal", inputs: { template: "template", labGroups: "labGroups", isEdit: "isEdit" }, outputs: { templateSaved: "templateSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-clipboard-list me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"row\">\n      <!-- Basic Information -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-info-circle me-2\"></i>Basic Information\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"templateName\" class=\"form-label\">Template Name *</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"templateName\"\n          formControlName=\"name\"\n          [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n          placeholder=\"Enter template name\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('name') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnName\" class=\"form-label\">Column Name *</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"columnName\"\n          formControlName=\"columnName\"\n          [class.is-invalid]=\"editForm.get('columnName')?.invalid && editForm.get('columnName')?.touched\"\n          placeholder=\"columnName\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('columnName') }}\n        </div>\n        <small class=\"form-text text-muted\">Column name based on column type and template name. Example: characteristics[biological replicate]</small>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"description\" class=\"form-label\">Description</label>\n        <textarea\n          class=\"form-control\"\n          id=\"description\"\n          formControlName=\"description\"\n          rows=\"2\"\n          placeholder=\"Optional description\"></textarea>\n      </div>\n\n      <!-- Column Configuration -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-gear me-2\"></i>Column Configuration\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnType\" class=\"form-label\">Column Type *</label>\n        <select\n          class=\"form-select\"\n          id=\"columnType\"\n          formControlName=\"columnType\"\n          [class.is-invalid]=\"editForm.get('columnType')?.invalid && editForm.get('columnType')?.touched\">\n          @for (type of columnTypes; track type.value) {\n            <option [value]=\"type.value\">{{ type.label }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('columnType') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"defaultPosition\" class=\"form-label\">Default Position</label>\n        <input\n          type=\"number\"\n          class=\"form-control\"\n          id=\"defaultPosition\"\n          formControlName=\"defaultPosition\"\n          [class.is-invalid]=\"editForm.get('defaultPosition')?.invalid && editForm.get('defaultPosition')?.touched\"\n          min=\"0\"\n          placeholder=\"0\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('defaultPosition') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"defaultValue\" class=\"form-label\">\n          Default Value\n          @if (hasOntologyType) {\n            <span class=\"badge bg-success ms-2\">\n              <i class=\"bi bi-search me-1\"></i>Autocomplete Available\n            </span>\n          }\n        </label>\n        @if (editForm.get('notApplicable')?.value || editForm.get('notAvailable')?.value) {\n          <div class=\"mb-2\">\n            <div class=\"btn-group btn-group-sm\" role=\"group\">\n              @if (editForm.get('notApplicable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not applicable')\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </button>\n              }\n              @if (editForm.get('notAvailable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not available')\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </button>\n              }\n            </div>\n          </div>\n        }\n        @if (hasOntologyType) {\n          <div class=\"input-group\">\n            <input\n              type=\"text\"\n              class=\"form-control\"\n              id=\"defaultValue\"\n              formControlName=\"defaultValue\"\n              placeholder=\"Type to search ontology suggestions...\"\n              [ngbTypeahead]=\"searchDefaultValue\"\n              [resultFormatter]=\"formatSuggestion\"\n              [inputFormatter]=\"inputFormatter\"\n              (selectItem)=\"onSuggestionSelected($event)\"\n              [editable]=\"true\"\n              [showHint]=\"true\"\n              [focusFirst]=\"false\"\n              container=\"body\">\n            @if (isLoadingSuggestions()) {\n              <span class=\"input-group-text\">\n                <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n                  <span class=\"visually-hidden\">Loading...</span>\n                </div>\n              </span>\n            } @else {\n              <span class=\"input-group-text\">\n                <i class=\"bi bi-search text-muted\"></i>\n              </span>\n            }\n          </div>\n          <div class=\"form-text\">\n            <i class=\"bi bi-info-circle me-1\"></i>Type to search for ontology suggestions\n          </div>\n        } @else {\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            id=\"defaultValue\"\n            formControlName=\"defaultValue\"\n            placeholder=\"Optional default value\">\n          <div class=\"form-text text-muted\">\n            Select an ontology type to enable autocomplete\n          </div>\n        }\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"ontologyType\" class=\"form-label\">Ontology Type</label>\n        <select\n          class=\"form-select\"\n          id=\"ontologyType\"\n          formControlName=\"ontologyType\"\n          (change)=\"onOntologyTypeChange()\">\n          @for (ontology of ontologyTypes; track $index) {\n            <option [value]=\"getOptionValue(ontology, $index)\">{{ ontology.label }}</option>\n          }\n        </select>\n      </div>\n\n      @if (editForm.get('ontologyType')?.value && editForm.get('customOntologyFilters')?.value && Object.keys(editForm.get('customOntologyFilters')?.value || {}).length > 0) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-info\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-filter me-2\"></i>Custom Ontology Filters Applied\n            </h6>\n            <small class=\"mb-0\">\n              The following custom filters will be automatically applied for this ontology type:\n              <code class=\"ms-1\">{{ editForm.get('customOntologyFilters')?.value | json }}</code>\n            </small>\n          </div>\n        </div>\n      }\n\n      <!-- Visibility and Access -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-eye me-2\"></i>Visibility and Access\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"visibility\" class=\"form-label\">Visibility *</label>\n        <select\n          class=\"form-select\"\n          id=\"visibility\"\n          formControlName=\"visibility\"\n          (change)=\"onVisibilityChange()\"\n          [class.is-invalid]=\"editForm.get('visibility')?.invalid && editForm.get('visibility')?.touched\">\n          @for (option of visibilityOptions; track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('visibility') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"labGroup\" class=\"form-label\">Lab Group</label>\n        <select\n          class=\"form-select\"\n          id=\"labGroup\"\n          formControlName=\"labGroup\"\n          [class.is-invalid]=\"editForm.get('labGroup')?.invalid && editForm.get('labGroup')?.touched\">\n          <option [ngValue]=\"null\">Select Lab Group</option>\n          @for (group of labGroups; track group.id) {\n            <option [ngValue]=\"group.id\">{{ group.name }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('labGroup') }}\n        </div>\n      </div>\n\n      <!-- Additional Options -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-sliders me-2\"></i>Additional Options\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"category\" class=\"form-label\">Category</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"category\"\n          formControlName=\"category\"\n          placeholder=\"Template category\">\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"tags\" class=\"form-label\">Tags</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"tags\"\n          formControlName=\"tags\"\n          placeholder=\"Comma-separated tags\">\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"enableTypeahead\"\n                formControlName=\"enableTypeahead\">\n              <label class=\"form-check-label\" for=\"enableTypeahead\">\n                Enable Typeahead\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"notApplicable\"\n                formControlName=\"notApplicable\">\n              <label class=\"form-check-label\" for=\"notApplicable\">\n                <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"notAvailable\"\n                formControlName=\"notAvailable\">\n              <label class=\"form-check-label\" for=\"notAvailable\">\n                <i class=\"bi bi-question-circle me-1\"></i>Not Available\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"excelValidation\"\n                formControlName=\"excelValidation\">\n              <label class=\"form-check-label\" for=\"excelValidation\">\n                Excel Validation\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"isActive\"\n                formControlName=\"isActive\">\n              <label class=\"form-check-label\" for=\"isActive\">\n                Active\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\n  </button>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary\"\n    (click)=\"onSubmit()\"\n    [disabled]=\"editForm.invalid || isLoading()\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-check-circle me-1\"></i>\n    {{ isEdit ? 'Update' : 'Create' }} Template\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "pipe", type: i5.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColumnTemplateEditModal, decorators: [{
             type: Component,
-            args: [{ selector: 'ccv-column-template-edit-modal', standalone: true, imports: [CommonModule, ReactiveFormsModule, NgbModule], template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-clipboard-list me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"row\">\n      <!-- Basic Information -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-info-circle me-2\"></i>Basic Information\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"templateName\" class=\"form-label\">Template Name *</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"templateName\"\n          formControlName=\"name\"\n          [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n          placeholder=\"Enter template name\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('name') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnName\" class=\"form-label\">Column Name *</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"columnName\"\n          formControlName=\"columnName\"\n          [class.is-invalid]=\"editForm.get('columnName')?.invalid && editForm.get('columnName')?.touched\"\n          placeholder=\"columnName\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('columnName') }}\n        </div>\n        <small class=\"form-text text-muted\">Column name based on column type and template name. Example: characteristics[biological replicate]</small>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"description\" class=\"form-label\">Description</label>\n        <textarea\n          class=\"form-control\"\n          id=\"description\"\n          formControlName=\"description\"\n          rows=\"2\"\n          placeholder=\"Optional description\"></textarea>\n      </div>\n\n      <!-- Column Configuration -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-gear me-2\"></i>Column Configuration\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnType\" class=\"form-label\">Column Type *</label>\n        <select\n          class=\"form-select\"\n          id=\"columnType\"\n          formControlName=\"columnType\"\n          [class.is-invalid]=\"editForm.get('columnType')?.invalid && editForm.get('columnType')?.touched\">\n          @for (type of columnTypes; track type.value) {\n            <option [value]=\"type.value\">{{ type.label }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('columnType') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"defaultPosition\" class=\"form-label\">Default Position</label>\n        <input\n          type=\"number\"\n          class=\"form-control\"\n          id=\"defaultPosition\"\n          formControlName=\"defaultPosition\"\n          [class.is-invalid]=\"editForm.get('defaultPosition')?.invalid && editForm.get('defaultPosition')?.touched\"\n          min=\"0\"\n          placeholder=\"0\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('defaultPosition') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"defaultValue\" class=\"form-label\">Default Value</label>\n        @if (editForm.get('notApplicable')?.value || editForm.get('notAvailable')?.value) {\n          <div class=\"mb-2\">\n            <div class=\"btn-group btn-group-sm\" role=\"group\">\n              @if (editForm.get('notApplicable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not applicable')\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </button>\n              }\n              @if (editForm.get('notAvailable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not available')\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </button>\n              }\n            </div>\n          </div>\n        }\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"defaultValue\"\n          formControlName=\"defaultValue\"\n          placeholder=\"Optional default value\">\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"ontologyType\" class=\"form-label\">Ontology Type</label>\n        <select\n          class=\"form-select\"\n          id=\"ontologyType\"\n          formControlName=\"ontologyType\"\n          (change)=\"onOntologyTypeChange()\">\n          @for (ontology of ontologyTypes; track $index) {\n            <option [value]=\"ontology.value\">{{ ontology.label }}</option>\n          }\n        </select>\n      </div>\n\n      @if (editForm.get('ontologyType')?.value && editForm.get('customOntologyFilters')?.value && Object.keys(editForm.get('customOntologyFilters')?.value || {}).length > 0) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-info\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-filter me-2\"></i>Custom Ontology Filters Applied\n            </h6>\n            <small class=\"mb-0\">\n              The following custom filters will be automatically applied for this ontology type:\n              <code class=\"ms-1\">{{ editForm.get('customOntologyFilters')?.value | json }}</code>\n            </small>\n          </div>\n        </div>\n      }\n\n      <!-- Visibility and Access -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-eye me-2\"></i>Visibility and Access\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"visibility\" class=\"form-label\">Visibility *</label>\n        <select\n          class=\"form-select\"\n          id=\"visibility\"\n          formControlName=\"visibility\"\n          (change)=\"onVisibilityChange()\"\n          [class.is-invalid]=\"editForm.get('visibility')?.invalid && editForm.get('visibility')?.touched\">\n          @for (option of visibilityOptions; track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('visibility') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"labGroup\" class=\"form-label\">Lab Group</label>\n        <select\n          class=\"form-select\"\n          id=\"labGroup\"\n          formControlName=\"labGroup\"\n          [class.is-invalid]=\"editForm.get('labGroup')?.invalid && editForm.get('labGroup')?.touched\">\n          <option [ngValue]=\"null\">Select Lab Group</option>\n          @for (group of labGroups; track group.id) {\n            <option [ngValue]=\"group.id\">{{ group.name }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('labGroup') }}\n        </div>\n      </div>\n\n      <!-- Additional Options -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-sliders me-2\"></i>Additional Options\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"category\" class=\"form-label\">Category</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"category\"\n          formControlName=\"category\"\n          placeholder=\"Template category\">\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"tags\" class=\"form-label\">Tags</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"tags\"\n          formControlName=\"tags\"\n          placeholder=\"Comma-separated tags\">\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"enableTypeahead\"\n                formControlName=\"enableTypeahead\">\n              <label class=\"form-check-label\" for=\"enableTypeahead\">\n                Enable Typeahead\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"notApplicable\"\n                formControlName=\"notApplicable\">\n              <label class=\"form-check-label\" for=\"notApplicable\">\n                <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"notAvailable\"\n                formControlName=\"notAvailable\">\n              <label class=\"form-check-label\" for=\"notAvailable\">\n                <i class=\"bi bi-question-circle me-1\"></i>Not Available\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"excelValidation\"\n                formControlName=\"excelValidation\">\n              <label class=\"form-check-label\" for=\"excelValidation\">\n                Excel Validation\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"isActive\"\n                formControlName=\"isActive\">\n              <label class=\"form-check-label\" for=\"isActive\">\n                Active\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\n  </button>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary\"\n    (click)=\"onSubmit()\"\n    [disabled]=\"editForm.invalid || isLoading()\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-check-circle me-1\"></i>\n    {{ isEdit ? 'Update' : 'Create' }} Template\n  </button>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }], propDecorators: { template: [{
+            args: [{ selector: 'ccv-column-template-edit-modal', standalone: true, imports: [CommonModule, ReactiveFormsModule, NgbModule], template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-clipboard-list me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"row\">\n      <!-- Basic Information -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-info-circle me-2\"></i>Basic Information\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"templateName\" class=\"form-label\">Template Name *</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"templateName\"\n          formControlName=\"name\"\n          [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n          placeholder=\"Enter template name\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('name') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnName\" class=\"form-label\">Column Name *</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"columnName\"\n          formControlName=\"columnName\"\n          [class.is-invalid]=\"editForm.get('columnName')?.invalid && editForm.get('columnName')?.touched\"\n          placeholder=\"columnName\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('columnName') }}\n        </div>\n        <small class=\"form-text text-muted\">Column name based on column type and template name. Example: characteristics[biological replicate]</small>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"description\" class=\"form-label\">Description</label>\n        <textarea\n          class=\"form-control\"\n          id=\"description\"\n          formControlName=\"description\"\n          rows=\"2\"\n          placeholder=\"Optional description\"></textarea>\n      </div>\n\n      <!-- Column Configuration -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-gear me-2\"></i>Column Configuration\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnType\" class=\"form-label\">Column Type *</label>\n        <select\n          class=\"form-select\"\n          id=\"columnType\"\n          formControlName=\"columnType\"\n          [class.is-invalid]=\"editForm.get('columnType')?.invalid && editForm.get('columnType')?.touched\">\n          @for (type of columnTypes; track type.value) {\n            <option [value]=\"type.value\">{{ type.label }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('columnType') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"defaultPosition\" class=\"form-label\">Default Position</label>\n        <input\n          type=\"number\"\n          class=\"form-control\"\n          id=\"defaultPosition\"\n          formControlName=\"defaultPosition\"\n          [class.is-invalid]=\"editForm.get('defaultPosition')?.invalid && editForm.get('defaultPosition')?.touched\"\n          min=\"0\"\n          placeholder=\"0\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('defaultPosition') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"defaultValue\" class=\"form-label\">\n          Default Value\n          @if (hasOntologyType) {\n            <span class=\"badge bg-success ms-2\">\n              <i class=\"bi bi-search me-1\"></i>Autocomplete Available\n            </span>\n          }\n        </label>\n        @if (editForm.get('notApplicable')?.value || editForm.get('notAvailable')?.value) {\n          <div class=\"mb-2\">\n            <div class=\"btn-group btn-group-sm\" role=\"group\">\n              @if (editForm.get('notApplicable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not applicable')\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </button>\n              }\n              @if (editForm.get('notAvailable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not available')\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </button>\n              }\n            </div>\n          </div>\n        }\n        @if (hasOntologyType) {\n          <div class=\"input-group\">\n            <input\n              type=\"text\"\n              class=\"form-control\"\n              id=\"defaultValue\"\n              formControlName=\"defaultValue\"\n              placeholder=\"Type to search ontology suggestions...\"\n              [ngbTypeahead]=\"searchDefaultValue\"\n              [resultFormatter]=\"formatSuggestion\"\n              [inputFormatter]=\"inputFormatter\"\n              (selectItem)=\"onSuggestionSelected($event)\"\n              [editable]=\"true\"\n              [showHint]=\"true\"\n              [focusFirst]=\"false\"\n              container=\"body\">\n            @if (isLoadingSuggestions()) {\n              <span class=\"input-group-text\">\n                <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n                  <span class=\"visually-hidden\">Loading...</span>\n                </div>\n              </span>\n            } @else {\n              <span class=\"input-group-text\">\n                <i class=\"bi bi-search text-muted\"></i>\n              </span>\n            }\n          </div>\n          <div class=\"form-text\">\n            <i class=\"bi bi-info-circle me-1\"></i>Type to search for ontology suggestions\n          </div>\n        } @else {\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            id=\"defaultValue\"\n            formControlName=\"defaultValue\"\n            placeholder=\"Optional default value\">\n          <div class=\"form-text text-muted\">\n            Select an ontology type to enable autocomplete\n          </div>\n        }\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"ontologyType\" class=\"form-label\">Ontology Type</label>\n        <select\n          class=\"form-select\"\n          id=\"ontologyType\"\n          formControlName=\"ontologyType\"\n          (change)=\"onOntologyTypeChange()\">\n          @for (ontology of ontologyTypes; track $index) {\n            <option [value]=\"getOptionValue(ontology, $index)\">{{ ontology.label }}</option>\n          }\n        </select>\n      </div>\n\n      @if (editForm.get('ontologyType')?.value && editForm.get('customOntologyFilters')?.value && Object.keys(editForm.get('customOntologyFilters')?.value || {}).length > 0) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-info\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-filter me-2\"></i>Custom Ontology Filters Applied\n            </h6>\n            <small class=\"mb-0\">\n              The following custom filters will be automatically applied for this ontology type:\n              <code class=\"ms-1\">{{ editForm.get('customOntologyFilters')?.value | json }}</code>\n            </small>\n          </div>\n        </div>\n      }\n\n      <!-- Visibility and Access -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-eye me-2\"></i>Visibility and Access\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"visibility\" class=\"form-label\">Visibility *</label>\n        <select\n          class=\"form-select\"\n          id=\"visibility\"\n          formControlName=\"visibility\"\n          (change)=\"onVisibilityChange()\"\n          [class.is-invalid]=\"editForm.get('visibility')?.invalid && editForm.get('visibility')?.touched\">\n          @for (option of visibilityOptions; track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('visibility') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"labGroup\" class=\"form-label\">Lab Group</label>\n        <select\n          class=\"form-select\"\n          id=\"labGroup\"\n          formControlName=\"labGroup\"\n          [class.is-invalid]=\"editForm.get('labGroup')?.invalid && editForm.get('labGroup')?.touched\">\n          <option [ngValue]=\"null\">Select Lab Group</option>\n          @for (group of labGroups; track group.id) {\n            <option [ngValue]=\"group.id\">{{ group.name }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('labGroup') }}\n        </div>\n      </div>\n\n      <!-- Additional Options -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-sliders me-2\"></i>Additional Options\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"category\" class=\"form-label\">Category</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"category\"\n          formControlName=\"category\"\n          placeholder=\"Template category\">\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"tags\" class=\"form-label\">Tags</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"tags\"\n          formControlName=\"tags\"\n          placeholder=\"Comma-separated tags\">\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"enableTypeahead\"\n                formControlName=\"enableTypeahead\">\n              <label class=\"form-check-label\" for=\"enableTypeahead\">\n                Enable Typeahead\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"notApplicable\"\n                formControlName=\"notApplicable\">\n              <label class=\"form-check-label\" for=\"notApplicable\">\n                <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"notAvailable\"\n                formControlName=\"notAvailable\">\n              <label class=\"form-check-label\" for=\"notAvailable\">\n                <i class=\"bi bi-question-circle me-1\"></i>Not Available\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"excelValidation\"\n                formControlName=\"excelValidation\">\n              <label class=\"form-check-label\" for=\"excelValidation\">\n                Excel Validation\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"isActive\"\n                formControlName=\"isActive\">\n              <label class=\"form-check-label\" for=\"isActive\">\n                Active\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\n  </button>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary\"\n    (click)=\"onSubmit()\"\n    [disabled]=\"editForm.invalid || isLoading()\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-check-circle me-1\"></i>\n    {{ isEdit ? 'Update' : 'Create' }} Template\n  </button>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }, { type: MetadataColumnTemplateService }, { type: OntologySearchService }], propDecorators: { template: [{
                 type: Input
             }], labGroups: [{
                 type: Input
@@ -7560,7 +7539,7 @@ class FavoriteManagement {
         return 'bi-circle';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FavoriteManagement, deps: [{ token: i1.FormBuilder }, { token: FavouriteMetadataOptionService }, { token: MetadataColumnTemplateService }, { token: i3.LabGroupService }, { token: i3.ToastService }, { token: i2.NgbModal }, { token: i3.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: FavoriteManagement, isStandalone: true, selector: "ccv-favorite-management", ngImport: i0, template: "<div class=\"favorite-management-container\">\n  <!-- Header Section -->\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\n    <div class=\"container-fluid\">\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\n        <div class=\"d-flex align-items-center\">\n          <h4 class=\"mb-0\">\n            <i class=\"bi bi-heart-fill me-2 text-danger\"></i>Favorite Management\n          </h4>\n          <span class=\"badge bg-primary ms-3\">{{ filteredFavorites().length }} favorites</span>\n        </div>\n\n        <div class=\"d-flex gap-2\">\n          <button\n            type=\"button\"\n            class=\"btn btn-primary btn-sm\"\n            (click)=\"openCreateModal()\"\n            [disabled]=\"isLoading()\">\n            <i class=\"bi bi-plus-circle me-1\"></i>Add Favorite\n          </button>\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <div class=\"tables-content p-4\">\n    <!-- Search and Filters Section -->\n    <div class=\"card mb-4\">\n      <div class=\"card-header\">\n        <h5 class=\"mb-0\">\n          <i class=\"bi bi-search me-2\"></i>Search & Filters\n        </h5>\n      </div>\n      <div class=\"card-body\">\n        <form [formGroup]=\"searchForm\" class=\"row g-3\">\n          <div class=\"col-md-3\">\n            <label for=\"search\" class=\"form-label\">Search</label>\n            <div class=\"input-group\">\n            <span class=\"input-group-text\">\n              <i class=\"bi bi-search\"></i>\n            </span>\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                id=\"search\"\n                formControlName=\"search\"\n                placeholder=\"Search by name or value\">\n            </div>\n          </div>\n\n          <div class=\"col-md-3\">\n            <label for=\"scope\" class=\"form-label\">Scope</label>\n            <select class=\"form-select\" id=\"scope\" formControlName=\"scope\">\n              <option value=\"\">All Scopes</option>\n              <option value=\"personal\">Personal</option>\n              <option value=\"lab_group\">Lab Group</option>\n              <option value=\"global\">Global</option>\n            </select>\n          </div>\n\n          <div class=\"col-md-3\">\n            <label for=\"labGroup\" class=\"form-label\">Lab Group</label>\n            <input\n              type=\"text\"\n              class=\"form-control\"\n              id=\"labGroup\"\n              formControlName=\"labGroup\"\n              placeholder=\"All Lab Groups\"\n              [ngbTypeahead]=\"searchLabGroups\"\n              [resultFormatter]=\"formatLabGroup\"\n              [inputFormatter]=\"inputLabGroupFormatter\"\n              (selectItem)=\"onLabGroupSelected($event)\"\n              [editable]=\"true\"\n              [showHint]=\"true\"\n              [focusFirst]=\"false\"\n              container=\"body\">\n          </div>\n\n          <div class=\"col-md-3\">\n            <label for=\"columnType\" class=\"form-label\">Column Type</label>\n            <select class=\"form-select\" id=\"columnType\" formControlName=\"columnType\">\n              @for (type of columnTypes; track type.value) {\n                <option [value]=\"type.value\">{{ type.label }}</option>\n              }\n            </select>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <div class=\"card\">\n      <div class=\"card-header d-flex justify-content-between align-items-center\">\n        <h5 class=\"mb-0\">\n          <i class=\"bi bi-table me-2\"></i>Favorites options\n          <span class=\"badge bg-primary ms-2\"></span>\n        </h5>\n        @if (isLoading()) {\n          <div class=\"spinner-border spinner-border-sm text-primary\" role=\"status\">\n            <span class=\"visually-hidden\">Loading...</span>\n          </div>\n        }\n      </div>\n      <div class=\"card-body p-0\">\n        @if (!isLoading()) {\n\n          @if (filteredFavorites().length === 0) {\n            <div class=\"text-center py-5\">\n              <i class=\"bi bi-heart display-1 text-muted\"></i>\n              <h5 class=\"mt-3 text-muted\">No Favorites Found</h5>\n              @if (searchTerm() || scopeFilter() || columnTypeFilter()) {\n                <p class=\"text-muted\">Try adjusting your search criteria</p>\n                <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"clearFilters()\">\n                  <i class=\"bi bi-arrow-clockwise me-1\"></i>Clear Filters\n                </button>\n              } @else {\n                <p class=\"text-muted\">Create your first favorite to get started</p>\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"openCreateModal()\">\n                  <i class=\"bi bi-plus-circle me-1\"></i>Add First Favorite\n                </button>\n              }\n            </div>\n          }\n\n          <!-- Favorites Table -->\n          @if (filteredFavorites().length > 0) {\n            <div class=\"card\">\n              <div class=\"card-body p-0\">\n                <div class=\"table-responsive\">\n                  <table class=\"table table-hover mb-0\">\n                    <thead>\n                    <tr>\n                      <th scope=\"col\" style=\"width: 200px;\">Column</th>\n                      <th scope=\"col\" style=\"width: 200px;\">Display Name</th>\n                      <th scope=\"col\">Value</th>\n                      <th scope=\"col\" style=\"width: 150px;\">Scope</th>\n                      <th scope=\"col\" style=\"width: 120px;\">Created</th>\n                      <th scope=\"col\" style=\"width: 120px;\">Actions</th>\n                    </tr>\n                    </thead>\n                    <tbody>\n                      @for (favorite of paginatedFavorites(); track favorite.id) {\n                        <tr>\n                          <td>\n                            <div class=\"d-flex align-items-center gap-2\">\n                              <div class=\"d-flex align-items-center\">\n                                <i class=\"me-2\" [class]=\"getColumnTypeIcon(favorite) + ' ' + getColumnTypeClass(favorite)\"></i>\n                                <span class=\"fw-semibold\">{{ getCleanColumnName(favorite.name) }}</span>\n                              </div>\n                            </div>\n                          </td>\n                          <td>\n                            <div class=\"text-truncate\" [title]=\"favorite.displayValue || 'No display name'\">\n                              @if (favorite.displayValue && favorite.displayValue.trim()) {\n                                {{ favorite.displayValue }}\n                              } @else {\n                                <span class=\"text-muted fst-italic\">No display name</span>\n                              }\n                            </div>\n                          </td>\n                          <td>\n                            <div style=\"max-width: 300px;\">\n                              @if (isComplexValue(favorite.value)) {\n                                <!-- Complex value with key-value pairs -->\n                                <div class=\"d-flex flex-wrap gap-1\">\n                                  @for (pair of parseComplexValue(favorite.value); track $index) {\n                                    <span class=\"badge bg-light text-dark border\">\n                                <small><strong>{{ pair.key }}:</strong> {{ pair.value }}</small>\n                              </span>\n                                  }\n                                </div>\n                              } @else {\n                                <!-- Simple value -->\n                                <div class=\"text-truncate\" [title]=\"favorite.value\">\n                                  {{ favorite.value }}\n                                </div>\n                              }\n                            </div>\n                          </td>\n                          <td>\n                      <span [class]=\"getScopeClass(favorite)\">\n                        @if (favorite.isGlobal) {\n                          <i class=\"bi bi-globe me-1\"></i>Global\n                        } @else if (favorite.labGroup) {\n                          <i class=\"bi bi-people me-1\"></i>Lab Group\n                        } @else {\n                          <i class=\"bi bi-person me-1\"></i>Personal\n                        }\n                      </span>\n                            @if (favorite.userUsername && !favorite.isGlobal) {\n                              <br><small class=\"text-muted\">{{ favorite.userUsername }}</small>\n                            }\n                            @if (favorite.labGroupName) {\n                              <br><small class=\"text-muted\">{{ favorite.labGroupName }}</small>\n                            }\n                          </td>\n                          <td>\n                            <small class=\"text-muted\">\n                              {{ favorite.createdAt | date:'MMM d, y' }}\n                            </small>\n                          </td>\n                          <td>\n                            <div class=\"btn-group btn-group-sm\">\n                              @if (canEditFavorite(favorite)) {\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-outline-primary\"\n                                  (click)=\"openEditModal(favorite)\"\n                                  title=\"Edit favorite\">\n                                  <i class=\"bi bi-pencil\"></i>\n                                </button>\n                              }\n                              @if (canDeleteFavorite(favorite)) {\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-outline-danger\"\n                                  (click)=\"deleteFavorite(favorite)\"\n                                  title=\"Delete favorite\">\n                                  <i class=\"bi bi-trash\"></i>\n                                </button>\n                              }\n                            </div>\n                          </td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              </div>\n            </div>\n\n            <!-- Pagination -->\n            @if (totalPages() > 1) {\n              <div class=\"d-flex justify-content-between align-items-center mt-4\">\n                <div class=\"d-flex align-items-center gap-2\">\n                  <span class=\"text-muted\">Show:</span>\n                  <select\n                    class=\"form-select form-select-sm\"\n                    style=\"width: auto;\"\n                    [value]=\"pageSize()\"\n                    (change)=\"onPageSizeChange(+($any($event.target).value))\">\n                    <option value=\"10\">10</option>\n                    <option value=\"25\">25</option>\n                    <option value=\"50\">50</option>\n                    <option value=\"100\">100</option>\n                  </select>\n                  <span class=\"text-muted\">per page</span>\n                </div>\n\n                <ngb-pagination\n                  [collectionSize]=\"totalFavoritesCount()\"\n                  [page]=\"currentPage()\"\n                  [pageSize]=\"pageSize()\"\n                  [maxSize]=\"5\"\n                  [boundaryLinks]=\"true\"\n                  [rotate]=\"true\"\n                  (pageChange)=\"onPageChange($event)\"\n                  class=\"pagination-sm mb-0\">\n                </ngb-pagination>\n\n                <span class=\"text-muted\">\n            Showing {{ ((currentPage() - 1) * pageSize()) + 1 }}-{{ Math.min(currentPage() * pageSize(), totalFavoritesCount()) }}\n                  of {{ totalFavoritesCount() }} favorites\n          </span>\n              </div>\n            }\n          }\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Edit/Create Modal -->\n@if (showEditModal()) {\n  <div class=\"modal fade show d-block\" tabindex=\"-1\" style=\"background: rgba(0,0,0,0.5);\">\n    <div class=\"modal-dialog modal-lg\">\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h5 class=\"modal-title\">\n            <i class=\"bi bi-heart me-2\"></i>{{ editModalTitle }}\n          </h5>\n          <button type=\"button\" class=\"btn-close\" (click)=\"closeEditModal()\"></button>\n        </div>\n\n        <div class=\"modal-body\">\n          <form [formGroup]=\"editForm\" (ngSubmit)=\"saveFavorite()\">\n            <div class=\"row\">\n              <div class=\"col-md-6 mb-3\">\n                <label for=\"favName\" class=\"form-label\">\n                  Column Name *\n                  @if (columnTemplatesLoaded()) {\n                    <small class=\"text-success ms-1\">\n                      <i class=\"bi bi-search\"></i> Autocomplete Available\n                    </small>\n                  }\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  id=\"favName\"\n                  formControlName=\"name\"\n                  [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n                  placeholder=\"e.g., organism\"\n                  [ngbTypeahead]=\"searchColumnNames\"\n                  (selectItem)=\"onColumnNameSelected($event)\"\n                  [editable]=\"true\"\n                  [showHint]=\"true\"\n                  [focusFirst]=\"false\"\n                  container=\"body\">\n                <div class=\"form-text\">\n                  @if (columnTemplatesLoaded()) {\n                    Type to search available column names from templates\n                  } @else {\n                    Loading column suggestions...\n                  }\n                </div>\n                <div class=\"invalid-feedback\">\n                  @if (editForm.get('name')?.errors?.['required']) {\n                    Column name is required\n                  }\n                  @if (editForm.get('name')?.errors?.['maxlength']) {\n                    Column name must be less than 255 characters\n                  }\n                </div>\n              </div>\n\n              <div class=\"col-md-6 mb-3\">\n                <label for=\"favType\" class=\"form-label\">\n                  Column Type *\n                  @if (columnTemplatesLoaded()) {\n                    <small class=\"text-success ms-1\">\n                      <i class=\"bi bi-search\"></i> Autocomplete Available\n                    </small>\n                  }\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  id=\"favType\"\n                  formControlName=\"type\"\n                  [class.is-invalid]=\"editForm.get('type')?.invalid && editForm.get('type')?.touched\"\n                  placeholder=\"e.g., characteristics[organism]\"\n                  [ngbTypeahead]=\"searchColumnTypes\"\n                  (selectItem)=\"onColumnTypeSelected($event)\"\n                  [editable]=\"true\"\n                  [showHint]=\"true\"\n                  [focusFirst]=\"false\"\n                  container=\"body\">\n                <div class=\"form-text\">\n                  @if (columnTemplatesLoaded()) {\n                    Type to search available column types (filtered by selected name)\n                  } @else {\n                    Loading column suggestions...\n                  }\n                </div>\n                <div class=\"invalid-feedback\">\n                  @if (editForm.get('type')?.errors?.['required']) {\n                    Column type is required\n                  }\n                  @if (editForm.get('type')?.errors?.['maxlength']) {\n                    Column type must be less than 255 characters\n                  }\n                </div>\n              </div>\n            </div>\n\n            <div class=\"mb-3\">\n              <label for=\"favValue\" class=\"form-label\">\n                Value\n                @if (editForm.get('templateId')?.value) {\n                  <span class=\"badge bg-success ms-2\">\n                    <i class=\"bi bi-search me-1\"></i>Advanced Editor Available\n                  </span>\n                }\n                @if (specialSyntaxType()) {\n                  <span class=\"badge bg-info ms-2\">\n                    <i class=\"bi bi-gear me-1\"></i>{{ getSpecialInputTitle() }}\n                  </span>\n                }\n              </label>\n\n              <div class=\"input-group\">\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  id=\"favValue\"\n                  formControlName=\"value\"\n                  [class.is-invalid]=\"editForm.get('value')?.invalid && editForm.get('value')?.touched\"\n                  placeholder=\"Enter favorite value\"\n                  readonly>\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-primary\"\n                  (click)=\"openValueEditModal()\"\n                  title=\"Open advanced value editor\">\n                  <i class=\"bi bi-pencil me-1\"></i>Edit\n                </button>\n              </div>\n\n              <div class=\"form-text\">\n                @if (editForm.get('templateId')?.value) {\n                  <i class=\"bi bi-info-circle me-1\"></i>\n                  Click \"Edit\" to use advanced value editor with ontology autocomplete suggestions\n                } @else if (specialSyntaxType()) {\n                  <i class=\"bi bi-info-circle me-1\"></i>\n                  Click \"Edit\" to use enhanced {{ specialSyntaxType() }} editor for structured input\n                } @else {\n                  <i class=\"bi bi-info-circle me-1\"></i>\n                  Click \"Edit\" to set the value (select column name and type for smart suggestions)\n                }\n              </div>\n              <div class=\"invalid-feedback\">\n                @if (editForm.get('value')?.errors?.['maxlength']) {\n                  Value must be less than 500 characters\n                }\n              </div>\n            </div>\n\n            <div class=\"mb-3\">\n              <label for=\"favDisplayValue\" class=\"form-label\">Display Value</label>\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                id=\"favDisplayValue\"\n                formControlName=\"displayValue\"\n                placeholder=\"Optional: Human-readable version\">\n              <div class=\"form-text\">If empty, will use the same value as above</div>\n            </div>\n\n            <div class=\"mb-3\">\n              <label for=\"favScope\" class=\"form-label\">Scope *</label>\n              <select\n                class=\"form-select\"\n                id=\"favScope\"\n                formControlName=\"scope\">\n                <option value=\"personal\">Personal (Only visible to me)</option>\n                @if (userLabGroups().length > 0) {\n                  <option value=\"lab_group\">Lab Group (Visible to my lab group)</option>\n                }\n                @if (isAdmin()) {\n                  <option value=\"global\">Global (Visible to everyone)</option>\n                }\n              </select>\n            </div>\n\n            <!-- Lab Group Selection (shown when lab_group scope is selected) -->\n            @if (editForm.get('scope')?.value === 'lab_group' && userLabGroups().length > 1) {\n              <div class=\"mb-3\">\n                <label for=\"favLabGroup\" class=\"form-label\">Lab Group *</label>\n                <select\n                  class=\"form-select\"\n                  id=\"favLabGroup\"\n                  formControlName=\"labGroupId\">\n                  <option value=\"\">Select a lab group</option>\n                  @for (labGroup of userLabGroups(); track labGroup.id) {\n                    <option [value]=\"labGroup.id\">{{ labGroup.name }}</option>\n                  }\n                </select>\n                <div class=\"form-text\">Choose which lab group this favorite will be visible to</div>\n              </div>\n            }\n          </form>\n        </div>\n\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"closeEditModal()\">\n            <i class=\"bi bi-x-circle me-1\"></i>Cancel\n          </button>\n          <button\n            type=\"button\"\n            class=\"btn btn-primary\"\n            (click)=\"saveFavorite()\"\n            [disabled]=\"editForm.invalid\">\n            <i class=\"bi bi-check-circle me-1\"></i>\n            {{ isEditMode() ? 'Update' : 'Create' }} Favorite\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: NgbModule }, { kind: "component", type: i2.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "directive", type: i2.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: FavoriteManagement, isStandalone: true, selector: "ccv-favorite-management", ngImport: i0, template: "<div class=\"favorite-management-container\">\n  <!-- Header Section -->\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\n    <div class=\"container-fluid\">\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\n        <div class=\"d-flex align-items-center\">\n          <h4 class=\"mb-0\">\n            <i class=\"bi bi-heart-fill me-2 text-danger\"></i>Favorite Management\n          </h4>\n          <span class=\"badge bg-primary ms-3\">{{ filteredFavorites().length }} favorites</span>\n        </div>\n\n        <div class=\"d-flex gap-2\">\n          <button\n            type=\"button\"\n            class=\"btn btn-primary btn-sm\"\n            (click)=\"openCreateModal()\"\n            [disabled]=\"isLoading()\">\n            <i class=\"bi bi-plus-circle me-1\"></i>Add Favorite\n          </button>\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <div class=\"tables-content p-4\">\n    <!-- Search and Filters Section -->\n    <div class=\"card mb-4\">\n      <div class=\"card-header\">\n        <h5 class=\"mb-0\">\n          <i class=\"bi bi-search me-2\"></i>Search & Filters\n        </h5>\n      </div>\n      <div class=\"card-body\">\n        <form [formGroup]=\"searchForm\" class=\"row g-3\">\n          <div class=\"col-md-3\">\n            <label for=\"search\" class=\"form-label\">Search</label>\n            <div class=\"input-group\">\n            <span class=\"input-group-text\">\n              <i class=\"bi bi-search\"></i>\n            </span>\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                id=\"search\"\n                formControlName=\"search\"\n                placeholder=\"Search by name or value\">\n            </div>\n          </div>\n\n          <div class=\"col-md-3\">\n            <label for=\"scope\" class=\"form-label\">Scope</label>\n            <select class=\"form-select\" id=\"scope\" formControlName=\"scope\">\n              <option value=\"\">All Scopes</option>\n              <option value=\"personal\">Personal</option>\n              <option value=\"lab_group\">Lab Group</option>\n              <option value=\"global\">Global</option>\n            </select>\n          </div>\n\n          <div class=\"col-md-3\">\n            <label for=\"labGroup\" class=\"form-label\">Lab Group</label>\n            <input\n              type=\"text\"\n              class=\"form-control\"\n              id=\"labGroup\"\n              formControlName=\"labGroup\"\n              placeholder=\"All Lab Groups\"\n              [ngbTypeahead]=\"searchLabGroups\"\n              [resultFormatter]=\"formatLabGroup\"\n              [inputFormatter]=\"inputLabGroupFormatter\"\n              (selectItem)=\"onLabGroupSelected($event)\"\n              [editable]=\"true\"\n              [showHint]=\"true\"\n              [focusFirst]=\"false\"\n              container=\"body\">\n          </div>\n\n          <div class=\"col-md-3\">\n            <label for=\"columnType\" class=\"form-label\">Column Type</label>\n            <select class=\"form-select\" id=\"columnType\" formControlName=\"columnType\">\n              @for (type of columnTypes; track type.value) {\n                <option [value]=\"type.value\">{{ type.label }}</option>\n              }\n            </select>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <div class=\"card\">\n      <div class=\"card-header d-flex justify-content-between align-items-center\">\n        <h5 class=\"mb-0\">\n          <i class=\"bi bi-table me-2\"></i>Favorites options\n          <span class=\"badge bg-primary ms-2\"></span>\n        </h5>\n        @if (isLoading()) {\n          <div class=\"spinner-border spinner-border-sm text-primary\" role=\"status\">\n            <span class=\"visually-hidden\">Loading...</span>\n          </div>\n        }\n      </div>\n      <div class=\"card-body p-0\">\n        @if (!isLoading()) {\n\n          @if (filteredFavorites().length === 0) {\n            <div class=\"text-center py-5\">\n              <i class=\"bi bi-heart display-1 text-muted\"></i>\n              <h5 class=\"mt-3 text-muted\">No Favorites Found</h5>\n              @if (searchTerm() || scopeFilter() || columnTypeFilter()) {\n                <p class=\"text-muted\">Try adjusting your search criteria</p>\n                <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"clearFilters()\">\n                  <i class=\"bi bi-arrow-clockwise me-1\"></i>Clear Filters\n                </button>\n              } @else {\n                <p class=\"text-muted\">Create your first favorite to get started</p>\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"openCreateModal()\">\n                  <i class=\"bi bi-plus-circle me-1\"></i>Add First Favorite\n                </button>\n              }\n            </div>\n          }\n\n          <!-- Favorites Table -->\n          @if (filteredFavorites().length > 0) {\n            <div class=\"card\">\n              <div class=\"card-body p-0\">\n                <div class=\"table-responsive\">\n                  <table class=\"table table-hover mb-0\">\n                    <thead>\n                    <tr>\n                      <th scope=\"col\" style=\"width: 200px;\">Column</th>\n                      <th scope=\"col\" style=\"width: 200px;\">Display Name</th>\n                      <th scope=\"col\">Value</th>\n                      <th scope=\"col\" style=\"width: 150px;\">Scope</th>\n                      <th scope=\"col\" style=\"width: 120px;\">Created</th>\n                      <th scope=\"col\" style=\"width: 120px;\">Actions</th>\n                    </tr>\n                    </thead>\n                    <tbody>\n                      @for (favorite of paginatedFavorites(); track favorite.id) {\n                        <tr>\n                          <td>\n                            <div class=\"d-flex align-items-center gap-2\">\n                              <div class=\"d-flex align-items-center\">\n                                <i class=\"me-2\" [class]=\"getColumnTypeIcon(favorite) + ' ' + getColumnTypeClass(favorite)\"></i>\n                                <span class=\"fw-semibold\">{{ getCleanColumnName(favorite.name) }}</span>\n                              </div>\n                            </div>\n                          </td>\n                          <td>\n                            <div class=\"text-truncate\" [title]=\"favorite.displayValue || 'No display name'\">\n                              @if (favorite.displayValue && favorite.displayValue.trim()) {\n                                {{ favorite.displayValue }}\n                              } @else {\n                                <span class=\"text-muted fst-italic\">No display name</span>\n                              }\n                            </div>\n                          </td>\n                          <td>\n                            <div style=\"max-width: 300px;\">\n                              @if (isComplexValue(favorite.value)) {\n                                <!-- Complex value with key-value pairs -->\n                                <div class=\"d-flex flex-wrap gap-1\">\n                                  @for (pair of parseComplexValue(favorite.value); track $index) {\n                                    <span class=\"badge bg-light text-dark border\">\n                                <small><strong>{{ pair.key }}:</strong> {{ pair.value }}</small>\n                              </span>\n                                  }\n                                </div>\n                              } @else {\n                                <!-- Simple value -->\n                                <div class=\"text-truncate\" [title]=\"favorite.value\">\n                                  {{ favorite.value }}\n                                </div>\n                              }\n                            </div>\n                          </td>\n                          <td>\n                      <span [class]=\"getScopeClass(favorite)\">\n                        @if (favorite.isGlobal) {\n                          <i class=\"bi bi-globe me-1\"></i>Global\n                        } @else if (favorite.labGroup) {\n                          <i class=\"bi bi-people me-1\"></i>Lab Group\n                        } @else {\n                          <i class=\"bi bi-person me-1\"></i>Personal\n                        }\n                      </span>\n                            @if (favorite.userUsername && !favorite.isGlobal) {\n                              <br><small class=\"text-muted\">{{ favorite.userUsername }}</small>\n                            }\n                            @if (favorite.labGroupName) {\n                              <br><small class=\"text-muted\">{{ favorite.labGroupName }}</small>\n                            }\n                          </td>\n                          <td>\n                            <small class=\"text-muted\">\n                              {{ favorite.createdAt | date:'MMM d, y' }}\n                            </small>\n                          </td>\n                          <td>\n                            <div class=\"btn-group btn-group-sm\">\n                              @if (canEditFavorite(favorite)) {\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-outline-primary\"\n                                  (click)=\"openEditModal(favorite)\"\n                                  title=\"Edit favorite\">\n                                  <i class=\"bi bi-pencil\"></i>\n                                </button>\n                              }\n                              @if (canDeleteFavorite(favorite)) {\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-outline-danger\"\n                                  (click)=\"deleteFavorite(favorite)\"\n                                  title=\"Delete favorite\">\n                                  <i class=\"bi bi-trash\"></i>\n                                </button>\n                              }\n                            </div>\n                          </td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              </div>\n            </div>\n\n            <!-- Pagination -->\n            @if (totalPages() > 1) {\n              <div class=\"d-flex justify-content-between align-items-center mt-4\">\n                <div class=\"d-flex align-items-center gap-2\">\n                  <span class=\"text-muted\">Show:</span>\n                  <select\n                    class=\"form-select form-select-sm\"\n                    style=\"width: auto;\"\n                    [value]=\"pageSize()\"\n                    (change)=\"onPageSizeChange(+($any($event.target).value))\">\n                    <option value=\"10\">10</option>\n                    <option value=\"25\">25</option>\n                    <option value=\"50\">50</option>\n                    <option value=\"100\">100</option>\n                  </select>\n                  <span class=\"text-muted\">per page</span>\n                </div>\n\n                <ngb-pagination\n                  [collectionSize]=\"totalFavoritesCount()\"\n                  [page]=\"currentPage()\"\n                  [pageSize]=\"pageSize()\"\n                  [maxSize]=\"5\"\n                  [boundaryLinks]=\"true\"\n                  [rotate]=\"true\"\n                  (pageChange)=\"onPageChange($event)\"\n                  class=\"pagination-sm mb-0\">\n                </ngb-pagination>\n\n                <span class=\"text-muted\">\n            Showing {{ ((currentPage() - 1) * pageSize()) + 1 }}-{{ Math.min(currentPage() * pageSize(), totalFavoritesCount()) }}\n                  of {{ totalFavoritesCount() }} favorites\n          </span>\n              </div>\n            }\n          }\n        }\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Edit/Create Modal -->\n@if (showEditModal()) {\n  <div class=\"modal fade show d-block\" tabindex=\"-1\" style=\"background: rgba(0,0,0,0.5);\">\n    <div class=\"modal-dialog modal-lg\">\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h5 class=\"modal-title\">\n            <i class=\"bi bi-heart me-2\"></i>{{ editModalTitle }}\n          </h5>\n          <button type=\"button\" class=\"btn-close\" (click)=\"closeEditModal()\"></button>\n        </div>\n\n        <div class=\"modal-body\">\n          <form [formGroup]=\"editForm\" (ngSubmit)=\"saveFavorite()\">\n            <div class=\"row\">\n              <div class=\"col-md-6 mb-3\">\n                <label for=\"favName\" class=\"form-label\">\n                  Column Name *\n                  @if (columnTemplatesLoaded()) {\n                    <small class=\"text-success ms-1\">\n                      <i class=\"bi bi-search\"></i> Autocomplete Available\n                    </small>\n                  }\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  id=\"favName\"\n                  formControlName=\"name\"\n                  [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n                  placeholder=\"e.g., organism\"\n                  [ngbTypeahead]=\"searchColumnNames\"\n                  (selectItem)=\"onColumnNameSelected($event)\"\n                  [editable]=\"true\"\n                  [showHint]=\"true\"\n                  [focusFirst]=\"false\"\n                  container=\"body\">\n                <div class=\"form-text\">\n                  @if (columnTemplatesLoaded()) {\n                    Type to search available column names from templates\n                  } @else {\n                    Loading column suggestions...\n                  }\n                </div>\n                <div class=\"invalid-feedback\">\n                  @if (editForm.get('name')?.errors?.['required']) {\n                    Column name is required\n                  }\n                  @if (editForm.get('name')?.errors?.['maxlength']) {\n                    Column name must be less than 255 characters\n                  }\n                </div>\n              </div>\n\n              <div class=\"col-md-6 mb-3\">\n                <label for=\"favType\" class=\"form-label\">\n                  Column Type *\n                  @if (columnTemplatesLoaded()) {\n                    <small class=\"text-success ms-1\">\n                      <i class=\"bi bi-search\"></i> Autocomplete Available\n                    </small>\n                  }\n                </label>\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  id=\"favType\"\n                  formControlName=\"type\"\n                  [class.is-invalid]=\"editForm.get('type')?.invalid && editForm.get('type')?.touched\"\n                  placeholder=\"e.g., characteristics[organism]\"\n                  [ngbTypeahead]=\"searchColumnTypes\"\n                  (selectItem)=\"onColumnTypeSelected($event)\"\n                  [editable]=\"true\"\n                  [showHint]=\"true\"\n                  [focusFirst]=\"false\"\n                  container=\"body\">\n                <div class=\"form-text\">\n                  @if (columnTemplatesLoaded()) {\n                    Type to search available column types (filtered by selected name)\n                  } @else {\n                    Loading column suggestions...\n                  }\n                </div>\n                <div class=\"invalid-feedback\">\n                  @if (editForm.get('type')?.errors?.['required']) {\n                    Column type is required\n                  }\n                  @if (editForm.get('type')?.errors?.['maxlength']) {\n                    Column type must be less than 255 characters\n                  }\n                </div>\n              </div>\n            </div>\n\n            <div class=\"mb-3\">\n              <label for=\"favValue\" class=\"form-label\">\n                Value\n                @if (editForm.get('templateId')?.value) {\n                  <span class=\"badge bg-success ms-2\">\n                    <i class=\"bi bi-search me-1\"></i>Advanced Editor Available\n                  </span>\n                }\n                @if (specialSyntaxType()) {\n                  <span class=\"badge bg-info ms-2\">\n                    <i class=\"bi bi-gear me-1\"></i>{{ getSpecialInputTitle() }}\n                  </span>\n                }\n              </label>\n\n              <div class=\"input-group\">\n                <input\n                  type=\"text\"\n                  class=\"form-control\"\n                  id=\"favValue\"\n                  formControlName=\"value\"\n                  [class.is-invalid]=\"editForm.get('value')?.invalid && editForm.get('value')?.touched\"\n                  placeholder=\"Enter favorite value\"\n                  readonly>\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-primary\"\n                  (click)=\"openValueEditModal()\"\n                  title=\"Open advanced value editor\">\n                  <i class=\"bi bi-pencil me-1\"></i>Edit\n                </button>\n              </div>\n\n              <div class=\"form-text\">\n                @if (editForm.get('templateId')?.value) {\n                  <i class=\"bi bi-info-circle me-1\"></i>\n                  Click \"Edit\" to use advanced value editor with ontology autocomplete suggestions\n                } @else if (specialSyntaxType()) {\n                  <i class=\"bi bi-info-circle me-1\"></i>\n                  Click \"Edit\" to use enhanced {{ specialSyntaxType() }} editor for structured input\n                } @else {\n                  <i class=\"bi bi-info-circle me-1\"></i>\n                  Click \"Edit\" to set the value (select column name and type for smart suggestions)\n                }\n              </div>\n              <div class=\"invalid-feedback\">\n                @if (editForm.get('value')?.errors?.['maxlength']) {\n                  Value must be less than 500 characters\n                }\n              </div>\n            </div>\n\n            <div class=\"mb-3\">\n              <label for=\"favDisplayValue\" class=\"form-label\">Display Value</label>\n              <input\n                type=\"text\"\n                class=\"form-control\"\n                id=\"favDisplayValue\"\n                formControlName=\"displayValue\"\n                placeholder=\"Optional: Human-readable version\">\n              <div class=\"form-text\">If empty, will use the same value as above</div>\n            </div>\n\n            <div class=\"mb-3\">\n              <label for=\"favScope\" class=\"form-label\">Scope *</label>\n              <select\n                class=\"form-select\"\n                id=\"favScope\"\n                formControlName=\"scope\">\n                <option value=\"personal\">Personal (Only visible to me)</option>\n                @if (userLabGroups().length > 0) {\n                  <option value=\"lab_group\">Lab Group (Visible to my lab group)</option>\n                }\n                @if (isAdmin()) {\n                  <option value=\"global\">Global (Visible to everyone)</option>\n                }\n              </select>\n            </div>\n\n            <!-- Lab Group Selection (shown when lab_group scope is selected) -->\n            @if (editForm.get('scope')?.value === 'lab_group' && userLabGroups().length > 1) {\n              <div class=\"mb-3\">\n                <label for=\"favLabGroup\" class=\"form-label\">Lab Group *</label>\n                <select\n                  class=\"form-select\"\n                  id=\"favLabGroup\"\n                  formControlName=\"labGroupId\">\n                  <option value=\"\">Select a lab group</option>\n                  @for (labGroup of userLabGroups(); track labGroup.id) {\n                    <option [value]=\"labGroup.id\">{{ labGroup.name }}</option>\n                  }\n                </select>\n                <div class=\"form-text\">Choose which lab group this favorite will be visible to</div>\n              </div>\n            }\n          </form>\n        </div>\n\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"closeEditModal()\">\n            <i class=\"bi bi-x-circle me-1\"></i>Cancel\n          </button>\n          <button\n            type=\"button\"\n            class=\"btn btn-primary\"\n            (click)=\"saveFavorite()\"\n            [disabled]=\"editForm.invalid\">\n            <i class=\"bi bi-check-circle me-1\"></i>\n            {{ isEditMode() ? 'Update' : 'Create' }} Favorite\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: NgbModule }, { kind: "component", type: i2.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "directive", type: i2.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FavoriteManagement, decorators: [{
             type: Component,
@@ -7673,7 +7652,7 @@ class SamplePoolDetailsModal {
         return pooledOnly + pooledAndIndependent;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SamplePoolDetailsModal, deps: [{ token: i2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SamplePoolDetailsModal, isStandalone: true, selector: "ccv-sample-pool-details-modal", inputs: { pool: "pool" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-collection me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onClose()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  @if (pool) {\n    <!-- Pool Type and Basic Info -->\n    <div class=\"mb-4\">\n      <div class=\"d-flex justify-content-between align-items-start mb-3\">\n        <div>\n          <h5 class=\"mb-2\">{{ pool.poolName }}</h5>\n          <span [class]=\"poolTypeClass\">\n            <i class=\"bi bi-collection me-1\"></i>{{ poolTypeLabel }}\n          </span>\n        </div>\n        <div class=\"text-end\">\n          <small class=\"text-muted d-block\">Pool ID: {{ pool.id }}</small>\n          <small class=\"text-muted\">Total Samples: {{ allSamplesCount }}</small>\n        </div>\n      </div>\n      \n      @if (pool.poolDescription) {\n        <div class=\"mt-3\">\n          <strong>Description:</strong>\n          <p class=\"mt-1 mb-0\">{{ pool.poolDescription }}</p>\n        </div>\n      }\n    </div>\n\n    <!-- Sample Configuration -->\n    <div class=\"mb-4\">\n      <h6 class=\"text-muted mb-3\">\n        <i class=\"bi bi-diagram-3 me-2\"></i>Sample Configuration\n      </h6>\n      \n      <div class=\"row\">\n        <!-- Pooled Only Samples -->\n        <div class=\"col-md-6 mb-3\">\n          <div class=\"card h-100\">\n            <div class=\"card-body\">\n              <h6 class=\"card-title\">\n                <i class=\"bi bi-collection text-primary me-2\"></i>Pooled Only Samples\n              </h6>\n              <p class=\"card-text\">\n                <small class=\"text-muted\">{{ pool.pooledOnlySamples.length || 0 }} samples</small>\n              </p>\n              <div class=\"sample-list\">\n                @if (pool.pooledOnlySamples && pool.pooledOnlySamples.length > 0) {\n                  <div class=\"sample-numbers\">{{ pooledOnlySamplesText }}</div>\n                } @else {\n                  <em class=\"text-muted\">No pooled-only samples</em>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Pooled and Independent Samples -->\n        <div class=\"col-md-6 mb-3\">\n          <div class=\"card h-100\">\n            <div class=\"card-body\">\n              <h6 class=\"card-title\">\n                <i class=\"bi bi-diagram-2 text-success me-2\"></i>Pooled & Independent Samples\n              </h6>\n              <p class=\"card-text\">\n                <small class=\"text-muted\">{{ pool.pooledAndIndependentSamples.length || 0 }} samples</small>\n              </p>\n              <div class=\"sample-list\">\n                @if (pool.pooledAndIndependentSamples && pool.pooledAndIndependentSamples.length > 0) {\n                  <div class=\"sample-numbers\">{{ pooledAndIndependentSamplesText }}</div>\n                } @else {\n                  <em class=\"text-muted\">No pooled & independent samples</em>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Template Sample -->\n    </div>\n\n    <!-- Metadata Columns -->\n    @if (pool.metadataColumns && pool.metadataColumns.length > 0) {\n      <div class=\"mb-4\">\n        <h6 class=\"text-muted mb-3\">\n          <i class=\"bi bi-table me-2\"></i>Metadata Columns ({{ pool.metadataColumns.length }})\n        </h6>\n        <div class=\"table-responsive\">\n          <table class=\"table table-sm\">\n            <thead>\n              <tr>\n                <th>Column Name</th>\n                <th>Type</th>\n                <th>Value</th>\n                <th>Ontology</th>\n              </tr>\n            </thead>\n            <tbody>\n              @for (column of pool.metadataColumns; track column.id) {\n                <tr>\n                  <td>\n                    <strong>{{ column.displayName || column.name }}</strong>\n                  </td>\n                  <td>\n                    <span class=\"badge bg-light text-dark\">{{ column.type }}</span>\n                  </td>\n                  <td>\n                    @if (column.value) {\n                      <code>{{ column.value }}</code>\n                    } @else {\n                      <em class=\"text-muted\">No default value</em>\n                    }\n                  </td>\n                  <td>\n                    @if (column.ontologyType) {\n                      <span class=\"badge bg-info\">{{ column.ontologyType }}</span>\n                    } @else {\n                      <em class=\"text-muted\">None</em>\n                    }\n                  </td>\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n      </div>\n    }\n\n    <!-- Timestamps -->\n    <div class=\"mt-4\">\n      <div class=\"row\">\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">\n            <i class=\"bi bi-calendar-plus me-1\"></i>\n            Created: {{ pool.createdAt | date:'MMM d, y, h:mm a' }}\n          </small>\n        </div>\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">\n            <i class=\"bi bi-calendar-check me-1\"></i>\n            Updated: {{ pool.updatedAt | date:'MMM d, y, h:mm a' }}\n          </small>\n        </div>\n      </div>\n    </div>\n\n  } @else {\n    <div class=\"text-center py-4\">\n      <i class=\"bi bi-exclamation-triangle text-warning display-4\"></i>\n      <h5 class=\"mt-3 text-muted\">No Pool Data Available</h5>\n      <p class=\"text-muted\">Pool information could not be loaded.</p>\n    </div>\n  }\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onClose()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Close\n  </button>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgbModule }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SamplePoolDetailsModal, isStandalone: true, selector: "ccv-sample-pool-details-modal", inputs: { pool: "pool" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-collection me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onClose()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  @if (pool) {\n    <!-- Pool Type and Basic Info -->\n    <div class=\"mb-4\">\n      <div class=\"d-flex justify-content-between align-items-start mb-3\">\n        <div>\n          <h5 class=\"mb-2\">{{ pool.poolName }}</h5>\n          <span [class]=\"poolTypeClass\">\n            <i class=\"bi bi-collection me-1\"></i>{{ poolTypeLabel }}\n          </span>\n        </div>\n        <div class=\"text-end\">\n          <small class=\"text-muted d-block\">Pool ID: {{ pool.id }}</small>\n          <small class=\"text-muted\">Total Samples: {{ allSamplesCount }}</small>\n        </div>\n      </div>\n      \n      @if (pool.poolDescription) {\n        <div class=\"mt-3\">\n          <strong>Description:</strong>\n          <p class=\"mt-1 mb-0\">{{ pool.poolDescription }}</p>\n        </div>\n      }\n    </div>\n\n    <!-- Sample Configuration -->\n    <div class=\"mb-4\">\n      <h6 class=\"text-muted mb-3\">\n        <i class=\"bi bi-diagram-3 me-2\"></i>Sample Configuration\n      </h6>\n      \n      <div class=\"row\">\n        <!-- Pooled Only Samples -->\n        <div class=\"col-md-6 mb-3\">\n          <div class=\"card h-100\">\n            <div class=\"card-body\">\n              <h6 class=\"card-title\">\n                <i class=\"bi bi-collection text-primary me-2\"></i>Pooled Only Samples\n              </h6>\n              <p class=\"card-text\">\n                <small class=\"text-muted\">{{ pool.pooledOnlySamples.length || 0 }} samples</small>\n              </p>\n              <div class=\"sample-list\">\n                @if (pool.pooledOnlySamples && pool.pooledOnlySamples.length > 0) {\n                  <div class=\"sample-numbers\">{{ pooledOnlySamplesText }}</div>\n                } @else {\n                  <em class=\"text-muted\">No pooled-only samples</em>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Pooled and Independent Samples -->\n        <div class=\"col-md-6 mb-3\">\n          <div class=\"card h-100\">\n            <div class=\"card-body\">\n              <h6 class=\"card-title\">\n                <i class=\"bi bi-diagram-2 text-success me-2\"></i>Pooled & Independent Samples\n              </h6>\n              <p class=\"card-text\">\n                <small class=\"text-muted\">{{ pool.pooledAndIndependentSamples.length || 0 }} samples</small>\n              </p>\n              <div class=\"sample-list\">\n                @if (pool.pooledAndIndependentSamples && pool.pooledAndIndependentSamples.length > 0) {\n                  <div class=\"sample-numbers\">{{ pooledAndIndependentSamplesText }}</div>\n                } @else {\n                  <em class=\"text-muted\">No pooled & independent samples</em>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Template Sample -->\n    </div>\n\n    <!-- Metadata Columns -->\n    @if (pool.metadataColumns && pool.metadataColumns.length > 0) {\n      <div class=\"mb-4\">\n        <h6 class=\"text-muted mb-3\">\n          <i class=\"bi bi-table me-2\"></i>Metadata Columns ({{ pool.metadataColumns.length }})\n        </h6>\n        <div class=\"table-responsive\">\n          <table class=\"table table-sm\">\n            <thead>\n              <tr>\n                <th>Column Name</th>\n                <th>Type</th>\n                <th>Value</th>\n                <th>Ontology</th>\n              </tr>\n            </thead>\n            <tbody>\n              @for (column of pool.metadataColumns; track column.id) {\n                <tr>\n                  <td>\n                    <strong>{{ column.displayName || column.name }}</strong>\n                  </td>\n                  <td>\n                    <span class=\"badge bg-light text-dark\">{{ column.type }}</span>\n                  </td>\n                  <td>\n                    @if (column.value) {\n                      <code>{{ column.value }}</code>\n                    } @else {\n                      <em class=\"text-muted\">No default value</em>\n                    }\n                  </td>\n                  <td>\n                    @if (column.ontologyType) {\n                      <span class=\"badge bg-info\">{{ column.ontologyType }}</span>\n                    } @else {\n                      <em class=\"text-muted\">None</em>\n                    }\n                  </td>\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n      </div>\n    }\n\n    <!-- Timestamps -->\n    <div class=\"mt-4\">\n      <div class=\"row\">\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">\n            <i class=\"bi bi-calendar-plus me-1\"></i>\n            Created: {{ pool.createdAt | date:'MMM d, y, h:mm a' }}\n          </small>\n        </div>\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">\n            <i class=\"bi bi-calendar-check me-1\"></i>\n            Updated: {{ pool.updatedAt | date:'MMM d, y, h:mm a' }}\n          </small>\n        </div>\n      </div>\n    </div>\n\n  } @else {\n    <div class=\"text-center py-4\">\n      <i class=\"bi bi-exclamation-triangle text-warning display-4\"></i>\n      <h5 class=\"mt-3 text-muted\">No Pool Data Available</h5>\n      <p class=\"text-muted\">Pool information could not be loaded.</p>\n    </div>\n  }\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onClose()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Close\n  </button>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgbModule }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SamplePoolDetailsModal, decorators: [{
             type: Component,
@@ -8465,7 +8444,6 @@ class MetadataTableDetails {
                         this.toastService.success(`SDRF import task queued successfully! Task ID: ${result.taskId}`);
                         // Mark task for monitoring and start real-time updates (same pattern as export)
                         this.asyncTaskService.monitorTask(result.taskId);
-                        this.asyncTaskService.startRealtimeUpdates();
                     }
                     else {
                         // Fallback for immediate processing (backward compatibility)
@@ -8527,7 +8505,6 @@ class MetadataTableDetails {
                         this.toastService.success(`Excel import task queued successfully! Task ID: ${result.taskId}`);
                         // Mark task for monitoring and start real-time updates (same pattern as export)
                         this.asyncTaskService.monitorTask(result.taskId);
-                        this.asyncTaskService.startRealtimeUpdates();
                     }
                     else {
                         // Fallback for immediate processing (backward compatibility)
@@ -8582,8 +8559,7 @@ class MetadataTableDetails {
             labGroupIds = [];
         }
         // For 'none', labGroupIds stays undefined
-        // Use async export only
-        this.asyncExportService.excelTemplate({
+        this.asyncTaskService.queueExcelExport({
             metadataTableId: table.id,
             metadataColumnIds: columnIds,
             sampleNumber: table.sampleCount,
@@ -8593,8 +8569,6 @@ class MetadataTableDetails {
         }).subscribe({
             next: (response) => {
                 this.toastService.success(`Excel export queued successfully! Task ID: ${response.taskId}`);
-                // Start monitoring tasks if not already started
-                this.asyncTaskService.startRealtimeUpdates();
             },
             error: (error) => {
                 console.error('Error queuing Excel export:', error);
@@ -8605,8 +8579,7 @@ class MetadataTableDetails {
     }
     performSdrfExport(table) {
         const columnIds = table.columns.map(col => col.id);
-        // Use async export only
-        this.asyncExportService.sdrfFile({
+        this.asyncTaskService.queueSdrfExport({
             metadataTableId: table.id,
             metadataColumnIds: columnIds,
             sampleNumber: table.sampleCount,
@@ -8615,8 +8588,6 @@ class MetadataTableDetails {
         }).subscribe({
             next: (response) => {
                 this.toastService.success(`SDRF export queued successfully! Task ID: ${response.taskId}`);
-                // Start monitoring tasks if not already started
-                this.asyncTaskService.startRealtimeUpdates();
             },
             error: (error) => {
                 console.error('Error queuing SDRF export:', error);
@@ -8631,7 +8602,6 @@ class MetadataTableDetails {
                 this.isLoading.set(false);
                 this.toastService.success(`${format.toUpperCase()} export task queued successfully! Task ID: ${response.taskId}`);
                 // Start monitoring tasks if not already started
-                this.asyncTaskService.startRealtimeUpdates();
             },
             error: (error) => {
                 this.isLoading.set(false);
@@ -9327,7 +9297,6 @@ class MetadataTableDetails {
                 this.toastService.success(`Column reorder task queued successfully! Task ID: ${response.taskId}`);
                 // Mark task for monitoring and start real-time updates (same pattern as imports)
                 this.asyncTaskService.monitorTask(response.taskId);
-                this.asyncTaskService.startRealtimeUpdates();
                 this.isLoading.set(false);
             },
             error: (error) => {
@@ -9374,7 +9343,7 @@ class MetadataTableDetails {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataTableDetails, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: MetadataTableService }, { token: AsyncExportService }, { token: ChunkedUploadService }, { token: SamplePoolService }, { token: MetadataColumnService }, { token: i3.ToastService }, { token: AsyncTaskUIService }, { token: i2.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MetadataTableDetails, isStandalone: true, selector: "ccv-metadata-table-details", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "excelInput", first: true, predicate: ["excelInput"], descendants: true }], ngImport: i0, template: "<div class=\"metadata-table-details-container\">\n  <!-- Header Section with Breadcrumbs -->\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\n    <div class=\"container-fluid\">\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\n        <div class=\"d-flex align-items-center\">\n          <!-- Breadcrumb Navigation -->\n          <nav aria-label=\"breadcrumb\" class=\"me-3\">\n            <ol class=\"breadcrumb mb-0\">\n              <li class=\"breadcrumb-item\">\n                <a routerLink=\"/metadata-tables\" class=\"text-decoration-none\">\n                  <i class=\"bi bi-table me-1\"></i>Metadata Tables\n                </a>\n              </li>\n              <li class=\"breadcrumb-item active\" aria-current=\"page\">\n                @if (table()) {\n                  {{ table()!.name }}\n                } @else {\n                  Table Details\n                }\n              </li>\n            </ol>\n          </nav>\n\n          <!-- Table Status Badge -->\n          @if (table()) {\n            <span class=\"badge ms-2\" [class]=\"getTableStatusClass()\">\n              {{ getTableStatusBadge() }}\n            </span>\n          }\n        </div>\n\n        <!-- Action Buttons -->\n        <div class=\"d-flex gap-2\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary btn-sm\"\n            (click)=\"navigateBack()\"\n            title=\"Back to Tables\">\n            <i class=\"bi bi-arrow-left me-1\"></i>Back\n          </button>\n\n          <!-- View Mode Toggle -->\n          @if (hasColumns()) {\n            <div class=\"btn-group\" role=\"group\">\n              <button\n                type=\"button\"\n                class=\"btn btn-sm\"\n                [class]=\"viewMode() === 'list' ? 'btn-primary' : 'btn-outline-primary'\"\n                (click)=\"switchToListMode()\"\n                title=\"Column List View\">\n                <i class=\"bi bi-list-ul me-1\"></i>List\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-sm\"\n                [class]=\"viewMode() === 'table' ? 'btn-primary' : 'btn-outline-primary'\"\n                (click)=\"switchToTableMode()\"\n                title=\"Table Data View\">\n                <i class=\"bi bi-table me-1\"></i>Table\n              </button>\n            </div>\n          }\n          <!-- Import Dropdown -->\n          @if (table() && table()!.canEdit) {\n            <div class=\"btn-group\" ngbDropdown>\n              <!-- Hidden file inputs -->\n              <input\n                #fileInput\n                type=\"file\"\n                accept=\".txt,.tsv\"\n                style=\"display: none;\"\n                (change)=\"importSdrf($event)\">\n              <input\n                #excelInput\n                type=\"file\"\n                accept=\".xlsx,.xls\"\n                style=\"display: none;\"\n                (change)=\"importExcel($event)\">\n              \n              <button\n                type=\"button\"\n                class=\"btn btn-outline-success btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\"\n                title=\"Import Data\">\n                <i class=\"bi bi-upload me-1\"></i>Import\n              </button>\n              <div class=\"dropdown-menu\" ngbDropdownMenu>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"triggerFileInput(); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-text me-2\"></i>Import SDRF File\n                </a>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"triggerExcelInput(); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-spreadsheet me-2\"></i>Import Excel Template\n                </a>\n              </div>\n            </div>\n          }\n\n          <!-- Export Dropdown -->\n          @if (table() && hasColumns()) {\n            <div class=\"btn-group\" ngbDropdown>\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-info btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\"\n                title=\"Export Table\">\n                <i class=\"bi bi-download me-1\"></i>Export\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"exportToSdrf('sdrf'); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-text me-2\"></i>Export as SDRF\n                </a>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"exportToSdrf('excel'); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-spreadsheet me-2\"></i>Export as Excel\n                </a>\n              </div>\n            </div>\n          }\n\n          <!-- Edit Button -->\n          @if (table() && table()!.canEdit) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-primary btn-sm\"\n              (click)=\"editTable()\"\n              [disabled]=\"isLoading()\"\n              title=\"Edit Table\">\n              <i class=\"bi bi-pencil me-1\"></i>Edit\n            </button>\n          }\n\n          <!-- Reorder Columns Button -->\n          @if (table() && table()!.canEdit && hasColumns()) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-warning btn-sm\"\n              (click)=\"reorderColumns()\"\n              [disabled]=\"isLoading()\"\n              title=\"Reorder Columns by Schema\">\n              <i class=\"bi bi-arrows-move me-1\"></i>Reorder\n            </button>\n          }\n\n          <!-- Create Pool Button -->\n          @if (table() && table()!.canEdit && hasColumns()) {\n            <button\n              type=\"button\"\n              class=\"btn btn-success btn-sm\"\n              (click)=\"createPool()\"\n              [disabled]=\"isLoading()\"\n              title=\"Create Sample Pool\">\n              <i class=\"bi bi-plus-circle me-1\"></i>Create Pool\n            </button>\n          }\n\n          <!-- More Actions Dropdown -->\n          @if (table() && table()!.canEdit) {\n            <div class=\"btn-group\" ngbDropdown>\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-danger btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\">\n                <i class=\"bi bi-three-dots-vertical\"></i>\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n                <a class=\"dropdown-item text-danger\" href=\"#\" (click)=\"deleteTable(); $event.preventDefault()\">\n                  <i class=\"bi bi-trash me-2\"></i>Delete Table\n                </a>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <!-- Loading Spinner -->\n  @if (isLoading()) {\n    <div class=\"d-flex justify-content-center align-items-center\" style=\"height: 400px;\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n  }\n\n  <!-- Table Details Content -->\n  @if (table() && !isLoading()) {\n    <div class=\"table-details-content p-4\">\n\n      <!-- Table Information Card -->\n      <div class=\"card mb-4\">\n        <div class=\"card-header\">\n          <div class=\"d-flex align-items-center justify-content-between\">\n            <h5 class=\"mb-0\">\n              <i class=\"bi bi-info-circle me-2\"></i>Table Information\n            </h5>\n            <small class=\"text-muted\">\n              Created {{ table()!.createdAt | date:'medium' }}\n            </small>\n          </div>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"row\">\n            <div class=\"col-md-8\">\n              <h3 class=\"fw-bold mb-3\">{{ table()!.name }}</h3>\n              @if (table()!.description) {\n                <p class=\"text-muted mb-3\">{{ table()!.description }}</p>\n              }\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-hash text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Sample Count:</span>\n                    <span class=\"badge bg-primary\">{{ table()!.sampleCount }}</span>\n                  </div>\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-columns-gap text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Columns:</span>\n                    <span class=\"badge bg-info\">{{ table()!.columns?.length || 0 }}</span>\n                  </div>\n                </div>\n                <div class=\"col-md-6\">\n                  @if (table()!.ownerUsername) {\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <i class=\"bi bi-person text-muted me-2\"></i>\n                      <span class=\"fw-semibold me-2\">Owner:</span>\n                      <span>{{ table()!.ownerUsername }}</span>\n                    </div>\n                  }\n                  @if (table()!.labGroupName) {\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <i class=\"bi bi-people text-muted me-2\"></i>\n                      <span class=\"fw-semibold me-2\">Lab Group:</span>\n                      <span>{{ table()!.labGroupName }}</span>\n                    </div>\n                  }\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-tag text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Version:</span>\n                    <span class=\"badge bg-light text-dark\">{{ table()!.version || 'v1.0' }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-md-4 text-end\">\n              <div class=\"d-flex flex-column gap-2\">\n                @if (table()!.isLocked) {\n                  <span class=\"badge bg-warning\">\n                    <i class=\"bi bi-lock me-1\"></i>Locked\n                  </span>\n                }\n                @if (table()!.isPublished) {\n                  <span class=\"badge bg-success\">\n                    <i class=\"bi bi-cloud-check me-1\"></i>Published\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Sample Pool Table -->\n      @if (viewMode() === 'table' && hasPools()) {\n        <div class=\"card mb-4\">\n          <div class=\"card-header\">\n            <h5 class=\"mb-0\">\n              <i class=\"bi bi-layers me-2\"></i>Sample Pool Table\n              <span class=\"badge bg-warning ms-2\">{{ sortedPools().length }} pools</span>\n            </h5>\n          </div>\n          <div class=\"card-body p-0\">\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead class=\"table-light\">\n                  <tr>\n                    <th scope=\"col\" style=\"width: 80px;\" class=\"bg-secondary bg-opacity-10 text-secondary\">Pool</th>\n                    @for (column of sortedColumns(); track column.id) {\n                      <th scope=\"col\" [class]=\"getColumnHeaderClass(column)\" [title]=\"column.name\">\n                        <div class=\"header-cell d-flex justify-content-between align-items-center\">\n                          <span>{{ getShortColumnName(column) }}</span>\n                          @if (table()!.canEdit) {\n                            <div class=\"header-actions\">\n                              <button\n                                type=\"button\"\n                                class=\"btn btn-sm btn-outline-primary header-edit-btn me-1\"\n                                (click)=\"editColumnValue(column)\"\n                                [title]=\"'Edit default value for ' + column.name\">\n                                <i class=\"bi bi-pencil\"></i>\n                              </button>\n                            </div>\n                          }\n                        </div>\n                      </th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (poolRow of poolTableRows(); track poolRow._poolId) {\n                    <tr class=\"pool-row\" [class.editable]=\"table()!.canEdit\">\n                      <td class=\"text-muted fw-semibold\" \n                          [class.clickable]=\"table()!.canEdit\"\n                          (click)=\"table()!.canEdit ? editPool(poolRow._poolData) : null\"\n                          [title]=\"table()!.canEdit ? 'Click to edit pool: ' + poolRow._poolName : poolRow._poolName\">\n                        <i class=\"bi bi-layers me-2\"></i>{{ poolRow._poolName }}\n                        @if (table()!.canEdit) {\n                          <i class=\"bi bi-pencil-square ms-1 text-primary\" style=\"font-size: 0.8em;\"></i>\n                        }\n                      </td>\n                      @for (column of sortedColumns(); track column.id) {\n                        <td\n                          class=\"pool-cell\"\n                          [class.opacity-50]=\"column.hidden\"\n                          [attr.data-pool-id]=\"poolRow._poolId\"\n                          [attr.data-column-id]=\"column.id\"\n                          (click)=\"table()!.canEdit ? editPoolColumnValue(poolRow._poolData, column) : null\"\n                          [title]=\"table()!.canEdit ? 'Click to edit ' + column.name + ' for pool ' + poolRow._poolName : ''\">\n                          {{ poolRow['col_' + column.id] || '-' }}\n                        </td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Columns/Table Section -->\n      <div class=\"card\">\n        <div class=\"card-header\">\n          <div class=\"d-flex align-items-center justify-content-between\">\n            <h5 class=\"mb-0\">\n              @if (viewMode() === 'list') {\n                <i class=\"bi bi-list-columns me-2\"></i>Table Columns\n              } @else {\n                <i class=\"bi bi-table me-2\"></i>Table Data\n              }\n            </h5>\n            \n            <!-- Column Filter -->\n            @if (hasColumns()) {\n              <div class=\"d-flex align-items-center me-3\">\n                <div class=\"input-group input-group-sm\" style=\"width: 250px;\">\n                  <span class=\"input-group-text\">\n                    <i class=\"bi bi-funnel text-muted\"></i>\n                  </span>\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    placeholder=\"Filter columns...\"\n                    [value]=\"columnFilter()\"\n                    (input)=\"onColumnFilterChange($any($event.target).value)\">\n                  @if (columnFilter()) {\n                    <button\n                      type=\"button\"\n                      class=\"btn btn-outline-secondary\"\n                      (click)=\"clearColumnFilter()\"\n                      title=\"Clear filter\">\n                      <i class=\"bi bi-x\"></i>\n                    </button>\n                  }\n                </div>\n                @if (columnFilter()) {\n                  <small class=\"text-muted ms-2\">\n                    {{ filteredColumnCount }}/{{ totalColumnCount }}\n                  </small>\n                }\n              </div>\n            }\n            \n            <div class=\"d-flex gap-2 align-items-center\">\n              @if (viewMode() === 'list') {\n                <span class=\"badge bg-primary\">{{ sortedColumns().length }} columns</span>\n                @if (table() && table()!.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-success btn-sm\"\n                    (click)=\"openAddColumnModal()\"\n                    [disabled]=\"isLoading()\"\n                    title=\"Add new column with automatic reordering\">\n                    <i class=\"bi bi-plus-circle me-1\"></i>Add Column\n                  </button>\n                }\n                @if (table() && table()!.canEdit && sortedColumns().length === 0) {\n                  <small class=\"text-muted\">Import SDRF to add columns</small>\n                }\n              } @else {\n                <span class=\"badge bg-info\">{{ tableRows().length }} samples</span>\n                @if (hasPools()) {\n                  <span class=\"badge bg-warning\">{{ sortedPools().length }} pools</span>\n                }\n                <span class=\"badge bg-primary\">{{ sortedColumns().length }} columns</span>\n                @if (table() && table()!.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-success btn-sm\"\n                    (click)=\"openAddColumnModal()\"\n                    [disabled]=\"isLoading()\"\n                    title=\"Add new column with automatic reordering\">\n                    <i class=\"bi bi-plus-circle me-1\"></i>Add Column\n                  </button>\n                }\n              }\n            </div>\n          </div>\n        </div>\n\n        @if (hasColumns()) {\n          <!-- List Mode: Column Definitions -->\n          @if (viewMode() === 'list') {\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead>\n                  <tr>\n                    <th scope=\"col\" style=\"width: 40px;\">\n                      @if (table()!.canEdit) {\n                        <i class=\"bi bi-arrows-move text-muted\" title=\"Drag to reorder\"></i>\n                      }\n                    </th>\n                    <th scope=\"col\" style=\"width: 60px;\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('position')\"\n                        [class.sorted]=\"isSorted('position')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>#</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('position')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('name')\"\n                        [class.sorted]=\"isSorted('name')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Column Name</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('name')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('type')\"\n                        [class.sorted]=\"isSorted('type')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Type</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('type')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('value')\"\n                        [class.sorted]=\"isSorted('value')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Value</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('value')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\">Properties</th>\n                    <th scope=\"col\" style=\"width: 100px;\">Actions</th>\n                  </tr>\n                </thead>\n                <tbody cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" [cdkDropListData]=\"dragColumnsForList()\">\n                  @for (column of dragColumnsForList(); track column.id) {\n                    <tr cdkDrag [cdkDragData]=\"column\" [cdkDragDisabled]=\"!table()!.canEdit\">\n                      <td class=\"text-center\">\n                        @if (table()!.canEdit) {\n                          <i class=\"bi bi-grip-vertical drag-handle\" cdkDragHandle></i>\n                        }\n                      </td>\n                      <td class=\"text-muted fw-semibold\">\n                        {{ (column.columnPosition || 0) + 1 }}\n                      </td>\n                      <td>\n                        <div class=\"d-flex align-items-center\">\n                          <i class=\"me-2\" [class]=\"getColumnTypeIcon(column) + ' ' + getColumnTypeClass(column)\"></i>\n                          <span class=\"fw-semibold\">{{ column.name }}</span>\n                        </div>\n                      </td>\n                      <td>\n                        <span class=\"badge bg-light text-dark\">{{ column.type }}</span>\n                      </td>\n                      <td>\n                        <div>\n                          <!-- Default Value -->\n                          <div class=\"fw-semibold\">{{ getColumnValueDisplay(column) }}</div>\n\n                          <!-- Sample-specific Modifiers -->\n                          @if (hasModifiers(column)) {\n                            <div class=\"mt-1\">\n                              @for (modifierDisplay of getModifiersDisplay(column); track $index) {\n                                <small class=\"badge bg-light text-dark me-1 mb-1 d-inline-block\"\n                                       style=\"font-size: 0.7rem;\"\n                                       [title]=\"modifierDisplay\">\n                                  {{ modifierDisplay }}\n                                </small>\n                              }\n                            </div>\n                          }\n                        </div>\n                      </td>\n                      <td>\n                        <div class=\"d-flex gap-1 flex-wrap\">\n                          @if (column.mandatory) {\n                            <span class=\"badge bg-danger\" title=\"Required field\">Required</span>\n                          }\n                          @if (column.readonly) {\n                            <span class=\"badge bg-secondary\" title=\"Read-only field\">Read-only</span>\n                          }\n                          @if (column.hidden) {\n                            <span class=\"badge bg-warning\" title=\"Hidden field\">Hidden</span>\n                          }\n                          @if (column.autoGenerated) {\n                            <span class=\"badge bg-info\" title=\"Auto-generated field\">Auto</span>\n                          }\n                          @if (column.ontologyType) {\n                            <span class=\"badge bg-success\" title=\"Ontology: {{ column.ontologyType }}\">\n                              {{ column.ontologyType }}\n                            </span>\n                          }\n                        </div>\n                      </td>\n                      <td>\n                        <div class=\"btn-group btn-group-sm\">\n                          <button type=\"button\" class=\"btn btn-outline-primary\"\n                                  (click)=\"viewColumnDetails(column)\"\n                                  title=\"View column details\">\n                            <i class=\"bi bi-eye\"></i>\n                          </button>\n                          @if (table()!.canEdit) {\n                            <button type=\"button\" \n                                    class=\"btn\"\n                                    [class]=\"column.hidden ? 'btn-outline-warning' : 'btn-outline-success'\"\n                                    (click)=\"toggleColumnHidden(column)\"\n                                    [title]=\"column.hidden ? 'Show column' : 'Hide column'\">\n                              <i class=\"bi\" [class]=\"column.hidden ? 'bi-eye-slash' : 'bi-eye'\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-success\"\n                                    (click)=\"editColumnValue(column)\"\n                                    title=\"Edit default value\">\n                              <i class=\"bi bi-pencil-square\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-info\"\n                                    (click)=\"autofillColumnValues(column)\"\n                                    title=\"Auto-fill values\">\n                              <i class=\"bi bi-magic\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-secondary\"\n                                    (click)=\"editColumnSettings(column)\"\n                                    title=\"Edit column settings\">\n                              <i class=\"bi bi-gear\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-info\"\n                                    (click)=\"openColumnHistory(column)\"\n                                    title=\"View column history\">\n                              <i class=\"bi bi-clock-history\"></i>\n                            </button>\n                          }\n                        </div>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n\n          <!-- Table Data -->\n          @if (viewMode() === 'table') {\n            <div class=\"card-body p-0\">\n              <div class=\"table-responsive\">\n                <table class=\"table table-hover mb-0\">\n                  <thead class=\"table-light\">\n                    <tr>\n                      <th scope=\"col\" style=\"width: 80px;\" class=\"bg-secondary bg-opacity-10 text-secondary\">#</th>\n                      @for (column of sortedColumns(); track column.id) {\n                        <th scope=\"col\" [class]=\"getColumnHeaderClass(column)\" [title]=\"column.name\">\n                          <div class=\"header-cell d-flex justify-content-between align-items-center\">\n                            <span>{{ getShortColumnName(column) }}</span>\n                            @if (table()!.canEdit) {\n                              <div class=\"header-actions\">\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm header-edit-btn me-1\"\n                                  [class]=\"column.hidden ? 'btn-outline-warning' : 'btn-outline-success'\"\n                                  (click)=\"toggleColumnHidden(column)\"\n                                  [title]=\"column.hidden ? 'Show column' : 'Hide column'\">\n                                  <i class=\"bi\" [class]=\"column.hidden ? 'bi-eye-slash' : 'bi-eye'\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-primary header-edit-btn me-1\"\n                                  (click)=\"editColumnValue(column)\"\n                                  [title]=\"'Edit default value for ' + column.name\">\n                                  <i class=\"bi bi-pencil\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-info header-edit-btn me-1\"\n                                  (click)=\"autofillColumnValues(column)\"\n                                  [title]=\"'Auto-fill values for ' + column.name\">\n                                  <i class=\"bi bi-magic\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-danger header-edit-btn\"\n                                  (click)=\"removeColumn(column)\"\n                                  [title]=\"'Remove ' + column.name + ' column'\">\n                                  <i class=\"bi bi-trash\"></i>\n                                </button>\n                              </div>\n                            }\n                          </div>\n                        </th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (row of paginatedRows(); track row._sampleIndex) {\n                      <tr class=\"sample-row\" [class.editable]=\"table()!.canEdit\">\n                        <td class=\"text-muted fw-semibold\">{{ row._sampleIndex }}</td>\n                        @for (column of sortedColumns(); track column.id) {\n                          <td\n                            class=\"sample-cell\"\n                            [class.opacity-50]=\"column.hidden\"\n                            [attr.data-sample-index]=\"row._sampleIndex\"\n                            [attr.data-column-id]=\"column.id\"\n                            (click)=\"table()!.canEdit ? editSampleColumnValue(column, row._sampleIndex) : null\"\n                            [title]=\"table()!.canEdit ? 'Click to edit ' + column.name + ' for sample ' + row._sampleIndex : ''\">\n                            {{ row['col_' + column.id] || '-' }}\n                          </td>\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n\n              <!-- Table Mode Pagination -->\n              @if (viewMode() === 'table' && totalPages() > 1) {\n                <div class=\"d-flex justify-content-between align-items-center p-3 border-top\">\n                  <div class=\"d-flex align-items-center gap-2\">\n                    <span class=\"text-muted\">Rows per page:</span>\n                    <select class=\"form-select form-select-sm\" style=\"width: auto;\"\n                            [value]=\"pageSize()\"\n                            (change)=\"onPageSizeChange(+($any($event.target).value))\">\n                      <option value=\"10\">10</option>\n                      <option value=\"25\">25</option>\n                      <option value=\"50\">50</option>\n                      <option value=\"100\">100</option>\n                    </select>\n                  </div>\n                  <ngb-pagination\n                    [collectionSize]=\"tableRows().length\"\n                    [page]=\"currentPage()\"\n                    [pageSize]=\"pageSize()\"\n                    [maxSize]=\"5\"\n                    [boundaryLinks]=\"true\"\n                    [rotate]=\"true\"\n                    (pageChange)=\"onPageChange($event)\"\n                    class=\"pagination-sm mb-0\">\n                  </ngb-pagination>\n                  <span class=\"text-muted\">\n                    Showing {{ (currentPage() - 1) * pageSize() + 1 }}-{{ Math.min(currentPage() * pageSize(), tableRows().length) }}\n                    of {{ tableRows().length }} samples\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"card-body text-center py-5\">\n            <div class=\"text-muted\">\n              <i class=\"bi bi-inbox display-1 mb-3\"></i>\n              <h5>No Columns Found</h5>\n              <p>This table doesn't have any columns defined yet.</p>\n              @if (table()!.canEdit) {\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"openAddColumnModal()\">\n                  <i class=\"bi bi-plus me-1\"></i>Add First Column\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.header-cell{position:relative}.header-cell .header-actions{opacity:0;transition:opacity .15s ease}thead th:hover .header-actions{opacity:1}.header-edit-btn{--bs-btn-padding-y: .125rem;--bs-btn-padding-x: .25rem;--bs-btn-font-size: .65rem;border:none!important}.header-edit-btn.btn-outline-primary:hover{background-color:var(--bs-primary);border-color:var(--bs-primary)}.header-edit-btn.btn-outline-danger:hover{background-color:var(--bs-danger);border-color:var(--bs-danger)}.sample-row.editable .sample-cell{cursor:pointer;transition:background-color .1s ease}.sample-row.editable .sample-cell:hover{background-color:#28a74514;position:relative}.sample-row.editable .sample-cell:hover:after{content:\"\\270e\";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#28a74599;font-size:.75em;pointer-events:none}.pool-row.editable td.clickable{cursor:pointer;transition:background-color .1s ease}.pool-row.editable td.clickable:hover{background-color:#0dcaf01a;color:var(--bs-info)}.pool-row.editable td.clickable:hover .bi-pencil-square{opacity:.8}.pool-row.editable td.clickable .bi-pencil-square{opacity:.4;transition:opacity .1s ease}.pool-row.editable .pool-cell{cursor:pointer;transition:background-color .1s ease}.pool-row.editable .pool-cell:hover{background-color:#ffc10726;position:relative}.pool-row.editable .pool-cell:hover:after{content:\"\\270e\";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#ffc107cc;font-size:.75em;pointer-events:none}@media (max-width: 768px){.sample-row.editable .sample-cell,.pool-row.editable .pool-cell{transition:none}}.sortable{cursor:pointer;user-select:none;transition:background-color .2s ease}.sortable:hover{background-color:rgba(var(--bs-primary-rgb),.1)}.sortable.sorted{background-color:rgba(var(--bs-primary-rgb),.15)}.sortable.sorted .bi{color:var(--bs-primary)}.sortable .bi{opacity:.5;transition:all .2s ease;font-size:.75em}.sortable:hover .bi{opacity:.8}.drag-handle{cursor:grab;opacity:.6;transition:opacity .2s ease}.drag-handle:hover{opacity:1}.drag-handle:active{cursor:grabbing}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:var(--bs-light);border:1px solid var(--bs-border-color)}.cdk-drag-preview .header-cell{padding:.5rem;font-size:.875rem;font-weight:500}.cdk-drag-placeholder{opacity:.5;background:rgba(var(--bs-primary-rgb),.1)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging th:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: i2.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MetadataTableDetails, isStandalone: true, selector: "ccv-metadata-table-details", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "excelInput", first: true, predicate: ["excelInput"], descendants: true }], ngImport: i0, template: "<div class=\"metadata-table-details-container\">\n  <!-- Header Section with Breadcrumbs -->\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\n    <div class=\"container-fluid\">\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\n        <div class=\"d-flex align-items-center\">\n          <!-- Breadcrumb Navigation -->\n          <nav aria-label=\"breadcrumb\" class=\"me-3\">\n            <ol class=\"breadcrumb mb-0\">\n              <li class=\"breadcrumb-item\">\n                <a routerLink=\"/metadata-tables\" class=\"text-decoration-none\">\n                  <i class=\"bi bi-table me-1\"></i>Metadata Tables\n                </a>\n              </li>\n              <li class=\"breadcrumb-item active\" aria-current=\"page\">\n                @if (table()) {\n                  {{ table()!.name }}\n                } @else {\n                  Table Details\n                }\n              </li>\n            </ol>\n          </nav>\n\n          <!-- Table Status Badge -->\n          @if (table()) {\n            <span class=\"badge ms-2\" [class]=\"getTableStatusClass()\">\n              {{ getTableStatusBadge() }}\n            </span>\n          }\n        </div>\n\n        <!-- Action Buttons -->\n        <div class=\"d-flex gap-2\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary btn-sm\"\n            (click)=\"navigateBack()\"\n            title=\"Back to Tables\">\n            <i class=\"bi bi-arrow-left me-1\"></i>Back\n          </button>\n\n          <!-- View Mode Toggle -->\n          @if (hasColumns()) {\n            <div class=\"btn-group\" role=\"group\">\n              <button\n                type=\"button\"\n                class=\"btn btn-sm\"\n                [class]=\"viewMode() === 'list' ? 'btn-primary' : 'btn-outline-primary'\"\n                (click)=\"switchToListMode()\"\n                title=\"Column List View\">\n                <i class=\"bi bi-list-ul me-1\"></i>List\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-sm\"\n                [class]=\"viewMode() === 'table' ? 'btn-primary' : 'btn-outline-primary'\"\n                (click)=\"switchToTableMode()\"\n                title=\"Table Data View\">\n                <i class=\"bi bi-table me-1\"></i>Table\n              </button>\n            </div>\n          }\n          <!-- Import Dropdown -->\n          @if (table() && table()!.canEdit) {\n            <div class=\"btn-group\" ngbDropdown>\n              <!-- Hidden file inputs -->\n              <input\n                #fileInput\n                type=\"file\"\n                accept=\".txt,.tsv\"\n                style=\"display: none;\"\n                (change)=\"importSdrf($event)\">\n              <input\n                #excelInput\n                type=\"file\"\n                accept=\".xlsx,.xls\"\n                style=\"display: none;\"\n                (change)=\"importExcel($event)\">\n              \n              <button\n                type=\"button\"\n                class=\"btn btn-outline-success btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\"\n                title=\"Import Data\">\n                <i class=\"bi bi-upload me-1\"></i>Import\n              </button>\n              <div class=\"dropdown-menu\" ngbDropdownMenu>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"triggerFileInput(); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-text me-2\"></i>Import SDRF File\n                </a>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"triggerExcelInput(); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-spreadsheet me-2\"></i>Import Excel Template\n                </a>\n              </div>\n            </div>\n          }\n\n          <!-- Export Dropdown -->\n          @if (table() && hasColumns()) {\n            <div class=\"btn-group\" ngbDropdown>\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-info btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\"\n                title=\"Export Table\">\n                <i class=\"bi bi-download me-1\"></i>Export\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"exportToSdrf('sdrf'); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-text me-2\"></i>Export as SDRF\n                </a>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"exportToSdrf('excel'); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-spreadsheet me-2\"></i>Export as Excel\n                </a>\n              </div>\n            </div>\n          }\n\n          <!-- Edit Button -->\n          @if (table() && table()!.canEdit) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-primary btn-sm\"\n              (click)=\"editTable()\"\n              [disabled]=\"isLoading()\"\n              title=\"Edit Table\">\n              <i class=\"bi bi-pencil me-1\"></i>Edit\n            </button>\n          }\n\n          <!-- Reorder Columns Button -->\n          @if (table() && table()!.canEdit && hasColumns()) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-warning btn-sm\"\n              (click)=\"reorderColumns()\"\n              [disabled]=\"isLoading()\"\n              title=\"Reorder Columns by Schema\">\n              <i class=\"bi bi-arrows-move me-1\"></i>Reorder\n            </button>\n          }\n\n          <!-- Create Pool Button -->\n          @if (table() && table()!.canEdit && hasColumns()) {\n            <button\n              type=\"button\"\n              class=\"btn btn-success btn-sm\"\n              (click)=\"createPool()\"\n              [disabled]=\"isLoading()\"\n              title=\"Create Sample Pool\">\n              <i class=\"bi bi-plus-circle me-1\"></i>Create Pool\n            </button>\n          }\n\n          <!-- More Actions Dropdown -->\n          @if (table() && table()!.canEdit) {\n            <div class=\"btn-group\" ngbDropdown>\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-danger btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\">\n                <i class=\"bi bi-three-dots-vertical\"></i>\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n                <a class=\"dropdown-item text-danger\" href=\"#\" (click)=\"deleteTable(); $event.preventDefault()\">\n                  <i class=\"bi bi-trash me-2\"></i>Delete Table\n                </a>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <!-- Loading Spinner -->\n  @if (isLoading()) {\n    <div class=\"d-flex justify-content-center align-items-center\" style=\"height: 400px;\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n  }\n\n  <!-- Table Details Content -->\n  @if (table() && !isLoading()) {\n    <div class=\"table-details-content p-4\">\n\n      <!-- Table Information Card -->\n      <div class=\"card mb-4\">\n        <div class=\"card-header\">\n          <div class=\"d-flex align-items-center justify-content-between\">\n            <h5 class=\"mb-0\">\n              <i class=\"bi bi-info-circle me-2\"></i>Table Information\n            </h5>\n            <small class=\"text-muted\">\n              Created {{ table()!.createdAt | date:'medium' }}\n            </small>\n          </div>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"row\">\n            <div class=\"col-md-8\">\n              <h3 class=\"fw-bold mb-3\">{{ table()!.name }}</h3>\n              @if (table()!.description) {\n                <p class=\"text-muted mb-3\">{{ table()!.description }}</p>\n              }\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-hash text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Sample Count:</span>\n                    <span class=\"badge bg-primary\">{{ table()!.sampleCount }}</span>\n                  </div>\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-columns-gap text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Columns:</span>\n                    <span class=\"badge bg-info\">{{ table()!.columns?.length || 0 }}</span>\n                  </div>\n                </div>\n                <div class=\"col-md-6\">\n                  @if (table()!.ownerUsername) {\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <i class=\"bi bi-person text-muted me-2\"></i>\n                      <span class=\"fw-semibold me-2\">Owner:</span>\n                      <span>{{ table()!.ownerUsername }}</span>\n                    </div>\n                  }\n                  @if (table()!.labGroupName) {\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <i class=\"bi bi-people text-muted me-2\"></i>\n                      <span class=\"fw-semibold me-2\">Lab Group:</span>\n                      <span>{{ table()!.labGroupName }}</span>\n                    </div>\n                  }\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-tag text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Version:</span>\n                    <span class=\"badge bg-light text-dark\">{{ table()!.version || 'v1.0' }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-md-4 text-end\">\n              <div class=\"d-flex flex-column gap-2\">\n                @if (table()!.isLocked) {\n                  <span class=\"badge bg-warning\">\n                    <i class=\"bi bi-lock me-1\"></i>Locked\n                  </span>\n                }\n                @if (table()!.isPublished) {\n                  <span class=\"badge bg-success\">\n                    <i class=\"bi bi-cloud-check me-1\"></i>Published\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Sample Pool Table -->\n      @if (viewMode() === 'table' && hasPools()) {\n        <div class=\"card mb-4\">\n          <div class=\"card-header\">\n            <h5 class=\"mb-0\">\n              <i class=\"bi bi-layers me-2\"></i>Sample Pool Table\n              <span class=\"badge bg-warning ms-2\">{{ sortedPools().length }} pools</span>\n            </h5>\n          </div>\n          <div class=\"card-body p-0\">\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead class=\"table-light\">\n                  <tr>\n                    <th scope=\"col\" style=\"width: 80px;\" class=\"bg-secondary bg-opacity-10 text-secondary\">Pool</th>\n                    @for (column of sortedColumns(); track column.id) {\n                      <th scope=\"col\" [class]=\"getColumnHeaderClass(column)\" [title]=\"column.name\">\n                        <div class=\"header-cell d-flex justify-content-between align-items-center\">\n                          <span>{{ getShortColumnName(column) }}</span>\n                          @if (table()!.canEdit) {\n                            <div class=\"header-actions\">\n                              <button\n                                type=\"button\"\n                                class=\"btn btn-sm btn-outline-primary header-edit-btn me-1\"\n                                (click)=\"editColumnValue(column)\"\n                                [title]=\"'Edit default value for ' + column.name\">\n                                <i class=\"bi bi-pencil\"></i>\n                              </button>\n                            </div>\n                          }\n                        </div>\n                      </th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (poolRow of poolTableRows(); track poolRow._poolId) {\n                    <tr class=\"pool-row\" [class.editable]=\"table()!.canEdit\">\n                      <td class=\"text-muted fw-semibold\" \n                          [class.clickable]=\"table()!.canEdit\"\n                          (click)=\"table()!.canEdit ? editPool(poolRow._poolData) : null\"\n                          [title]=\"table()!.canEdit ? 'Click to edit pool: ' + poolRow._poolName : poolRow._poolName\">\n                        <i class=\"bi bi-layers me-2\"></i>{{ poolRow._poolName }}\n                        @if (table()!.canEdit) {\n                          <i class=\"bi bi-pencil-square ms-1 text-primary\" style=\"font-size: 0.8em;\"></i>\n                        }\n                      </td>\n                      @for (column of sortedColumns(); track column.id) {\n                        <td\n                          class=\"pool-cell\"\n                          [class.opacity-50]=\"column.hidden\"\n                          [attr.data-pool-id]=\"poolRow._poolId\"\n                          [attr.data-column-id]=\"column.id\"\n                          (click)=\"table()!.canEdit ? editPoolColumnValue(poolRow._poolData, column) : null\"\n                          [title]=\"table()!.canEdit ? 'Click to edit ' + column.name + ' for pool ' + poolRow._poolName : ''\">\n                          {{ poolRow['col_' + column.id] || '-' }}\n                        </td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Columns/Table Section -->\n      <div class=\"card\">\n        <div class=\"card-header\">\n          <div class=\"d-flex align-items-center justify-content-between\">\n            <h5 class=\"mb-0\">\n              @if (viewMode() === 'list') {\n                <i class=\"bi bi-list-columns me-2\"></i>Table Columns\n              } @else {\n                <i class=\"bi bi-table me-2\"></i>Table Data\n              }\n            </h5>\n            \n            <!-- Column Filter -->\n            @if (hasColumns()) {\n              <div class=\"d-flex align-items-center me-3\">\n                <div class=\"input-group input-group-sm\" style=\"width: 250px;\">\n                  <span class=\"input-group-text\">\n                    <i class=\"bi bi-funnel text-muted\"></i>\n                  </span>\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    placeholder=\"Filter columns...\"\n                    [value]=\"columnFilter()\"\n                    (input)=\"onColumnFilterChange($any($event.target).value)\">\n                  @if (columnFilter()) {\n                    <button\n                      type=\"button\"\n                      class=\"btn btn-outline-secondary\"\n                      (click)=\"clearColumnFilter()\"\n                      title=\"Clear filter\">\n                      <i class=\"bi bi-x\"></i>\n                    </button>\n                  }\n                </div>\n                @if (columnFilter()) {\n                  <small class=\"text-muted ms-2\">\n                    {{ filteredColumnCount }}/{{ totalColumnCount }}\n                  </small>\n                }\n              </div>\n            }\n            \n            <div class=\"d-flex gap-2 align-items-center\">\n              @if (viewMode() === 'list') {\n                <span class=\"badge bg-primary\">{{ sortedColumns().length }} columns</span>\n                @if (table() && table()!.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-success btn-sm\"\n                    (click)=\"openAddColumnModal()\"\n                    [disabled]=\"isLoading()\"\n                    title=\"Add new column with automatic reordering\">\n                    <i class=\"bi bi-plus-circle me-1\"></i>Add Column\n                  </button>\n                }\n                @if (table() && table()!.canEdit && sortedColumns().length === 0) {\n                  <small class=\"text-muted\">Import SDRF to add columns</small>\n                }\n              } @else {\n                <span class=\"badge bg-info\">{{ tableRows().length }} samples</span>\n                @if (hasPools()) {\n                  <span class=\"badge bg-warning\">{{ sortedPools().length }} pools</span>\n                }\n                <span class=\"badge bg-primary\">{{ sortedColumns().length }} columns</span>\n                @if (table() && table()!.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-success btn-sm\"\n                    (click)=\"openAddColumnModal()\"\n                    [disabled]=\"isLoading()\"\n                    title=\"Add new column with automatic reordering\">\n                    <i class=\"bi bi-plus-circle me-1\"></i>Add Column\n                  </button>\n                }\n              }\n            </div>\n          </div>\n        </div>\n\n        @if (hasColumns()) {\n          <!-- List Mode: Column Definitions -->\n          @if (viewMode() === 'list') {\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead>\n                  <tr>\n                    <th scope=\"col\" style=\"width: 40px;\">\n                      @if (table()!.canEdit) {\n                        <i class=\"bi bi-arrows-move text-muted\" title=\"Drag to reorder\"></i>\n                      }\n                    </th>\n                    <th scope=\"col\" style=\"width: 60px;\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('position')\"\n                        [class.sorted]=\"isSorted('position')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>#</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('position')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('name')\"\n                        [class.sorted]=\"isSorted('name')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Column Name</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('name')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('type')\"\n                        [class.sorted]=\"isSorted('type')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Type</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('type')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('value')\"\n                        [class.sorted]=\"isSorted('value')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Value</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('value')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\">Properties</th>\n                    <th scope=\"col\" style=\"width: 100px;\">Actions</th>\n                  </tr>\n                </thead>\n                <tbody cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" [cdkDropListData]=\"dragColumnsForList()\">\n                  @for (column of dragColumnsForList(); track column.id) {\n                    <tr cdkDrag [cdkDragData]=\"column\" [cdkDragDisabled]=\"!table()!.canEdit\">\n                      <td class=\"text-center\">\n                        @if (table()!.canEdit) {\n                          <i class=\"bi bi-grip-vertical drag-handle\" cdkDragHandle></i>\n                        }\n                      </td>\n                      <td class=\"text-muted fw-semibold\">\n                        {{ (column.columnPosition || 0) + 1 }}\n                      </td>\n                      <td>\n                        <div class=\"d-flex align-items-center\">\n                          <i class=\"me-2\" [class]=\"getColumnTypeIcon(column) + ' ' + getColumnTypeClass(column)\"></i>\n                          <span class=\"fw-semibold\">{{ column.name }}</span>\n                        </div>\n                      </td>\n                      <td>\n                        <span class=\"badge bg-light text-dark\">{{ column.type }}</span>\n                      </td>\n                      <td>\n                        <div>\n                          <!-- Default Value -->\n                          <div class=\"fw-semibold\">{{ getColumnValueDisplay(column) }}</div>\n\n                          <!-- Sample-specific Modifiers -->\n                          @if (hasModifiers(column)) {\n                            <div class=\"mt-1\">\n                              @for (modifierDisplay of getModifiersDisplay(column); track $index) {\n                                <small class=\"badge bg-light text-dark me-1 mb-1 d-inline-block\"\n                                       style=\"font-size: 0.7rem;\"\n                                       [title]=\"modifierDisplay\">\n                                  {{ modifierDisplay }}\n                                </small>\n                              }\n                            </div>\n                          }\n                        </div>\n                      </td>\n                      <td>\n                        <div class=\"d-flex gap-1 flex-wrap\">\n                          @if (column.mandatory) {\n                            <span class=\"badge bg-danger\" title=\"Required field\">Required</span>\n                          }\n                          @if (column.readonly) {\n                            <span class=\"badge bg-secondary\" title=\"Read-only field\">Read-only</span>\n                          }\n                          @if (column.hidden) {\n                            <span class=\"badge bg-warning\" title=\"Hidden field\">Hidden</span>\n                          }\n                          @if (column.autoGenerated) {\n                            <span class=\"badge bg-info\" title=\"Auto-generated field\">Auto</span>\n                          }\n                          @if (column.ontologyType) {\n                            <span class=\"badge bg-success\" title=\"Ontology: {{ column.ontologyType }}\">\n                              {{ column.ontologyType }}\n                            </span>\n                          }\n                        </div>\n                      </td>\n                      <td>\n                        <div class=\"btn-group btn-group-sm\">\n                          <button type=\"button\" class=\"btn btn-outline-primary\"\n                                  (click)=\"viewColumnDetails(column)\"\n                                  title=\"View column details\">\n                            <i class=\"bi bi-eye\"></i>\n                          </button>\n                          @if (table()!.canEdit) {\n                            <button type=\"button\" \n                                    class=\"btn\"\n                                    [class]=\"column.hidden ? 'btn-outline-warning' : 'btn-outline-success'\"\n                                    (click)=\"toggleColumnHidden(column)\"\n                                    [title]=\"column.hidden ? 'Show column' : 'Hide column'\">\n                              <i class=\"bi\" [class]=\"column.hidden ? 'bi-eye-slash' : 'bi-eye'\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-success\"\n                                    (click)=\"editColumnValue(column)\"\n                                    title=\"Edit default value\">\n                              <i class=\"bi bi-pencil-square\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-info\"\n                                    (click)=\"autofillColumnValues(column)\"\n                                    title=\"Auto-fill values\">\n                              <i class=\"bi bi-magic\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-secondary\"\n                                    (click)=\"editColumnSettings(column)\"\n                                    title=\"Edit column settings\">\n                              <i class=\"bi bi-gear\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-info\"\n                                    (click)=\"openColumnHistory(column)\"\n                                    title=\"View column history\">\n                              <i class=\"bi bi-clock-history\"></i>\n                            </button>\n                          }\n                        </div>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n\n          <!-- Table Data -->\n          @if (viewMode() === 'table') {\n            <div class=\"card-body p-0\">\n              <div class=\"table-responsive\">\n                <table class=\"table table-hover mb-0\">\n                  <thead class=\"table-light\">\n                    <tr>\n                      <th scope=\"col\" style=\"width: 80px;\" class=\"bg-secondary bg-opacity-10 text-secondary\">#</th>\n                      @for (column of sortedColumns(); track column.id) {\n                        <th scope=\"col\" [class]=\"getColumnHeaderClass(column)\" [title]=\"column.name\">\n                          <div class=\"header-cell d-flex justify-content-between align-items-center\">\n                            <span>{{ getShortColumnName(column) }}</span>\n                            @if (table()!.canEdit) {\n                              <div class=\"header-actions\">\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm header-edit-btn me-1\"\n                                  [class]=\"column.hidden ? 'btn-outline-warning' : 'btn-outline-success'\"\n                                  (click)=\"toggleColumnHidden(column)\"\n                                  [title]=\"column.hidden ? 'Show column' : 'Hide column'\">\n                                  <i class=\"bi\" [class]=\"column.hidden ? 'bi-eye-slash' : 'bi-eye'\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-primary header-edit-btn me-1\"\n                                  (click)=\"editColumnValue(column)\"\n                                  [title]=\"'Edit default value for ' + column.name\">\n                                  <i class=\"bi bi-pencil\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-info header-edit-btn me-1\"\n                                  (click)=\"autofillColumnValues(column)\"\n                                  [title]=\"'Auto-fill values for ' + column.name\">\n                                  <i class=\"bi bi-magic\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-danger header-edit-btn\"\n                                  (click)=\"removeColumn(column)\"\n                                  [title]=\"'Remove ' + column.name + ' column'\">\n                                  <i class=\"bi bi-trash\"></i>\n                                </button>\n                              </div>\n                            }\n                          </div>\n                        </th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (row of paginatedRows(); track row._sampleIndex) {\n                      <tr class=\"sample-row\" [class.editable]=\"table()!.canEdit\">\n                        <td class=\"text-muted fw-semibold\">{{ row._sampleIndex }}</td>\n                        @for (column of sortedColumns(); track column.id) {\n                          <td\n                            class=\"sample-cell\"\n                            [class.opacity-50]=\"column.hidden\"\n                            [attr.data-sample-index]=\"row._sampleIndex\"\n                            [attr.data-column-id]=\"column.id\"\n                            (click)=\"table()!.canEdit ? editSampleColumnValue(column, row._sampleIndex) : null\"\n                            [title]=\"table()!.canEdit ? 'Click to edit ' + column.name + ' for sample ' + row._sampleIndex : ''\">\n                            {{ row['col_' + column.id] || '-' }}\n                          </td>\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n\n              <!-- Table Mode Pagination -->\n              @if (viewMode() === 'table' && totalPages() > 1) {\n                <div class=\"d-flex justify-content-between align-items-center p-3 border-top\">\n                  <div class=\"d-flex align-items-center gap-2\">\n                    <span class=\"text-muted\">Rows per page:</span>\n                    <select class=\"form-select form-select-sm\" style=\"width: auto;\"\n                            [value]=\"pageSize()\"\n                            (change)=\"onPageSizeChange(+($any($event.target).value))\">\n                      <option value=\"10\">10</option>\n                      <option value=\"25\">25</option>\n                      <option value=\"50\">50</option>\n                      <option value=\"100\">100</option>\n                    </select>\n                  </div>\n                  <ngb-pagination\n                    [collectionSize]=\"tableRows().length\"\n                    [page]=\"currentPage()\"\n                    [pageSize]=\"pageSize()\"\n                    [maxSize]=\"5\"\n                    [boundaryLinks]=\"true\"\n                    [rotate]=\"true\"\n                    (pageChange)=\"onPageChange($event)\"\n                    class=\"pagination-sm mb-0\">\n                  </ngb-pagination>\n                  <span class=\"text-muted\">\n                    Showing {{ (currentPage() - 1) * pageSize() + 1 }}-{{ Math.min(currentPage() * pageSize(), tableRows().length) }}\n                    of {{ tableRows().length }} samples\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"card-body text-center py-5\">\n            <div class=\"text-muted\">\n              <i class=\"bi bi-inbox display-1 mb-3\"></i>\n              <h5>No Columns Found</h5>\n              <p>This table doesn't have any columns defined yet.</p>\n              @if (table()!.canEdit) {\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"openAddColumnModal()\">\n                  <i class=\"bi bi-plus me-1\"></i>Add First Column\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.header-cell{position:relative}.header-cell .header-actions{opacity:0;transition:opacity .15s ease}thead th:hover .header-actions{opacity:1}.header-edit-btn{--bs-btn-padding-y: .125rem;--bs-btn-padding-x: .25rem;--bs-btn-font-size: .65rem;border:none!important}.header-edit-btn.btn-outline-primary:hover{background-color:var(--bs-primary);border-color:var(--bs-primary)}.header-edit-btn.btn-outline-danger:hover{background-color:var(--bs-danger);border-color:var(--bs-danger)}.sample-row.editable .sample-cell{cursor:pointer;transition:background-color .1s ease}.sample-row.editable .sample-cell:hover{background-color:#28a74514;position:relative}.sample-row.editable .sample-cell:hover:after{content:\"\\270e\";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#28a74599;font-size:.75em;pointer-events:none}.pool-row.editable td.clickable{cursor:pointer;transition:background-color .1s ease}.pool-row.editable td.clickable:hover{background-color:#0dcaf01a;color:var(--bs-info)}.pool-row.editable td.clickable:hover .bi-pencil-square{opacity:.8}.pool-row.editable td.clickable .bi-pencil-square{opacity:.4;transition:opacity .1s ease}.pool-row.editable .pool-cell{cursor:pointer;transition:background-color .1s ease}.pool-row.editable .pool-cell:hover{background-color:#ffc10726;position:relative}.pool-row.editable .pool-cell:hover:after{content:\"\\270e\";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#ffc107cc;font-size:.75em;pointer-events:none}@media (max-width: 768px){.sample-row.editable .sample-cell,.pool-row.editable .pool-cell{transition:none}}.sortable{cursor:pointer;user-select:none;transition:background-color .2s ease}.sortable:hover{background-color:rgba(var(--bs-primary-rgb),.1)}.sortable.sorted{background-color:rgba(var(--bs-primary-rgb),.15)}.sortable.sorted .bi{color:var(--bs-primary)}.sortable .bi{opacity:.5;transition:all .2s ease;font-size:.75em}.sortable:hover .bi{opacity:.8}.drag-handle{cursor:grab;opacity:.6;transition:opacity .2s ease}.drag-handle:hover{opacity:1}.drag-handle:active{cursor:grabbing}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:var(--bs-light);border:1px solid var(--bs-border-color)}.cdk-drag-preview .header-cell{padding:.5rem;font-size:.875rem;font-weight:500}.cdk-drag-placeholder{opacity:.5;background:rgba(var(--bs-primary-rgb),.1)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging th:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: i2.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataTableDetails, decorators: [{
             type: Component,
@@ -9858,7 +9827,7 @@ class MetadataColumnHistoryModal {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataColumnHistoryModal, deps: [{ token: i2.NgbActiveModal }, { token: MetadataColumnService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MetadataColumnHistoryModal, isStandalone: true, selector: "ccv-metadata-column-history-modal", inputs: { config: "config" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"modal-header\">\r\n  <h4 class=\"modal-title\">\r\n    <i class=\"bi bi-clock-history me-2\"></i>Column History: {{ config.columnName }}\r\n  </h4>\r\n  <button type=\"button\" class=\"btn-close\" (click)=\"close()\"></button>\r\n</div>\r\n\r\n<div class=\"modal-body\">\r\n  @if (error) {\r\n    <div class=\"alert alert-danger\">\r\n      <i class=\"bi bi-exclamation-triangle me-2\"></i>{{ error }}\r\n    </div>\r\n  }\r\n\r\n  @if (loading && history.length === 0) {\r\n    <div class=\"text-center py-4\">\r\n      <div class=\"spinner-border text-primary\" role=\"status\">\r\n        <span class=\"visually-hidden\">Loading...</span>\r\n      </div>\r\n      <p class=\"mt-2 text-muted\">Loading history...</p>\r\n    </div>\r\n  }\r\n\r\n  @if (history.length > 0) {\r\n    <div class=\"mb-3 text-muted\">\r\n      <i class=\"bi bi-info-circle me-1\"></i>\r\n      Showing {{ history.length }} of {{ totalCount }} records\r\n    </div>\r\n\r\n    <div class=\"timeline\">\r\n      @for (record of history; track record.historyId) {\r\n        <div class=\"timeline-item mb-4\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-2\">\r\n            <div>\r\n              <span [ngClass]=\"getHistoryTypeClass(record.historyType)\">\r\n                {{ record.historyType }}\r\n              </span>\r\n              <small class=\"text-muted ms-2\">\r\n                {{ record.historyDate | date:'short' }}\r\n              </small>\r\n            </div>\r\n            @if (record.historyUser) {\r\n              <span class=\"badge bg-secondary\">\r\n                <i class=\"bi bi-person me-1\"></i>{{ record.historyUser }}\r\n              </span>\r\n            }\r\n          </div>\r\n\r\n          @if (record.changes.length > 0) {\r\n            <div class=\"card\">\r\n              <div class=\"card-body\">\r\n                <h6 class=\"card-title\">Changes:</h6>\r\n                <div class=\"table-responsive\">\r\n                  <table class=\"table table-sm table-bordered mb-0\">\r\n                    <thead>\r\n                      <tr>\r\n                        <th>Field</th>\r\n                        <th>Old Value</th>\r\n                        <th>New Value</th>\r\n                      </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                      @for (change of record.changes; track change.field) {\r\n                        <tr>\r\n                          <td><strong>{{ getChangeLabel(change.field) }}</strong></td>\r\n                          <td>\r\n                            <code class=\"text-muted\">{{ formatValue(change.oldValue) }}</code>\r\n                          </td>\r\n                          <td>\r\n                            <code class=\"text-success\">{{ formatValue(change.newValue) }}</code>\r\n                          </td>\r\n                        </tr>\r\n                      }\r\n                    </tbody>\r\n                  </table>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          } @else {\r\n            <div class=\"alert alert-info mb-0\">\r\n              <i class=\"bi bi-info-circle me-2\"></i>\r\n              Initial record - no changes\r\n            </div>\r\n          }\r\n\r\n          <details class=\"mt-2\">\r\n            <summary class=\"text-muted\" style=\"cursor: pointer;\">\r\n              <i class=\"bi bi-eye me-1\"></i>View full snapshot\r\n            </summary>\r\n            <div class=\"card mt-2\">\r\n              <div class=\"card-body\">\r\n                <pre class=\"mb-0\"><code>{{ formatValue(record.snapshot) }}</code></pre>\r\n              </div>\r\n            </div>\r\n          </details>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (hasMore) {\r\n      <div class=\"text-center mt-3\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-outline-primary\"\r\n          (click)=\"loadMore()\"\r\n          [disabled]=\"loading\">\r\n          @if (loading) {\r\n            <span class=\"spinner-border spinner-border-sm me-2\"></span>\r\n          }\r\n          Load More\r\n        </button>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  @if (!loading && history.length === 0 && !error) {\r\n    <div class=\"alert alert-info\">\r\n      <i class=\"bi bi-info-circle me-2\"></i>\r\n      No history records found for this column.\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<div class=\"modal-footer\">\r\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"close()\">\r\n    <i class=\"bi bi-x-circle me-1\"></i>Close\r\n  </button>\r\n</div>\r\n", styles: [".timeline{position:relative;padding-left:0}.timeline-item{position:relative;padding-left:20px;border-left:2px solid #dee2e6}.timeline-item:last-child{border-left-color:transparent}.timeline-item:before{content:\"\";position:absolute;left:-6px;top:0;width:10px;height:10px;border-radius:50%;background-color:#0d6efd;border:2px solid #fff}details summary{font-size:.875rem}details summary:hover{text-decoration:underline}pre code{display:block;max-height:300px;overflow-y:auto;font-size:.85rem}.table{font-size:.875rem}.table code{white-space:pre-wrap;word-break:break-word;display:block;max-height:100px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MetadataColumnHistoryModal, isStandalone: true, selector: "ccv-metadata-column-history-modal", inputs: { config: "config" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"modal-header\">\r\n  <h4 class=\"modal-title\">\r\n    <i class=\"bi bi-clock-history me-2\"></i>Column History: {{ config.columnName }}\r\n  </h4>\r\n  <button type=\"button\" class=\"btn-close\" (click)=\"close()\"></button>\r\n</div>\r\n\r\n<div class=\"modal-body\">\r\n  @if (error) {\r\n    <div class=\"alert alert-danger\">\r\n      <i class=\"bi bi-exclamation-triangle me-2\"></i>{{ error }}\r\n    </div>\r\n  }\r\n\r\n  @if (loading && history.length === 0) {\r\n    <div class=\"text-center py-4\">\r\n      <div class=\"spinner-border text-primary\" role=\"status\">\r\n        <span class=\"visually-hidden\">Loading...</span>\r\n      </div>\r\n      <p class=\"mt-2 text-muted\">Loading history...</p>\r\n    </div>\r\n  }\r\n\r\n  @if (history.length > 0) {\r\n    <div class=\"mb-3 text-muted\">\r\n      <i class=\"bi bi-info-circle me-1\"></i>\r\n      Showing {{ history.length }} of {{ totalCount }} records\r\n    </div>\r\n\r\n    <div class=\"timeline\">\r\n      @for (record of history; track record.historyId) {\r\n        <div class=\"timeline-item mb-4\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-2\">\r\n            <div>\r\n              <span [ngClass]=\"getHistoryTypeClass(record.historyType)\">\r\n                {{ record.historyType }}\r\n              </span>\r\n              <small class=\"text-muted ms-2\">\r\n                {{ record.historyDate | date:'short' }}\r\n              </small>\r\n            </div>\r\n            @if (record.historyUser) {\r\n              <span class=\"badge bg-secondary\">\r\n                <i class=\"bi bi-person me-1\"></i>{{ record.historyUser }}\r\n              </span>\r\n            }\r\n          </div>\r\n\r\n          @if (record.changes.length > 0) {\r\n            <div class=\"card\">\r\n              <div class=\"card-body\">\r\n                <h6 class=\"card-title\">Changes:</h6>\r\n                <div class=\"table-responsive\">\r\n                  <table class=\"table table-sm table-bordered mb-0\">\r\n                    <thead>\r\n                      <tr>\r\n                        <th>Field</th>\r\n                        <th>Old Value</th>\r\n                        <th>New Value</th>\r\n                      </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                      @for (change of record.changes; track change.field) {\r\n                        <tr>\r\n                          <td><strong>{{ getChangeLabel(change.field) }}</strong></td>\r\n                          <td>\r\n                            <code class=\"text-muted\">{{ formatValue(change.oldValue) }}</code>\r\n                          </td>\r\n                          <td>\r\n                            <code class=\"text-success\">{{ formatValue(change.newValue) }}</code>\r\n                          </td>\r\n                        </tr>\r\n                      }\r\n                    </tbody>\r\n                  </table>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          } @else {\r\n            <div class=\"alert alert-info mb-0\">\r\n              <i class=\"bi bi-info-circle me-2\"></i>\r\n              Initial record - no changes\r\n            </div>\r\n          }\r\n\r\n          <details class=\"mt-2\">\r\n            <summary class=\"text-muted\" style=\"cursor: pointer;\">\r\n              <i class=\"bi bi-eye me-1\"></i>View full snapshot\r\n            </summary>\r\n            <div class=\"card mt-2\">\r\n              <div class=\"card-body\">\r\n                <pre class=\"mb-0\"><code>{{ formatValue(record.snapshot) }}</code></pre>\r\n              </div>\r\n            </div>\r\n          </details>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (hasMore) {\r\n      <div class=\"text-center mt-3\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-outline-primary\"\r\n          (click)=\"loadMore()\"\r\n          [disabled]=\"loading\">\r\n          @if (loading) {\r\n            <span class=\"spinner-border spinner-border-sm me-2\"></span>\r\n          }\r\n          Load More\r\n        </button>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  @if (!loading && history.length === 0 && !error) {\r\n    <div class=\"alert alert-info\">\r\n      <i class=\"bi bi-info-circle me-2\"></i>\r\n      No history records found for this column.\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<div class=\"modal-footer\">\r\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"close()\">\r\n    <i class=\"bi bi-x-circle me-1\"></i>Close\r\n  </button>\r\n</div>\r\n", styles: [".timeline{position:relative;padding-left:0}.timeline-item{position:relative;padding-left:20px;border-left:2px solid #dee2e6}.timeline-item:last-child{border-left-color:transparent}.timeline-item:before{content:\"\";position:absolute;left:-6px;top:0;width:10px;height:10px;border-radius:50%;background-color:#0d6efd;border:2px solid #fff}details summary{font-size:.875rem}details summary:hover{text-decoration:underline}pre code{display:block;max-height:300px;overflow-y:auto;font-size:.85rem}.table{font-size:.875rem}.table code{white-space:pre-wrap;word-break:break-word;display:block;max-height:100px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataColumnHistoryModal, decorators: [{
             type: Component,
@@ -9894,5 +9863,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AdminWebSocketService, AsyncExportService, AsyncImportService, AsyncTaskService, AsyncTaskUIService, AsyncValidationService, COLUMN_TYPE_CONFIGS, ChunkedImportService, ChunkedUploadService, ColumnEditModal, ColumnTemplateEditModal, ColumnTemplates, ColumnType, CupcakeVanilla, ElectronService, ExcelExportModalComponent, FavoriteManagement, FavouriteMetadataOptionService, MSTermType, MetadataColumnAutofillModal, MetadataColumnHistoryModal, MetadataColumnService, MetadataColumnTemplateService, MetadataColumnTemplateShareService, MetadataManagementService, MetadataTableDetails, MetadataTableEditModal, MetadataTableService, MetadataTableTemplateEditModal, MetadataTableTemplateService, MetadataTableTemplates, MetadataValidationModal, MetadataValueEditModal, NotificationService, NotificationType, OFFICIAL_SDRF_COLUMNS, ONTOLOGY_TYPE_CONFIGS, OntologySearchService, OntologyType, OntologyTypeLabels, OntologyUtils, SDRFDefaultsService, SamplePoolCreateModal, SamplePoolDetailsModal, SamplePoolEditModal, SamplePoolService, SchemaSelectionModal, SchemaService, SdrfAgeInput, SdrfCleavageInput, SdrfColumnCategory, SdrfModificationInput, SdrfSpikedCompoundInput, SdrfSyntaxService, SearchReplaceModal, TableCreationModalComponent, TemplatePermissionLabels, TemplatePermissionLevel, TemplateSchemaSelectionModal, ValidationResultsModal, Websocket, getRequiredSdrfColumns, getSdrfColumnByName, getSdrfColumnsByCategory, isSdrfColumnRequired, isUnimodFullData };
+export { AsyncExportService, AsyncImportService, AsyncTaskService, AsyncTaskUIService, AsyncValidationService, COLUMN_TYPE_CONFIGS, ChunkedImportService, ChunkedUploadService, ColumnEditModal, ColumnTemplateEditModal, ColumnTemplates, ColumnType, CupcakeVanilla, ElectronService, ExcelExportModalComponent, FavoriteManagement, FavouriteMetadataOptionService, MSTermType, MetadataColumnAutofillModal, MetadataColumnHistoryModal, MetadataColumnService, MetadataColumnTemplateService, MetadataColumnTemplateShareService, MetadataManagementService, MetadataTableDetails, MetadataTableEditModal, MetadataTableService, MetadataTableTemplateEditModal, MetadataTableTemplateService, MetadataTableTemplates, MetadataValidationModal, MetadataValueEditModal, NotificationService, NotificationType, OFFICIAL_SDRF_COLUMNS, ONTOLOGY_TYPE_CONFIGS, OntologySearchService, OntologyType, OntologyTypeLabels, OntologyUtils, SDRFDefaultsService, SamplePoolCreateModal, SamplePoolDetailsModal, SamplePoolEditModal, SamplePoolService, SchemaSelectionModal, SchemaService, SdrfAgeInput, SdrfCleavageInput, SdrfColumnCategory, SdrfModificationInput, SdrfSpikedCompoundInput, SdrfSyntaxService, SearchReplaceModal, TableCreationModalComponent, TemplatePermissionLabels, TemplatePermissionLevel, TemplateSchemaSelectionModal, ValidationResultsModal, Websocket, getRequiredSdrfColumns, getSdrfColumnByName, getSdrfColumnsByCategory, isSdrfColumnRequired, isUnimodFullData };
 //# sourceMappingURL=noatgnu-cupcake-vanilla.mjs.map