@noatgnu/cupcake-vanilla 1.2.8 → 1.2.11

package/fesm2022/noatgnu-cupcake-vanilla.mjs

@@ -3,16 +3,17 @@ import { Injectable, signal, computed, EventEmitter, inject, Output, Input, Comp
 import * as i3 from '@noatgnu/cupcake-core';
 import { BaseApiService, WebSocketService, NotificationService as NotificationService$1, LabGroupService, ToastService, 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 } from 'rxjs';
+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 } from 'rxjs';
 import jsSHA from 'jssha';
 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 } from '@ng-bootstrap/ng-bootstrap';
+import { NgbTypeahead, NgbModule, NgbNavModule, NgbActiveModal, NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i5$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { RouterModule } from '@angular/router';
 
 var OntologyType;
 (function (OntologyType) {
@@ -1526,10 +1527,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
 class OntologySearchService extends BaseApiService {
     /**
      * Get ontology suggestions across all sources for SDRF validation
+     *
+     * @param params Query parameters
+     * @param params.q Search query (required, min 2 characters)
+     * @param params.type Ontology type to search (optional)
+     * @param params.match Match type - 'contains' or 'startswith' (default: 'contains')
+     * @param params.limit Maximum number of results (default: 50)
+     * @param params.customFilters Custom filters to apply (optional)
+     *   Example: {"organism": "Homo sapiens"} or {"organism": {"icontains": "human"}}
      */
     suggest(params) {
-        const httpParams = this.buildHttpParams(params);
-        return this.get(`${this.apiUrl}/ontology-search/suggest/`, { params: httpParams });
+        const queryParams = {
+            q: params.q,
+        };
+        if (params.type) {
+            queryParams.type = params.type;
+        }
+        if (params.match) {
+            queryParams.match = params.match;
+        }
+        if (params.limit) {
+            queryParams.limit = params.limit;
+        }
+        if (params.customFilters) {
+            queryParams.custom_filters = JSON.stringify(params.customFilters);
+        }
+        const httpParams = this.buildHttpParams(queryParams);
+        return this.get(`${this.apiUrl}/ontology/search/suggest/`, { params: httpParams });
+    }
+    /**
+     * Get ontology suggestions for a specific ontology type with custom filters
+     */
+    suggestWithFilters(query, ontologyType, customFilters, limit = 50) {
+        return this.suggest({
+            q: query,
+            type: ontologyType,
+            customFilters,
+            limit
+        });
+    }
+    /**
+     * Search across multiple ontology types
+     */
+    searchAll(query, limit = 50) {
+        return this.suggest({
+            q: query,
+            limit
+        });
+    }
+    /**
+     * Search specific ontology type
+     */
+    searchType(query, ontologyType, limit = 50) {
+        return this.suggest({
+            q: query,
+            type: ontologyType,
+            limit
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: OntologySearchService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: OntologySearchService, providedIn: 'root' });
@@ -3207,6 +3261,7 @@ class MetadataValueEditModal {
     metadataColumnService;
     metadataColumnTemplateService;
     labGroupService;
+    ontologySearchService;
     config;
     valueSaved = new EventEmitter();
     editForm;
@@ -3227,7 +3282,7 @@ class MetadataValueEditModal {
     specialInputValue = signal('', ...(ngDevMode ? [{ debugName: "specialInputValue" }] : []));
     selectedSampleIndices = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedSampleIndices" }] : []));
     showSamplePanel = signal(false, ...(ngDevMode ? [{ debugName: "showSamplePanel" }] : []));
-    constructor(fb, activeModal, authService, favouriteMetadataOptionService, metadataColumnService, metadataColumnTemplateService, labGroupService) {
+    constructor(fb, activeModal, authService, favouriteMetadataOptionService, metadataColumnService, metadataColumnTemplateService, labGroupService, ontologySearchService) {
         this.fb = fb;
         this.activeModal = activeModal;
         this.authService = authService;
@@ -3235,6 +3290,7 @@ class MetadataValueEditModal {
         this.metadataColumnService = metadataColumnService;
         this.metadataColumnTemplateService = metadataColumnTemplateService;
         this.labGroupService = labGroupService;
+        this.ontologySearchService = ontologySearchService;
         this.editForm = this.fb.group({
             value: ['', [Validators.maxLength(500)]]
         });
@@ -3319,6 +3375,19 @@ class MetadataValueEditModal {
                     return of([]);
                 }), tap$1(() => this.isLoadingSuggestions.set(false)));
             }
+            else if (this.config.ontologyType) {
+                // Fallback: use OntologySearchService directly with custom filters
+                return this.ontologySearchService.suggest({
+                    q: term,
+                    type: this.config.ontologyType,
+                    match: this.searchType() === 'icontains' ? 'contains' : 'startswith',
+                    customFilters: this.config.customOntologyFilters,
+                    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([]);
@@ -3647,7 +3716,7 @@ class MetadataValueEditModal {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MetadataValueEditModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }, { token: i3.AuthService }, { token: FavouriteMetadataOptionService }, { token: MetadataColumnService }, { token: MetadataColumnTemplateService }, { token: i3.LabGroupService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", 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.3", 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      <!-- 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.3", ngImport: i0, type: MetadataValueEditModal, decorators: [{
@@ -3662,7 +3731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         SdrfCleavageInput,
                         SdrfSpikedCompoundInput
                     ], 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      <!-- 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"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }, { type: i3.AuthService }, { type: FavouriteMetadataOptionService }, { type: MetadataColumnService }, { type: MetadataColumnTemplateService }, { type: i3.LabGroupService }], propDecorators: { config: [{
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }, { type: i3.AuthService }, { type: FavouriteMetadataOptionService }, { type: MetadataColumnService }, { type: MetadataColumnTemplateService }, { type: i3.LabGroupService }, { type: OntologySearchService }], propDecorators: { config: [{
                 type: Input
             }], valueSaved: [{
                 type: Output
@@ -4651,34 +4720,41 @@ class ColumnEditModal {
         return this.hasOntologyType && this.editForm.get('enableTypeahead')?.value === true;
     }
     openValueEditModal() {
-        // Get custom filters from selected ontology type or template
-        let customFilters = this.selectedTemplate?.customOntologyFilters;
+        const ontologyTypeIndexStr = this.editForm.get('ontologyType')?.value;
+        const ontologyTypeIndex = parseInt(ontologyTypeIndexStr || '0');
+        const enableTypeahead = this.editForm.get('enableTypeahead')?.value || false;
         let ontologyType = '';
-        // If in advanced mode and an ontology type is selected, use its custom filters
-        if (this.showAdvancedMode() && this.selectedOntologyConfig) {
-            ontologyType = this.selectedOntologyConfig.value;
-            if (this.selectedOntologyConfig.customFilters) {
-                customFilters = this.selectedOntologyConfig.customFilters;
-            }
+        if (ontologyTypeIndex > 0 && ontologyTypeIndex < this.ontologyTypes.length) {
+            ontologyType = this.ontologyTypes[ontologyTypeIndex].value;
         }
         const config = {
-            columnId: this.column?.id,
             columnName: this.editForm.get('name')?.value || 'Column',
             columnType: this.editForm.get('type')?.value || '',
             ontologyType: ontologyType,
-            enableTypeahead: this.editForm.get('enableTypeahead')?.value || false,
+            enableTypeahead: enableTypeahead,
             currentValue: this.editForm.get('value')?.value || '',
-            context: this.isEdit ? 'table' : 'template',
-            templateId: this.selectedTemplate?.id || this.templateId || undefined,
-            customOntologyFilters: customFilters
+            context: this.isEdit ? 'table' : 'template'
         };
+        const hasTemplate = this.selectedTemplate || this.column?.template || this.templateId;
+        if (hasTemplate) {
+            if (this.isEdit && this.column?.id) {
+                config.columnId = this.column.id;
+            }
+            config.templateId = this.selectedTemplate?.id || this.column?.template || this.templateId || undefined;
+        }
+        else {
+            const columnName = this.editForm.get('name')?.value;
+            if (columnName) {
+                const ontologyConfig = this.getOntologyConfigForColumn(columnName);
+                config.customOntologyFilters = ontologyConfig.customFilters;
+            }
+        }
         const modalRef = this.modalService.open(MetadataValueEditModal, {
             size: 'lg',
             backdrop: 'static'
         });
         modalRef.componentInstance.config = config;
         modalRef.componentInstance.valueSaved.subscribe((result) => {
-            // Extract the actual value from the result
             const newValue = typeof result === 'string' ? result : result.value;
             this.editForm.get('value')?.setValue(newValue);
             this.editForm.get('value')?.markAsTouched();
@@ -4795,16 +4871,14 @@ class ColumnEditModal {
         // Enable controls to update values, then disable again
         this.editForm.get('name')?.enable();
         this.editForm.get('type')?.enable();
-        const ontologyTypeValue = this.getDefaultOntologyTypeForColumn(column.name);
-        const ontologyTypeIndex = ontologyTypeValue
-            ? this.ontologyTypes.findIndex(o => o.value === ontologyTypeValue)
-            : 0;
+        const ontologyConfig = this.getOntologyConfigForColumn(column.name);
+        const ontologyTypeIndex = ontologyConfig.index;
         this.editForm.patchValue({
             name: column.name,
             type: column.type,
             value: '',
-            ontologyType: ontologyTypeIndex >= 0 ? ontologyTypeIndex.toString() : '0',
-            enableTypeahead: this.shouldEnableTypeaheadForColumn(column.name),
+            ontologyType: ontologyTypeIndex.toString(),
+            enableTypeahead: ontologyTypeIndex > 0,
             mandatory: this.isColumnMandatory(column.name),
             hidden: false,
             readonly: false,
@@ -4825,41 +4899,89 @@ class ColumnEditModal {
             return !this.templates.some(template => template.columnName.toLowerCase() === officialCol.name.toLowerCase());
         });
     }
-    getDefaultOntologyTypeForColumn(columnName) {
+    getOntologyConfigForColumn(columnName) {
         const lowerName = columnName.toLowerCase();
-        // Based on backend configure_ontology_options method - use exact matches
+        const MSTermType = {
+            INSTRUMENT: 'instrument',
+            MASS_ANALYZER_TYPE: 'mass analyzer type',
+            CLEAVAGE_AGENT: 'cleavage agent',
+            SAMPLE_ATTRIBUTE: 'sample attribute',
+            ANCESTRAL_CATEGORY: 'ancestral category',
+            SEX: 'sex',
+            DEVELOPMENTAL_STAGE: 'developmental stage'
+        };
+        let ontologyType = '';
+        let customFilters = undefined;
         switch (lowerName) {
             case 'characteristics[organism]':
-                return 'species';
+                ontologyType = 'species';
+                break;
             case 'characteristics[disease]':
-                return 'human_disease';
+                ontologyType = 'human_disease';
+                break;
             case 'characteristics[organism part]':
-                return 'tissue';
+                ontologyType = 'tissue';
+                break;
             case 'characteristics[cell type]':
-                return 'cell_ontology';
+                ontologyType = 'cell_ontology';
+                break;
             case 'comment[instrument]':
-                return 'ms_unique_vocabularies';
+                ontologyType = 'ms_unique_vocabularies';
+                customFilters = { ms_unique_vocabularies: { term_type: MSTermType.INSTRUMENT } };
+                break;
             case 'comment[modification parameters]':
-                return 'unimod';
+                ontologyType = 'unimod';
+                break;
             case 'comment[ms2 analyzer type]':
-                return 'ms_unique_vocabularies';
+                ontologyType = 'ms_unique_vocabularies';
+                customFilters = { ms_unique_vocabularies: { term_type: MSTermType.MASS_ANALYZER_TYPE } };
+                break;
             case 'comment[cleavage agent details]':
-                return 'ms_unique_vocabularies';
+                ontologyType = 'ms_unique_vocabularies';
+                customFilters = { ms_unique_vocabularies: { term_type: MSTermType.CLEAVAGE_AGENT } };
+                break;
             case 'characteristics[ancestry category]':
-                return 'ms_unique_vocabularies';
+                ontologyType = 'ms_unique_vocabularies';
+                customFilters = { ms_unique_vocabularies: { term_type: MSTermType.ANCESTRAL_CATEGORY } };
+                break;
             case 'characteristics[sex]':
-                return 'ms_unique_vocabularies';
+                ontologyType = 'ms_unique_vocabularies';
+                customFilters = { ms_unique_vocabularies: { term_type: MSTermType.SEX } };
+                break;
             case 'characteristics[developmental stage]':
-                return 'ms_unique_vocabularies';
+                ontologyType = 'ms_unique_vocabularies';
+                customFilters = { ms_unique_vocabularies: { term_type: MSTermType.DEVELOPMENTAL_STAGE } };
+                break;
             case 'comment[label]':
-                return 'ms_unique_vocabularies';
-            default:
-                return '';
+                ontologyType = 'ms_unique_vocabularies';
+                customFilters = { ms_unique_vocabularies: { term_type: MSTermType.SAMPLE_ATTRIBUTE } };
+                break;
         }
-    }
-    shouldEnableTypeaheadForColumn(columnName) {
-        const ontologyType = this.getDefaultOntologyTypeForColumn(columnName);
-        return ontologyType.length > 0;
+        if (!ontologyType) {
+            return { index: 0, ontologyType: '', customFilters: undefined };
+        }
+        // Find the matching ontology type config with the correct custom filters
+        const index = this.ontologyTypes.findIndex(config => {
+            if (config.value !== ontologyType)
+                return false;
+            if (!customFilters)
+                return !config.customFilters || Object.keys(config.customFilters).length === 0;
+            // Match custom filters
+            if (!config.customFilters)
+                return false;
+            const configFilterKey = Object.keys(config.customFilters)[0];
+            const customFilterKey = Object.keys(customFilters)[0];
+            if (configFilterKey !== customFilterKey)
+                return false;
+            const configTermType = config.customFilters[configFilterKey]?.['term_type'];
+            const customTermType = customFilters[customFilterKey]?.['term_type'];
+            return configTermType === customTermType;
+        });
+        return {
+            index: index >= 0 ? index : 0,
+            ontologyType,
+            customFilters
+        };
     }
     isColumnMandatory(columnName) {
         const lowerName = columnName.toLowerCase();
@@ -6044,6 +6166,1245 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             args: [{ selector: 'ccv-metadata-table-templates', imports: [CommonModule, ReactiveFormsModule, NgbModule], template: "<div class=\"metadata-table-templates-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=\"navbar-brand m-0 fw-bold\">\n            <i class=\"bi bi-file-earmark-text me-2\"></i>Table Templates\n          </h4>\n          @if (selectedLabGroup()) {\n            <span class=\"badge bg-primary ms-3\">{{ selectedLabGroup()!.name }}</span>\n          }\n        </div>\n        <div class=\"d-flex gap-2\">\n          <div class=\"btn-group\" ngbDropdown>\n            <button type=\"button\" class=\"btn btn-primary btn-sm dropdown-toggle\" ngbDropdownToggle>\n              <i class=\"bi bi-plus me-1\"></i>New Template\n            </button>\n            <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n              <a class=\"dropdown-item\" href=\"#\" (click)=\"createTemplateWithCustomSchemas(); $event.preventDefault()\"\n                 title=\"Select one or multiple schemas to create template\">\n                <i class=\"bi bi-file-earmark-text me-2\"></i>\n                <strong>Create from Schemas</strong>\n              </a>\n              <div class=\"dropdown-divider\"></div>\n              <a class=\"dropdown-item\" href=\"#\" (click)=\"createTemplate(); $event.preventDefault()\"\n                 title=\"Create from scratch\">\n                <i class=\"bi bi-wrench me-2\"></i>\n                <strong>Manual Configuration</strong>\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <div class=\"templates-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            <div class=\"form-floating\">\n              <input\n                type=\"search\"\n                class=\"form-control\"\n                id=\"templateSearch\"\n                formControlName=\"search\"\n                placeholder=\"Search templates...\">\n              <label for=\"templateSearch\">\n                <i class=\"bi bi-search me-1\"></i>Search Templates\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-floating\">\n              <select\n                class=\"form-select\"\n                id=\"labGroupSelect\"\n                formControlName=\"labGroupId\"\n                (change)=\"onLabGroupChange($event)\">\n                <option [ngValue]=\"null\">All Lab Groups</option>\n                @if (hasLabGroups()) {\n                  @for (group of labGroupsData().results; track group.id) {\n                    <option [ngValue]=\"group.id\">{{ group.name }}</option>\n                  }\n                }\n              </select>\n              <label for=\"labGroupSelect\">Lab Group</label>\n            </div>\n\n            <!-- Lab Groups Pagination -->\n            @if (showLabGroupsPagination()) {\n              <div class=\"d-flex justify-content-center mt-2\">\n                <ngb-pagination\n                  [collectionSize]=\"labGroupsData().count\"\n                  [page]=\"labGroupsCurrentPage()\"\n                  [pageSize]=\"labGroupsPageSize()\"\n                  [maxSize]=\"3\"\n                  [boundaryLinks]=\"false\"\n                  [rotate]=\"true\"\n                  (pageChange)=\"onLabGroupsPageChange($event)\"\n                  class=\"pagination-sm\">\n                </ngb-pagination>\n              </div>\n            }\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch mt-3\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"defaultTemplates\"\n                formControlName=\"isDefault\">\n              <label class=\"form-check-label\" for=\"defaultTemplates\">\n                <i class=\"bi bi-star me-1\"></i>Default Templates Only\n              </label>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <!-- Templates Table -->\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-file-earmark-text me-2\"></i>Table Templates\n          <span class=\"badge bg-primary ms-2\">{{ templatesData().count }}</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 (hasTemplates()) {\n          <div class=\"table-responsive\">\n            <table class=\"table table-hover mb-0\">\n              <thead>\n                <tr>\n                  <th><i class=\"bi bi-tag me-1\"></i>Template Name</th>\n                  <th><i class=\"bi bi-person me-1\"></i>Creator</th>\n                  <th><i class=\"bi bi-folder me-1\"></i>Lab Group</th>\n                  <th><i class=\"bi bi-list me-1\"></i>Columns</th>\n                  <th><i class=\"bi bi-eye me-1\"></i>Visibility</th>\n                  <th><i class=\"bi bi-star me-1\"></i>Default</th>\n                  <th><i class=\"bi bi-gear me-1\"></i>Actions</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (template of templatesData().results; track template.id) {\n                    <tr>\n                      <td>\n                        <strong>{{ template.name }}</strong>\n                        @if (template.description) {\n                          <br><small class=\"text-muted\">{{ template.description }}</small>\n                        }\n                      </td>\n                      <td>{{ template.ownerUsername || 'System' }}</td>\n                      <td>\n                        @if (template.labGroup) {\n                          <span class=\"badge bg-info\">{{ getLabGroupName(template.labGroup) }}</span>\n                        } @else {\n                          <span class=\"text-muted\">-</span>\n                        }\n                      </td>\n                      <td>\n                        <span class=\"badge bg-secondary\">{{ template.columnCount || 0 }}</span>\n                      </td>\n                      <td>\n                        @switch (template.visibility) {\n                          @case ('public') {\n                            <span class=\"badge bg-success\">Public</span>\n                          }\n                          @case ('group') {\n                            <span class=\"badge bg-info\">Lab Group</span>\n                          }\n                          @case ('private') {\n                            <span class=\"badge bg-warning\">Private</span>\n                          }\n                          @default {\n                            <span class=\"badge bg-secondary\">{{ template.visibility }}</span>\n                          }\n                        }\n                      </td>\n                      <td>\n                        @if (template.isDefault) {\n                          <i class=\"bi bi-star-fill text-warning\"></i>\n                        } @else {\n                          <span class=\"text-muted\">-</span>\n                        }\n                      </td>\n                      <td>\n                        <div class=\"btn-group btn-group-sm\" role=\"group\">\n                          <button\n                            class=\"btn btn-outline-success\"\n                            (click)=\"createTableFromTemplate(template)\"\n                            title=\"Create metadata table from this template\">\n                            <i class=\"bi bi-table\"></i>\n                          </button>\n                          <button\n                            class=\"btn btn-outline-primary\"\n                            (click)=\"editTemplate(template)\"\n                            title=\"Edit template\">\n                            <i class=\"bi bi-pencil\"></i>\n                          </button>\n                          <button\n                            class=\"btn btn-outline-info\"\n                            (click)=\"duplicateTemplate(template)\"\n                            title=\"Duplicate template\">\n                            <i class=\"bi bi-copy\"></i>\n                          </button>\n                          <button\n                            class=\"btn btn-outline-warning\"\n                            (click)=\"reorderTemplateColumns(template)\"\n                            title=\"Reorder columns by schema\"\n                            [disabled]=\"!template.columnCount || template.columnCount === 0\">\n                            <i class=\"bi bi-arrows-move\"></i>\n                          </button>\n                          <button\n                            class=\"btn btn-outline-danger\"\n                            (click)=\"deleteTemplate(template)\"\n                            title=\"Delete template\">\n                            <i class=\"bi bi-trash\"></i>\n                          </button>\n                        </div>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n\n          <!-- Pagination -->\n          @if (showTemplatesPagination()) {\n            <div class=\"d-flex justify-content-center mt-3 p-3\">\n              <ngb-pagination\n                [collectionSize]=\"templatesData().count\"\n                [page]=\"currentPage()\"\n                [pageSize]=\"pageSize()\"\n                [maxSize]=\"5\"\n                [boundaryLinks]=\"true\"\n                [rotate]=\"true\"\n                (pageChange)=\"onPageChange($event)\"\n                class=\"pagination-sm\">\n              </ngb-pagination>\n            </div>\n          }\n        } @else {\n          <div class=\"empty-state text-center py-5\">\n            <i class=\"bi bi-file-earmark-text fs-1 text-muted mb-3\"></i>\n            <h5 class=\"text-muted\">No Table Templates Found</h5>\n            <p class=\"text-muted\">\n              @if (searchForm.get('search')?.value || searchForm.get('labGroupId')?.value) {\n                Try adjusting your search criteria or create a new template.\n              } @else {\n                Get started by creating your first table template.\n              }\n            </p>\n            <button class=\"btn btn-primary\" (click)=\"createTemplate()\">\n              <i class=\"bi bi-plus me-1\"></i>Create First Template\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: MetadataTableTemplateService }, { type: i3.LabGroupService }, { type: i2.NgbModal }, { type: i3.ToastService }, { type: AsyncTaskUIService }] });
 
+class ColumnTemplateEditModal {
+    fb;
+    activeModal;
+    template = null;
+    labGroups = [];
+    isEdit = false;
+    templateSaved = new EventEmitter();
+    editForm;
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    // Make Object available in template
+    Object = Object;
+    // Available options for dropdowns
+    columnTypes = COLUMN_TYPE_CONFIGS;
+    visibilityOptions = [
+        { value: 'private', label: 'Private' },
+        { value: 'labGroup', label: 'Lab Group' },
+        { value: 'public', label: 'Public' },
+        { value: 'global', label: 'Global' }
+    ];
+    ontologyTypes = ONTOLOGY_TYPE_CONFIGS;
+    constructor(fb, activeModal) {
+        this.fb = fb;
+        this.activeModal = activeModal;
+        this.editForm = this.fb.group({
+            name: ['', [Validators.required, Validators.minLength(3)]],
+            description: [''],
+            columnName: ['', [Validators.required, Validators.pattern(/^[a-zA-Z_][a-zA-Z0-9_]*$/)]],
+            columnType: ['text', Validators.required],
+            defaultValue: [''],
+            defaultPosition: [0, [Validators.min(0)]],
+            ontologyType: [''],
+            customOntologyFilters: [{}],
+            visibility: ['private', Validators.required],
+            labGroup: [null],
+            enableTypeahead: [false],
+            excelValidation: [false],
+            isActive: [true],
+            tags: [''],
+            category: ['']
+        });
+    }
+    ngOnInit() {
+        // Set initial disabled state for labGroup field
+        this.onVisibilityChange();
+        if (this.template && this.isEdit) {
+            this.populateForm();
+            // Reapply visibility logic after populating form
+            this.onVisibilityChange();
+            // Apply ontology filters if ontology type is set
+            this.onOntologyTypeChange();
+        }
+    }
+    populateForm() {
+        if (this.template) {
+            this.editForm.patchValue({
+                name: this.template.name,
+                description: this.template.description || '',
+                columnName: this.template.columnName,
+                columnType: this.template.columnType,
+                defaultValue: this.template.defaultValue || '',
+                defaultPosition: this.template.defaultPosition || 0,
+                ontologyType: this.template.ontologyType || '',
+                customOntologyFilters: this.template.customOntologyFilters || {},
+                visibility: this.template.visibility || 'private',
+                labGroup: this.template.labGroup || null,
+                enableTypeahead: this.template.enableTypeahead || false,
+                excelValidation: this.template.excelValidation || false,
+                isActive: this.template.isActive !== false,
+                tags: this.template.tags || '',
+                category: this.template.category || ''
+            });
+        }
+    }
+    onVisibilityChange() {
+        const visibility = this.editForm.get('visibility')?.value;
+        const labGroupControl = this.editForm.get('labGroup');
+        if (visibility === 'labGroup') {
+            labGroupControl?.setValidators([Validators.required]);
+            labGroupControl?.enable();
+        }
+        else {
+            labGroupControl?.clearValidators();
+            labGroupControl?.setValue(null);
+            labGroupControl?.disable();
+        }
+        labGroupControl?.updateValueAndValidity();
+    }
+    onOntologyTypeChange() {
+        const ontologyType = 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 (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();
+    }
+    onSubmit() {
+        if (this.editForm.valid) {
+            this.isLoading.set(true);
+            const formValue = this.editForm.value;
+            // Clean up form data
+            const templateData = {
+                ...formValue,
+                labGroup: formValue.visibility === 'labGroup' ? formValue.labGroup : null,
+                defaultPosition: Number(formValue.defaultPosition) || 0
+            };
+            this.templateSaved.emit(templateData);
+        }
+        else {
+            this.markFormGroupTouched();
+        }
+    }
+    markFormGroupTouched() {
+        Object.keys(this.editForm.controls).forEach(key => {
+            const control = this.editForm.get(key);
+            control?.markAsTouched();
+        });
+    }
+    onCancel() {
+        this.activeModal.dismiss();
+    }
+    onClose() {
+        this.isLoading.set(false);
+        this.activeModal.close();
+    }
+    getFieldError(fieldName) {
+        const control = this.editForm.get(fieldName);
+        if (control?.errors && control.touched) {
+            if (control.errors['required'])
+                return `${fieldName} is required`;
+            if (control.errors['minlength'])
+                return `${fieldName} must be at least ${control.errors['minlength'].requiredLength} characters`;
+            if (control.errors['pattern'])
+                return `${fieldName} must be a valid identifier (letters, numbers, underscore)`;
+            if (control.errors['min'])
+                return `${fieldName} must be at least ${control.errors['min'].min}`;
+        }
+        return '';
+    }
+    get title() {
+        return this.isEdit ? 'Edit Column Template' : 'Create Column Template';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", 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.3", 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        <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=\"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: i5.JsonPipe, name: "json" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", 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        <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=\"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: [{
+                type: Input
+            }], labGroups: [{
+                type: Input
+            }], isEdit: [{
+                type: Input
+            }], templateSaved: [{
+                type: Output
+            }] } });
+
+class ColumnTemplates {
+    fb;
+    metadataColumnTemplateService;
+    labGroupService;
+    modalService;
+    searchForm;
+    // Signals for reactive state management
+    searchParams = signal({
+        search: '',
+        labGroupId: null,
+        visibility: null,
+        limit: 10,
+        offset: 0
+    }, ...(ngDevMode ? [{ debugName: "searchParams" }] : []));
+    labGroupParams = signal({
+        limit: 10,
+        offset: 0
+    }, ...(ngDevMode ? [{ debugName: "labGroupParams" }] : []));
+    // Computed signals for better performance
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    selectedLabGroup = signal(null, ...(ngDevMode ? [{ debugName: "selectedLabGroup" }] : []));
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    labGroupsCurrentPage = signal(1, ...(ngDevMode ? [{ debugName: "labGroupsCurrentPage" }] : []));
+    labGroupsPageSize = signal(10, ...(ngDevMode ? [{ debugName: "labGroupsPageSize" }] : []));
+    labGroupsTotalItems = signal(0, ...(ngDevMode ? [{ debugName: "labGroupsTotalItems" }] : []));
+    // Column filter
+    columnFilter = signal('', ...(ngDevMode ? [{ debugName: "columnFilter" }] : []));
+    // Sorting
+    sortField = signal('', ...(ngDevMode ? [{ debugName: "sortField" }] : []));
+    sortDirection = signal('asc', ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
+    // Direct signal-based data management
+    templatesData = signal({ count: 0, results: [] }, ...(ngDevMode ? [{ debugName: "templatesData" }] : []));
+    labGroupsData = signal({ count: 0, results: [] }, ...(ngDevMode ? [{ debugName: "labGroupsData" }] : []));
+    // Computed values for better performance
+    hasTemplates = computed(() => this.templatesData().results.length > 0, ...(ngDevMode ? [{ debugName: "hasTemplates" }] : []));
+    hasLabGroups = computed(() => this.labGroupsData().results.length > 0, ...(ngDevMode ? [{ debugName: "hasLabGroups" }] : []));
+    showTemplatesPagination = computed(() => this.templatesData().count > this.pageSize(), ...(ngDevMode ? [{ debugName: "showTemplatesPagination" }] : []));
+    showLabGroupsPagination = computed(() => this.labGroupsData().count > this.labGroupsPageSize(), ...(ngDevMode ? [{ debugName: "showLabGroupsPagination" }] : []));
+    // Filtered and sorted templates
+    filteredTemplates = computed(() => {
+        const templates = this.templatesData().results;
+        const filter = this.columnFilter().toLowerCase();
+        const sortField = this.sortField();
+        const sortDirection = this.sortDirection();
+        // Apply filter
+        let filtered = filter ?
+            templates.filter(template => template.columnName.toLowerCase().includes(filter) ||
+                template.name.toLowerCase().includes(filter)) : templates;
+        // Apply sorting
+        if (sortField) {
+            filtered = [...filtered].sort((a, b) => {
+                let aValue = '';
+                let bValue = '';
+                switch (sortField) {
+                    case 'name':
+                        aValue = a.name?.toLowerCase() || '';
+                        bValue = b.name?.toLowerCase() || '';
+                        break;
+                    case 'columnName':
+                        aValue = a.columnName?.toLowerCase() || '';
+                        bValue = b.columnName?.toLowerCase() || '';
+                        break;
+                    case 'columnType':
+                        aValue = a.columnType?.toLowerCase() || '';
+                        bValue = b.columnType?.toLowerCase() || '';
+                        break;
+                    case 'ontologyType':
+                        aValue = a.ontologyType?.toLowerCase() || '';
+                        bValue = b.ontologyType?.toLowerCase() || '';
+                        break;
+                    case 'visibility':
+                        aValue = a.visibility?.toLowerCase() || '';
+                        bValue = b.visibility?.toLowerCase() || '';
+                        break;
+                    default:
+                        return 0;
+                }
+                if (aValue < bValue)
+                    return sortDirection === 'asc' ? -1 : 1;
+                if (aValue > bValue)
+                    return sortDirection === 'asc' ? 1 : -1;
+                return 0;
+            });
+        }
+        return filtered;
+    }, ...(ngDevMode ? [{ debugName: "filteredTemplates" }] : []));
+    constructor(fb, metadataColumnTemplateService, labGroupService, modalService) {
+        this.fb = fb;
+        this.metadataColumnTemplateService = metadataColumnTemplateService;
+        this.labGroupService = labGroupService;
+        this.modalService = modalService;
+        this.searchForm = this.fb.group({
+            search: [''],
+            labGroupId: [null],
+            visibility: [null]
+        });
+        // Effect to automatically reload templates when search params change
+        effect(() => {
+            const params = this.searchParams();
+            this.loadTemplatesWithParams(params);
+        });
+        // Effect to automatically reload lab groups when params change
+        effect(() => {
+            const params = this.labGroupParams();
+            this.loadLabGroupsWithParams(params);
+        });
+    }
+    ngOnInit() {
+        this.setupSearch();
+        this.loadInitialData();
+    }
+    loadInitialData() {
+        // Initial load - signals will handle subsequent updates via effects
+        this.labGroupParams.set({
+            limit: this.labGroupsPageSize(),
+            offset: 0
+        });
+        this.searchParams.set({
+            search: '',
+            labGroupId: null,
+            visibility: null,
+            limit: this.pageSize(),
+            offset: 0
+        });
+    }
+    loadLabGroupsWithParams(params) {
+        this.labGroupService.getMyLabGroups({ limit: params.limit, offset: params.offset }).subscribe({
+            next: (response) => {
+                this.labGroupsTotalItems.set(response.count);
+                this.labGroupsData.set(response);
+            },
+            error: (error) => {
+                console.error('Error loading lab groups:', error);
+                this.labGroupsData.set({ count: 0, results: [] });
+            }
+        });
+    }
+    setupSearch() {
+        // Subscribe to form changes and update search params signal
+        this.searchForm.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe(formValue => {
+            // Reset to first page when searching
+            this.currentPage.set(1);
+            // Update search params signal - this will trigger the effect
+            this.searchParams.set({
+                search: formValue.search || '',
+                labGroupId: formValue.labGroupId || null,
+                visibility: formValue.visibility || null,
+                limit: this.pageSize(),
+                offset: 0 // Always start from first page when searching
+            });
+        });
+    }
+    loadTemplatesWithParams(params) {
+        this.isLoading.set(true);
+        this.metadataColumnTemplateService.getMetadataColumnTemplates({
+            search: params.search || undefined,
+            labGroupId: params.labGroupId || undefined,
+            visibility: params.visibility || undefined,
+            limit: params.limit,
+            offset: params.offset
+        }).subscribe({
+            next: (response) => {
+                this.isLoading.set(false);
+                this.totalItems.set(response.count);
+                this.templatesData.set(response);
+            },
+            error: (error) => {
+                this.isLoading.set(false);
+                console.error('Error loading column templates:', error);
+                this.templatesData.set({ count: 0, results: [] });
+            }
+        });
+    }
+    onLabGroupChange(event) {
+        const target = event.target;
+        const value = target.value;
+        const id = value === 'null' ? null : Number(value);
+        const labGroup = id ? this.findLabGroupById(id) : null;
+        this.selectedLabGroup.set(labGroup);
+        this.currentPage.set(1);
+        // Update search params - effect will trigger reload
+        this.searchParams.update(params => ({
+            ...params,
+            labGroupId: id,
+            offset: 0
+        }));
+    }
+    findLabGroupById(id) {
+        const labGroups = this.labGroupsData();
+        return labGroups.results.find((group) => group.id === id) || null;
+    }
+    onPageChange(page) {
+        this.currentPage.set(page);
+        this.searchParams.update(params => ({
+            ...params,
+            offset: (page - 1) * this.pageSize()
+        }));
+    }
+    onLabGroupsPageChange(page) {
+        this.labGroupsCurrentPage.set(page);
+        this.labGroupParams.set({
+            limit: this.labGroupsPageSize(),
+            offset: (page - 1) * this.labGroupsPageSize()
+        });
+    }
+    // Column filter methods
+    onColumnFilterChange(value) {
+        this.columnFilter.set(value);
+    }
+    clearColumnFilter() {
+        this.columnFilter.set('');
+    }
+    get filteredTemplatesCount() {
+        return this.filteredTemplates().length;
+    }
+    get totalTemplatesCount() {
+        return this.templatesData().results.length;
+    }
+    // Sorting methods
+    sortBy(field) {
+        const currentField = this.sortField();
+        const currentDirection = this.sortDirection();
+        if (currentField === field) {
+            // Toggle direction if same field
+            this.sortDirection.set(currentDirection === 'asc' ? 'desc' : 'asc');
+        }
+        else {
+            // New field, default to ascending
+            this.sortField.set(field);
+            this.sortDirection.set('asc');
+        }
+    }
+    getSortIcon(field) {
+        const currentField = this.sortField();
+        const currentDirection = this.sortDirection();
+        if (currentField !== field) {
+            return 'bi-arrow-down-up'; // Default unsorted icon
+        }
+        return currentDirection === 'asc' ? 'bi-sort-alpha-down' : 'bi-sort-alpha-up';
+    }
+    isSorted(field) {
+        return this.sortField() === field;
+    }
+    createTemplate() {
+        this.openTemplateModal(null, false);
+    }
+    editTemplate(template) {
+        this.openTemplateModal(template, true);
+    }
+    openTemplateModal(template, isEdit) {
+        const modalRef = this.modalService.open(ColumnTemplateEditModal, {
+            size: 'lg',
+            backdrop: 'static',
+            keyboard: false
+        });
+        modalRef.componentInstance.template = template;
+        modalRef.componentInstance.labGroups = this.labGroupsData().results;
+        modalRef.componentInstance.isEdit = isEdit;
+        modalRef.componentInstance.templateSaved.subscribe((templateData) => {
+            this.handleTemplateSave(templateData, template?.id || null, isEdit);
+            modalRef.componentInstance.onClose();
+        });
+    }
+    handleTemplateSave(templateData, templateId, isEdit) {
+        this.isLoading.set(true);
+        const apiCall = isEdit && templateId
+            ? this.metadataColumnTemplateService.updateMetadataColumnTemplate(templateId, templateData)
+            : this.metadataColumnTemplateService.createMetadataColumnTemplate(templateData);
+        apiCall.subscribe({
+            next: (template) => {
+                this.isLoading.set(false);
+                console.log(`Column template ${isEdit ? 'updated' : 'created'}:`, template);
+                this.refreshTemplates();
+            },
+            error: (error) => {
+                this.isLoading.set(false);
+                console.error(`Error ${isEdit ? 'updating' : 'creating'} column template:`, error);
+                alert(`Failed to ${isEdit ? 'update' : 'create'} template. Please try again.`);
+            }
+        });
+    }
+    deleteTemplate(template) {
+        // Enhanced delete confirmation with better UX
+        const confirmMessage = `Are you sure you want to delete the column template "${template.name}"?\n\nThis action cannot be undone.`;
+        if (confirm(confirmMessage)) {
+            this.isLoading.set(true);
+            this.metadataColumnTemplateService.deleteMetadataColumnTemplate(template.id).subscribe({
+                next: () => {
+                    this.isLoading.set(false);
+                    console.log('Column template deleted successfully');
+                    this.refreshTemplates();
+                },
+                error: (error) => {
+                    this.isLoading.set(false);
+                    console.error('Error deleting column template:', error);
+                    alert('Failed to delete template. Please try again.');
+                }
+            });
+        }
+    }
+    duplicateTemplate(template) {
+        const duplicatedTemplate = {
+            name: `${template.name} (Copy)`,
+            description: template.description,
+            columnName: `${template.columnName}_copy`,
+            columnType: template.columnType,
+            defaultValue: template.defaultValue,
+            ontologyType: template.ontologyType,
+            visibility: ResourceVisibility.PRIVATE, // Always create as private
+            labGroup: template.labGroup || this.selectedLabGroup()?.id || undefined,
+            isActive: true
+        };
+        this.isLoading.set(true);
+        this.metadataColumnTemplateService.createMetadataColumnTemplate(duplicatedTemplate).subscribe({
+            next: (newTemplate) => {
+                this.isLoading.set(false);
+                console.log('Column template duplicated:', newTemplate);
+                this.refreshTemplates();
+            },
+            error: (error) => {
+                this.isLoading.set(false);
+                console.error('Error duplicating column template:', error);
+                alert('Failed to duplicate template. Please try again.');
+            }
+        });
+    }
+    refreshTemplates() {
+        // Trigger a refresh by updating the search params
+        this.searchParams.update(params => ({ ...params }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ColumnTemplates, deps: [{ token: i1.FormBuilder }, { token: MetadataColumnTemplateService }, { token: i3.LabGroupService }, { token: i2.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: ColumnTemplates, isStandalone: true, selector: "ccv-column-templates", ngImport: i0, template: "<div class=\"column-templates-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=\"navbar-brand m-0 fw-bold\">\n            <i class=\"bi bi-clipboard-list me-2\"></i>Column Templates\n          </h4>\n          @if (selectedLabGroup()) {\n            <span class=\"badge bg-primary ms-3\">{{ selectedLabGroup()!.name }}</span>\n          }\n        </div>\n        <div class=\"d-flex gap-2\">\n          <button class=\"btn btn-primary btn-sm\" (click)=\"createTemplate()\">\n            <i class=\"bi bi-plus me-1\"></i>New Template\n          </button>\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <div class=\"templates-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-4\">\n            <div class=\"form-floating\">\n              <input\n                type=\"search\"\n                class=\"form-control\"\n                id=\"templateSearch\"\n                formControlName=\"search\"\n                placeholder=\"Search templates...\">\n              <label for=\"templateSearch\">\n                <i class=\"bi bi-search me-1\"></i>Search Templates\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-4\">\n            <div class=\"form-floating\">\n              <select\n                class=\"form-select\"\n                id=\"labGroupSelect\"\n                formControlName=\"labGroupId\"\n                (change)=\"onLabGroupChange($event)\">\n                <option [ngValue]=\"null\">All Lab Groups</option>\n                @if (hasLabGroups()) {\n                  @for (group of labGroupsData().results; track group.id) {\n                    <option [ngValue]=\"group.id\">{{ group.name }}</option>\n                  }\n                }\n              </select>\n              <label for=\"labGroupSelect\">Lab Group</label>\n            </div>\n\n            <!-- Lab Groups Pagination -->\n            @if (showLabGroupsPagination()) {\n                <div class=\"d-flex justify-content-center mt-2\">\n                  <ngb-pagination\n                    [collectionSize]=\"labGroupsData().count\"\n                    [page]=\"labGroupsCurrentPage()\"\n                    [pageSize]=\"labGroupsPageSize()\"\n                    [maxSize]=\"3\"\n                    [boundaryLinks]=\"false\"\n                    [rotate]=\"true\"\n                    (pageChange)=\"onLabGroupsPageChange($event)\"\n                    class=\"pagination-sm\">\n                  </ngb-pagination>\n                </div>\n            }\n          </div>\n          <div class=\"col-md-4\">\n            <div class=\"form-check form-switch mt-3\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"globalTemplates\"\n                formControlName=\"visibility\">\n              <label class=\"form-check-label\" for=\"globalTemplates\">\n                <i class=\"bi bi-globe me-1\"></i>Global Templates Only\n              </label>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <!-- Templates Table -->\n    <div class=\"card\">\n      <div class=\"card-header\">\n        <div class=\"d-flex justify-content-between align-items-center mb-3\">\n          <h5 class=\"mb-0\">\n            <i class=\"bi bi-table me-2\"></i>Column Templates\n            <span class=\"badge bg-primary ms-2\">{{ templatesData().count }}</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        \n        <!-- Column Filter -->\n        @if (hasTemplates()) {\n          <div class=\"d-flex align-items-center\">\n            <div class=\"input-group input-group-sm me-3\" style=\"width: 300px;\">\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 by column name or template...\"\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\">\n                {{ filteredTemplatesCount }}/{{ totalTemplatesCount }} templates\n              </small>\n            }\n          </div>\n        }\n      </div>\n      <div class=\"card-body p-0\">\n        @if (hasTemplates()) {\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead>\n                  <tr>\n                    <th class=\"sortable\" \n                        (click)=\"sortBy('name')\"\n                        [class.sorted]=\"isSorted('name')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span><i class=\"bi bi-tag me-1\"></i>Template Name</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('name')\"></i>\n                      </div>\n                    </th>\n                    <th class=\"sortable\" \n                        (click)=\"sortBy('columnName')\"\n                        [class.sorted]=\"isSorted('columnName')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span><i class=\"bi bi-list me-1\"></i>Column Name</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('columnName')\"></i>\n                      </div>\n                    </th>\n                    <th class=\"sortable\" \n                        (click)=\"sortBy('columnType')\"\n                        [class.sorted]=\"isSorted('columnType')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span><i class=\"bi bi-layers me-1\"></i>Type</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('columnType')\"></i>\n                      </div>\n                    </th>\n                    <th class=\"sortable\" \n                        (click)=\"sortBy('ontologyType')\"\n                        [class.sorted]=\"isSorted('ontologyType')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span><i class=\"bi bi-diagram-3 me-1\"></i>Ontology</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('ontologyType')\"></i>\n                      </div>\n                    </th>\n                    <th class=\"sortable\" \n                        (click)=\"sortBy('visibility')\"\n                        [class.sorted]=\"isSorted('visibility')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span><i class=\"bi bi-globe me-1\"></i>Visibility</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('visibility')\"></i>\n                      </div>\n                    </th>\n                    <th><i class=\"bi bi-folder me-1\"></i>Category</th>\n                    <th><i class=\"bi bi-gear me-1\"></i>Actions</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (template of filteredTemplates(); track template.id) {\n                    <tr>\n                      <td>\n                        <strong>{{ template.name }}</strong>\n                        @if (template.isSystemTemplate) {\n                          <i class=\"bi bi-shield-check text-success ms-2\" title=\"System template\"></i>\n                        }\n                      </td>\n                      <td>{{ template.columnName }}</td>\n                      <td>\n                        <span class=\"badge bg-secondary\">{{ template.columnType }}</span>\n                      </td>\n                      <td>\n                        @if (template.ontologyType) {\n                          <span class=\"badge bg-success\">{{ template.ontologyType }}</span>\n                        } @else {\n                          <span class=\"text-muted\">-</span>\n                        }\n                      </td>\n                      <td>\n                        @switch (template.visibility) {\n                          @case ('public') {\n                            <span class=\"badge bg-success\">Public</span>\n                          }\n                          @case ('group') {\n                            <span class=\"badge bg-warning\">Lab Group</span>\n                          }\n                          @case ('private') {\n                            <span class=\"badge bg-secondary\">Private</span>\n                          }\n                          @default {\n                            <span class=\"badge bg-secondary\">{{ template.visibility }}</span>\n                          }\n                        }\n                      </td>\n                      <td>\n                        @if (template.category) {\n                          <span class=\"badge bg-secondary\">{{ template.category }}</span>\n                        } @else {\n                          <span class=\"text-muted\">-</span>\n                        }\n                      </td>\n                      <td>\n                        <div class=\"btn-group btn-group-sm\" role=\"group\">\n                          <button\n                            class=\"btn btn-outline-primary\"\n                            (click)=\"editTemplate(template)\"\n                            title=\"Edit template\">\n                            <i class=\"bi bi-pencil\"></i>\n                          </button>\n                          <button\n                            class=\"btn btn-outline-info\"\n                            (click)=\"duplicateTemplate(template)\"\n                            title=\"Duplicate template\">\n                            <i class=\"bi bi-copy\"></i>\n                          </button>\n                          <button\n                            class=\"btn btn-outline-danger\"\n                            (click)=\"deleteTemplate(template)\"\n                            title=\"Delete template\">\n                            <i class=\"bi bi-trash\"></i>\n                          </button>\n                        </div>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n\n            <!-- Pagination -->\n            @if (showTemplatesPagination()) {\n              <div class=\"d-flex justify-content-center mt-3 p-3\">\n                <ngb-pagination\n                  [collectionSize]=\"templatesData().count\"\n                  [page]=\"currentPage()\"\n                  [pageSize]=\"pageSize()\"\n                  [maxSize]=\"5\"\n                  [boundaryLinks]=\"true\"\n                  [rotate]=\"true\"\n                  (pageChange)=\"onPageChange($event)\"\n                  class=\"pagination-sm\">\n                </ngb-pagination>\n              </div>\n            }\n          } @else {\n            <div class=\"empty-state text-center py-5\">\n              <i class=\"bi bi-clipboard-list fs-1 text-muted mb-3\"></i>\n              <h5 class=\"text-muted\">No Column Templates Found</h5>\n              <p class=\"text-muted\">\n                @if (searchForm.get('search')?.value || searchForm.get('labGroupId')?.value) {\n                  Try adjusting your search criteria or create a new template.\n                } @else {\n                  Get started by creating your first column template.\n                }\n              </p>\n              <button class=\"btn btn-primary\" (click)=\"createTemplate()\">\n                <i class=\"bi bi-plus me-1\"></i>Create First Template\n              </button>\n            </div>\n          }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".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}\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: "component", type: i2.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "ngmodule", type: NgbPaginationModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ColumnTemplates, decorators: [{
+            type: Component,
+            args: [{ selector: 'ccv-column-templates', standalone: true, imports: [CommonModule, ReactiveFormsModule, NgbModule, NgbPaginationModule], template: "<div class=\"column-templates-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=\"navbar-brand m-0 fw-bold\">\n            <i class=\"bi bi-clipboard-list me-2\"></i>Column Templates\n          </h4>\n          @if (selectedLabGroup()) {\n            <span class=\"badge bg-primary ms-3\">{{ selectedLabGroup()!.name }}</span>\n          }\n        </div>\n        <div class=\"d-flex gap-2\">\n          <button class=\"btn btn-primary btn-sm\" (click)=\"createTemplate()\">\n            <i class=\"bi bi-plus me-1\"></i>New Template\n          </button>\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <div class=\"templates-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-4\">\n            <div class=\"form-floating\">\n              <input\n                type=\"search\"\n                class=\"form-control\"\n                id=\"templateSearch\"\n                formControlName=\"search\"\n                placeholder=\"Search templates...\">\n              <label for=\"templateSearch\">\n                <i class=\"bi bi-search me-1\"></i>Search Templates\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-4\">\n            <div class=\"form-floating\">\n              <select\n                class=\"form-select\"\n                id=\"labGroupSelect\"\n                formControlName=\"labGroupId\"\n                (change)=\"onLabGroupChange($event)\">\n                <option [ngValue]=\"null\">All Lab Groups</option>\n                @if (hasLabGroups()) {\n                  @for (group of labGroupsData().results; track group.id) {\n                    <option [ngValue]=\"group.id\">{{ group.name }}</option>\n                  }\n                }\n              </select>\n              <label for=\"labGroupSelect\">Lab Group</label>\n            </div>\n\n            <!-- Lab Groups Pagination -->\n            @if (showLabGroupsPagination()) {\n                <div class=\"d-flex justify-content-center mt-2\">\n                  <ngb-pagination\n                    [collectionSize]=\"labGroupsData().count\"\n                    [page]=\"labGroupsCurrentPage()\"\n                    [pageSize]=\"labGroupsPageSize()\"\n                    [maxSize]=\"3\"\n                    [boundaryLinks]=\"false\"\n                    [rotate]=\"true\"\n                    (pageChange)=\"onLabGroupsPageChange($event)\"\n                    class=\"pagination-sm\">\n                  </ngb-pagination>\n                </div>\n            }\n          </div>\n          <div class=\"col-md-4\">\n            <div class=\"form-check form-switch mt-3\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"globalTemplates\"\n                formControlName=\"visibility\">\n              <label class=\"form-check-label\" for=\"globalTemplates\">\n                <i class=\"bi bi-globe me-1\"></i>Global Templates Only\n              </label>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n\n    <!-- Templates Table -->\n    <div class=\"card\">\n      <div class=\"card-header\">\n        <div class=\"d-flex justify-content-between align-items-center mb-3\">\n          <h5 class=\"mb-0\">\n            <i class=\"bi bi-table me-2\"></i>Column Templates\n            <span class=\"badge bg-primary ms-2\">{{ templatesData().count }}</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        \n        <!-- Column Filter -->\n        @if (hasTemplates()) {\n          <div class=\"d-flex align-items-center\">\n            <div class=\"input-group input-group-sm me-3\" style=\"width: 300px;\">\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 by column name or template...\"\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\">\n                {{ filteredTemplatesCount }}/{{ totalTemplatesCount }} templates\n              </small>\n            }\n          </div>\n        }\n      </div>\n      <div class=\"card-body p-0\">\n        @if (hasTemplates()) {\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead>\n                  <tr>\n                    <th class=\"sortable\" \n                        (click)=\"sortBy('name')\"\n                        [class.sorted]=\"isSorted('name')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span><i class=\"bi bi-tag me-1\"></i>Template Name</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('name')\"></i>\n                      </div>\n                    </th>\n                    <th class=\"sortable\" \n                        (click)=\"sortBy('columnName')\"\n                        [class.sorted]=\"isSorted('columnName')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span><i class=\"bi bi-list me-1\"></i>Column Name</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('columnName')\"></i>\n                      </div>\n                    </th>\n                    <th class=\"sortable\" \n                        (click)=\"sortBy('columnType')\"\n                        [class.sorted]=\"isSorted('columnType')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span><i class=\"bi bi-layers me-1\"></i>Type</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('columnType')\"></i>\n                      </div>\n                    </th>\n                    <th class=\"sortable\" \n                        (click)=\"sortBy('ontologyType')\"\n                        [class.sorted]=\"isSorted('ontologyType')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span><i class=\"bi bi-diagram-3 me-1\"></i>Ontology</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('ontologyType')\"></i>\n                      </div>\n                    </th>\n                    <th class=\"sortable\" \n                        (click)=\"sortBy('visibility')\"\n                        [class.sorted]=\"isSorted('visibility')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span><i class=\"bi bi-globe me-1\"></i>Visibility</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('visibility')\"></i>\n                      </div>\n                    </th>\n                    <th><i class=\"bi bi-folder me-1\"></i>Category</th>\n                    <th><i class=\"bi bi-gear me-1\"></i>Actions</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (template of filteredTemplates(); track template.id) {\n                    <tr>\n                      <td>\n                        <strong>{{ template.name }}</strong>\n                        @if (template.isSystemTemplate) {\n                          <i class=\"bi bi-shield-check text-success ms-2\" title=\"System template\"></i>\n                        }\n                      </td>\n                      <td>{{ template.columnName }}</td>\n                      <td>\n                        <span class=\"badge bg-secondary\">{{ template.columnType }}</span>\n                      </td>\n                      <td>\n                        @if (template.ontologyType) {\n                          <span class=\"badge bg-success\">{{ template.ontologyType }}</span>\n                        } @else {\n                          <span class=\"text-muted\">-</span>\n                        }\n                      </td>\n                      <td>\n                        @switch (template.visibility) {\n                          @case ('public') {\n                            <span class=\"badge bg-success\">Public</span>\n                          }\n                          @case ('group') {\n                            <span class=\"badge bg-warning\">Lab Group</span>\n                          }\n                          @case ('private') {\n                            <span class=\"badge bg-secondary\">Private</span>\n                          }\n                          @default {\n                            <span class=\"badge bg-secondary\">{{ template.visibility }}</span>\n                          }\n                        }\n                      </td>\n                      <td>\n                        @if (template.category) {\n                          <span class=\"badge bg-secondary\">{{ template.category }}</span>\n                        } @else {\n                          <span class=\"text-muted\">-</span>\n                        }\n                      </td>\n                      <td>\n                        <div class=\"btn-group btn-group-sm\" role=\"group\">\n                          <button\n                            class=\"btn btn-outline-primary\"\n                            (click)=\"editTemplate(template)\"\n                            title=\"Edit template\">\n                            <i class=\"bi bi-pencil\"></i>\n                          </button>\n                          <button\n                            class=\"btn btn-outline-info\"\n                            (click)=\"duplicateTemplate(template)\"\n                            title=\"Duplicate template\">\n                            <i class=\"bi bi-copy\"></i>\n                          </button>\n                          <button\n                            class=\"btn btn-outline-danger\"\n                            (click)=\"deleteTemplate(template)\"\n                            title=\"Delete template\">\n                            <i class=\"bi bi-trash\"></i>\n                          </button>\n                        </div>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n\n            <!-- Pagination -->\n            @if (showTemplatesPagination()) {\n              <div class=\"d-flex justify-content-center mt-3 p-3\">\n                <ngb-pagination\n                  [collectionSize]=\"templatesData().count\"\n                  [page]=\"currentPage()\"\n                  [pageSize]=\"pageSize()\"\n                  [maxSize]=\"5\"\n                  [boundaryLinks]=\"true\"\n                  [rotate]=\"true\"\n                  (pageChange)=\"onPageChange($event)\"\n                  class=\"pagination-sm\">\n                </ngb-pagination>\n              </div>\n            }\n          } @else {\n            <div class=\"empty-state text-center py-5\">\n              <i class=\"bi bi-clipboard-list fs-1 text-muted mb-3\"></i>\n              <h5 class=\"text-muted\">No Column Templates Found</h5>\n              <p class=\"text-muted\">\n                @if (searchForm.get('search')?.value || searchForm.get('labGroupId')?.value) {\n                  Try adjusting your search criteria or create a new template.\n                } @else {\n                  Get started by creating your first column template.\n                }\n              </p>\n              <button class=\"btn btn-primary\" (click)=\"createTemplate()\">\n                <i class=\"bi bi-plus me-1\"></i>Create First Template\n              </button>\n            </div>\n          }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".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}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: MetadataColumnTemplateService }, { type: i3.LabGroupService }, { type: i2.NgbModal }] });
+
+class FavoriteManagement {
+    fb;
+    favouriteMetadataOptionService;
+    metadataColumnTemplateService;
+    labGroupService;
+    toastService;
+    modalService;
+    authService;
+    Math = Math;
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    favorites = signal([], ...(ngDevMode ? [{ debugName: "favorites" }] : []));
+    totalFavoritesCount = signal(0, ...(ngDevMode ? [{ debugName: "totalFavoritesCount" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    scopeFilter = signal('', ...(ngDevMode ? [{ debugName: "scopeFilter" }] : []));
+    labGroupFilter = signal('', ...(ngDevMode ? [{ debugName: "labGroupFilter" }] : []));
+    columnTypeFilter = signal('', ...(ngDevMode ? [{ debugName: "columnTypeFilter" }] : []));
+    filteredFavorites = computed(() => {
+        const searchTerm = this.searchTerm().toLowerCase();
+        const scopeFilter = this.scopeFilter();
+        const labGroupFilter = this.labGroupFilter();
+        const columnTypeFilter = this.columnTypeFilter();
+        return this.favorites().filter(fav => {
+            const matchesSearch = !searchTerm ||
+                fav.name.toLowerCase().includes(searchTerm) ||
+                fav.value.toLowerCase().includes(searchTerm) ||
+                (fav.displayValue?.toLowerCase().includes(searchTerm) ?? false);
+            let matchesScope = true;
+            if (scopeFilter) {
+                if (scopeFilter === 'personal') {
+                    matchesScope = !!(fav.user && !fav.isGlobal && !fav.labGroup);
+                }
+                else if (scopeFilter === 'labGroup') {
+                    matchesScope = !!(fav.labGroup && !fav.isGlobal);
+                }
+                else if (scopeFilter === 'global') {
+                    matchesScope = !!fav.isGlobal;
+                }
+            }
+            const matchesLabGroup = !labGroupFilter ||
+                (fav.labGroup && fav.labGroup.toString() === labGroupFilter);
+            const matchesType = !columnTypeFilter || fav.type.includes(columnTypeFilter);
+            return matchesSearch && matchesScope && matchesLabGroup && matchesType;
+        });
+    }, ...(ngDevMode ? [{ debugName: "filteredFavorites" }] : []));
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    paginatedFavorites = computed(() => this.filteredFavorites(), ...(ngDevMode ? [{ debugName: "paginatedFavorites" }] : []));
+    totalPages = computed(() => {
+        const totalCount = this.totalFavoritesCount();
+        const size = this.pageSize();
+        return Math.ceil(totalCount / size);
+    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    searchForm;
+    editForm;
+    isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    editingFavorite = signal(null, ...(ngDevMode ? [{ debugName: "editingFavorite" }] : []));
+    showEditModal = signal(false, ...(ngDevMode ? [{ debugName: "showEditModal" }] : []));
+    sdrfSyntaxService = inject(SdrfSyntaxService);
+    specialSyntaxType = signal(null, ...(ngDevMode ? [{ debugName: "specialSyntaxType" }] : []));
+    showSpecialInput = signal(false, ...(ngDevMode ? [{ debugName: "showSpecialInput" }] : []));
+    specialInputValue = signal('', ...(ngDevMode ? [{ debugName: "specialInputValue" }] : []));
+    currentUser = signal(null, ...(ngDevMode ? [{ debugName: "currentUser" }] : []));
+    isAdmin = computed(() => {
+        const user = this.currentUser();
+        return user?.isStaff || user?.isSuperuser || false;
+    }, ...(ngDevMode ? [{ debugName: "isAdmin" }] : []));
+    currentUserId = computed(() => this.currentUser()?.id || null, ...(ngDevMode ? [{ debugName: "currentUserId" }] : []));
+    userLabGroups = signal([], ...(ngDevMode ? [{ debugName: "userLabGroups" }] : []));
+    userLabGroupsLoaded = signal(false, ...(ngDevMode ? [{ debugName: "userLabGroupsLoaded" }] : []));
+    selectedOntologyValue = null;
+    availableLabGroups = signal([], ...(ngDevMode ? [{ debugName: "availableLabGroups" }] : []));
+    allLabGroups = signal([], ...(ngDevMode ? [{ debugName: "allLabGroups" }] : []));
+    availableColumnTemplates = signal([], ...(ngDevMode ? [{ debugName: "availableColumnTemplates" }] : []));
+    columnTemplatesLoaded = signal(false, ...(ngDevMode ? [{ debugName: "columnTemplatesLoaded" }] : []));
+    columnTypes = [
+        { value: '', label: 'All Types' },
+        { value: ColumnType.CHARACTERISTICS, label: 'Characteristics' },
+        { value: ColumnType.FACTOR_VALUE, label: 'Factor Value' },
+        { value: ColumnType.COMMENT, label: 'Comment' },
+        { value: ColumnType.SOURCE_NAME, label: 'Source Name' },
+        { value: ColumnType.SPECIAL, label: 'Special' }
+    ];
+    constructor(fb, favouriteMetadataOptionService, metadataColumnTemplateService, labGroupService, toastService, modalService, authService) {
+        this.fb = fb;
+        this.favouriteMetadataOptionService = favouriteMetadataOptionService;
+        this.metadataColumnTemplateService = metadataColumnTemplateService;
+        this.labGroupService = labGroupService;
+        this.toastService = toastService;
+        this.modalService = modalService;
+        this.authService = authService;
+        this.searchForm = this.fb.group({
+            search: [''],
+            scope: [''],
+            labGroup: [''],
+            columnType: ['']
+        });
+        this.editForm = this.fb.group({
+            name: ['', [Validators.required, Validators.maxLength(255)]],
+            type: ['', [Validators.required, Validators.maxLength(255)]],
+            value: ['', [Validators.maxLength(500)]],
+            displayValue: ['', [Validators.maxLength(500)]],
+            scope: ['personal', Validators.required],
+            labGroupId: [null],
+            templateId: [null],
+            ontologyType: [''],
+            enableTypeahead: [false]
+        });
+        this.editForm.get('value')?.valueChanges.subscribe(value => {
+            if (typeof value === 'string' && value !== this.selectedOntologyValue) {
+                console.log('Manual input detected, clearing stored ontology value');
+                this.selectedOntologyValue = null;
+            }
+        });
+    }
+    ngOnInit() {
+        this.currentUser.set(this.authService.getCurrentUser());
+        this.authService.currentUser$.subscribe(user => {
+            this.currentUser.set(user);
+            if (user) {
+                this.loadUserLabGroups();
+            }
+            else {
+                this.loadFavorites();
+            }
+        });
+        if (this.currentUser()) {
+            this.loadUserLabGroups();
+        }
+        else {
+            this.loadFavorites();
+        }
+        this.loadAvailableColumnTemplates();
+        this.searchForm.valueChanges.subscribe(formValues => {
+            this.searchTerm.set(formValues.search || '');
+            this.scopeFilter.set(formValues.scope || '');
+            this.labGroupFilter.set(formValues.labGroup || '');
+            this.columnTypeFilter.set(formValues.columnType || '');
+            this.currentPage.set(1);
+        });
+    }
+    loadFavorites() {
+        this.isLoading.set(true);
+        const page = this.currentPage();
+        const size = this.pageSize();
+        const offset = (page - 1) * size;
+        this.favouriteMetadataOptionService.getFavouriteMetadataOptions({
+            limit: size,
+            offset: offset
+        }).subscribe({
+            next: (response) => {
+                this.favorites.set(response.results);
+                this.totalFavoritesCount.set(response.count || response.results.length);
+                this.isLoading.set(false);
+            },
+            error: (error) => {
+                console.error('Error loading favorites:', error);
+                this.toastService.error('Failed to load favorites');
+                this.isLoading.set(false);
+            }
+        });
+    }
+    canEditFavorite(favorite) {
+        const userId = this.currentUserId();
+        if (favorite.user && userId && Number(favorite.user) === Number(userId)) {
+            return true;
+        }
+        if (favorite.isGlobal && this.isAdmin()) {
+            return true;
+        }
+        return false;
+    }
+    canDeleteFavorite(favorite) {
+        return this.canEditFavorite(favorite);
+    }
+    openCreateModal() {
+        this.isEditMode.set(false);
+        this.editingFavorite.set(null);
+        this.showEditModal.set(true);
+        this.selectedOntologyValue = null;
+        this.editForm.reset({
+            name: '',
+            type: '',
+            value: '',
+            displayValue: '',
+            scope: 'personal',
+            templateId: null
+        });
+    }
+    openEditModal(favorite) {
+        if (!this.canEditFavorite(favorite))
+            return;
+        this.isEditMode.set(true);
+        this.editingFavorite.set(favorite);
+        this.showEditModal.set(true);
+        this.selectedOntologyValue = favorite.value; // Store the original value
+        let scope = 'personal';
+        if (favorite.isGlobal)
+            scope = 'global';
+        else if (favorite.labGroup)
+            scope = 'labGroup';
+        let templateId = favorite.columnTemplate || null;
+        this.editForm.patchValue({
+            name: favorite.name,
+            type: favorite.type,
+            value: favorite.value,
+            displayValue: favorite.displayValue || '',
+            scope: scope,
+            labGroupId: favorite.labGroup || null,
+            templateId: templateId,
+            ontologyType: '',
+            enableTypeahead: false
+        });
+        const syntaxType = this.sdrfSyntaxService.detectSpecialSyntax(favorite.name, favorite.type);
+        if (syntaxType) {
+            this.specialSyntaxType.set(syntaxType);
+            this.showSpecialInput.set(true);
+            this.specialInputValue.set(favorite.value || '');
+        }
+        else {
+            this.specialSyntaxType.set(null);
+            this.showSpecialInput.set(false);
+            this.specialInputValue.set('');
+        }
+        if (!templateId) {
+            this.findTemplatesForColumnName(favorite.name).then(templates => {
+                const matchingTemplate = templates.find(t => t.columnName === favorite.name && t.columnType === favorite.type);
+                if (matchingTemplate?.id) {
+                    this.editForm.patchValue({
+                        templateId: matchingTemplate.id,
+                        ontologyType: matchingTemplate.ontologyType || '',
+                        enableTypeahead: matchingTemplate.enableTypeahead || false
+                    });
+                }
+            });
+        }
+    }
+    saveFavorite() {
+        if (this.editForm.invalid)
+            return;
+        const formValue = this.editForm.value;
+        let value = this.selectedOntologyValue || formValue.value;
+        if (typeof value === 'object' && value !== null) {
+            value = value.value || value.displayName || String(value);
+        }
+        const favoriteData = {
+            name: formValue.name,
+            type: formValue.type,
+            columnTemplate: formValue.templateId || undefined,
+            value: value,
+            displayValue: formValue.displayValue || value,
+            isGlobal: formValue.scope === 'global',
+            user: formValue.scope === 'personal' ? this.currentUserId() || undefined : undefined,
+            labGroup: formValue.scope === 'labGroup' ? formValue.labGroupId || this.userLabGroups()[0]?.id : undefined
+        };
+        const operation = this.isEditMode()
+            ? this.favouriteMetadataOptionService.updateFavouriteMetadataOption(this.editingFavorite().id, favoriteData)
+            : this.favouriteMetadataOptionService.createFavouriteMetadataOption(favoriteData);
+        operation.subscribe({
+            next: (favorite) => {
+                const action = this.isEditMode() ? 'updated' : 'created';
+                this.toastService.success(`Favorite ${action} successfully!`);
+                this.loadFavorites();
+                this.closeEditModal();
+            },
+            error: (error) => {
+                console.error('Error saving favorite:', error);
+                const action = this.isEditMode() ? 'updating' : 'creating';
+                this.toastService.error(`Failed ${action} favorite`);
+            }
+        });
+    }
+    deleteFavorite(favorite) {
+        if (!this.canDeleteFavorite(favorite))
+            return;
+        const confirmMessage = `Are you sure you want to delete the favorite "${favorite.displayValue || favorite.value}"?`;
+        if (confirm(confirmMessage)) {
+            this.favouriteMetadataOptionService.deleteFavouriteMetadataOption(favorite.id).subscribe({
+                next: () => {
+                    this.toastService.success('Favorite deleted successfully!');
+                    this.loadFavorites();
+                },
+                error: (error) => {
+                    console.error('Error deleting favorite:', error);
+                    this.toastService.error('Failed to delete favorite');
+                }
+            });
+        }
+    }
+    closeEditModal() {
+        this.isEditMode.set(false);
+        this.editingFavorite.set(null);
+        this.showEditModal.set(false);
+        this.selectedOntologyValue = null; // Clear stored ontology value
+    }
+    onPageChange(page) {
+        this.currentPage.set(page);
+        this.loadFavorites();
+    }
+    onPageSizeChange(size) {
+        this.pageSize.set(size);
+        this.currentPage.set(1);
+        this.loadFavorites();
+    }
+    clearFilters() {
+        this.searchForm.reset();
+        this.searchTerm.set('');
+        this.scopeFilter.set('');
+        this.labGroupFilter.set('');
+        this.columnTypeFilter.set('');
+        this.currentPage.set(1);
+    }
+    getScopeDisplay(favorite) {
+        if (favorite.isGlobal)
+            return 'Global';
+        if (favorite.labGroup)
+            return `Lab Group: ${favorite.labGroupName || favorite.labGroup}`;
+        if (favorite.user)
+            return `Personal (${favorite.userUsername || favorite.user})`;
+        return 'Unknown';
+    }
+    getScopeClass(favorite) {
+        if (favorite.isGlobal)
+            return 'badge bg-success';
+        if (favorite.labGroup)
+            return 'badge bg-info';
+        if (favorite.user)
+            return 'badge bg-primary';
+        return 'badge bg-secondary';
+    }
+    get editModalTitle() {
+        return this.isEditMode() ? 'Edit Favorite' : 'Create New Favorite';
+    }
+    loadUserLabGroups() {
+        this.labGroupService.getMyLabGroups({ limit: 10 }).subscribe({
+            next: (response) => {
+                this.userLabGroups.set(response.results);
+                const labGroups = response.results.map(group => ({
+                    id: group.id,
+                    name: group.name
+                }));
+                this.availableLabGroups.set(labGroups);
+                this.userLabGroupsLoaded.set(true);
+                this.loadFavorites();
+            },
+            error: (error) => {
+                console.error('Error loading user lab groups:', error);
+                this.userLabGroups.set([]);
+                this.availableLabGroups.set([]);
+                this.userLabGroupsLoaded.set(true);
+                this.loadFavorites();
+            }
+        });
+        this.labGroupService.getLabGroups({ limit: 10 }).subscribe({
+            next: (response) => {
+                const allLabGroups = response.results.map(group => ({
+                    id: group.id,
+                    name: group.name
+                }));
+                this.allLabGroups.set(allLabGroups);
+                if (this.isAdmin()) {
+                    this.availableLabGroups.set(allLabGroups);
+                }
+            },
+            error: (error) => {
+                console.error('Error loading all lab groups:', error);
+            }
+        });
+    }
+    loadAvailableColumnTemplates() {
+        this.metadataColumnTemplateService.getMetadataColumnTemplates({ limit: 10 }).subscribe({
+            next: (response) => {
+                this.availableColumnTemplates.set(response.results);
+                this.columnTemplatesLoaded.set(true);
+            },
+            error: (error) => {
+                console.error('Error loading column templates:', error);
+                this.availableColumnTemplates.set([]);
+                this.columnTemplatesLoaded.set(true);
+            }
+        });
+    }
+    searchColumnNames = (text$) => text$.pipe(debounceTime(200), distinctUntilChanged(), switchMap$1(term => {
+        if (term.length === 0) {
+            return of(this.getColumnNameSuggestions(''));
+        }
+        else if (term.length >= 1) {
+            return this.metadataColumnTemplateService.getMetadataColumnTemplates({
+                search: term,
+                limit: 10
+            }).pipe(map$1(response => {
+                const uniqueNames = [...new Set(response.results.map((template) => template.columnName))];
+                return uniqueNames.sort();
+            }), catchError(() => {
+                return of(this.getColumnNameSuggestions(term));
+            }));
+        }
+        else {
+            return of([]);
+        }
+    }));
+    getColumnNameSuggestions(term) {
+        const templates = this.availableColumnTemplates();
+        const uniqueNames = [...new Set(templates.map(template => template.columnName))];
+        if (!term) {
+            return uniqueNames.sort().slice(0, 10);
+        }
+        return uniqueNames
+            .filter(name => name.toLowerCase().includes(term.toLowerCase()))
+            .sort()
+            .slice(0, 10);
+    }
+    searchColumnTypes = (text$) => text$.pipe(debounceTime(200), distinctUntilChanged(), filter(term => term.length >= 1), map$1(term => this.getColumnTypeSuggestions(term)));
+    getColumnTypeSuggestions(term) {
+        const selectedName = this.editForm.get('name')?.value;
+        const templates = this.availableColumnTemplates();
+        let availableTypes;
+        if (selectedName) {
+            availableTypes = templates
+                .filter(template => template.columnName === selectedName)
+                .map(template => template.columnType);
+        }
+        else {
+            availableTypes = [...new Set(templates.map(template => template.columnType))];
+        }
+        return availableTypes
+            .filter(type => type.toLowerCase().includes(term.toLowerCase()))
+            .sort()
+            .slice(0, 10);
+    }
+    onColumnNameSelected(event) {
+        const selectedName = event.item || event;
+        if (typeof selectedName === 'string') {
+            this.editForm.patchValue({ name: selectedName });
+            this.findTemplatesForColumnName(selectedName).then(templatesForName => {
+                if (templatesForName.length > 0) {
+                    const currentType = this.editForm.get('type')?.value;
+                    const typesForName = templatesForName.map(template => template.columnType);
+                    if (!currentType || !typesForName.includes(currentType)) {
+                        const firstTemplate = templatesForName[0];
+                        this.editForm.patchValue({
+                            type: firstTemplate.columnType,
+                            templateId: firstTemplate.id,
+                            ontologyType: firstTemplate.ontologyType || '',
+                            enableTypeahead: firstTemplate.enableTypeahead || false
+                        });
+                    }
+                    else {
+                        const matchingTemplate = templatesForName.find(t => t.columnType === currentType);
+                        if (matchingTemplate) {
+                            this.editForm.patchValue({
+                                templateId: matchingTemplate.id,
+                                ontologyType: matchingTemplate.ontologyType || '',
+                                enableTypeahead: matchingTemplate.enableTypeahead || false
+                            });
+                        }
+                        else {
+                            this.editForm.patchValue({
+                                templateId: null,
+                                ontologyType: '',
+                                enableTypeahead: false
+                            });
+                        }
+                    }
+                }
+                else {
+                    this.editForm.patchValue({
+                        templateId: null,
+                        ontologyType: '',
+                        enableTypeahead: false
+                    });
+                }
+                this.checkForSpecialSyntax();
+            });
+        }
+    }
+    async findTemplatesForColumnName(columnName) {
+        const cached = this.availableColumnTemplates();
+        const cachedMatches = cached.filter(template => template.columnName === columnName);
+        if (cachedMatches.length > 0) {
+            return cachedMatches;
+        }
+        try {
+            const response = await firstValueFrom(this.metadataColumnTemplateService.getMetadataColumnTemplates({
+                search: columnName,
+                limit: 10
+            }));
+            if (response) {
+                const exactMatches = response.results.filter((template) => template.columnName === columnName);
+                return exactMatches;
+            }
+        }
+        catch (error) {
+            console.warn('Failed to fetch templates for column name:', columnName, error);
+        }
+        return [];
+    }
+    onColumnTypeSelected(event) {
+        const selectedType = event.item || event;
+        if (typeof selectedType === 'string') {
+            this.editForm.patchValue({ type: selectedType });
+            const selectedName = this.editForm.get('name')?.value;
+            if (selectedName) {
+                const templates = this.availableColumnTemplates();
+                const matchingTemplate = templates.find(template => template.columnName === selectedName && template.columnType === selectedType);
+                if (matchingTemplate && matchingTemplate.id) {
+                    this.editForm.patchValue({
+                        templateId: matchingTemplate.id,
+                        ontologyType: matchingTemplate.ontologyType || '',
+                        enableTypeahead: matchingTemplate.enableTypeahead || false
+                    });
+                }
+                else {
+                    this.editForm.patchValue({
+                        templateId: null,
+                        ontologyType: '',
+                        enableTypeahead: false
+                    });
+                }
+            }
+            this.checkForSpecialSyntax();
+        }
+    }
+    openValueEditModal() {
+        const formValue = this.editForm.value;
+        const config = {
+            columnName: formValue.name || 'Column',
+            columnType: formValue.type || '',
+            ontologyType: formValue.ontologyType || '',
+            enableTypeahead: formValue.enableTypeahead || false,
+            currentValue: formValue.value || '',
+            context: 'favorite_management',
+            templateId: formValue.templateId || undefined
+        };
+        const modalRef = this.modalService.open(MetadataValueEditModal, {
+            size: 'lg',
+            backdrop: 'static'
+        });
+        modalRef.componentInstance.config = config;
+        modalRef.componentInstance.valueSaved.subscribe((result) => {
+            const newValue = typeof result === 'string' ? result : result.value;
+            this.editForm.get('value')?.setValue(newValue);
+            this.editForm.get('value')?.markAsTouched();
+            this.selectedOntologyValue = newValue;
+            modalRef.componentInstance.onClose();
+        });
+    }
+    searchLabGroups = (text$) => text$.pipe(debounceTime(200), distinctUntilChanged(), switchMap$1(term => {
+        if (term.length === 0) {
+            return of(this.availableLabGroups().slice(0, 10));
+        }
+        else if (term.length >= 1) {
+            return this.labGroupService.getLabGroups({
+                search: term,
+                limit: 10
+            }).pipe(map$1(response => response.results.map(group => ({
+                id: group.id,
+                name: group.name
+            }))), catchError(() => {
+                return of(this.getLabGroupSuggestions(term));
+            }));
+        }
+        else {
+            return of([]);
+        }
+    }));
+    getLabGroupSuggestions(term) {
+        const allGroups = this.allLabGroups();
+        if (!term) {
+            return allGroups.slice(0, 10);
+        }
+        return allGroups
+            .filter(group => group.name.toLowerCase().includes(term.toLowerCase()))
+            .slice(0, 10);
+    }
+    formatLabGroup = (group) => {
+        return group.name;
+    };
+    inputLabGroupFormatter = (group) => {
+        return group.name;
+    };
+    onLabGroupSelected = (event) => {
+        const selectedGroup = event.item;
+        if (selectedGroup && selectedGroup.id) {
+            this.searchForm.patchValue({ labGroup: selectedGroup.id.toString() });
+        }
+    };
+    getCleanColumnName(name) {
+        if (!name)
+            return '';
+        const bracketMatch = name.match(/\[(.+?)\]/);
+        if (bracketMatch) {
+            return bracketMatch[1];
+        }
+        return name;
+    }
+    getCleanColumnType(type) {
+        if (!type)
+            return '';
+        const cleanType = type.replace(/\[.*?\]/g, '').trim();
+        return cleanType.charAt(0).toUpperCase() + cleanType.slice(1);
+    }
+    isComplexValue(value) {
+        if (!value)
+            return false;
+        const sdrfPattern = /^[A-Z]{2,3}=[^;]+(?:;[A-Z]{2,3}=[^;]+)+$/;
+        const keyValuePattern = /\w+[:=][^;,]+[;,]\w+[:=]/;
+        return sdrfPattern.test(value) || keyValuePattern.test(value);
+    }
+    parseComplexValue(value) {
+        if (!value)
+            return [];
+        const pairs = [];
+        if (value.includes('=') && value.includes(';')) {
+            const parts = value.split(';');
+            parts.forEach(part => {
+                const [key, val] = part.split('=', 2);
+                if (key && val) {
+                    pairs.push({
+                        key: key.trim(),
+                        value: val.trim()
+                    });
+                }
+            });
+        }
+        else if (value.includes(':') && (value.includes(';') || value.includes(','))) {
+            const separator = value.includes(';') ? ';' : ',';
+            const parts = value.split(separator);
+            parts.forEach(part => {
+                const [key, val] = part.split(':', 2);
+                if (key && val) {
+                    pairs.push({
+                        key: key.trim(),
+                        value: val.trim()
+                    });
+                }
+            });
+        }
+        return pairs;
+    }
+    checkForSpecialSyntax() {
+        const columnName = this.editForm.get('name')?.value;
+        const columnType = this.editForm.get('type')?.value;
+        if (columnName && columnType) {
+            const syntaxType = this.sdrfSyntaxService.detectSpecialSyntax(columnName, columnType);
+            this.specialSyntaxType.set(syntaxType);
+            if (syntaxType) {
+                this.showSpecialInput.set(true);
+                const currentValue = this.editForm.get('value')?.value;
+                this.specialInputValue.set(currentValue || '');
+                // Clear ontology value when switching to enhanced editor
+                this.selectedOntologyValue = null;
+            }
+            else {
+                this.showSpecialInput.set(false);
+                this.specialInputValue.set('');
+            }
+        }
+        else {
+            this.specialSyntaxType.set(null);
+            this.showSpecialInput.set(false);
+            this.specialInputValue.set('');
+        }
+    }
+    onSpecialInputChange(value) {
+        this.specialInputValue.set(value);
+        // When enhanced editor provides a value, clear the ontology value storage
+        // because the enhanced editor is providing the final string value
+        this.selectedOntologyValue = null;
+        this.editForm.patchValue({ value });
+    }
+    toggleSpecialInput() {
+        this.showSpecialInput.set(!this.showSpecialInput());
+        if (!this.showSpecialInput()) {
+            // Switching to normal input, sync the current value
+            // Clear ontology value when switching back to regular input
+            this.selectedOntologyValue = null;
+            this.editForm.patchValue({ value: this.specialInputValue() });
+        }
+        else {
+            // Switching to special input, clear ontology value
+            this.selectedOntologyValue = null;
+        }
+    }
+    getSpecialInputTitle() {
+        const syntaxType = this.specialSyntaxType();
+        switch (syntaxType) {
+            case 'age': return 'Age Format Editor';
+            case 'modification': return 'Modification Parameters Editor';
+            case 'cleavage': return 'Cleavage Agent Editor';
+            case 'spiked_compound': return 'Spiked Compound Editor';
+            default: return 'Special Format Editor';
+        }
+    }
+    getColumnTypeClass(favouriteOption) {
+        const type = favouriteOption.type?.toLowerCase() || '';
+        if (type.includes(ColumnType.CHARACTERISTICS))
+            return 'text-primary';
+        if (type.includes(ColumnType.FACTOR_VALUE.replace('_', ' ')))
+            return 'text-success';
+        if (type.includes(ColumnType.COMMENT))
+            return 'text-info';
+        if (type.includes(ColumnType.SOURCE_NAME.replace('_', ' ')))
+            return 'text-warning';
+        if (type === ColumnType.SPECIAL)
+            return 'text-danger';
+        return 'text-muted';
+    }
+    getColumnTypeIcon(favouriteMetadataOption) {
+        const type = favouriteMetadataOption.type?.toLowerCase() || '';
+        if (type.includes(ColumnType.CHARACTERISTICS))
+            return 'bi-tags';
+        if (type.includes(ColumnType.FACTOR_VALUE.replace('_', ' ')))
+            return 'bi-sliders';
+        if (type.includes(ColumnType.COMMENT))
+            return 'bi-chat-left-text';
+        if (type.includes(ColumnType.SOURCE_NAME.replace('_', ' ')))
+            return 'bi-diagram-3';
+        if (type === ColumnType.SPECIAL)
+            return 'bi-star';
+        return 'bi-circle';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", 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.3", 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.3", ngImport: i0, type: FavoriteManagement, decorators: [{
+            type: Component,
+            args: [{ selector: 'ccv-favorite-management', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        RouterModule,
+                        NgbModule,
+                        NgbTypeahead
+                    ], 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" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: FavouriteMetadataOptionService }, { type: MetadataColumnTemplateService }, { type: i3.LabGroupService }, { type: i3.ToastService }, { type: i2.NgbModal }, { type: i3.AuthService }] });
+
 class CupcakeVanilla {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: CupcakeVanilla, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: CupcakeVanilla, isStandalone: true, selector: "ccv-cupcake-vanilla", ngImport: i0, template: `
@@ -6069,5 +7430,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AdminWebSocketService, AsyncExportService, AsyncImportService, AsyncTaskService, AsyncTaskUIService, AsyncValidationService, COLUMN_TYPE_CONFIGS, ChunkedImportService, ChunkedUploadService, ColumnEditModal, ColumnType, CupcakeVanilla, ElectronService, ExcelExportModalComponent, FavouriteMetadataOptionService, MSTermType, MetadataColumnService, MetadataColumnTemplateService, MetadataColumnTemplateShareService, MetadataManagementService, MetadataTableEditModal, MetadataTableService, MetadataTableTemplateEditModal, MetadataTableTemplateService, MetadataTableTemplates, MetadataValidationModal, MetadataValueEditModal, NotificationService, NotificationType, OFFICIAL_SDRF_COLUMNS, ONTOLOGY_TYPE_CONFIGS, OntologySearchService, OntologyType, OntologyTypeLabels, OntologyUtils, SDRFDefaultsService, SamplePoolService, SchemaSelectionModal, SchemaService, SdrfAgeInput, SdrfCleavageInput, SdrfColumnCategory, SdrfModificationInput, SdrfSpikedCompoundInput, SdrfSyntaxService, TASK_STATUS_COLORS, TASK_STATUS_LABELS, TASK_TYPE_LABELS, TableCreationModalComponent, TemplatePermissionLabels, TemplatePermissionLevel, TemplateSchemaSelectionModal, ValidationResultsModal, Websocket, getRequiredSdrfColumns, getSdrfColumnByName, getSdrfColumnsByCategory, isSdrfColumnRequired, isUnimodFullData };
+export { AdminWebSocketService, AsyncExportService, AsyncImportService, AsyncTaskService, AsyncTaskUIService, AsyncValidationService, COLUMN_TYPE_CONFIGS, ChunkedImportService, ChunkedUploadService, ColumnEditModal, ColumnTemplateEditModal, ColumnTemplates, ColumnType, CupcakeVanilla, ElectronService, ExcelExportModalComponent, FavoriteManagement, FavouriteMetadataOptionService, MSTermType, MetadataColumnService, MetadataColumnTemplateService, MetadataColumnTemplateShareService, MetadataManagementService, MetadataTableEditModal, MetadataTableService, MetadataTableTemplateEditModal, MetadataTableTemplateService, MetadataTableTemplates, MetadataValidationModal, MetadataValueEditModal, NotificationService, NotificationType, OFFICIAL_SDRF_COLUMNS, ONTOLOGY_TYPE_CONFIGS, OntologySearchService, OntologyType, OntologyTypeLabels, OntologyUtils, SDRFDefaultsService, SamplePoolService, SchemaSelectionModal, SchemaService, SdrfAgeInput, SdrfCleavageInput, SdrfColumnCategory, SdrfModificationInput, SdrfSpikedCompoundInput, SdrfSyntaxService, TASK_STATUS_COLORS, TASK_STATUS_LABELS, TASK_TYPE_LABELS, TableCreationModalComponent, TemplatePermissionLabels, TemplatePermissionLevel, TemplateSchemaSelectionModal, ValidationResultsModal, Websocket, getRequiredSdrfColumns, getSdrfColumnByName, getSdrfColumnsByCategory, isSdrfColumnRequired, isUnimodFullData };
 //# sourceMappingURL=noatgnu-cupcake-vanilla.mjs.map