@noatgnu/cupcake-vanilla 1.2.12 → 1.2.13

package/fesm2022/noatgnu-cupcake-vanilla.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Injectable, signal, computed, EventEmitter, inject, Output, Input, Component, effect } from '@angular/core';
+import { Injectable, signal, computed, EventEmitter, inject, Output, Input, Component, effect, ViewChild } from '@angular/core';
 import * as i3 from '@noatgnu/cupcake-core';
 import { BaseApiService, WebSocketService, NotificationService as NotificationService$1, LabGroupService, ToastService, ResourceVisibility } from '@noatgnu/cupcake-core';
 import { switchMap, map, tap, takeUntil, filter as filter$1 } from 'rxjs/operators';
-import { from, Observable, throwError, NEVER, debounceTime, distinctUntilChanged, filter, switchMap as switchMap$1, map as map$1, catchError, of, tap as tap$1, Subject, BehaviorSubject, firstValueFrom } 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, takeUntil as takeUntil$1 } from 'rxjs';
 import jsSHA from 'jssha';
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -13,6 +13,7 @@ import * as i2 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 * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 
 var OntologyType;
@@ -657,6 +658,12 @@ class MetadataTableService extends BaseApiService {
             confirmed
         });
     }
+    /**
+     * Replace all occurrences of a specific value across columns in this table
+     */
+    replaceColumnValue(id, request) {
+        return this.post(`${this.apiUrl}/metadata-tables/${id}/replace_column_value/`, request);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataTableService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataTableService, providedIn: 'root' });
 }
@@ -749,6 +756,12 @@ class MetadataColumnService extends BaseApiService {
         const httpParams = this.buildHttpParams(params);
         return this.get(`${this.apiUrl}/metadata-columns/detect_ontology_type/`, { params: httpParams });
     }
+    /**
+     * Replace all occurrences of a specific value with a new value in this column
+     */
+    replaceValue(id, request) {
+        return this.post(`${this.apiUrl}/metadata-columns/${id}/replace_value/`, request);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataColumnService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataColumnService, providedIn: 'root' });
 }
@@ -3447,7 +3460,12 @@ class MetadataValueEditModal {
     clearValue() {
         this.editForm.get('value')?.setValue('');
         this.editForm.get('value')?.markAsTouched();
-        this.selectedFavorite.set(null); // Clear selected favorite when manually clearing
+        this.selectedFavorite.set(null);
+    }
+    setValue(value) {
+        this.editForm.get('value')?.setValue(value);
+        this.editForm.get('value')?.markAsTouched();
+        this.selectedFavorite.set(null);
     }
     // Favorite options methods
     loadFavoriteOptions() {
@@ -3717,7 +3735,7 @@ class MetadataValueEditModal {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataValueEditModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }, { token: i3.AuthService }, { token: FavouriteMetadataOptionService }, { token: MetadataColumnService }, { token: MetadataColumnTemplateService }, { token: i3.LabGroupService }, { token: OntologySearchService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MetadataValueEditModal, isStandalone: true, selector: "ccv-metadata-value-edit-modal", inputs: { config: "config" }, outputs: { valueSaved: "valueSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-pencil-square me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <div class=\"row\">\n    <!-- Main Content -->\n    <div [class]=\"hasMultiSampleEdit ? 'col-md-8' : 'col-12'\">\n      <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Column Information -->\n    <div class=\"mb-3\">\n      <div class=\"row\">\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">Column Name:</small>\n          <div class=\"fw-semibold\">{{ config.columnName }}</div>\n        </div>\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">Column Type:</small>\n          <div><span class=\"badge bg-light text-dark\">{{ config.columnType }}</span></div>\n        </div>\n      </div>\n      @if (hasOntologyType) {\n        <div class=\"mt-2\">\n          <small class=\"text-muted\">Ontology Type:</small>\n          <div><span class=\"badge bg-info\">{{ ontologyTypeLabel }}</span></div>\n        </div>\n      }\n    </div>\n\n    <hr class=\"mb-4\">\n\n    <!-- Favorite Options Section -->\n    @if (hasFavorites && !isLoadingFavorites()) {\n      <div class=\"mb-4\">\n        <h6 class=\"text-muted mb-3\">\n          <i class=\"bi bi-heart-fill me-2 text-danger\"></i>Recommended Values\n        </h6>\n\n        <!-- Favorites Navigation Tabs -->\n        <ul ngbNav #favoritesNav=\"ngbNav\" [(activeId)]=\"activeFavoritesTab\" class=\"nav-tabs\">\n          @if (userFavorites().length > 0) {\n            <li [ngbNavItem]=\"'user'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-person-fill me-1\"></i>Your Favorites\n                <span class=\"badge bg-primary ms-1\">{{ userFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, userFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of userFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Your personal favorite values for this column\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n\n          @if (labGroupFavorites().length > 0) {\n            <li [ngbNavItem]=\"'lab_group'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-people-fill me-1\"></i>Lab Group\n                <span class=\"badge bg-info ms-1\">{{ labGroupFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, labGroupFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of labGroupFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Favorite values shared by your lab group\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n\n          @if (globalFavorites().length > 0) {\n            <li [ngbNavItem]=\"'global'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-globe me-1\"></i>Global\n                <span class=\"badge bg-success ms-1\">{{ globalFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, globalFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of globalFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Globally recommended values for this column\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n        </ul>\n\n        <div [ngbNavOutlet]=\"favoritesNav\" class=\"mt-3\"></div>\n\n        <hr class=\"my-3\">\n      </div>\n    }\n\n    @if (isLoadingFavorites()) {\n      <div class=\"text-center mb-4\">\n        <div class=\"spinner-border spinner-border-sm text-primary me-2\"></div>\n        <small class=\"text-muted\">Loading favorite options...</small>\n      </div>\n      <hr class=\"my-3\">\n    }\n\n    <!-- Value Input Section -->\n    <div class=\"mb-3\">\n      <div class=\"d-flex justify-content-between align-items-center mb-2\">\n        <label for=\"metadataValue\" class=\"form-label mb-0\">\n          Metadata Value\n          @if (hasOntologyType) {\n            <span class=\"badge bg-success ms-2\">\n              <i class=\"bi bi-search me-1\"></i>Autocomplete Available\n            </span>\n          }\n          @if (specialSyntaxType()) {\n            <span class=\"badge bg-info ms-2\">\n              <i class=\"bi bi-gear me-1\"></i>{{ getSpecialInputTitle() }}\n            </span>\n          }\n        </label>\n\n        @if (specialSyntaxType()) {\n          <div class=\"form-check form-switch\">\n            <input\n              class=\"form-check-input\"\n              type=\"checkbox\"\n              id=\"specialInputToggle\"\n              [checked]=\"showSpecialInput()\"\n              (change)=\"toggleSpecialInput()\">\n            <label class=\"form-check-label small text-muted\" for=\"specialInputToggle\">\n              Enhanced Editor\n            </label>\n          </div>\n        }\n      </div>\n\n      <!-- 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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MetadataValueEditModal, isStandalone: true, selector: "ccv-metadata-value-edit-modal", inputs: { config: "config" }, outputs: { valueSaved: "valueSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-pencil-square me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <div class=\"row\">\n    <!-- Main Content -->\n    <div [class]=\"hasMultiSampleEdit ? 'col-md-8' : 'col-12'\">\n      <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Column Information -->\n    <div class=\"mb-3\">\n      <div class=\"row\">\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">Column Name:</small>\n          <div class=\"fw-semibold\">{{ config.columnName }}</div>\n        </div>\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">Column Type:</small>\n          <div><span class=\"badge bg-light text-dark\">{{ config.columnType }}</span></div>\n        </div>\n      </div>\n      @if (hasOntologyType) {\n        <div class=\"mt-2\">\n          <small class=\"text-muted\">Ontology Type:</small>\n          <div><span class=\"badge bg-info\">{{ ontologyTypeLabel }}</span></div>\n        </div>\n      }\n    </div>\n\n    <hr class=\"mb-4\">\n\n    <!-- Favorite Options Section -->\n    @if (hasFavorites && !isLoadingFavorites()) {\n      <div class=\"mb-4\">\n        <h6 class=\"text-muted mb-3\">\n          <i class=\"bi bi-heart-fill me-2 text-danger\"></i>Recommended Values\n        </h6>\n\n        <!-- Favorites Navigation Tabs -->\n        <ul ngbNav #favoritesNav=\"ngbNav\" [(activeId)]=\"activeFavoritesTab\" class=\"nav-tabs\">\n          @if (userFavorites().length > 0) {\n            <li [ngbNavItem]=\"'user'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-person-fill me-1\"></i>Your Favorites\n                <span class=\"badge bg-primary ms-1\">{{ userFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, userFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of userFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Your personal favorite values for this column\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n\n          @if (labGroupFavorites().length > 0) {\n            <li [ngbNavItem]=\"'lab_group'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-people-fill me-1\"></i>Lab Group\n                <span class=\"badge bg-info ms-1\">{{ labGroupFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, labGroupFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of labGroupFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Favorite values shared by your lab group\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n\n          @if (globalFavorites().length > 0) {\n            <li [ngbNavItem]=\"'global'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-globe me-1\"></i>Global\n                <span class=\"badge bg-success ms-1\">{{ globalFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, globalFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of globalFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Globally recommended values for this column\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n        </ul>\n\n        <div [ngbNavOutlet]=\"favoritesNav\" class=\"mt-3\"></div>\n\n        <hr class=\"my-3\">\n      </div>\n    }\n\n    @if (isLoadingFavorites()) {\n      <div class=\"text-center mb-4\">\n        <div class=\"spinner-border spinner-border-sm text-primary me-2\"></div>\n        <small class=\"text-muted\">Loading favorite options...</small>\n      </div>\n      <hr class=\"my-3\">\n    }\n\n    <!-- Value Input Section -->\n    <div class=\"mb-3\">\n      <div class=\"d-flex justify-content-between align-items-center mb-2\">\n        <label for=\"metadataValue\" class=\"form-label mb-0\">\n          Metadata Value\n          @if (hasOntologyType) {\n            <span class=\"badge bg-success ms-2\">\n              <i class=\"bi bi-search me-1\"></i>Autocomplete Available\n            </span>\n          }\n          @if (specialSyntaxType()) {\n            <span class=\"badge bg-info ms-2\">\n              <i class=\"bi bi-gear me-1\"></i>{{ getSpecialInputTitle() }}\n            </span>\n          }\n        </label>\n\n        @if (specialSyntaxType()) {\n          <div class=\"form-check form-switch\">\n            <input\n              class=\"form-check-input\"\n              type=\"checkbox\"\n              id=\"specialInputToggle\"\n              [checked]=\"showSpecialInput()\"\n              (change)=\"toggleSpecialInput()\">\n            <label class=\"form-check-label small text-muted\" for=\"specialInputToggle\">\n              Enhanced Editor\n            </label>\n          </div>\n        }\n      </div>\n\n      <!-- Quick-select buttons for standard values -->\n      @if (config.allowNotApplicable || config.allowNotAvailable) {\n        <div class=\"mb-2\">\n          <small class=\"text-muted d-block mb-1\">Quick Select:</small>\n          <div class=\"btn-group btn-group-sm\" role=\"group\">\n            @if (config.allowNotApplicable) {\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-secondary\"\n                (click)=\"setValue('not applicable')\">\n                <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n              </button>\n            }\n            @if (config.allowNotAvailable) {\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-secondary\"\n                (click)=\"setValue('not available')\">\n                <i class=\"bi bi-question-circle me-1\"></i>Not Available\n              </button>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Special SDRF Syntax Input Components -->\n      @if (showSpecialInput() && specialSyntaxType()) {\n        <div class=\"border rounded p-3 mb-3 bg-body-secondary\">\n          <div class=\"mb-2\">\n            <small class=\"text-muted fw-semibold\">\n              <i class=\"bi bi-gear me-1\"></i>{{ getSpecialInputTitle() }}\n            </small>\n          </div>\n\n          @switch (specialSyntaxType()) {\n            @case ('age') {\n              <ccv-sdrf-age-input\n                [value]=\"specialInputValue()\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-age-input>\n            }\n            @case ('modification') {\n              <ccv-sdrf-modification-input\n                [value]=\"specialInputValue()\"\n                [columnId]=\"config.columnId ?? null\"\n                [templateId]=\"config.templateId ?? null\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-modification-input>\n            }\n            @case ('cleavage') {\n              <ccv-sdrf-cleavage-input\n                [value]=\"specialInputValue()\"\n                [columnId]=\"config.columnId ?? null\"\n                [templateId]=\"config.templateId ?? null\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-cleavage-input>\n            }\n            @case ('spiked_compound') {\n              <ccv-sdrf-spiked-compound-input\n                [value]=\"specialInputValue()\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-spiked-compound-input>\n            }\n          }\n\n          <div class=\"form-text mt-2\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Use the enhanced editor for structured input, or toggle off for manual text entry.\n          </div>\n        </div>\n      }\n\n      @if (hasOntologyType && !showSpecialInput()) {\n        <!-- Search type selection for ontology -->\n        <div class=\"mb-2\">\n          <small class=\"text-muted d-block mb-1\">Search Mode:</small>\n          <div class=\"btn-group btn-group-sm\" role=\"group\">\n            <button\n              type=\"button\"\n              class=\"btn\"\n              [class]=\"searchType() === 'icontains' ? 'btn-primary' : 'btn-outline-primary'\"\n              (click)=\"onSearchTypeChange('icontains')\">\n              <i class=\"bi bi-search me-1\"></i>Contains\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn\"\n              [class]=\"searchType() === 'istartswith' ? 'btn-primary' : 'btn-outline-primary'\"\n              (click)=\"onSearchTypeChange('istartswith')\">\n              <i class=\"bi bi-arrow-right me-1\"></i>Starts with\n            </button>\n          </div>\n        </div>\n\n        <!-- Typeahead input for ontology suggestions -->\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            [class.border-success]=\"selectedFavorite() !== null\"\n            id=\"metadataValue\"\n            formControlName=\"value\"\n            placeholder=\"Type to search ontology suggestions...\"\n            [ngbTypeahead]=\"searchOntology\"\n            [resultFormatter]=\"formatSuggestion\"\n            [inputFormatter]=\"inputFormatter\"\n            (selectItem)=\"onSuggestionSelected($event)\"\n            [editable]=\"true\"\n            [showHint]=\"true\"\n            [focusFirst]=\"false\"\n            container=\"body\">\n          @if (isLoadingSuggestions()) {\n            <span class=\"input-group-text\">\n              <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n              </div>\n            </span>\n          } @else {\n            <span class=\"input-group-text\">\n              <i class=\"bi bi-search text-muted\"></i>\n            </span>\n          }\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary\"\n            (click)=\"clearValue()\"\n            title=\"Clear value\">\n            <i class=\"bi bi-x\"></i>\n          </button>\n        </div>\n        <div class=\"form-text\">\n          <i class=\"bi bi-info-circle me-1\"></i>\n          Search {{ searchType() === 'icontains' ? 'contains' : 'starts with' }} for {{ ontologyTypeLabel }} ontology\n        </div>\n      } @else if (!showSpecialInput()) {\n        <!-- Regular input when no ontology type or special input is disabled -->\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            [class.border-success]=\"selectedFavorite() !== null\"\n            id=\"metadataValue\"\n            formControlName=\"value\"\n            placeholder=\"Enter metadata value\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary\"\n            (click)=\"clearValue()\"\n            title=\"Clear value\">\n            <i class=\"bi bi-x\"></i>\n          </button>\n        </div>\n        <div class=\"form-text text-muted\">\n          @if (specialSyntaxType()) {\n            Manual text entry mode. Use the Enhanced Editor toggle for structured {{ specialSyntaxType() }} input.\n          } @else {\n            Enter the value manually (no ontology suggestions available for this column type)\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Character count and value info -->\n    <div class=\"mb-3\">\n      <div class=\"d-flex justify-content-between align-items-center\">\n        <small class=\"text-muted\">\n          Characters: {{ editForm.get('value')?.value?.length || 0 }}/500\n        </small>\n        @if (getSelectedFavoriteInfo()) {\n          <small class=\"text-info\">\n            <i class=\"bi bi-info-circle me-1\"></i>{{ getSelectedFavoriteInfo() }}\n          </small>\n        }\n      </div>\n    </div>\n\n      </form>\n    </div>\n\n    <!-- Sample Selection Panel -->\n    @if (hasMultiSampleEdit) {\n      <div class=\"col-md-4\">\n        <div class=\"border-start ps-3\">\n          <div class=\"d-flex justify-content-between align-items-center mb-3\">\n            <h6 class=\"mb-0 text-muted\">\n              <i class=\"bi bi-list-check me-1\"></i>Apply to Samples\n            </h6>\n            <span class=\"badge bg-primary\">\n              {{ selectedSampleCount }}/{{ totalSampleCount }}\n            </span>\n          </div>\n\n          <!-- Select All/Clear All Controls -->\n          <div class=\"d-flex gap-1 mb-3\">\n            <button \n              type=\"button\" \n              class=\"btn btn-outline-primary btn-sm flex-fill\"\n              (click)=\"selectAllSamples()\"\n              [disabled]=\"selectedSampleCount === totalSampleCount\">\n              <i class=\"bi bi-check-all me-1\"></i>All\n            </button>\n            <button \n              type=\"button\" \n              class=\"btn btn-outline-secondary btn-sm flex-fill\"\n              (click)=\"clearSampleSelection()\"\n              [disabled]=\"selectedSampleCount === 0\">\n              <i class=\"bi bi-x me-1\"></i>Clear\n            </button>\n          </div>\n\n          <!-- Sample List -->\n          <div class=\"sample-list\" style=\"max-height: 400px; overflow-y: auto;\">\n            @for (sample of sampleData; track sample.index) {\n              <div class=\"form-check d-flex align-items-center mb-2 p-2 rounded border-bottom\">\n                <input \n                  class=\"form-check-input me-2\" \n                  type=\"checkbox\" \n                  [id]=\"'sample-' + sample.index\"\n                  [checked]=\"isSampleSelected(sample.index)\"\n                  (change)=\"toggleSampleSelection(sample.index)\">\n                <label \n                  [for]=\"'sample-' + sample.index\" \n                  class=\"form-check-label flex-grow-1 cursor-pointer\">\n                  <div class=\"d-flex justify-content-between align-items-center\">\n                    <div>\n                      <div class=\"fw-semibold\">Sample {{ sample.index }}</div>\n                      @if (sample.sourceName) {\n                        <small class=\"text-muted\">{{ sample.sourceName }}</small>\n                      }\n                    </div>\n                    <div class=\"text-end\">\n                      <small class=\"text-muted\">Current:</small>\n                      <div class=\"small fw-mono\" [title]=\"sample.value || ''\">\n                        {{ (sample.value && sample.value.length > 15) ? (sample.value | slice:0:15) + '...' : (sample.value || '-') }}\n                      </div>\n                    </div>\n                  </div>\n                </label>\n              </div>\n            }\n          </div>\n\n          @if (selectedSampleCount > 0) {\n            <div class=\"alert alert-info mt-3 p-2\">\n              <small>\n                <i class=\"bi bi-info-circle me-1\"></i>\n                The value will be applied to {{ selectedSampleCount }} selected sample{{ selectedSampleCount !== 1 ? 's' : '' }}.\n              </small>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n<div class=\"modal-footer\">\n  <div class=\"me-auto\">\n    @if (editForm.get('value')?.value && !isLoading() && !isFromFavoriteManagement) {\n      <div class=\"btn-group dropup\" ngbDropdown>\n        <button\n          type=\"button\"\n          class=\"btn btn-outline-warning btn-sm dropdown-toggle\"\n          ngbDropdownToggle>\n          <i class=\"bi bi-heart me-1\"></i>Add to Favorites\n        </button>\n        <div class=\"dropdown-menu\" ngbDropdownMenu>\n          <button\n            type=\"button\"\n            class=\"dropdown-item\"\n            (click)=\"addToFavorites('user')\">\n            <i class=\"bi bi-person me-2\"></i>Personal Favorite\n          </button>\n          <button\n            type=\"button\"\n            class=\"dropdown-item\"\n            (click)=\"addToFavorites('lab_group')\">\n            <i class=\"bi bi-people me-2\"></i>Lab Group Favorite\n          </button>\n          <button\n            type=\"button\"\n            class=\"dropdown-item\"\n            (click)=\"addToFavorites('global')\">\n            <i class=\"bi bi-globe me-2\"></i>Global Recommendation\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"d-flex gap-2\">\n    <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n      <i class=\"bi bi-x-circle me-1\"></i>Cancel\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      (click)=\"onSubmit()\"\n      [disabled]=\"editForm.invalid || isLoading()\">\n      @if (isLoading()) {\n        <span class=\"spinner-border spinner-border-sm me-2\"></span>\n      }\n      <i class=\"bi bi-check-circle me-1\"></i>\n      Save Value\n    </button>\n  </div>\n</div>\n", styles: [".sample-list .form-check{border:1px solid transparent;transition:all .2s ease}.sample-list .form-check:hover{background-color:rgba(var(--bs-primary-rgb),.05);border-color:rgba(var(--bs-primary-rgb),.2)}.sample-list .form-check .form-check-input:checked~.form-check-label .fw-semibold{color:var(--bs-primary)}.cursor-pointer{cursor:pointer}.fw-mono{font-family:var(--bs-font-monospace)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2.NgbNavLinkButton, selector: "button[ngbNavLink]" }, { kind: "directive", type: i2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "directive", type: i2.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "ngmodule", type: NgbNavModule }, { kind: "component", type: SdrfAgeInput, selector: "ccv-sdrf-age-input", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: SdrfModificationInput, selector: "ccv-sdrf-modification-input", inputs: ["value", "templateId", "columnId"], outputs: ["valueChange"] }, { kind: "component", type: SdrfCleavageInput, selector: "ccv-sdrf-cleavage-input", inputs: ["value", "templateId", "columnId"], outputs: ["valueChange"] }, { kind: "component", type: SdrfSpikedCompoundInput, selector: "ccv-sdrf-spiked-compound-input", inputs: ["value"], outputs: ["valueChange"] }, { kind: "pipe", type: i5.SlicePipe, name: "slice" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataValueEditModal, decorators: [{
             type: Component,
@@ -3730,7 +3748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         SdrfModificationInput,
                         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"] }]
+                    ], template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-pencil-square me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <div class=\"row\">\n    <!-- Main Content -->\n    <div [class]=\"hasMultiSampleEdit ? 'col-md-8' : 'col-12'\">\n      <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Column Information -->\n    <div class=\"mb-3\">\n      <div class=\"row\">\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">Column Name:</small>\n          <div class=\"fw-semibold\">{{ config.columnName }}</div>\n        </div>\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">Column Type:</small>\n          <div><span class=\"badge bg-light text-dark\">{{ config.columnType }}</span></div>\n        </div>\n      </div>\n      @if (hasOntologyType) {\n        <div class=\"mt-2\">\n          <small class=\"text-muted\">Ontology Type:</small>\n          <div><span class=\"badge bg-info\">{{ ontologyTypeLabel }}</span></div>\n        </div>\n      }\n    </div>\n\n    <hr class=\"mb-4\">\n\n    <!-- Favorite Options Section -->\n    @if (hasFavorites && !isLoadingFavorites()) {\n      <div class=\"mb-4\">\n        <h6 class=\"text-muted mb-3\">\n          <i class=\"bi bi-heart-fill me-2 text-danger\"></i>Recommended Values\n        </h6>\n\n        <!-- Favorites Navigation Tabs -->\n        <ul ngbNav #favoritesNav=\"ngbNav\" [(activeId)]=\"activeFavoritesTab\" class=\"nav-tabs\">\n          @if (userFavorites().length > 0) {\n            <li [ngbNavItem]=\"'user'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-person-fill me-1\"></i>Your Favorites\n                <span class=\"badge bg-primary ms-1\">{{ userFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, userFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of userFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Your personal favorite values for this column\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n\n          @if (labGroupFavorites().length > 0) {\n            <li [ngbNavItem]=\"'lab_group'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-people-fill me-1\"></i>Lab Group\n                <span class=\"badge bg-info ms-1\">{{ labGroupFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, labGroupFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of labGroupFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Favorite values shared by your lab group\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n\n          @if (globalFavorites().length > 0) {\n            <li [ngbNavItem]=\"'global'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-globe me-1\"></i>Global\n                <span class=\"badge bg-success ms-1\">{{ globalFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, globalFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of globalFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Globally recommended values for this column\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n        </ul>\n\n        <div [ngbNavOutlet]=\"favoritesNav\" class=\"mt-3\"></div>\n\n        <hr class=\"my-3\">\n      </div>\n    }\n\n    @if (isLoadingFavorites()) {\n      <div class=\"text-center mb-4\">\n        <div class=\"spinner-border spinner-border-sm text-primary me-2\"></div>\n        <small class=\"text-muted\">Loading favorite options...</small>\n      </div>\n      <hr class=\"my-3\">\n    }\n\n    <!-- Value Input Section -->\n    <div class=\"mb-3\">\n      <div class=\"d-flex justify-content-between align-items-center mb-2\">\n        <label for=\"metadataValue\" class=\"form-label mb-0\">\n          Metadata Value\n          @if (hasOntologyType) {\n            <span class=\"badge bg-success ms-2\">\n              <i class=\"bi bi-search me-1\"></i>Autocomplete Available\n            </span>\n          }\n          @if (specialSyntaxType()) {\n            <span class=\"badge bg-info ms-2\">\n              <i class=\"bi bi-gear me-1\"></i>{{ getSpecialInputTitle() }}\n            </span>\n          }\n        </label>\n\n        @if (specialSyntaxType()) {\n          <div class=\"form-check form-switch\">\n            <input\n              class=\"form-check-input\"\n              type=\"checkbox\"\n              id=\"specialInputToggle\"\n              [checked]=\"showSpecialInput()\"\n              (change)=\"toggleSpecialInput()\">\n            <label class=\"form-check-label small text-muted\" for=\"specialInputToggle\">\n              Enhanced Editor\n            </label>\n          </div>\n        }\n      </div>\n\n      <!-- Quick-select buttons for standard values -->\n      @if (config.allowNotApplicable || config.allowNotAvailable) {\n        <div class=\"mb-2\">\n          <small class=\"text-muted d-block mb-1\">Quick Select:</small>\n          <div class=\"btn-group btn-group-sm\" role=\"group\">\n            @if (config.allowNotApplicable) {\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-secondary\"\n                (click)=\"setValue('not applicable')\">\n                <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n              </button>\n            }\n            @if (config.allowNotAvailable) {\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-secondary\"\n                (click)=\"setValue('not available')\">\n                <i class=\"bi bi-question-circle me-1\"></i>Not Available\n              </button>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Special SDRF Syntax Input Components -->\n      @if (showSpecialInput() && specialSyntaxType()) {\n        <div class=\"border rounded p-3 mb-3 bg-body-secondary\">\n          <div class=\"mb-2\">\n            <small class=\"text-muted fw-semibold\">\n              <i class=\"bi bi-gear me-1\"></i>{{ getSpecialInputTitle() }}\n            </small>\n          </div>\n\n          @switch (specialSyntaxType()) {\n            @case ('age') {\n              <ccv-sdrf-age-input\n                [value]=\"specialInputValue()\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-age-input>\n            }\n            @case ('modification') {\n              <ccv-sdrf-modification-input\n                [value]=\"specialInputValue()\"\n                [columnId]=\"config.columnId ?? null\"\n                [templateId]=\"config.templateId ?? null\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-modification-input>\n            }\n            @case ('cleavage') {\n              <ccv-sdrf-cleavage-input\n                [value]=\"specialInputValue()\"\n                [columnId]=\"config.columnId ?? null\"\n                [templateId]=\"config.templateId ?? null\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-cleavage-input>\n            }\n            @case ('spiked_compound') {\n              <ccv-sdrf-spiked-compound-input\n                [value]=\"specialInputValue()\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-spiked-compound-input>\n            }\n          }\n\n          <div class=\"form-text mt-2\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Use the enhanced editor for structured input, or toggle off for manual text entry.\n          </div>\n        </div>\n      }\n\n      @if (hasOntologyType && !showSpecialInput()) {\n        <!-- Search type selection for ontology -->\n        <div class=\"mb-2\">\n          <small class=\"text-muted d-block mb-1\">Search Mode:</small>\n          <div class=\"btn-group btn-group-sm\" role=\"group\">\n            <button\n              type=\"button\"\n              class=\"btn\"\n              [class]=\"searchType() === 'icontains' ? 'btn-primary' : 'btn-outline-primary'\"\n              (click)=\"onSearchTypeChange('icontains')\">\n              <i class=\"bi bi-search me-1\"></i>Contains\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn\"\n              [class]=\"searchType() === 'istartswith' ? 'btn-primary' : 'btn-outline-primary'\"\n              (click)=\"onSearchTypeChange('istartswith')\">\n              <i class=\"bi bi-arrow-right me-1\"></i>Starts with\n            </button>\n          </div>\n        </div>\n\n        <!-- Typeahead input for ontology suggestions -->\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            [class.border-success]=\"selectedFavorite() !== null\"\n            id=\"metadataValue\"\n            formControlName=\"value\"\n            placeholder=\"Type to search ontology suggestions...\"\n            [ngbTypeahead]=\"searchOntology\"\n            [resultFormatter]=\"formatSuggestion\"\n            [inputFormatter]=\"inputFormatter\"\n            (selectItem)=\"onSuggestionSelected($event)\"\n            [editable]=\"true\"\n            [showHint]=\"true\"\n            [focusFirst]=\"false\"\n            container=\"body\">\n          @if (isLoadingSuggestions()) {\n            <span class=\"input-group-text\">\n              <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n              </div>\n            </span>\n          } @else {\n            <span class=\"input-group-text\">\n              <i class=\"bi bi-search text-muted\"></i>\n            </span>\n          }\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary\"\n            (click)=\"clearValue()\"\n            title=\"Clear value\">\n            <i class=\"bi bi-x\"></i>\n          </button>\n        </div>\n        <div class=\"form-text\">\n          <i class=\"bi bi-info-circle me-1\"></i>\n          Search {{ searchType() === 'icontains' ? 'contains' : 'starts with' }} for {{ ontologyTypeLabel }} ontology\n        </div>\n      } @else if (!showSpecialInput()) {\n        <!-- Regular input when no ontology type or special input is disabled -->\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            [class.border-success]=\"selectedFavorite() !== null\"\n            id=\"metadataValue\"\n            formControlName=\"value\"\n            placeholder=\"Enter metadata value\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary\"\n            (click)=\"clearValue()\"\n            title=\"Clear value\">\n            <i class=\"bi bi-x\"></i>\n          </button>\n        </div>\n        <div class=\"form-text text-muted\">\n          @if (specialSyntaxType()) {\n            Manual text entry mode. Use the Enhanced Editor toggle for structured {{ specialSyntaxType() }} input.\n          } @else {\n            Enter the value manually (no ontology suggestions available for this column type)\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Character count and value info -->\n    <div class=\"mb-3\">\n      <div class=\"d-flex justify-content-between align-items-center\">\n        <small class=\"text-muted\">\n          Characters: {{ editForm.get('value')?.value?.length || 0 }}/500\n        </small>\n        @if (getSelectedFavoriteInfo()) {\n          <small class=\"text-info\">\n            <i class=\"bi bi-info-circle me-1\"></i>{{ getSelectedFavoriteInfo() }}\n          </small>\n        }\n      </div>\n    </div>\n\n      </form>\n    </div>\n\n    <!-- Sample Selection Panel -->\n    @if (hasMultiSampleEdit) {\n      <div class=\"col-md-4\">\n        <div class=\"border-start ps-3\">\n          <div class=\"d-flex justify-content-between align-items-center mb-3\">\n            <h6 class=\"mb-0 text-muted\">\n              <i class=\"bi bi-list-check me-1\"></i>Apply to Samples\n            </h6>\n            <span class=\"badge bg-primary\">\n              {{ selectedSampleCount }}/{{ totalSampleCount }}\n            </span>\n          </div>\n\n          <!-- Select All/Clear All Controls -->\n          <div class=\"d-flex gap-1 mb-3\">\n            <button \n              type=\"button\" \n              class=\"btn btn-outline-primary btn-sm flex-fill\"\n              (click)=\"selectAllSamples()\"\n              [disabled]=\"selectedSampleCount === totalSampleCount\">\n              <i class=\"bi bi-check-all me-1\"></i>All\n            </button>\n            <button \n              type=\"button\" \n              class=\"btn btn-outline-secondary btn-sm flex-fill\"\n              (click)=\"clearSampleSelection()\"\n              [disabled]=\"selectedSampleCount === 0\">\n              <i class=\"bi bi-x me-1\"></i>Clear\n            </button>\n          </div>\n\n          <!-- Sample List -->\n          <div class=\"sample-list\" style=\"max-height: 400px; overflow-y: auto;\">\n            @for (sample of sampleData; track sample.index) {\n              <div class=\"form-check d-flex align-items-center mb-2 p-2 rounded border-bottom\">\n                <input \n                  class=\"form-check-input me-2\" \n                  type=\"checkbox\" \n                  [id]=\"'sample-' + sample.index\"\n                  [checked]=\"isSampleSelected(sample.index)\"\n                  (change)=\"toggleSampleSelection(sample.index)\">\n                <label \n                  [for]=\"'sample-' + sample.index\" \n                  class=\"form-check-label flex-grow-1 cursor-pointer\">\n                  <div class=\"d-flex justify-content-between align-items-center\">\n                    <div>\n                      <div class=\"fw-semibold\">Sample {{ sample.index }}</div>\n                      @if (sample.sourceName) {\n                        <small class=\"text-muted\">{{ sample.sourceName }}</small>\n                      }\n                    </div>\n                    <div class=\"text-end\">\n                      <small class=\"text-muted\">Current:</small>\n                      <div class=\"small fw-mono\" [title]=\"sample.value || ''\">\n                        {{ (sample.value && sample.value.length > 15) ? (sample.value | slice:0:15) + '...' : (sample.value || '-') }}\n                      </div>\n                    </div>\n                  </div>\n                </label>\n              </div>\n            }\n          </div>\n\n          @if (selectedSampleCount > 0) {\n            <div class=\"alert alert-info mt-3 p-2\">\n              <small>\n                <i class=\"bi bi-info-circle me-1\"></i>\n                The value will be applied to {{ selectedSampleCount }} selected sample{{ selectedSampleCount !== 1 ? 's' : '' }}.\n              </small>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n<div class=\"modal-footer\">\n  <div class=\"me-auto\">\n    @if (editForm.get('value')?.value && !isLoading() && !isFromFavoriteManagement) {\n      <div class=\"btn-group dropup\" ngbDropdown>\n        <button\n          type=\"button\"\n          class=\"btn btn-outline-warning btn-sm dropdown-toggle\"\n          ngbDropdownToggle>\n          <i class=\"bi bi-heart me-1\"></i>Add to Favorites\n        </button>\n        <div class=\"dropdown-menu\" ngbDropdownMenu>\n          <button\n            type=\"button\"\n            class=\"dropdown-item\"\n            (click)=\"addToFavorites('user')\">\n            <i class=\"bi bi-person me-2\"></i>Personal Favorite\n          </button>\n          <button\n            type=\"button\"\n            class=\"dropdown-item\"\n            (click)=\"addToFavorites('lab_group')\">\n            <i class=\"bi bi-people me-2\"></i>Lab Group Favorite\n          </button>\n          <button\n            type=\"button\"\n            class=\"dropdown-item\"\n            (click)=\"addToFavorites('global')\">\n            <i class=\"bi bi-globe me-2\"></i>Global Recommendation\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"d-flex gap-2\">\n    <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n      <i class=\"bi bi-x-circle me-1\"></i>Cancel\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      (click)=\"onSubmit()\"\n      [disabled]=\"editForm.invalid || isLoading()\">\n      @if (isLoading()) {\n        <span class=\"spinner-border spinner-border-sm me-2\"></span>\n      }\n      <i class=\"bi bi-check-circle me-1\"></i>\n      Save Value\n    </button>\n  </div>\n</div>\n", styles: [".sample-list .form-check{border:1px solid transparent;transition:all .2s ease}.sample-list .form-check:hover{background-color:rgba(var(--bs-primary-rgb),.05);border-color:rgba(var(--bs-primary-rgb),.2)}.sample-list .form-check .form-check-input:checked~.form-check-label .fw-semibold{color:var(--bs-primary)}.cursor-pointer{cursor:pointer}.fw-mono{font-family:var(--bs-font-monospace)}\n"] }]
         }], 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: [{
@@ -4626,7 +4644,9 @@ class ColumnEditModal {
             mandatory: [false],
             hidden: [false],
             readonly: [false],
-            notApplicable: [false]
+            notApplicable: [false],
+            notAvailable: [false],
+            staffOnly: [false]
         });
     }
     ngOnInit() {
@@ -4654,7 +4674,9 @@ class ColumnEditModal {
                 mandatory: this.column.mandatory || false,
                 hidden: this.column.hidden || false,
                 readonly: this.column.readonly || false,
-                notApplicable: this.column.notApplicable || false
+                notApplicable: this.column.notApplicable || false,
+                notAvailable: this.column.notAvailable || false,
+                staffOnly: this.column.staffOnly || false
             });
         }
     }
@@ -4678,7 +4700,9 @@ class ColumnEditModal {
                 mandatory: formValue.mandatory || false,
                 hidden: formValue.hidden || false,
                 readonly: formValue.readonly || false,
-                notApplicable: formValue.notApplicable || false
+                notApplicable: formValue.notApplicable || false,
+                notAvailable: formValue.notAvailable || false,
+                staffOnly: formValue.staffOnly || false
             };
             this.columnSaved.emit(columnData);
         }
@@ -4733,7 +4757,9 @@ class ColumnEditModal {
             ontologyType: ontologyType,
             enableTypeahead: enableTypeahead,
             currentValue: this.editForm.get('value')?.value || '',
-            context: this.isEdit ? 'table' : 'template'
+            context: this.isEdit ? 'table' : 'template',
+            allowNotApplicable: this.editForm.get('notApplicable')?.value || false,
+            allowNotAvailable: this.editForm.get('notAvailable')?.value || false
         };
         const hasTemplate = this.selectedTemplate || this.column?.template || this.templateId;
         if (hasTemplate) {
@@ -4761,6 +4787,10 @@ class ColumnEditModal {
             modalRef.componentInstance.onClose();
         });
     }
+    setDefaultValue(value) {
+        this.editForm.get('value')?.setValue(value);
+        this.editForm.get('value')?.markAsTouched();
+    }
     // Template selection methods
     loadColumnTemplates() {
         this.isLoadingTemplates = true;
@@ -5094,11 +5124,11 @@ class ColumnEditModal {
         return columnType;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColumnEditModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }, { token: i2.NgbModal }, { token: MetadataColumnTemplateService }, { token: SdrfSyntaxService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: ColumnEditModal, isStandalone: true, selector: "ccv-column-edit-modal", inputs: { column: "column", templateId: "templateId", isEdit: "isEdit" }, outputs: { columnSaved: "columnSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-columns-gap 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      <!-- Selection Required Notice for New Columns -->\n      @if (!isEdit) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-warning\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-exclamation-triangle me-2\"></i>Column Selection Required\n            </h6>\n            <p class=\"mb-0\">\n              You must select from official SDRF columns or existing templates to ensure data compliance and consistency.\n            </p>\n          </div>\n        </div>\n      }\n\n      <!-- Official SDRF Columns -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-file-earmark-check me-2\"></i>Official SDRF Columns\n          <small class=\"text-muted ms-2\">\n            @if (!isEdit) {\n              (Step 1: Select from standardized SDRF-Proteomics column names)\n            } @else {\n              (Recommended - select from standardized SDRF-Proteomics column names)\n            }\n          </small>\n        </h6>\n      </div>\n\n      @if (!isEdit) {\n        <div class=\"col-12 mb-3\">\n          @if (!showOfficialColumns) {\n            <button\n              type=\"button\"\n              class=\"btn btn-primary mb-3\"\n              (click)=\"toggleOfficialColumns()\">\n              <i class=\"bi bi-list-ul me-2\"></i>\n              Select from Official SDRF Columns\n            </button>\n          } @else {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-secondary mb-3\"\n              (click)=\"toggleOfficialColumns()\">\n              <i class=\"bi bi-x me-2\"></i>\n              Hide Official Columns\n            </button>\n          }\n        </div>\n      } @else {\n        <div class=\"col-12 mb-3\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-info mb-3\"\n            (click)=\"toggleOfficialColumns()\">\n            <i class=\"bi bi-list-ul me-2\"></i>\n            {{ showOfficialColumns ? 'Hide' : 'Show' }} Official Column Names\n          </button>\n        </div>\n      }\n\n      @if (showOfficialColumns) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"border rounded p-3\">\n            <p class=\"mb-3 text-muted\">\n              <i class=\"bi bi-info-circle me-2\"></i>\n              Select from official SDRF-Proteomics column names. Only columns without existing templates are shown.\n            </p>\n\n            @if (availableOfficialColumns.length === 0) {\n              <div class=\"alert alert-warning\">\n                <i class=\"bi bi-exclamation-triangle me-2\"></i>\n                All official SDRF columns already have templates created.\n              </div>\n            } @else {\n              <div class=\"row\">\n                @for (column of availableOfficialColumns; track column.name) {\n                  <div class=\"col-md-6 mb-2\">\n                    <div class=\"card h-100 cursor-pointer border-info\"\n                         (click)=\"selectOfficialColumn(column)\"\n                         [class.border-primary]=\"selectedOfficialColumn?.name === column.name\">\n                      <div class=\"card-body py-2\">\n                        <h6 class=\"card-title mb-1 font-monospace\">\n                          {{ column.name }}\n                        </h6>\n                        <p class=\"card-text small mb-1\">\n                          <span class=\"badge\"\n                                [class]=\"column.type === 'characteristics' ? 'bg-primary' :\n                                        column.type === 'comment' ? 'bg-success' :\n                                        column.type === 'factor_value' ? 'bg-warning' : 'bg-secondary'\">\n                            {{ column.type }}\n                          </span>\n                        </p>\n                        <p class=\"card-text small mb-0\">{{ column.description }}</p>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Template Swapping for Edit Mode -->\n      @if (isEdit && showTemplateSwap) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-info\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-arrow-left-right me-2\"></i>Swap to Different Template\n            </h6>\n            <p class=\"mb-3\">\n              Choose a different template to change the column name and settings. Your current value will be preserved.\n            </p>\n\n            <div class=\"mb-3\">\n              <input\n                type=\"text\"\n                class=\"form-control mb-2\"\n                placeholder=\"Search templates...\"\n                [(ngModel)]=\"templateFilter\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (input)=\"onTemplateFilterChange()\">\n\n              <select\n                class=\"form-select mb-3\"\n                size=\"4\"\n                [disabled]=\"isLoadingTemplates\">\n                @if (isLoadingTemplates) {\n                  <option value=\"\" disabled>Loading templates...</option>\n                } @else {\n                  @for (template of templates; track template.id) {\n                    <option\n                      [value]=\"template.id\"\n                      (click)=\"swapToTemplate(template)\"\n                      style=\"cursor: pointer;\">\n                      {{ template.columnName }} - {{ template.columnType }}@if (template.ontologyType) { ({{ getOntologyTypeLabel(template.ontologyType) }})}\n                    </option>\n                  }\n                }\n              </select>\n            </div>\n\n            <div class=\"d-flex justify-content-between\">\n              <button\n                type=\"button\"\n                class=\"btn btn-success\"\n                (click)=\"showCreateCustomTemplateOption()\">\n                <i class=\"bi bi-plus-circle me-1\"></i>Create Custom Template\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-secondary\"\n                (click)=\"cancelTemplateSwap()\">\n                <i class=\"bi bi-x-circle me-1\"></i>Cancel\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Custom Template Creation Option -->\n      @if (isEdit && showCreateCustomTemplate) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-warning\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-plus-circle me-2\"></i>Create Custom Template\n            </h6>\n            <p class=\"mb-3\">\n              This will create a new custom template with your desired column name and settings.\n            </p>\n\n            <div class=\"d-flex justify-content-between\">\n              <button\n                type=\"button\"\n                class=\"btn btn-warning\"\n                (click)=\"createCustomTemplate()\">\n                <i class=\"bi bi-gear me-1\"></i>Create & Apply Template\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-secondary\"\n                (click)=\"cancelTemplateSwap()\">\n                <i class=\"bi bi-x-circle me-1\"></i>Cancel\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Template Selection -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-file-earmark-text me-2\"></i>Template Selection\n          <small class=\"text-muted ms-2\">\n            @if (!isEdit) {\n              (Step 2: Or select from existing templates)\n            } @else {\n              (Optional - select a template to auto-fill column settings)\n            }\n          </small>\n        </h6>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"input-group mb-3\">\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            placeholder=\"Search column templates...\"\n            [(ngModel)]=\"templateFilter\"\n            [ngModelOptions]=\"{standalone: true}\"\n            (input)=\"onTemplateFilterChange()\">\n          @if (templateFilter) {\n            <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"clearTemplateFilter()\">\n              <i class=\"bi bi-x\"></i>\n            </button>\n          }\n        </div>\n\n        <select \n          class=\"form-select mb-3\"\n          size=\"5\"\n          [(ngModel)]=\"selectedTemplateId\"\n          [ngModelOptions]=\"{standalone: true}\"\n          (change)=\"onTemplateSelectionChange()\"\n          [disabled]=\"isLoadingTemplates\">\n          <option value=\"\">No template selected</option>\n          @if (isLoadingTemplates) {\n            <option value=\"\" disabled>Loading templates...</option>\n          } @else {\n            @for (template of templates; track template.id) {\n              <option [value]=\"template.id\">\n                {{ template.columnName }} - {{ template.columnType }}@if (template.ontologyType) { ({{ getOntologyTypeLabel(template.ontologyType) }})}\n              </option>\n            }\n          }\n        </select>\n\n        @if (totalTemplatePages > 1) {\n          <div class=\"d-flex justify-content-between align-items-center\">\n            <small class=\"text-muted\">\n              Showing {{ (currentTemplatePage - 1) * templatePageSize + 1 }}-{{ Math.min(currentTemplatePage * templatePageSize, totalTemplates) }}\n              of {{ totalTemplates }}\n            </small>\n            <ngb-pagination\n              [collectionSize]=\"totalTemplates\"\n              [page]=\"currentTemplatePage\"\n              [pageSize]=\"templatePageSize\"\n              [maxSize]=\"3\"\n              [boundaryLinks]=\"true\"\n              [rotate]=\"true\"\n              (pageChange)=\"onTemplatePageChange($event)\"\n              class=\"pagination-sm mb-0\">\n            </ngb-pagination>\n          </div>\n        }\n\n        @if (selectedTemplate) {\n          <div class=\"alert alert-info mt-3\">\n            <i class=\"bi bi-info-circle me-2\"></i>\n            Template \"{{ selectedTemplate.name }}\" selected. Settings will be applied automatically.\n            <button type=\"button\" class=\"btn btn-sm btn-outline-info float-end\" (click)=\"clearTemplate()\">\n              Clear Selection\n            </button>\n          </div>\n        }\n      </div>\n\n      <!-- Manual Entry -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-pencil me-2\"></i>Column Details\n          @if (selectedTemplate) {\n            <small class=\"text-muted ms-2\">(Auto-filled from template - you can modify as needed)</small>\n          }\n        </h6>\n      </div>\n      \n      <div class=\"col-12 mb-3\">\n        <label for=\"columnName\" class=\"form-label\">\n          Column Name *\n          <span class=\"text-muted ms-2\">\n            <i class=\"bi bi-info-circle\"></i>\n            Column names are managed through templates\n          </span>\n        </label>\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            id=\"columnName\"\n            formControlName=\"name\"\n            [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n            readonly\n            placeholder=\"Select from official columns or templates below\">\n          @if (isEdit) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-secondary\"\n              (click)=\"showTemplateSwapOptions()\"\n              title=\"Change to different template\">\n              <i class=\"bi bi-arrow-left-right\"></i> Swap Template\n            </button>\n          }\n        </div>\n        <div class=\"form-text\">\n          <i class=\"bi bi-info-circle me-1\"></i>\n          @if (isEdit) {\n            To change the column name, swap to a different template or create a new custom template.\n          } @else {\n            Select from official SDRF columns or existing templates below to ensure compliance.\n          }\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnType\" class=\"form-label\">\n          Column Type *\n          <span class=\"text-muted ms-2\">\n            <i class=\"bi bi-info-circle\"></i>\n            Managed through templates\n          </span>\n        </label>\n        <select\n          class=\"form-select\"\n          id=\"columnType\"\n          formControlName=\"type\"\n          [class.is-invalid]=\"editForm.get('type')?.invalid && editForm.get('type')?.touched\">\n          @for (type of columnTypes; track type.value) {\n            <option [value]=\"type.value\">{{ type.label }}</option>\n          }\n        </select>\n      </div>\n\n      <!-- Advanced Mode Toggle -->\n      <div class=\"col-12 mb-3\">\n        <div class=\"form-check form-switch\">\n          <input\n            class=\"form-check-input\"\n            type=\"checkbox\"\n            id=\"advancedMode\"\n            [checked]=\"showAdvancedMode()\"\n            (change)=\"toggleAdvancedMode()\">\n          <label class=\"form-check-label\" for=\"advancedMode\">\n            <i class=\"bi bi-gear me-1\"></i>Advanced Mode\n          </label>\n          <div class=\"form-text\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Show advanced options for ontology configuration and column settings\n          </div>\n        </div>\n      </div>\n\n      @if (showAdvancedMode()) {\n        <div class=\"col-md-6 mb-3\">\n          <label for=\"ontologyType\" class=\"form-label\">\n            Ontology Type\n            <span class=\"badge bg-warning ms-2\">\n              <i class=\"bi bi-exclamation-triangle me-1\"></i>Advanced\n            </span>\n          </label>\n        <select\n          class=\"form-select\"\n          id=\"ontologyType\"\n          formControlName=\"ontologyType\"\n          (change)=\"onOntologyTypeChange($event)\">\n          @for (ontology of ontologyTypes; track $index) {\n            <option [value]=\"$index\">{{ ontology.label }}</option>\n          }\n        </select>\n\n        @if (hasOntologyType) {\n          <div class=\"form-text mt-2\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Custom ontology filters will be applied based on the selected type\n          </div>\n        }\n        </div>\n\n        @if (hasOntologyType) {\n          <div class=\"col-12 mb-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                <i class=\"bi bi-search me-1\"></i>Enable Typeahead Autocomplete\n              </label>\n              <div class=\"form-text\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                Enable autocomplete suggestions from {{ selectedOntologyConfig?.label || 'selected' }} ontology when editing values\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Column Options - Advanced Mode Only -->\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>Column Options\n            <span class=\"badge bg-warning ms-2\">\n              <i class=\"bi bi-exclamation-triangle me-1\"></i>Advanced\n            </span>\n          </h6>\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=\"mandatory\"\n                  formControlName=\"mandatory\">\n                <label class=\"form-check-label\" for=\"mandatory\">\n                  <i class=\"bi bi-exclamation-circle me-1\"></i>Mandatory\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=\"hidden\"\n                  formControlName=\"hidden\">\n                <label class=\"form-check-label\" for=\"hidden\">\n                  <i class=\"bi bi-eye-slash me-1\"></i>Hidden\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=\"readonly\"\n                  formControlName=\"readonly\">\n                <label class=\"form-check-label\" for=\"readonly\">\n                  <i class=\"bi bi-lock me-1\"></i>Read Only\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"notApplicable\"\n                  formControlName=\"notApplicable\">\n                <label class=\"form-check-label\" for=\"notApplicable\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>N/A\n                </label>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"defaultValue\" class=\"form-label\">\n          Default Value\n          @if (hasTypeaheadEnabled) {\n            <span class=\"badge bg-success ms-2\">\n              <i class=\"bi bi-search me-1\"></i>Typeahead Enabled\n            </span>\n          }\n        </label>\n        \n        <div class=\"input-group\">\n          <input \n            type=\"text\" \n            class=\"form-control\"\n            id=\"defaultValue\"\n            formControlName=\"value\"\n            placeholder=\"Enter default 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 (hasTypeaheadEnabled) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to use autocomplete suggestions from {{ selectedOntologyConfig?.label || 'selected' }} ontology\n          } @else if (hasOntologyType) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set default value. Enable typeahead in Advanced Mode for autocomplete suggestions.\n          } @else if (showAdvancedMode()) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set the default value (select an ontology type above for smart suggestions)\n          } @else {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set the default value (enable Advanced Mode for ontology autocomplete)\n          }\n        </div>\n      </div>\n\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' : 'Add' }} Column\n  </button>\n</div>\n", styles: [".template-selection-container{border:1px solid var(--bs-border-color);border-radius:.375rem;padding:.5rem}.template-item{cursor:pointer;transition:all .2s ease}.template-item:hover{background-color:rgba(var(--bs-primary-rgb),.1);border-color:var(--bs-primary)!important}.template-item.selected{background-color:rgba(var(--bs-primary-rgb),.15);border-color:var(--bs-primary)!important;box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.25)}.cursor-pointer{cursor:pointer}.card.cursor-pointer{transition:all .2s ease}.card.cursor-pointer:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.card.cursor-pointer.border-info{border-width:2px}.modal-lg{max-width:900px}\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: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: ColumnEditModal, isStandalone: true, selector: "ccv-column-edit-modal", inputs: { column: "column", templateId: "templateId", isEdit: "isEdit" }, outputs: { columnSaved: "columnSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-columns-gap 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      <!-- Selection Required Notice for New Columns -->\n      @if (!isEdit) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-warning\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-exclamation-triangle me-2\"></i>Column Selection Required\n            </h6>\n            <p class=\"mb-0\">\n              You must select from official SDRF columns or existing templates to ensure data compliance and consistency.\n            </p>\n          </div>\n        </div>\n      }\n\n      <!-- Official SDRF Columns -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-file-earmark-check me-2\"></i>Official SDRF Columns\n          <small class=\"text-muted ms-2\">\n            @if (!isEdit) {\n              (Step 1: Select from standardized SDRF-Proteomics column names)\n            } @else {\n              (Recommended - select from standardized SDRF-Proteomics column names)\n            }\n          </small>\n        </h6>\n      </div>\n\n      @if (!isEdit) {\n        <div class=\"col-12 mb-3\">\n          @if (!showOfficialColumns) {\n            <button\n              type=\"button\"\n              class=\"btn btn-primary mb-3\"\n              (click)=\"toggleOfficialColumns()\">\n              <i class=\"bi bi-list-ul me-2\"></i>\n              Select from Official SDRF Columns\n            </button>\n          } @else {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-secondary mb-3\"\n              (click)=\"toggleOfficialColumns()\">\n              <i class=\"bi bi-x me-2\"></i>\n              Hide Official Columns\n            </button>\n          }\n        </div>\n      } @else {\n        <div class=\"col-12 mb-3\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-info mb-3\"\n            (click)=\"toggleOfficialColumns()\">\n            <i class=\"bi bi-list-ul me-2\"></i>\n            {{ showOfficialColumns ? 'Hide' : 'Show' }} Official Column Names\n          </button>\n        </div>\n      }\n\n      @if (showOfficialColumns) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"border rounded p-3\">\n            <p class=\"mb-3 text-muted\">\n              <i class=\"bi bi-info-circle me-2\"></i>\n              Select from official SDRF-Proteomics column names. Only columns without existing templates are shown.\n            </p>\n\n            @if (availableOfficialColumns.length === 0) {\n              <div class=\"alert alert-warning\">\n                <i class=\"bi bi-exclamation-triangle me-2\"></i>\n                All official SDRF columns already have templates created.\n              </div>\n            } @else {\n              <div class=\"row\">\n                @for (column of availableOfficialColumns; track column.name) {\n                  <div class=\"col-md-6 mb-2\">\n                    <div class=\"card h-100 cursor-pointer border-info\"\n                         (click)=\"selectOfficialColumn(column)\"\n                         [class.border-primary]=\"selectedOfficialColumn?.name === column.name\">\n                      <div class=\"card-body py-2\">\n                        <h6 class=\"card-title mb-1 font-monospace\">\n                          {{ column.name }}\n                        </h6>\n                        <p class=\"card-text small mb-1\">\n                          <span class=\"badge\"\n                                [class]=\"column.type === 'characteristics' ? 'bg-primary' :\n                                        column.type === 'comment' ? 'bg-success' :\n                                        column.type === 'factor_value' ? 'bg-warning' : 'bg-secondary'\">\n                            {{ column.type }}\n                          </span>\n                        </p>\n                        <p class=\"card-text small mb-0\">{{ column.description }}</p>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Template Swapping for Edit Mode -->\n      @if (isEdit && showTemplateSwap) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-info\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-arrow-left-right me-2\"></i>Swap to Different Template\n            </h6>\n            <p class=\"mb-3\">\n              Choose a different template to change the column name and settings. Your current value will be preserved.\n            </p>\n\n            <div class=\"mb-3\">\n              <input\n                type=\"text\"\n                class=\"form-control mb-2\"\n                placeholder=\"Search templates...\"\n                [(ngModel)]=\"templateFilter\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (input)=\"onTemplateFilterChange()\">\n\n              <select\n                class=\"form-select mb-3\"\n                size=\"4\"\n                [disabled]=\"isLoadingTemplates\">\n                @if (isLoadingTemplates) {\n                  <option value=\"\" disabled>Loading templates...</option>\n                } @else {\n                  @for (template of templates; track template.id) {\n                    <option\n                      [value]=\"template.id\"\n                      (click)=\"swapToTemplate(template)\"\n                      style=\"cursor: pointer;\">\n                      {{ template.columnName }} - {{ template.columnType }}@if (template.ontologyType) { ({{ getOntologyTypeLabel(template.ontologyType) }})}\n                    </option>\n                  }\n                }\n              </select>\n            </div>\n\n            <div class=\"d-flex justify-content-between\">\n              <button\n                type=\"button\"\n                class=\"btn btn-success\"\n                (click)=\"showCreateCustomTemplateOption()\">\n                <i class=\"bi bi-plus-circle me-1\"></i>Create Custom Template\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-secondary\"\n                (click)=\"cancelTemplateSwap()\">\n                <i class=\"bi bi-x-circle me-1\"></i>Cancel\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Custom Template Creation Option -->\n      @if (isEdit && showCreateCustomTemplate) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-warning\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-plus-circle me-2\"></i>Create Custom Template\n            </h6>\n            <p class=\"mb-3\">\n              This will create a new custom template with your desired column name and settings.\n            </p>\n\n            <div class=\"d-flex justify-content-between\">\n              <button\n                type=\"button\"\n                class=\"btn btn-warning\"\n                (click)=\"createCustomTemplate()\">\n                <i class=\"bi bi-gear me-1\"></i>Create & Apply Template\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-secondary\"\n                (click)=\"cancelTemplateSwap()\">\n                <i class=\"bi bi-x-circle me-1\"></i>Cancel\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Template Selection -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-file-earmark-text me-2\"></i>Template Selection\n          <small class=\"text-muted ms-2\">\n            @if (!isEdit) {\n              (Step 2: Or select from existing templates)\n            } @else {\n              (Optional - select a template to auto-fill column settings)\n            }\n          </small>\n        </h6>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"input-group mb-3\">\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            placeholder=\"Search column templates...\"\n            [(ngModel)]=\"templateFilter\"\n            [ngModelOptions]=\"{standalone: true}\"\n            (input)=\"onTemplateFilterChange()\">\n          @if (templateFilter) {\n            <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"clearTemplateFilter()\">\n              <i class=\"bi bi-x\"></i>\n            </button>\n          }\n        </div>\n\n        <select \n          class=\"form-select mb-3\"\n          size=\"5\"\n          [(ngModel)]=\"selectedTemplateId\"\n          [ngModelOptions]=\"{standalone: true}\"\n          (change)=\"onTemplateSelectionChange()\"\n          [disabled]=\"isLoadingTemplates\">\n          <option value=\"\">No template selected</option>\n          @if (isLoadingTemplates) {\n            <option value=\"\" disabled>Loading templates...</option>\n          } @else {\n            @for (template of templates; track template.id) {\n              <option [value]=\"template.id\">\n                {{ template.columnName }} - {{ template.columnType }}@if (template.ontologyType) { ({{ getOntologyTypeLabel(template.ontologyType) }})}\n              </option>\n            }\n          }\n        </select>\n\n        @if (totalTemplatePages > 1) {\n          <div class=\"d-flex justify-content-between align-items-center\">\n            <small class=\"text-muted\">\n              Showing {{ (currentTemplatePage - 1) * templatePageSize + 1 }}-{{ Math.min(currentTemplatePage * templatePageSize, totalTemplates) }}\n              of {{ totalTemplates }}\n            </small>\n            <ngb-pagination\n              [collectionSize]=\"totalTemplates\"\n              [page]=\"currentTemplatePage\"\n              [pageSize]=\"templatePageSize\"\n              [maxSize]=\"3\"\n              [boundaryLinks]=\"true\"\n              [rotate]=\"true\"\n              (pageChange)=\"onTemplatePageChange($event)\"\n              class=\"pagination-sm mb-0\">\n            </ngb-pagination>\n          </div>\n        }\n\n        @if (selectedTemplate) {\n          <div class=\"alert alert-info mt-3\">\n            <i class=\"bi bi-info-circle me-2\"></i>\n            Template \"{{ selectedTemplate.name }}\" selected. Settings will be applied automatically.\n            <button type=\"button\" class=\"btn btn-sm btn-outline-info float-end\" (click)=\"clearTemplate()\">\n              Clear Selection\n            </button>\n          </div>\n        }\n      </div>\n\n      <!-- Manual Entry -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-pencil me-2\"></i>Column Details\n          @if (selectedTemplate) {\n            <small class=\"text-muted ms-2\">(Auto-filled from template - you can modify as needed)</small>\n          }\n        </h6>\n      </div>\n      \n      <div class=\"col-12 mb-3\">\n        <label for=\"columnName\" class=\"form-label\">\n          Column Name *\n          <span class=\"text-muted ms-2\">\n            <i class=\"bi bi-info-circle\"></i>\n            Column names are managed through templates\n          </span>\n        </label>\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            id=\"columnName\"\n            formControlName=\"name\"\n            [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n            readonly\n            placeholder=\"Select from official columns or templates below\">\n          @if (isEdit) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-secondary\"\n              (click)=\"showTemplateSwapOptions()\"\n              title=\"Change to different template\">\n              <i class=\"bi bi-arrow-left-right\"></i> Swap Template\n            </button>\n          }\n        </div>\n        <div class=\"form-text\">\n          <i class=\"bi bi-info-circle me-1\"></i>\n          @if (isEdit) {\n            To change the column name, swap to a different template or create a new custom template.\n          } @else {\n            Select from official SDRF columns or existing templates below to ensure compliance.\n          }\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnType\" class=\"form-label\">\n          Column Type *\n          <span class=\"text-muted ms-2\">\n            <i class=\"bi bi-info-circle\"></i>\n            Managed through templates\n          </span>\n        </label>\n        <select\n          class=\"form-select\"\n          id=\"columnType\"\n          formControlName=\"type\"\n          [class.is-invalid]=\"editForm.get('type')?.invalid && editForm.get('type')?.touched\">\n          @for (type of columnTypes; track type.value) {\n            <option [value]=\"type.value\">{{ type.label }}</option>\n          }\n        </select>\n      </div>\n\n      <!-- Advanced Mode Toggle -->\n      <div class=\"col-12 mb-3\">\n        <div class=\"form-check form-switch\">\n          <input\n            class=\"form-check-input\"\n            type=\"checkbox\"\n            id=\"advancedMode\"\n            [checked]=\"showAdvancedMode()\"\n            (change)=\"toggleAdvancedMode()\">\n          <label class=\"form-check-label\" for=\"advancedMode\">\n            <i class=\"bi bi-gear me-1\"></i>Advanced Mode\n          </label>\n          <div class=\"form-text\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Show advanced options for ontology configuration and column settings\n          </div>\n        </div>\n      </div>\n\n      @if (showAdvancedMode()) {\n        <div class=\"col-md-6 mb-3\">\n          <label for=\"ontologyType\" class=\"form-label\">\n            Ontology Type\n            <span class=\"badge bg-warning ms-2\">\n              <i class=\"bi bi-exclamation-triangle me-1\"></i>Advanced\n            </span>\n          </label>\n        <select\n          class=\"form-select\"\n          id=\"ontologyType\"\n          formControlName=\"ontologyType\"\n          (change)=\"onOntologyTypeChange($event)\">\n          @for (ontology of ontologyTypes; track $index) {\n            <option [value]=\"$index\">{{ ontology.label }}</option>\n          }\n        </select>\n\n        @if (hasOntologyType) {\n          <div class=\"form-text mt-2\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Custom ontology filters will be applied based on the selected type\n          </div>\n        }\n        </div>\n\n        @if (hasOntologyType) {\n          <div class=\"col-12 mb-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                <i class=\"bi bi-search me-1\"></i>Enable Typeahead Autocomplete\n              </label>\n              <div class=\"form-text\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                Enable autocomplete suggestions from {{ selectedOntologyConfig?.label || 'selected' }} ontology when editing values\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Column Options - Advanced Mode Only -->\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>Column Options\n            <span class=\"badge bg-warning ms-2\">\n              <i class=\"bi bi-exclamation-triangle me-1\"></i>Advanced\n            </span>\n          </h6>\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=\"mandatory\"\n                  formControlName=\"mandatory\">\n                <label class=\"form-check-label\" for=\"mandatory\">\n                  <i class=\"bi bi-exclamation-circle me-1\"></i>Mandatory\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=\"hidden\"\n                  formControlName=\"hidden\">\n                <label class=\"form-check-label\" for=\"hidden\">\n                  <i class=\"bi bi-eye-slash me-1\"></i>Hidden\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=\"readonly\"\n                  formControlName=\"readonly\">\n                <label class=\"form-check-label\" for=\"readonly\">\n                  <i class=\"bi bi-lock me-1\"></i>Read Only\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"notApplicable\"\n                  formControlName=\"notApplicable\">\n                <label class=\"form-check-label\" for=\"notApplicable\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"notAvailable\"\n                  formControlName=\"notAvailable\">\n                <label class=\"form-check-label\" for=\"notAvailable\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"staffOnly\"\n                  formControlName=\"staffOnly\">\n                <label class=\"form-check-label\" for=\"staffOnly\">\n                  <i class=\"bi bi-shield-lock me-1\"></i>Staff Only\n                </label>\n              </div>\n            </div>\n          </div>\n          <div class=\"row mt-2\">\n            <div class=\"col-12\">\n              <div class=\"alert alert-info py-2\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                <small>\n                  <strong>Staff Only:</strong> When enabled, this column will only be visible and editable by staff members.\n                </small>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"defaultValue\" class=\"form-label\">\n          Default Value\n          @if (hasTypeaheadEnabled) {\n            <span class=\"badge bg-success ms-2\">\n              <i class=\"bi bi-search me-1\"></i>Typeahead Enabled\n            </span>\n          }\n        </label>\n\n        @if (editForm.get('notApplicable')?.value || editForm.get('notAvailable')?.value) {\n          <div class=\"mb-2\">\n            <small class=\"text-muted d-block mb-1\">Quick Select:</small>\n            <div class=\"btn-group btn-group-sm\" role=\"group\">\n              @if (editForm.get('notApplicable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not applicable')\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </button>\n              }\n              @if (editForm.get('notAvailable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not available')\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <div class=\"input-group\">\n          <input \n            type=\"text\" \n            class=\"form-control\"\n            id=\"defaultValue\"\n            formControlName=\"value\"\n            placeholder=\"Enter default 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 (hasTypeaheadEnabled) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to use autocomplete suggestions from {{ selectedOntologyConfig?.label || 'selected' }} ontology\n          } @else if (hasOntologyType) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set default value. Enable typeahead in Advanced Mode for autocomplete suggestions.\n          } @else if (showAdvancedMode()) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set the default value (select an ontology type above for smart suggestions)\n          } @else {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set the default value (enable Advanced Mode for ontology autocomplete)\n          }\n        </div>\n      </div>\n\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' : 'Add' }} Column\n  </button>\n</div>\n", styles: [".template-selection-container{border:1px solid var(--bs-border-color);border-radius:.375rem;padding:.5rem}.template-item{cursor:pointer;transition:all .2s ease}.template-item:hover{background-color:rgba(var(--bs-primary-rgb),.1);border-color:var(--bs-primary)!important}.template-item.selected{background-color:rgba(var(--bs-primary-rgb),.15);border-color:var(--bs-primary)!important;box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.25)}.cursor-pointer{cursor:pointer}.card.cursor-pointer{transition:all .2s ease}.card.cursor-pointer:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.card.cursor-pointer.border-info{border-width:2px}.modal-lg{max-width:900px}\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: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColumnEditModal, decorators: [{
             type: Component,
-            args: [{ selector: 'ccv-column-edit-modal', imports: [CommonModule, ReactiveFormsModule, FormsModule, NgbModule], template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-columns-gap 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      <!-- Selection Required Notice for New Columns -->\n      @if (!isEdit) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-warning\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-exclamation-triangle me-2\"></i>Column Selection Required\n            </h6>\n            <p class=\"mb-0\">\n              You must select from official SDRF columns or existing templates to ensure data compliance and consistency.\n            </p>\n          </div>\n        </div>\n      }\n\n      <!-- Official SDRF Columns -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-file-earmark-check me-2\"></i>Official SDRF Columns\n          <small class=\"text-muted ms-2\">\n            @if (!isEdit) {\n              (Step 1: Select from standardized SDRF-Proteomics column names)\n            } @else {\n              (Recommended - select from standardized SDRF-Proteomics column names)\n            }\n          </small>\n        </h6>\n      </div>\n\n      @if (!isEdit) {\n        <div class=\"col-12 mb-3\">\n          @if (!showOfficialColumns) {\n            <button\n              type=\"button\"\n              class=\"btn btn-primary mb-3\"\n              (click)=\"toggleOfficialColumns()\">\n              <i class=\"bi bi-list-ul me-2\"></i>\n              Select from Official SDRF Columns\n            </button>\n          } @else {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-secondary mb-3\"\n              (click)=\"toggleOfficialColumns()\">\n              <i class=\"bi bi-x me-2\"></i>\n              Hide Official Columns\n            </button>\n          }\n        </div>\n      } @else {\n        <div class=\"col-12 mb-3\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-info mb-3\"\n            (click)=\"toggleOfficialColumns()\">\n            <i class=\"bi bi-list-ul me-2\"></i>\n            {{ showOfficialColumns ? 'Hide' : 'Show' }} Official Column Names\n          </button>\n        </div>\n      }\n\n      @if (showOfficialColumns) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"border rounded p-3\">\n            <p class=\"mb-3 text-muted\">\n              <i class=\"bi bi-info-circle me-2\"></i>\n              Select from official SDRF-Proteomics column names. Only columns without existing templates are shown.\n            </p>\n\n            @if (availableOfficialColumns.length === 0) {\n              <div class=\"alert alert-warning\">\n                <i class=\"bi bi-exclamation-triangle me-2\"></i>\n                All official SDRF columns already have templates created.\n              </div>\n            } @else {\n              <div class=\"row\">\n                @for (column of availableOfficialColumns; track column.name) {\n                  <div class=\"col-md-6 mb-2\">\n                    <div class=\"card h-100 cursor-pointer border-info\"\n                         (click)=\"selectOfficialColumn(column)\"\n                         [class.border-primary]=\"selectedOfficialColumn?.name === column.name\">\n                      <div class=\"card-body py-2\">\n                        <h6 class=\"card-title mb-1 font-monospace\">\n                          {{ column.name }}\n                        </h6>\n                        <p class=\"card-text small mb-1\">\n                          <span class=\"badge\"\n                                [class]=\"column.type === 'characteristics' ? 'bg-primary' :\n                                        column.type === 'comment' ? 'bg-success' :\n                                        column.type === 'factor_value' ? 'bg-warning' : 'bg-secondary'\">\n                            {{ column.type }}\n                          </span>\n                        </p>\n                        <p class=\"card-text small mb-0\">{{ column.description }}</p>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Template Swapping for Edit Mode -->\n      @if (isEdit && showTemplateSwap) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-info\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-arrow-left-right me-2\"></i>Swap to Different Template\n            </h6>\n            <p class=\"mb-3\">\n              Choose a different template to change the column name and settings. Your current value will be preserved.\n            </p>\n\n            <div class=\"mb-3\">\n              <input\n                type=\"text\"\n                class=\"form-control mb-2\"\n                placeholder=\"Search templates...\"\n                [(ngModel)]=\"templateFilter\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (input)=\"onTemplateFilterChange()\">\n\n              <select\n                class=\"form-select mb-3\"\n                size=\"4\"\n                [disabled]=\"isLoadingTemplates\">\n                @if (isLoadingTemplates) {\n                  <option value=\"\" disabled>Loading templates...</option>\n                } @else {\n                  @for (template of templates; track template.id) {\n                    <option\n                      [value]=\"template.id\"\n                      (click)=\"swapToTemplate(template)\"\n                      style=\"cursor: pointer;\">\n                      {{ template.columnName }} - {{ template.columnType }}@if (template.ontologyType) { ({{ getOntologyTypeLabel(template.ontologyType) }})}\n                    </option>\n                  }\n                }\n              </select>\n            </div>\n\n            <div class=\"d-flex justify-content-between\">\n              <button\n                type=\"button\"\n                class=\"btn btn-success\"\n                (click)=\"showCreateCustomTemplateOption()\">\n                <i class=\"bi bi-plus-circle me-1\"></i>Create Custom Template\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-secondary\"\n                (click)=\"cancelTemplateSwap()\">\n                <i class=\"bi bi-x-circle me-1\"></i>Cancel\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Custom Template Creation Option -->\n      @if (isEdit && showCreateCustomTemplate) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-warning\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-plus-circle me-2\"></i>Create Custom Template\n            </h6>\n            <p class=\"mb-3\">\n              This will create a new custom template with your desired column name and settings.\n            </p>\n\n            <div class=\"d-flex justify-content-between\">\n              <button\n                type=\"button\"\n                class=\"btn btn-warning\"\n                (click)=\"createCustomTemplate()\">\n                <i class=\"bi bi-gear me-1\"></i>Create & Apply Template\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-secondary\"\n                (click)=\"cancelTemplateSwap()\">\n                <i class=\"bi bi-x-circle me-1\"></i>Cancel\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Template Selection -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-file-earmark-text me-2\"></i>Template Selection\n          <small class=\"text-muted ms-2\">\n            @if (!isEdit) {\n              (Step 2: Or select from existing templates)\n            } @else {\n              (Optional - select a template to auto-fill column settings)\n            }\n          </small>\n        </h6>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"input-group mb-3\">\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            placeholder=\"Search column templates...\"\n            [(ngModel)]=\"templateFilter\"\n            [ngModelOptions]=\"{standalone: true}\"\n            (input)=\"onTemplateFilterChange()\">\n          @if (templateFilter) {\n            <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"clearTemplateFilter()\">\n              <i class=\"bi bi-x\"></i>\n            </button>\n          }\n        </div>\n\n        <select \n          class=\"form-select mb-3\"\n          size=\"5\"\n          [(ngModel)]=\"selectedTemplateId\"\n          [ngModelOptions]=\"{standalone: true}\"\n          (change)=\"onTemplateSelectionChange()\"\n          [disabled]=\"isLoadingTemplates\">\n          <option value=\"\">No template selected</option>\n          @if (isLoadingTemplates) {\n            <option value=\"\" disabled>Loading templates...</option>\n          } @else {\n            @for (template of templates; track template.id) {\n              <option [value]=\"template.id\">\n                {{ template.columnName }} - {{ template.columnType }}@if (template.ontologyType) { ({{ getOntologyTypeLabel(template.ontologyType) }})}\n              </option>\n            }\n          }\n        </select>\n\n        @if (totalTemplatePages > 1) {\n          <div class=\"d-flex justify-content-between align-items-center\">\n            <small class=\"text-muted\">\n              Showing {{ (currentTemplatePage - 1) * templatePageSize + 1 }}-{{ Math.min(currentTemplatePage * templatePageSize, totalTemplates) }}\n              of {{ totalTemplates }}\n            </small>\n            <ngb-pagination\n              [collectionSize]=\"totalTemplates\"\n              [page]=\"currentTemplatePage\"\n              [pageSize]=\"templatePageSize\"\n              [maxSize]=\"3\"\n              [boundaryLinks]=\"true\"\n              [rotate]=\"true\"\n              (pageChange)=\"onTemplatePageChange($event)\"\n              class=\"pagination-sm mb-0\">\n            </ngb-pagination>\n          </div>\n        }\n\n        @if (selectedTemplate) {\n          <div class=\"alert alert-info mt-3\">\n            <i class=\"bi bi-info-circle me-2\"></i>\n            Template \"{{ selectedTemplate.name }}\" selected. Settings will be applied automatically.\n            <button type=\"button\" class=\"btn btn-sm btn-outline-info float-end\" (click)=\"clearTemplate()\">\n              Clear Selection\n            </button>\n          </div>\n        }\n      </div>\n\n      <!-- Manual Entry -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-pencil me-2\"></i>Column Details\n          @if (selectedTemplate) {\n            <small class=\"text-muted ms-2\">(Auto-filled from template - you can modify as needed)</small>\n          }\n        </h6>\n      </div>\n      \n      <div class=\"col-12 mb-3\">\n        <label for=\"columnName\" class=\"form-label\">\n          Column Name *\n          <span class=\"text-muted ms-2\">\n            <i class=\"bi bi-info-circle\"></i>\n            Column names are managed through templates\n          </span>\n        </label>\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            id=\"columnName\"\n            formControlName=\"name\"\n            [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n            readonly\n            placeholder=\"Select from official columns or templates below\">\n          @if (isEdit) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-secondary\"\n              (click)=\"showTemplateSwapOptions()\"\n              title=\"Change to different template\">\n              <i class=\"bi bi-arrow-left-right\"></i> Swap Template\n            </button>\n          }\n        </div>\n        <div class=\"form-text\">\n          <i class=\"bi bi-info-circle me-1\"></i>\n          @if (isEdit) {\n            To change the column name, swap to a different template or create a new custom template.\n          } @else {\n            Select from official SDRF columns or existing templates below to ensure compliance.\n          }\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnType\" class=\"form-label\">\n          Column Type *\n          <span class=\"text-muted ms-2\">\n            <i class=\"bi bi-info-circle\"></i>\n            Managed through templates\n          </span>\n        </label>\n        <select\n          class=\"form-select\"\n          id=\"columnType\"\n          formControlName=\"type\"\n          [class.is-invalid]=\"editForm.get('type')?.invalid && editForm.get('type')?.touched\">\n          @for (type of columnTypes; track type.value) {\n            <option [value]=\"type.value\">{{ type.label }}</option>\n          }\n        </select>\n      </div>\n\n      <!-- Advanced Mode Toggle -->\n      <div class=\"col-12 mb-3\">\n        <div class=\"form-check form-switch\">\n          <input\n            class=\"form-check-input\"\n            type=\"checkbox\"\n            id=\"advancedMode\"\n            [checked]=\"showAdvancedMode()\"\n            (change)=\"toggleAdvancedMode()\">\n          <label class=\"form-check-label\" for=\"advancedMode\">\n            <i class=\"bi bi-gear me-1\"></i>Advanced Mode\n          </label>\n          <div class=\"form-text\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Show advanced options for ontology configuration and column settings\n          </div>\n        </div>\n      </div>\n\n      @if (showAdvancedMode()) {\n        <div class=\"col-md-6 mb-3\">\n          <label for=\"ontologyType\" class=\"form-label\">\n            Ontology Type\n            <span class=\"badge bg-warning ms-2\">\n              <i class=\"bi bi-exclamation-triangle me-1\"></i>Advanced\n            </span>\n          </label>\n        <select\n          class=\"form-select\"\n          id=\"ontologyType\"\n          formControlName=\"ontologyType\"\n          (change)=\"onOntologyTypeChange($event)\">\n          @for (ontology of ontologyTypes; track $index) {\n            <option [value]=\"$index\">{{ ontology.label }}</option>\n          }\n        </select>\n\n        @if (hasOntologyType) {\n          <div class=\"form-text mt-2\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Custom ontology filters will be applied based on the selected type\n          </div>\n        }\n        </div>\n\n        @if (hasOntologyType) {\n          <div class=\"col-12 mb-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                <i class=\"bi bi-search me-1\"></i>Enable Typeahead Autocomplete\n              </label>\n              <div class=\"form-text\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                Enable autocomplete suggestions from {{ selectedOntologyConfig?.label || 'selected' }} ontology when editing values\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Column Options - Advanced Mode Only -->\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>Column Options\n            <span class=\"badge bg-warning ms-2\">\n              <i class=\"bi bi-exclamation-triangle me-1\"></i>Advanced\n            </span>\n          </h6>\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=\"mandatory\"\n                  formControlName=\"mandatory\">\n                <label class=\"form-check-label\" for=\"mandatory\">\n                  <i class=\"bi bi-exclamation-circle me-1\"></i>Mandatory\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=\"hidden\"\n                  formControlName=\"hidden\">\n                <label class=\"form-check-label\" for=\"hidden\">\n                  <i class=\"bi bi-eye-slash me-1\"></i>Hidden\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=\"readonly\"\n                  formControlName=\"readonly\">\n                <label class=\"form-check-label\" for=\"readonly\">\n                  <i class=\"bi bi-lock me-1\"></i>Read Only\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"notApplicable\"\n                  formControlName=\"notApplicable\">\n                <label class=\"form-check-label\" for=\"notApplicable\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>N/A\n                </label>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"defaultValue\" class=\"form-label\">\n          Default Value\n          @if (hasTypeaheadEnabled) {\n            <span class=\"badge bg-success ms-2\">\n              <i class=\"bi bi-search me-1\"></i>Typeahead Enabled\n            </span>\n          }\n        </label>\n        \n        <div class=\"input-group\">\n          <input \n            type=\"text\" \n            class=\"form-control\"\n            id=\"defaultValue\"\n            formControlName=\"value\"\n            placeholder=\"Enter default 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 (hasTypeaheadEnabled) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to use autocomplete suggestions from {{ selectedOntologyConfig?.label || 'selected' }} ontology\n          } @else if (hasOntologyType) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set default value. Enable typeahead in Advanced Mode for autocomplete suggestions.\n          } @else if (showAdvancedMode()) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set the default value (select an ontology type above for smart suggestions)\n          } @else {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set the default value (enable Advanced Mode for ontology autocomplete)\n          }\n        </div>\n      </div>\n\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' : 'Add' }} Column\n  </button>\n</div>\n", styles: [".template-selection-container{border:1px solid var(--bs-border-color);border-radius:.375rem;padding:.5rem}.template-item{cursor:pointer;transition:all .2s ease}.template-item:hover{background-color:rgba(var(--bs-primary-rgb),.1);border-color:var(--bs-primary)!important}.template-item.selected{background-color:rgba(var(--bs-primary-rgb),.15);border-color:var(--bs-primary)!important;box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.25)}.cursor-pointer{cursor:pointer}.card.cursor-pointer{transition:all .2s ease}.card.cursor-pointer:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.card.cursor-pointer.border-info{border-width:2px}.modal-lg{max-width:900px}\n"] }]
+            args: [{ selector: 'ccv-column-edit-modal', imports: [CommonModule, ReactiveFormsModule, FormsModule, NgbModule], template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-columns-gap 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      <!-- Selection Required Notice for New Columns -->\n      @if (!isEdit) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-warning\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-exclamation-triangle me-2\"></i>Column Selection Required\n            </h6>\n            <p class=\"mb-0\">\n              You must select from official SDRF columns or existing templates to ensure data compliance and consistency.\n            </p>\n          </div>\n        </div>\n      }\n\n      <!-- Official SDRF Columns -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-file-earmark-check me-2\"></i>Official SDRF Columns\n          <small class=\"text-muted ms-2\">\n            @if (!isEdit) {\n              (Step 1: Select from standardized SDRF-Proteomics column names)\n            } @else {\n              (Recommended - select from standardized SDRF-Proteomics column names)\n            }\n          </small>\n        </h6>\n      </div>\n\n      @if (!isEdit) {\n        <div class=\"col-12 mb-3\">\n          @if (!showOfficialColumns) {\n            <button\n              type=\"button\"\n              class=\"btn btn-primary mb-3\"\n              (click)=\"toggleOfficialColumns()\">\n              <i class=\"bi bi-list-ul me-2\"></i>\n              Select from Official SDRF Columns\n            </button>\n          } @else {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-secondary mb-3\"\n              (click)=\"toggleOfficialColumns()\">\n              <i class=\"bi bi-x me-2\"></i>\n              Hide Official Columns\n            </button>\n          }\n        </div>\n      } @else {\n        <div class=\"col-12 mb-3\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-info mb-3\"\n            (click)=\"toggleOfficialColumns()\">\n            <i class=\"bi bi-list-ul me-2\"></i>\n            {{ showOfficialColumns ? 'Hide' : 'Show' }} Official Column Names\n          </button>\n        </div>\n      }\n\n      @if (showOfficialColumns) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"border rounded p-3\">\n            <p class=\"mb-3 text-muted\">\n              <i class=\"bi bi-info-circle me-2\"></i>\n              Select from official SDRF-Proteomics column names. Only columns without existing templates are shown.\n            </p>\n\n            @if (availableOfficialColumns.length === 0) {\n              <div class=\"alert alert-warning\">\n                <i class=\"bi bi-exclamation-triangle me-2\"></i>\n                All official SDRF columns already have templates created.\n              </div>\n            } @else {\n              <div class=\"row\">\n                @for (column of availableOfficialColumns; track column.name) {\n                  <div class=\"col-md-6 mb-2\">\n                    <div class=\"card h-100 cursor-pointer border-info\"\n                         (click)=\"selectOfficialColumn(column)\"\n                         [class.border-primary]=\"selectedOfficialColumn?.name === column.name\">\n                      <div class=\"card-body py-2\">\n                        <h6 class=\"card-title mb-1 font-monospace\">\n                          {{ column.name }}\n                        </h6>\n                        <p class=\"card-text small mb-1\">\n                          <span class=\"badge\"\n                                [class]=\"column.type === 'characteristics' ? 'bg-primary' :\n                                        column.type === 'comment' ? 'bg-success' :\n                                        column.type === 'factor_value' ? 'bg-warning' : 'bg-secondary'\">\n                            {{ column.type }}\n                          </span>\n                        </p>\n                        <p class=\"card-text small mb-0\">{{ column.description }}</p>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Template Swapping for Edit Mode -->\n      @if (isEdit && showTemplateSwap) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-info\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-arrow-left-right me-2\"></i>Swap to Different Template\n            </h6>\n            <p class=\"mb-3\">\n              Choose a different template to change the column name and settings. Your current value will be preserved.\n            </p>\n\n            <div class=\"mb-3\">\n              <input\n                type=\"text\"\n                class=\"form-control mb-2\"\n                placeholder=\"Search templates...\"\n                [(ngModel)]=\"templateFilter\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (input)=\"onTemplateFilterChange()\">\n\n              <select\n                class=\"form-select mb-3\"\n                size=\"4\"\n                [disabled]=\"isLoadingTemplates\">\n                @if (isLoadingTemplates) {\n                  <option value=\"\" disabled>Loading templates...</option>\n                } @else {\n                  @for (template of templates; track template.id) {\n                    <option\n                      [value]=\"template.id\"\n                      (click)=\"swapToTemplate(template)\"\n                      style=\"cursor: pointer;\">\n                      {{ template.columnName }} - {{ template.columnType }}@if (template.ontologyType) { ({{ getOntologyTypeLabel(template.ontologyType) }})}\n                    </option>\n                  }\n                }\n              </select>\n            </div>\n\n            <div class=\"d-flex justify-content-between\">\n              <button\n                type=\"button\"\n                class=\"btn btn-success\"\n                (click)=\"showCreateCustomTemplateOption()\">\n                <i class=\"bi bi-plus-circle me-1\"></i>Create Custom Template\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-secondary\"\n                (click)=\"cancelTemplateSwap()\">\n                <i class=\"bi bi-x-circle me-1\"></i>Cancel\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Custom Template Creation Option -->\n      @if (isEdit && showCreateCustomTemplate) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-warning\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-plus-circle me-2\"></i>Create Custom Template\n            </h6>\n            <p class=\"mb-3\">\n              This will create a new custom template with your desired column name and settings.\n            </p>\n\n            <div class=\"d-flex justify-content-between\">\n              <button\n                type=\"button\"\n                class=\"btn btn-warning\"\n                (click)=\"createCustomTemplate()\">\n                <i class=\"bi bi-gear me-1\"></i>Create & Apply Template\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-secondary\"\n                (click)=\"cancelTemplateSwap()\">\n                <i class=\"bi bi-x-circle me-1\"></i>Cancel\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Template Selection -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-file-earmark-text me-2\"></i>Template Selection\n          <small class=\"text-muted ms-2\">\n            @if (!isEdit) {\n              (Step 2: Or select from existing templates)\n            } @else {\n              (Optional - select a template to auto-fill column settings)\n            }\n          </small>\n        </h6>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"input-group mb-3\">\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            placeholder=\"Search column templates...\"\n            [(ngModel)]=\"templateFilter\"\n            [ngModelOptions]=\"{standalone: true}\"\n            (input)=\"onTemplateFilterChange()\">\n          @if (templateFilter) {\n            <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"clearTemplateFilter()\">\n              <i class=\"bi bi-x\"></i>\n            </button>\n          }\n        </div>\n\n        <select \n          class=\"form-select mb-3\"\n          size=\"5\"\n          [(ngModel)]=\"selectedTemplateId\"\n          [ngModelOptions]=\"{standalone: true}\"\n          (change)=\"onTemplateSelectionChange()\"\n          [disabled]=\"isLoadingTemplates\">\n          <option value=\"\">No template selected</option>\n          @if (isLoadingTemplates) {\n            <option value=\"\" disabled>Loading templates...</option>\n          } @else {\n            @for (template of templates; track template.id) {\n              <option [value]=\"template.id\">\n                {{ template.columnName }} - {{ template.columnType }}@if (template.ontologyType) { ({{ getOntologyTypeLabel(template.ontologyType) }})}\n              </option>\n            }\n          }\n        </select>\n\n        @if (totalTemplatePages > 1) {\n          <div class=\"d-flex justify-content-between align-items-center\">\n            <small class=\"text-muted\">\n              Showing {{ (currentTemplatePage - 1) * templatePageSize + 1 }}-{{ Math.min(currentTemplatePage * templatePageSize, totalTemplates) }}\n              of {{ totalTemplates }}\n            </small>\n            <ngb-pagination\n              [collectionSize]=\"totalTemplates\"\n              [page]=\"currentTemplatePage\"\n              [pageSize]=\"templatePageSize\"\n              [maxSize]=\"3\"\n              [boundaryLinks]=\"true\"\n              [rotate]=\"true\"\n              (pageChange)=\"onTemplatePageChange($event)\"\n              class=\"pagination-sm mb-0\">\n            </ngb-pagination>\n          </div>\n        }\n\n        @if (selectedTemplate) {\n          <div class=\"alert alert-info mt-3\">\n            <i class=\"bi bi-info-circle me-2\"></i>\n            Template \"{{ selectedTemplate.name }}\" selected. Settings will be applied automatically.\n            <button type=\"button\" class=\"btn btn-sm btn-outline-info float-end\" (click)=\"clearTemplate()\">\n              Clear Selection\n            </button>\n          </div>\n        }\n      </div>\n\n      <!-- Manual Entry -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-pencil me-2\"></i>Column Details\n          @if (selectedTemplate) {\n            <small class=\"text-muted ms-2\">(Auto-filled from template - you can modify as needed)</small>\n          }\n        </h6>\n      </div>\n      \n      <div class=\"col-12 mb-3\">\n        <label for=\"columnName\" class=\"form-label\">\n          Column Name *\n          <span class=\"text-muted ms-2\">\n            <i class=\"bi bi-info-circle\"></i>\n            Column names are managed through templates\n          </span>\n        </label>\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            id=\"columnName\"\n            formControlName=\"name\"\n            [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n            readonly\n            placeholder=\"Select from official columns or templates below\">\n          @if (isEdit) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-secondary\"\n              (click)=\"showTemplateSwapOptions()\"\n              title=\"Change to different template\">\n              <i class=\"bi bi-arrow-left-right\"></i> Swap Template\n            </button>\n          }\n        </div>\n        <div class=\"form-text\">\n          <i class=\"bi bi-info-circle me-1\"></i>\n          @if (isEdit) {\n            To change the column name, swap to a different template or create a new custom template.\n          } @else {\n            Select from official SDRF columns or existing templates below to ensure compliance.\n          }\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnType\" class=\"form-label\">\n          Column Type *\n          <span class=\"text-muted ms-2\">\n            <i class=\"bi bi-info-circle\"></i>\n            Managed through templates\n          </span>\n        </label>\n        <select\n          class=\"form-select\"\n          id=\"columnType\"\n          formControlName=\"type\"\n          [class.is-invalid]=\"editForm.get('type')?.invalid && editForm.get('type')?.touched\">\n          @for (type of columnTypes; track type.value) {\n            <option [value]=\"type.value\">{{ type.label }}</option>\n          }\n        </select>\n      </div>\n\n      <!-- Advanced Mode Toggle -->\n      <div class=\"col-12 mb-3\">\n        <div class=\"form-check form-switch\">\n          <input\n            class=\"form-check-input\"\n            type=\"checkbox\"\n            id=\"advancedMode\"\n            [checked]=\"showAdvancedMode()\"\n            (change)=\"toggleAdvancedMode()\">\n          <label class=\"form-check-label\" for=\"advancedMode\">\n            <i class=\"bi bi-gear me-1\"></i>Advanced Mode\n          </label>\n          <div class=\"form-text\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Show advanced options for ontology configuration and column settings\n          </div>\n        </div>\n      </div>\n\n      @if (showAdvancedMode()) {\n        <div class=\"col-md-6 mb-3\">\n          <label for=\"ontologyType\" class=\"form-label\">\n            Ontology Type\n            <span class=\"badge bg-warning ms-2\">\n              <i class=\"bi bi-exclamation-triangle me-1\"></i>Advanced\n            </span>\n          </label>\n        <select\n          class=\"form-select\"\n          id=\"ontologyType\"\n          formControlName=\"ontologyType\"\n          (change)=\"onOntologyTypeChange($event)\">\n          @for (ontology of ontologyTypes; track $index) {\n            <option [value]=\"$index\">{{ ontology.label }}</option>\n          }\n        </select>\n\n        @if (hasOntologyType) {\n          <div class=\"form-text mt-2\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Custom ontology filters will be applied based on the selected type\n          </div>\n        }\n        </div>\n\n        @if (hasOntologyType) {\n          <div class=\"col-12 mb-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                <i class=\"bi bi-search me-1\"></i>Enable Typeahead Autocomplete\n              </label>\n              <div class=\"form-text\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                Enable autocomplete suggestions from {{ selectedOntologyConfig?.label || 'selected' }} ontology when editing values\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Column Options - Advanced Mode Only -->\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>Column Options\n            <span class=\"badge bg-warning ms-2\">\n              <i class=\"bi bi-exclamation-triangle me-1\"></i>Advanced\n            </span>\n          </h6>\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=\"mandatory\"\n                  formControlName=\"mandatory\">\n                <label class=\"form-check-label\" for=\"mandatory\">\n                  <i class=\"bi bi-exclamation-circle me-1\"></i>Mandatory\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=\"hidden\"\n                  formControlName=\"hidden\">\n                <label class=\"form-check-label\" for=\"hidden\">\n                  <i class=\"bi bi-eye-slash me-1\"></i>Hidden\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=\"readonly\"\n                  formControlName=\"readonly\">\n                <label class=\"form-check-label\" for=\"readonly\">\n                  <i class=\"bi bi-lock me-1\"></i>Read Only\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"notApplicable\"\n                  formControlName=\"notApplicable\">\n                <label class=\"form-check-label\" for=\"notApplicable\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"notAvailable\"\n                  formControlName=\"notAvailable\">\n                <label class=\"form-check-label\" for=\"notAvailable\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"staffOnly\"\n                  formControlName=\"staffOnly\">\n                <label class=\"form-check-label\" for=\"staffOnly\">\n                  <i class=\"bi bi-shield-lock me-1\"></i>Staff Only\n                </label>\n              </div>\n            </div>\n          </div>\n          <div class=\"row mt-2\">\n            <div class=\"col-12\">\n              <div class=\"alert alert-info py-2\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                <small>\n                  <strong>Staff Only:</strong> When enabled, this column will only be visible and editable by staff members.\n                </small>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"defaultValue\" class=\"form-label\">\n          Default Value\n          @if (hasTypeaheadEnabled) {\n            <span class=\"badge bg-success ms-2\">\n              <i class=\"bi bi-search me-1\"></i>Typeahead Enabled\n            </span>\n          }\n        </label>\n\n        @if (editForm.get('notApplicable')?.value || editForm.get('notAvailable')?.value) {\n          <div class=\"mb-2\">\n            <small class=\"text-muted d-block mb-1\">Quick Select:</small>\n            <div class=\"btn-group btn-group-sm\" role=\"group\">\n              @if (editForm.get('notApplicable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not applicable')\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </button>\n              }\n              @if (editForm.get('notAvailable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not available')\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <div class=\"input-group\">\n          <input \n            type=\"text\" \n            class=\"form-control\"\n            id=\"defaultValue\"\n            formControlName=\"value\"\n            placeholder=\"Enter default 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 (hasTypeaheadEnabled) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to use autocomplete suggestions from {{ selectedOntologyConfig?.label || 'selected' }} ontology\n          } @else if (hasOntologyType) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set default value. Enable typeahead in Advanced Mode for autocomplete suggestions.\n          } @else if (showAdvancedMode()) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set the default value (select an ontology type above for smart suggestions)\n          } @else {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set the default value (enable Advanced Mode for ontology autocomplete)\n          }\n        </div>\n      </div>\n\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' : 'Add' }} Column\n  </button>\n</div>\n", styles: [".template-selection-container{border:1px solid var(--bs-border-color);border-radius:.375rem;padding:.5rem}.template-item{cursor:pointer;transition:all .2s ease}.template-item:hover{background-color:rgba(var(--bs-primary-rgb),.1);border-color:var(--bs-primary)!important}.template-item.selected{background-color:rgba(var(--bs-primary-rgb),.15);border-color:var(--bs-primary)!important;box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.25)}.cursor-pointer{cursor:pointer}.card.cursor-pointer{transition:all .2s ease}.card.cursor-pointer:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.card.cursor-pointer.border-info{border-width:2px}.modal-lg{max-width:900px}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }, { type: i2.NgbModal }, { type: MetadataColumnTemplateService }, { type: SdrfSyntaxService }], propDecorators: { column: [{
                 type: Input
             }], templateId: [{
@@ -6201,6 +6231,8 @@ class ColumnTemplateEditModal {
             visibility: ['private', Validators.required],
             labGroup: [null],
             enableTypeahead: [false],
+            notApplicable: [false],
+            notAvailable: [false],
             excelValidation: [false],
             isActive: [true],
             tags: [''],
@@ -6232,6 +6264,8 @@ class ColumnTemplateEditModal {
                 visibility: this.template.visibility || 'private',
                 labGroup: this.template.labGroup || null,
                 enableTypeahead: this.template.enableTypeahead || false,
+                notApplicable: this.template.notApplicable || false,
+                notAvailable: this.template.notAvailable || false,
                 excelValidation: this.template.excelValidation || false,
                 isActive: this.template.isActive !== false,
                 tags: this.template.tags || '',
@@ -6290,6 +6324,10 @@ class ColumnTemplateEditModal {
             control?.markAsTouched();
         });
     }
+    setDefaultValue(value) {
+        this.editForm.get('defaultValue')?.setValue(value);
+        this.editForm.get('defaultValue')?.markAsTouched();
+    }
     onCancel() {
         this.activeModal.dismiss();
     }
@@ -6315,11 +6353,11 @@ class ColumnTemplateEditModal {
         return this.isEdit ? 'Edit Column Template' : 'Create Column Template';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColumnTemplateEditModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: ColumnTemplateEditModal, isStandalone: true, selector: "ccv-column-template-edit-modal", inputs: { template: "template", labGroups: "labGroups", isEdit: "isEdit" }, outputs: { templateSaved: "templateSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-clipboard-list me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"row\">\n      <!-- Basic Information -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-info-circle me-2\"></i>Basic Information\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"templateName\" class=\"form-label\">Template Name *</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"templateName\"\n          formControlName=\"name\"\n          [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n          placeholder=\"Enter template name\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('name') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnName\" class=\"form-label\">Column Name *</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"columnName\"\n          formControlName=\"columnName\"\n          [class.is-invalid]=\"editForm.get('columnName')?.invalid && editForm.get('columnName')?.touched\"\n          placeholder=\"columnName\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('columnName') }}\n        </div>\n        <small class=\"form-text text-muted\">Column name based on column type and template name. Example: characteristics[biological replicate]</small>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"description\" class=\"form-label\">Description</label>\n        <textarea\n          class=\"form-control\"\n          id=\"description\"\n          formControlName=\"description\"\n          rows=\"2\"\n          placeholder=\"Optional description\"></textarea>\n      </div>\n\n      <!-- Column Configuration -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-gear me-2\"></i>Column Configuration\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnType\" class=\"form-label\">Column Type *</label>\n        <select\n          class=\"form-select\"\n          id=\"columnType\"\n          formControlName=\"columnType\"\n          [class.is-invalid]=\"editForm.get('columnType')?.invalid && editForm.get('columnType')?.touched\">\n          @for (type of columnTypes; track type.value) {\n            <option [value]=\"type.value\">{{ type.label }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('columnType') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"defaultPosition\" class=\"form-label\">Default Position</label>\n        <input\n          type=\"number\"\n          class=\"form-control\"\n          id=\"defaultPosition\"\n          formControlName=\"defaultPosition\"\n          [class.is-invalid]=\"editForm.get('defaultPosition')?.invalid && editForm.get('defaultPosition')?.touched\"\n          min=\"0\"\n          placeholder=\"0\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('defaultPosition') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"defaultValue\" class=\"form-label\">Default Value</label>\n        <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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: ColumnTemplateEditModal, isStandalone: true, selector: "ccv-column-template-edit-modal", inputs: { template: "template", labGroups: "labGroups", isEdit: "isEdit" }, outputs: { templateSaved: "templateSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-clipboard-list me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"row\">\n      <!-- Basic Information -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-info-circle me-2\"></i>Basic Information\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"templateName\" class=\"form-label\">Template Name *</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"templateName\"\n          formControlName=\"name\"\n          [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n          placeholder=\"Enter template name\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('name') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnName\" class=\"form-label\">Column Name *</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"columnName\"\n          formControlName=\"columnName\"\n          [class.is-invalid]=\"editForm.get('columnName')?.invalid && editForm.get('columnName')?.touched\"\n          placeholder=\"columnName\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('columnName') }}\n        </div>\n        <small class=\"form-text text-muted\">Column name based on column type and template name. Example: characteristics[biological replicate]</small>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"description\" class=\"form-label\">Description</label>\n        <textarea\n          class=\"form-control\"\n          id=\"description\"\n          formControlName=\"description\"\n          rows=\"2\"\n          placeholder=\"Optional description\"></textarea>\n      </div>\n\n      <!-- Column Configuration -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-gear me-2\"></i>Column Configuration\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnType\" class=\"form-label\">Column Type *</label>\n        <select\n          class=\"form-select\"\n          id=\"columnType\"\n          formControlName=\"columnType\"\n          [class.is-invalid]=\"editForm.get('columnType')?.invalid && editForm.get('columnType')?.touched\">\n          @for (type of columnTypes; track type.value) {\n            <option [value]=\"type.value\">{{ type.label }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('columnType') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"defaultPosition\" class=\"form-label\">Default Position</label>\n        <input\n          type=\"number\"\n          class=\"form-control\"\n          id=\"defaultPosition\"\n          formControlName=\"defaultPosition\"\n          [class.is-invalid]=\"editForm.get('defaultPosition')?.invalid && editForm.get('defaultPosition')?.touched\"\n          min=\"0\"\n          placeholder=\"0\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('defaultPosition') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"defaultValue\" class=\"form-label\">Default Value</label>\n        @if (editForm.get('notApplicable')?.value || editForm.get('notAvailable')?.value) {\n          <div class=\"mb-2\">\n            <div class=\"btn-group btn-group-sm\" role=\"group\">\n              @if (editForm.get('notApplicable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not applicable')\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </button>\n              }\n              @if (editForm.get('notAvailable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not available')\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </button>\n              }\n            </div>\n          </div>\n        }\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"defaultValue\"\n          formControlName=\"defaultValue\"\n          placeholder=\"Optional default value\">\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"ontologyType\" class=\"form-label\">Ontology Type</label>\n        <select\n          class=\"form-select\"\n          id=\"ontologyType\"\n          formControlName=\"ontologyType\"\n          (change)=\"onOntologyTypeChange()\">\n          @for (ontology of ontologyTypes; track $index) {\n            <option [value]=\"ontology.value\">{{ ontology.label }}</option>\n          }\n        </select>\n      </div>\n\n      @if (editForm.get('ontologyType')?.value && editForm.get('customOntologyFilters')?.value && Object.keys(editForm.get('customOntologyFilters')?.value || {}).length > 0) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-info\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-filter me-2\"></i>Custom Ontology Filters Applied\n            </h6>\n            <small class=\"mb-0\">\n              The following custom filters will be automatically applied for this ontology type:\n              <code class=\"ms-1\">{{ editForm.get('customOntologyFilters')?.value | json }}</code>\n            </small>\n          </div>\n        </div>\n      }\n\n      <!-- Visibility and Access -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-eye me-2\"></i>Visibility and Access\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"visibility\" class=\"form-label\">Visibility *</label>\n        <select\n          class=\"form-select\"\n          id=\"visibility\"\n          formControlName=\"visibility\"\n          (change)=\"onVisibilityChange()\"\n          [class.is-invalid]=\"editForm.get('visibility')?.invalid && editForm.get('visibility')?.touched\">\n          @for (option of visibilityOptions; track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('visibility') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"labGroup\" class=\"form-label\">Lab Group</label>\n        <select\n          class=\"form-select\"\n          id=\"labGroup\"\n          formControlName=\"labGroup\"\n          [class.is-invalid]=\"editForm.get('labGroup')?.invalid && editForm.get('labGroup')?.touched\">\n          <option [ngValue]=\"null\">Select Lab Group</option>\n          @for (group of labGroups; track group.id) {\n            <option [ngValue]=\"group.id\">{{ group.name }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('labGroup') }}\n        </div>\n      </div>\n\n      <!-- Additional Options -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-sliders me-2\"></i>Additional Options\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"category\" class=\"form-label\">Category</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"category\"\n          formControlName=\"category\"\n          placeholder=\"Template category\">\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"tags\" class=\"form-label\">Tags</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"tags\"\n          formControlName=\"tags\"\n          placeholder=\"Comma-separated tags\">\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"enableTypeahead\"\n                formControlName=\"enableTypeahead\">\n              <label class=\"form-check-label\" for=\"enableTypeahead\">\n                Enable Typeahead\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"notApplicable\"\n                formControlName=\"notApplicable\">\n              <label class=\"form-check-label\" for=\"notApplicable\">\n                <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"notAvailable\"\n                formControlName=\"notAvailable\">\n              <label class=\"form-check-label\" for=\"notAvailable\">\n                <i class=\"bi bi-question-circle me-1\"></i>Not Available\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"excelValidation\"\n                formControlName=\"excelValidation\">\n              <label class=\"form-check-label\" for=\"excelValidation\">\n                Excel Validation\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"isActive\"\n                formControlName=\"isActive\">\n              <label class=\"form-check-label\" for=\"isActive\">\n                Active\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\n  </button>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary\"\n    (click)=\"onSubmit()\"\n    [disabled]=\"editForm.invalid || isLoading()\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-check-circle me-1\"></i>\n    {{ isEdit ? 'Update' : 'Create' }} Template\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbModule }, { kind: "pipe", type: i5.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ColumnTemplateEditModal, decorators: [{
             type: Component,
-            args: [{ selector: 'ccv-column-template-edit-modal', standalone: true, imports: [CommonModule, ReactiveFormsModule, NgbModule], template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-clipboard-list me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"row\">\n      <!-- Basic Information -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-info-circle me-2\"></i>Basic Information\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"templateName\" class=\"form-label\">Template Name *</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"templateName\"\n          formControlName=\"name\"\n          [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n          placeholder=\"Enter template name\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('name') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnName\" class=\"form-label\">Column Name *</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"columnName\"\n          formControlName=\"columnName\"\n          [class.is-invalid]=\"editForm.get('columnName')?.invalid && editForm.get('columnName')?.touched\"\n          placeholder=\"columnName\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('columnName') }}\n        </div>\n        <small class=\"form-text text-muted\">Column name based on column type and template name. Example: characteristics[biological replicate]</small>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"description\" class=\"form-label\">Description</label>\n        <textarea\n          class=\"form-control\"\n          id=\"description\"\n          formControlName=\"description\"\n          rows=\"2\"\n          placeholder=\"Optional description\"></textarea>\n      </div>\n\n      <!-- Column Configuration -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-gear me-2\"></i>Column Configuration\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnType\" class=\"form-label\">Column Type *</label>\n        <select\n          class=\"form-select\"\n          id=\"columnType\"\n          formControlName=\"columnType\"\n          [class.is-invalid]=\"editForm.get('columnType')?.invalid && editForm.get('columnType')?.touched\">\n          @for (type of columnTypes; track type.value) {\n            <option [value]=\"type.value\">{{ type.label }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('columnType') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"defaultPosition\" class=\"form-label\">Default Position</label>\n        <input\n          type=\"number\"\n          class=\"form-control\"\n          id=\"defaultPosition\"\n          formControlName=\"defaultPosition\"\n          [class.is-invalid]=\"editForm.get('defaultPosition')?.invalid && editForm.get('defaultPosition')?.touched\"\n          min=\"0\"\n          placeholder=\"0\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('defaultPosition') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"defaultValue\" class=\"form-label\">Default Value</label>\n        <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" }]
+            args: [{ selector: 'ccv-column-template-edit-modal', standalone: true, imports: [CommonModule, ReactiveFormsModule, NgbModule], template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-clipboard-list me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"row\">\n      <!-- Basic Information -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-info-circle me-2\"></i>Basic Information\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"templateName\" class=\"form-label\">Template Name *</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"templateName\"\n          formControlName=\"name\"\n          [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n          placeholder=\"Enter template name\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('name') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnName\" class=\"form-label\">Column Name *</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"columnName\"\n          formControlName=\"columnName\"\n          [class.is-invalid]=\"editForm.get('columnName')?.invalid && editForm.get('columnName')?.touched\"\n          placeholder=\"columnName\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('columnName') }}\n        </div>\n        <small class=\"form-text text-muted\">Column name based on column type and template name. Example: characteristics[biological replicate]</small>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"description\" class=\"form-label\">Description</label>\n        <textarea\n          class=\"form-control\"\n          id=\"description\"\n          formControlName=\"description\"\n          rows=\"2\"\n          placeholder=\"Optional description\"></textarea>\n      </div>\n\n      <!-- Column Configuration -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-gear me-2\"></i>Column Configuration\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnType\" class=\"form-label\">Column Type *</label>\n        <select\n          class=\"form-select\"\n          id=\"columnType\"\n          formControlName=\"columnType\"\n          [class.is-invalid]=\"editForm.get('columnType')?.invalid && editForm.get('columnType')?.touched\">\n          @for (type of columnTypes; track type.value) {\n            <option [value]=\"type.value\">{{ type.label }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('columnType') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"defaultPosition\" class=\"form-label\">Default Position</label>\n        <input\n          type=\"number\"\n          class=\"form-control\"\n          id=\"defaultPosition\"\n          formControlName=\"defaultPosition\"\n          [class.is-invalid]=\"editForm.get('defaultPosition')?.invalid && editForm.get('defaultPosition')?.touched\"\n          min=\"0\"\n          placeholder=\"0\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('defaultPosition') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"defaultValue\" class=\"form-label\">Default Value</label>\n        @if (editForm.get('notApplicable')?.value || editForm.get('notAvailable')?.value) {\n          <div class=\"mb-2\">\n            <div class=\"btn-group btn-group-sm\" role=\"group\">\n              @if (editForm.get('notApplicable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not applicable')\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </button>\n              }\n              @if (editForm.get('notAvailable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not available')\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </button>\n              }\n            </div>\n          </div>\n        }\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"defaultValue\"\n          formControlName=\"defaultValue\"\n          placeholder=\"Optional default value\">\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"ontologyType\" class=\"form-label\">Ontology Type</label>\n        <select\n          class=\"form-select\"\n          id=\"ontologyType\"\n          formControlName=\"ontologyType\"\n          (change)=\"onOntologyTypeChange()\">\n          @for (ontology of ontologyTypes; track $index) {\n            <option [value]=\"ontology.value\">{{ ontology.label }}</option>\n          }\n        </select>\n      </div>\n\n      @if (editForm.get('ontologyType')?.value && editForm.get('customOntologyFilters')?.value && Object.keys(editForm.get('customOntologyFilters')?.value || {}).length > 0) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-info\">\n            <h6 class=\"alert-heading\">\n              <i class=\"bi bi-filter me-2\"></i>Custom Ontology Filters Applied\n            </h6>\n            <small class=\"mb-0\">\n              The following custom filters will be automatically applied for this ontology type:\n              <code class=\"ms-1\">{{ editForm.get('customOntologyFilters')?.value | json }}</code>\n            </small>\n          </div>\n        </div>\n      }\n\n      <!-- Visibility and Access -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-eye me-2\"></i>Visibility and Access\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"visibility\" class=\"form-label\">Visibility *</label>\n        <select\n          class=\"form-select\"\n          id=\"visibility\"\n          formControlName=\"visibility\"\n          (change)=\"onVisibilityChange()\"\n          [class.is-invalid]=\"editForm.get('visibility')?.invalid && editForm.get('visibility')?.touched\">\n          @for (option of visibilityOptions; track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('visibility') }}\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"labGroup\" class=\"form-label\">Lab Group</label>\n        <select\n          class=\"form-select\"\n          id=\"labGroup\"\n          formControlName=\"labGroup\"\n          [class.is-invalid]=\"editForm.get('labGroup')?.invalid && editForm.get('labGroup')?.touched\">\n          <option [ngValue]=\"null\">Select Lab Group</option>\n          @for (group of labGroups; track group.id) {\n            <option [ngValue]=\"group.id\">{{ group.name }}</option>\n          }\n        </select>\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('labGroup') }}\n        </div>\n      </div>\n\n      <!-- Additional Options -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-sliders me-2\"></i>Additional Options\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"category\" class=\"form-label\">Category</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"category\"\n          formControlName=\"category\"\n          placeholder=\"Template category\">\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"tags\" class=\"form-label\">Tags</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"tags\"\n          formControlName=\"tags\"\n          placeholder=\"Comma-separated tags\">\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"enableTypeahead\"\n                formControlName=\"enableTypeahead\">\n              <label class=\"form-check-label\" for=\"enableTypeahead\">\n                Enable Typeahead\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"notApplicable\"\n                formControlName=\"notApplicable\">\n              <label class=\"form-check-label\" for=\"notApplicable\">\n                <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"notAvailable\"\n                formControlName=\"notAvailable\">\n              <label class=\"form-check-label\" for=\"notAvailable\">\n                <i class=\"bi bi-question-circle me-1\"></i>Not Available\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"excelValidation\"\n                formControlName=\"excelValidation\">\n              <label class=\"form-check-label\" for=\"excelValidation\">\n                Excel Validation\n              </label>\n            </div>\n          </div>\n          <div class=\"col-md-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"isActive\"\n                formControlName=\"isActive\">\n              <label class=\"form-check-label\" for=\"isActive\">\n                Active\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\n  </button>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary\"\n    (click)=\"onSubmit()\"\n    [disabled]=\"editForm.invalid || isLoading()\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-check-circle me-1\"></i>\n    {{ isEdit ? 'Update' : 'Create' }} Template\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }], propDecorators: { template: [{
                 type: Input
             }], labGroups: [{
@@ -7405,6 +7443,1699 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     ], 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 SearchReplaceModal {
+    fb;
+    activeModal;
+    config;
+    searchReplaceForm;
+    isProcessing = signal(false, ...(ngDevMode ? [{ debugName: "isProcessing" }] : []));
+    result = signal(null, ...(ngDevMode ? [{ debugName: "result" }] : []));
+    constructor(fb, activeModal) {
+        this.fb = fb;
+        this.activeModal = activeModal;
+        this.searchReplaceForm = this.fb.group({
+            oldValue: ['', [Validators.required, Validators.minLength(1)]],
+            newValue: ['', [Validators.required]],
+            columnId: [null],
+            columnName: [''],
+            updatePools: [false]
+        });
+    }
+    get isTableContext() {
+        return this.config?.context === 'table';
+    }
+    get isColumnContext() {
+        return this.config?.context === 'column';
+    }
+    onSubmit() {
+        if (this.searchReplaceForm.valid) {
+            this.activeModal.close({
+                action: 'replace',
+                data: this.searchReplaceForm.value
+            });
+        }
+        else {
+            this.markFormGroupTouched();
+        }
+    }
+    markFormGroupTouched() {
+        Object.keys(this.searchReplaceForm.controls).forEach(key => {
+            const control = this.searchReplaceForm.get(key);
+            control?.markAsTouched();
+        });
+    }
+    onCancel() {
+        this.activeModal.dismiss();
+    }
+    getFieldError(fieldName) {
+        const control = this.searchReplaceForm.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`;
+        }
+        return '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SearchReplaceModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SearchReplaceModal, isStandalone: true, selector: "ccv-search-replace-modal", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"modal-header\">\r\n  <h4 class=\"modal-title\">\r\n    <i class=\"bi bi-search me-2\"></i>Search and Replace Values\r\n  </h4>\r\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\r\n</div>\r\n\r\n<div class=\"modal-body\">\r\n  <form [formGroup]=\"searchReplaceForm\" (ngSubmit)=\"onSubmit()\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12 mb-3\">\r\n        <div class=\"alert alert-info\">\r\n          <i class=\"bi bi-info-circle me-2\"></i>\r\n          @if (isTableContext) {\r\n            <strong>Table Context:</strong> Search and replace values across {{ config.tableName }}\r\n          } @else {\r\n            <strong>Column Context:</strong> Search and replace values in {{ config.columnName }}\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      @if (isTableContext && config.columns && config.columns.length > 0) {\r\n        <div class=\"col-12 mb-3\">\r\n          <label for=\"columnSelect\" class=\"form-label\">\r\n            Target Column <small class=\"text-muted\">(optional - leave empty to search all columns)</small>\r\n          </label>\r\n          <select\r\n            class=\"form-select\"\r\n            id=\"columnSelect\"\r\n            formControlName=\"columnId\">\r\n            <option [ngValue]=\"null\">All Columns</option>\r\n            @for (column of config.columns; track column.id) {\r\n              <option [ngValue]=\"column.id\">{{ column.name }}</option>\r\n            }\r\n          </select>\r\n          <div class=\"form-text\">\r\n            <i class=\"bi bi-info-circle me-1\"></i>\r\n            Select a specific column to limit the search, or leave as \"All Columns\" to search everywhere.\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"col-12 mb-3\">\r\n        <label for=\"oldValue\" class=\"form-label\">Find Value *</label>\r\n        <input\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n          id=\"oldValue\"\r\n          formControlName=\"oldValue\"\r\n          [class.is-invalid]=\"searchReplaceForm.get('oldValue')?.invalid && searchReplaceForm.get('oldValue')?.touched\"\r\n          placeholder=\"Enter value to find\">\r\n        <div class=\"invalid-feedback\">\r\n          {{ getFieldError('oldValue') }}\r\n        </div>\r\n        <div class=\"form-text\">\r\n          <i class=\"bi bi-info-circle me-1\"></i>\r\n          Exact match - this will find all cells with exactly this value.\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"col-12 mb-3\">\r\n        <label for=\"newValue\" class=\"form-label\">Replace With *</label>\r\n        <input\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n          id=\"newValue\"\r\n          formControlName=\"newValue\"\r\n          [class.is-invalid]=\"searchReplaceForm.get('newValue')?.invalid && searchReplaceForm.get('newValue')?.touched\"\r\n          placeholder=\"Enter replacement value\">\r\n        <div class=\"invalid-feedback\">\r\n          {{ getFieldError('newValue') }}\r\n        </div>\r\n        <div class=\"form-text\">\r\n          <i class=\"bi bi-info-circle me-1\"></i>\r\n          All matching values will be replaced with this value.\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"col-12 mb-3\">\r\n        <div class=\"form-check form-switch\">\r\n          <input\r\n            class=\"form-check-input\"\r\n            type=\"checkbox\"\r\n            id=\"updatePools\"\r\n            formControlName=\"updatePools\">\r\n          <label class=\"form-check-label\" for=\"updatePools\">\r\n            Update Sample Pools\r\n          </label>\r\n        </div>\r\n        <div class=\"form-text\">\r\n          <i class=\"bi bi-info-circle me-1\"></i>\r\n          When enabled, this will also update values in related sample pools.\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"col-12\">\r\n        <div class=\"alert alert-warning\">\r\n          <i class=\"bi bi-exclamation-triangle me-2\"></i>\r\n          <strong>Warning:</strong> This operation cannot be undone. All matching values will be permanently replaced.\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n<div class=\"modal-footer\">\r\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\r\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"btn btn-primary\"\r\n    (click)=\"onSubmit()\"\r\n    [disabled]=\"searchReplaceForm.invalid || isProcessing()\">\r\n    @if (isProcessing()) {\r\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\r\n    }\r\n    <i class=\"bi bi-arrow-repeat me-1\"></i>\r\n    Replace All\r\n  </button>\r\n</div>\r\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.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SearchReplaceModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'ccv-search-replace-modal', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"modal-header\">\r\n  <h4 class=\"modal-title\">\r\n    <i class=\"bi bi-search me-2\"></i>Search and Replace Values\r\n  </h4>\r\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\r\n</div>\r\n\r\n<div class=\"modal-body\">\r\n  <form [formGroup]=\"searchReplaceForm\" (ngSubmit)=\"onSubmit()\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12 mb-3\">\r\n        <div class=\"alert alert-info\">\r\n          <i class=\"bi bi-info-circle me-2\"></i>\r\n          @if (isTableContext) {\r\n            <strong>Table Context:</strong> Search and replace values across {{ config.tableName }}\r\n          } @else {\r\n            <strong>Column Context:</strong> Search and replace values in {{ config.columnName }}\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      @if (isTableContext && config.columns && config.columns.length > 0) {\r\n        <div class=\"col-12 mb-3\">\r\n          <label for=\"columnSelect\" class=\"form-label\">\r\n            Target Column <small class=\"text-muted\">(optional - leave empty to search all columns)</small>\r\n          </label>\r\n          <select\r\n            class=\"form-select\"\r\n            id=\"columnSelect\"\r\n            formControlName=\"columnId\">\r\n            <option [ngValue]=\"null\">All Columns</option>\r\n            @for (column of config.columns; track column.id) {\r\n              <option [ngValue]=\"column.id\">{{ column.name }}</option>\r\n            }\r\n          </select>\r\n          <div class=\"form-text\">\r\n            <i class=\"bi bi-info-circle me-1\"></i>\r\n            Select a specific column to limit the search, or leave as \"All Columns\" to search everywhere.\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"col-12 mb-3\">\r\n        <label for=\"oldValue\" class=\"form-label\">Find Value *</label>\r\n        <input\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n          id=\"oldValue\"\r\n          formControlName=\"oldValue\"\r\n          [class.is-invalid]=\"searchReplaceForm.get('oldValue')?.invalid && searchReplaceForm.get('oldValue')?.touched\"\r\n          placeholder=\"Enter value to find\">\r\n        <div class=\"invalid-feedback\">\r\n          {{ getFieldError('oldValue') }}\r\n        </div>\r\n        <div class=\"form-text\">\r\n          <i class=\"bi bi-info-circle me-1\"></i>\r\n          Exact match - this will find all cells with exactly this value.\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"col-12 mb-3\">\r\n        <label for=\"newValue\" class=\"form-label\">Replace With *</label>\r\n        <input\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n          id=\"newValue\"\r\n          formControlName=\"newValue\"\r\n          [class.is-invalid]=\"searchReplaceForm.get('newValue')?.invalid && searchReplaceForm.get('newValue')?.touched\"\r\n          placeholder=\"Enter replacement value\">\r\n        <div class=\"invalid-feedback\">\r\n          {{ getFieldError('newValue') }}\r\n        </div>\r\n        <div class=\"form-text\">\r\n          <i class=\"bi bi-info-circle me-1\"></i>\r\n          All matching values will be replaced with this value.\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"col-12 mb-3\">\r\n        <div class=\"form-check form-switch\">\r\n          <input\r\n            class=\"form-check-input\"\r\n            type=\"checkbox\"\r\n            id=\"updatePools\"\r\n            formControlName=\"updatePools\">\r\n          <label class=\"form-check-label\" for=\"updatePools\">\r\n            Update Sample Pools\r\n          </label>\r\n        </div>\r\n        <div class=\"form-text\">\r\n          <i class=\"bi bi-info-circle me-1\"></i>\r\n          When enabled, this will also update values in related sample pools.\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"col-12\">\r\n        <div class=\"alert alert-warning\">\r\n          <i class=\"bi bi-exclamation-triangle me-2\"></i>\r\n          <strong>Warning:</strong> This operation cannot be undone. All matching values will be permanently replaced.\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n<div class=\"modal-footer\">\r\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\r\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"btn btn-primary\"\r\n    (click)=\"onSubmit()\"\r\n    [disabled]=\"searchReplaceForm.invalid || isProcessing()\">\r\n    @if (isProcessing()) {\r\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\r\n    }\r\n    <i class=\"bi bi-arrow-repeat me-1\"></i>\r\n    Replace All\r\n  </button>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class SamplePoolDetailsModal {
+    activeModal;
+    pool;
+    constructor(activeModal) {
+        this.activeModal = activeModal;
+    }
+    onClose() {
+        this.activeModal.close();
+    }
+    get title() {
+        return this.pool?.poolName || 'Sample Pool Details';
+    }
+    get poolTypeLabel() {
+        return this.pool?.isReference ? 'Reference Pool' : 'Sample Pool';
+    }
+    get poolTypeClass() {
+        return this.pool?.isReference ? 'badge bg-info' : 'badge bg-primary';
+    }
+    get pooledOnlySamplesText() {
+        if (!this.pool?.pooledOnlySamples || this.pool.pooledOnlySamples.length === 0) {
+            return 'None';
+        }
+        return this.pool.pooledOnlySamples.join(', ');
+    }
+    get pooledAndIndependentSamplesText() {
+        if (!this.pool?.pooledAndIndependentSamples || this.pool.pooledAndIndependentSamples.length === 0) {
+            return 'None';
+        }
+        return this.pool.pooledAndIndependentSamples.join(', ');
+    }
+    get allSamplesCount() {
+        const pooledOnly = this.pool?.pooledOnlySamples?.length || 0;
+        const pooledAndIndependent = this.pool?.pooledAndIndependentSamples?.length || 0;
+        return pooledOnly + pooledAndIndependent;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SamplePoolDetailsModal, deps: [{ token: i2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SamplePoolDetailsModal, isStandalone: true, selector: "ccv-sample-pool-details-modal", inputs: { pool: "pool" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-collection me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onClose()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  @if (pool) {\n    <!-- Pool Type and Basic Info -->\n    <div class=\"mb-4\">\n      <div class=\"d-flex justify-content-between align-items-start mb-3\">\n        <div>\n          <h5 class=\"mb-2\">{{ pool.poolName }}</h5>\n          <span [class]=\"poolTypeClass\">\n            <i class=\"bi bi-collection me-1\"></i>{{ poolTypeLabel }}\n          </span>\n        </div>\n        <div class=\"text-end\">\n          <small class=\"text-muted d-block\">Pool ID: {{ pool.id }}</small>\n          <small class=\"text-muted\">Total Samples: {{ allSamplesCount }}</small>\n        </div>\n      </div>\n      \n      @if (pool.poolDescription) {\n        <div class=\"mt-3\">\n          <strong>Description:</strong>\n          <p class=\"mt-1 mb-0\">{{ pool.poolDescription }}</p>\n        </div>\n      }\n    </div>\n\n    <!-- Sample Configuration -->\n    <div class=\"mb-4\">\n      <h6 class=\"text-muted mb-3\">\n        <i class=\"bi bi-diagram-3 me-2\"></i>Sample Configuration\n      </h6>\n      \n      <div class=\"row\">\n        <!-- Pooled Only Samples -->\n        <div class=\"col-md-6 mb-3\">\n          <div class=\"card h-100\">\n            <div class=\"card-body\">\n              <h6 class=\"card-title\">\n                <i class=\"bi bi-collection text-primary me-2\"></i>Pooled Only Samples\n              </h6>\n              <p class=\"card-text\">\n                <small class=\"text-muted\">{{ pool.pooledOnlySamples.length || 0 }} samples</small>\n              </p>\n              <div class=\"sample-list\">\n                @if (pool.pooledOnlySamples && pool.pooledOnlySamples.length > 0) {\n                  <div class=\"sample-numbers\">{{ pooledOnlySamplesText }}</div>\n                } @else {\n                  <em class=\"text-muted\">No pooled-only samples</em>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Pooled and Independent Samples -->\n        <div class=\"col-md-6 mb-3\">\n          <div class=\"card h-100\">\n            <div class=\"card-body\">\n              <h6 class=\"card-title\">\n                <i class=\"bi bi-diagram-2 text-success me-2\"></i>Pooled & Independent Samples\n              </h6>\n              <p class=\"card-text\">\n                <small class=\"text-muted\">{{ pool.pooledAndIndependentSamples.length || 0 }} samples</small>\n              </p>\n              <div class=\"sample-list\">\n                @if (pool.pooledAndIndependentSamples && pool.pooledAndIndependentSamples.length > 0) {\n                  <div class=\"sample-numbers\">{{ pooledAndIndependentSamplesText }}</div>\n                } @else {\n                  <em class=\"text-muted\">No pooled & independent samples</em>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Template Sample -->\n    </div>\n\n    <!-- Metadata Columns -->\n    @if (pool.metadataColumns && pool.metadataColumns.length > 0) {\n      <div class=\"mb-4\">\n        <h6 class=\"text-muted mb-3\">\n          <i class=\"bi bi-table me-2\"></i>Metadata Columns ({{ pool.metadataColumns.length }})\n        </h6>\n        <div class=\"table-responsive\">\n          <table class=\"table table-sm\">\n            <thead>\n              <tr>\n                <th>Column Name</th>\n                <th>Type</th>\n                <th>Value</th>\n                <th>Ontology</th>\n              </tr>\n            </thead>\n            <tbody>\n              @for (column of pool.metadataColumns; track column.id) {\n                <tr>\n                  <td>\n                    <strong>{{ column.name }}</strong>\n                  </td>\n                  <td>\n                    <span class=\"badge bg-light text-dark\">{{ column.type }}</span>\n                  </td>\n                  <td>\n                    @if (column.value) {\n                      <code>{{ column.value }}</code>\n                    } @else {\n                      <em class=\"text-muted\">No default value</em>\n                    }\n                  </td>\n                  <td>\n                    @if (column.ontologyType) {\n                      <span class=\"badge bg-info\">{{ column.ontologyType }}</span>\n                    } @else {\n                      <em class=\"text-muted\">None</em>\n                    }\n                  </td>\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n      </div>\n    }\n\n    <!-- Timestamps -->\n    <div class=\"mt-4\">\n      <div class=\"row\">\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">\n            <i class=\"bi bi-calendar-plus me-1\"></i>\n            Created: {{ pool.createdAt | date:'MMM d, y, h:mm a' }}\n          </small>\n        </div>\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">\n            <i class=\"bi bi-calendar-check me-1\"></i>\n            Updated: {{ pool.updatedAt | date:'MMM d, y, h:mm a' }}\n          </small>\n        </div>\n      </div>\n    </div>\n\n  } @else {\n    <div class=\"text-center py-4\">\n      <i class=\"bi bi-exclamation-triangle text-warning display-4\"></i>\n      <h5 class=\"mt-3 text-muted\">No Pool Data Available</h5>\n      <p class=\"text-muted\">Pool information could not be loaded.</p>\n    </div>\n  }\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onClose()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Close\n  </button>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgbModule }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SamplePoolDetailsModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'ccv-sample-pool-details-modal', standalone: true, imports: [CommonModule, NgbModule], template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-collection me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onClose()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  @if (pool) {\n    <!-- Pool Type and Basic Info -->\n    <div class=\"mb-4\">\n      <div class=\"d-flex justify-content-between align-items-start mb-3\">\n        <div>\n          <h5 class=\"mb-2\">{{ pool.poolName }}</h5>\n          <span [class]=\"poolTypeClass\">\n            <i class=\"bi bi-collection me-1\"></i>{{ poolTypeLabel }}\n          </span>\n        </div>\n        <div class=\"text-end\">\n          <small class=\"text-muted d-block\">Pool ID: {{ pool.id }}</small>\n          <small class=\"text-muted\">Total Samples: {{ allSamplesCount }}</small>\n        </div>\n      </div>\n      \n      @if (pool.poolDescription) {\n        <div class=\"mt-3\">\n          <strong>Description:</strong>\n          <p class=\"mt-1 mb-0\">{{ pool.poolDescription }}</p>\n        </div>\n      }\n    </div>\n\n    <!-- Sample Configuration -->\n    <div class=\"mb-4\">\n      <h6 class=\"text-muted mb-3\">\n        <i class=\"bi bi-diagram-3 me-2\"></i>Sample Configuration\n      </h6>\n      \n      <div class=\"row\">\n        <!-- Pooled Only Samples -->\n        <div class=\"col-md-6 mb-3\">\n          <div class=\"card h-100\">\n            <div class=\"card-body\">\n              <h6 class=\"card-title\">\n                <i class=\"bi bi-collection text-primary me-2\"></i>Pooled Only Samples\n              </h6>\n              <p class=\"card-text\">\n                <small class=\"text-muted\">{{ pool.pooledOnlySamples.length || 0 }} samples</small>\n              </p>\n              <div class=\"sample-list\">\n                @if (pool.pooledOnlySamples && pool.pooledOnlySamples.length > 0) {\n                  <div class=\"sample-numbers\">{{ pooledOnlySamplesText }}</div>\n                } @else {\n                  <em class=\"text-muted\">No pooled-only samples</em>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Pooled and Independent Samples -->\n        <div class=\"col-md-6 mb-3\">\n          <div class=\"card h-100\">\n            <div class=\"card-body\">\n              <h6 class=\"card-title\">\n                <i class=\"bi bi-diagram-2 text-success me-2\"></i>Pooled & Independent Samples\n              </h6>\n              <p class=\"card-text\">\n                <small class=\"text-muted\">{{ pool.pooledAndIndependentSamples.length || 0 }} samples</small>\n              </p>\n              <div class=\"sample-list\">\n                @if (pool.pooledAndIndependentSamples && pool.pooledAndIndependentSamples.length > 0) {\n                  <div class=\"sample-numbers\">{{ pooledAndIndependentSamplesText }}</div>\n                } @else {\n                  <em class=\"text-muted\">No pooled & independent samples</em>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Template Sample -->\n    </div>\n\n    <!-- Metadata Columns -->\n    @if (pool.metadataColumns && pool.metadataColumns.length > 0) {\n      <div class=\"mb-4\">\n        <h6 class=\"text-muted mb-3\">\n          <i class=\"bi bi-table me-2\"></i>Metadata Columns ({{ pool.metadataColumns.length }})\n        </h6>\n        <div class=\"table-responsive\">\n          <table class=\"table table-sm\">\n            <thead>\n              <tr>\n                <th>Column Name</th>\n                <th>Type</th>\n                <th>Value</th>\n                <th>Ontology</th>\n              </tr>\n            </thead>\n            <tbody>\n              @for (column of pool.metadataColumns; track column.id) {\n                <tr>\n                  <td>\n                    <strong>{{ column.name }}</strong>\n                  </td>\n                  <td>\n                    <span class=\"badge bg-light text-dark\">{{ column.type }}</span>\n                  </td>\n                  <td>\n                    @if (column.value) {\n                      <code>{{ column.value }}</code>\n                    } @else {\n                      <em class=\"text-muted\">No default value</em>\n                    }\n                  </td>\n                  <td>\n                    @if (column.ontologyType) {\n                      <span class=\"badge bg-info\">{{ column.ontologyType }}</span>\n                    } @else {\n                      <em class=\"text-muted\">None</em>\n                    }\n                  </td>\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n      </div>\n    }\n\n    <!-- Timestamps -->\n    <div class=\"mt-4\">\n      <div class=\"row\">\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">\n            <i class=\"bi bi-calendar-plus me-1\"></i>\n            Created: {{ pool.createdAt | date:'MMM d, y, h:mm a' }}\n          </small>\n        </div>\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">\n            <i class=\"bi bi-calendar-check me-1\"></i>\n            Updated: {{ pool.updatedAt | date:'MMM d, y, h:mm a' }}\n          </small>\n        </div>\n      </div>\n    </div>\n\n  } @else {\n    <div class=\"text-center py-4\">\n      <i class=\"bi bi-exclamation-triangle text-warning display-4\"></i>\n      <h5 class=\"mt-3 text-muted\">No Pool Data Available</h5>\n      <p class=\"text-muted\">Pool information could not be loaded.</p>\n    </div>\n  }\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onClose()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Close\n  </button>\n</div>" }]
+        }], ctorParameters: () => [{ type: i2.NgbActiveModal }], propDecorators: { pool: [{
+                type: Input
+            }] } });
+
+class SamplePoolEditModal {
+    pool;
+    maxSampleCount = 100;
+    poolSaved = new EventEmitter();
+    editForm;
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    fb = inject(FormBuilder);
+    activeModal = inject(NgbActiveModal);
+    samplePoolService = inject(SamplePoolService);
+    constructor() {
+        this.editForm = this.fb.group({
+            poolName: ['', [Validators.required, Validators.maxLength(255)]],
+            poolDescription: [''],
+            isReference: [false],
+            pooledOnlySamplesText: [''],
+            pooledAndIndependentSamplesText: ['']
+        });
+    }
+    ngOnInit() {
+        if (this.pool) {
+            this.editForm.patchValue({
+                poolName: this.pool.poolName,
+                poolDescription: this.pool.poolDescription || '',
+                isReference: this.pool.isReference,
+                pooledOnlySamplesText: this.pool.pooledOnlySamples?.join(', ') || '',
+                pooledAndIndependentSamplesText: this.pool.pooledAndIndependentSamples?.join(', ') || ''
+            });
+        }
+    }
+    onSubmit() {
+        if (this.editForm.valid && this.pool.id) {
+            this.isLoading.set(true);
+            const formValue = this.editForm.value;
+            // Parse sample arrays from text input
+            const pooledOnlySamples = this.parseSampleNumbers(formValue.pooledOnlySamplesText);
+            const pooledAndIndependentSamples = this.parseSampleNumbers(formValue.pooledAndIndependentSamplesText);
+            const updateData = {
+                poolName: formValue.poolName.trim(),
+                poolDescription: formValue.poolDescription?.trim() || undefined,
+                isReference: formValue.isReference,
+                pooledOnlySamples: pooledOnlySamples,
+                pooledAndIndependentSamples: pooledAndIndependentSamples
+            };
+            this.samplePoolService.updateSamplePool(this.pool.id, updateData).subscribe({
+                next: (updatedPool) => {
+                    this.poolSaved.emit(updatedPool);
+                    this.activeModal.close(updatedPool);
+                },
+                error: (error) => {
+                    console.error('Error updating sample pool:', error);
+                    this.isLoading.set(false);
+                }
+            });
+        }
+    }
+    onCancel() {
+        this.activeModal.dismiss();
+    }
+    get title() {
+        return `Edit ${this.pool?.poolName || 'Sample Pool'}`;
+    }
+    get hasChanges() {
+        if (!this.pool)
+            return false;
+        const formValue = this.editForm.value;
+        return (formValue.poolName !== this.pool.poolName ||
+            formValue.poolDescription !== (this.pool.poolDescription || '') ||
+            formValue.isReference !== this.pool.isReference ||
+            formValue.pooledOnlySamplesText !== (this.pool.pooledOnlySamples?.join(', ') || '') ||
+            formValue.pooledAndIndependentSamplesText !== (this.pool.pooledAndIndependentSamples?.join(', ') || ''));
+    }
+    parseSampleNumbers(text) {
+        if (!text?.trim())
+            return [];
+        const results = [];
+        text
+            .split(',')
+            .map(s => s.trim())
+            .filter(s => s.length > 0)
+            .forEach(s => {
+            // Check if it's a range (e.g., "9-12")
+            if (s.includes('-')) {
+                const parts = s.split('-').map(p => p.trim());
+                if (parts.length === 2) {
+                    const start = parseInt(parts[0], 10);
+                    const end = parseInt(parts[1], 10);
+                    if (!isNaN(start) && !isNaN(end) && start > 0 && end > 0 && start <= end && end <= this.maxSampleCount) {
+                        // Add all numbers in the range
+                        for (let i = start; i <= end; i++) {
+                            results.push(i);
+                        }
+                    }
+                }
+            }
+            else {
+                // Single number
+                const num = parseInt(s, 10);
+                if (!isNaN(num) && num > 0 && num <= this.maxSampleCount) {
+                    results.push(num);
+                }
+            }
+        });
+        // Remove duplicates and sort
+        return [...new Set(results)].sort((a, b) => a - b);
+    }
+    // Form validation helpers
+    isFieldInvalid(fieldName) {
+        const field = this.editForm.get(fieldName);
+        return !!(field && field.invalid && field.touched);
+    }
+    getFieldError(fieldName) {
+        const field = this.editForm.get(fieldName);
+        if (!field || !field.errors)
+            return '';
+        if (field.errors['required']) {
+            return `${this.getFieldDisplayName(fieldName)} is required`;
+        }
+        if (field.errors['maxlength']) {
+            return `${this.getFieldDisplayName(fieldName)} must be less than ${field.errors['maxlength'].requiredLength} characters`;
+        }
+        return 'Invalid value';
+    }
+    getFieldDisplayName(fieldName) {
+        const displayNames = {
+            'poolName': 'Pool name',
+            'poolDescription': 'Description',
+            'pooledOnlySamplesText': 'Pooled only samples',
+            'pooledAndIndependentSamplesText': 'Pooled and independent samples'
+        };
+        return displayNames[fieldName] || fieldName;
+    }
+    // Helper methods for template
+    get pooledOnlySamplesCount() {
+        const text = this.editForm.get('pooledOnlySamplesText')?.value || '';
+        return this.parseSampleNumbers(text).length;
+    }
+    get pooledAndIndependentSamplesCount() {
+        const text = this.editForm.get('pooledAndIndependentSamplesText')?.value || '';
+        return this.parseSampleNumbers(text).length;
+    }
+    get totalSamplesCount() {
+        return this.pooledOnlySamplesCount + this.pooledAndIndependentSamplesCount;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SamplePoolEditModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SamplePoolEditModal, isStandalone: true, selector: "ccv-sample-pool-edit-modal", inputs: { pool: "pool", maxSampleCount: "maxSampleCount" }, outputs: { poolSaved: "poolSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-collection me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n    \n    <!-- Pool Name -->\n    <div class=\"mb-3\">\n      <label for=\"poolName\" class=\"form-label\">Pool Name *</label>\n      <input \n        type=\"text\" \n        class=\"form-control\"\n        id=\"poolName\"\n        formControlName=\"poolName\"\n        [class.is-invalid]=\"isFieldInvalid('poolName')\"\n        placeholder=\"Enter pool name\">\n      @if (isFieldInvalid('poolName')) {\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('poolName') }}\n        </div>\n      }\n    </div>\n\n    <!-- Description -->\n    <div class=\"mb-3\">\n      <label for=\"poolDescription\" class=\"form-label\">Description</label>\n      <textarea \n        class=\"form-control\"\n        id=\"poolDescription\"\n        formControlName=\"poolDescription\"\n        rows=\"2\"\n        placeholder=\"Optional pool description\"></textarea>\n    </div>\n\n    <!-- Pool Type and Template Sample -->\n    <div class=\"row\">\n      <div class=\"col-md-6 mb-3\">\n        <div class=\"form-check\">\n          <input \n            class=\"form-check-input\" \n            type=\"checkbox\" \n            id=\"isReference\" \n            formControlName=\"isReference\">\n          <label class=\"form-check-label\" for=\"isReference\">\n            <strong>Reference Pool</strong>\n            <div class=\"form-text\">Check if this is a reference pool</div>\n          </label>\n        </div>\n      </div>\n    </div>\n\n    <!-- Sample Configuration -->\n    <div class=\"mb-4\">\n      <h6 class=\"text-muted mb-3\">Sample Configuration</h6>\n      \n      <!-- Pooled Only Samples -->\n      <div class=\"mb-3\">\n        <label for=\"pooledOnlySamples\" class=\"form-label\">\n          Pooled Only Samples\n          <span class=\"badge bg-primary ms-2\">{{ pooledOnlySamplesCount }} samples</span>\n        </label>\n        <input \n          type=\"text\" \n          class=\"form-control\"\n          id=\"pooledOnlySamples\"\n          formControlName=\"pooledOnlySamplesText\"\n          placeholder=\"e.g., 1, 2, 3, 5-8\">\n        <div class=\"form-text\">\n          Enter sample numbers separated by commas. Ranges like \"5-8\" are supported.\n        </div>\n      </div>\n\n      <!-- Pooled and Independent Samples -->\n      <div class=\"mb-3\">\n        <label for=\"pooledAndIndependentSamples\" class=\"form-label\">\n          Pooled & Independent Samples\n          <span class=\"badge bg-success ms-2\">{{ pooledAndIndependentSamplesCount }} samples</span>\n        </label>\n        <input \n          type=\"text\" \n          class=\"form-control\"\n          id=\"pooledAndIndependentSamples\"\n          formControlName=\"pooledAndIndependentSamplesText\"\n          placeholder=\"e.g., 4, 9, 10-15\">\n        <div class=\"form-text\">\n          Enter sample numbers that are both pooled and run independently.\n        </div>\n      </div>\n\n      <!-- Total Count Display -->\n      <div class=\"alert alert-info\">\n        <i class=\"bi bi-info-circle me-2\"></i>\n        <strong>Total Samples:</strong> {{ totalSamplesCount }}\n        @if (totalSamplesCount > maxSampleCount) {\n          <span class=\"text-danger ms-2\">\n            (Exceeds maximum of {{ maxSampleCount }})\n          </span>\n        }\n      </div>\n    </div>\n\n    <!-- Character Count -->\n    <div class=\"mb-2\">\n      <div class=\"d-flex justify-content-between align-items-center\">\n        <small class=\"text-muted\">\n          Name: {{ editForm.get('poolName')?.value?.length || 0 }}/255 characters\n        </small>\n        @if (hasChanges) {\n          <small class=\"text-info\">\n            <i class=\"bi bi-info-circle me-1\"></i>Changes detected\n          </small>\n        }\n      </div>\n    </div>\n\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() || !hasChanges\">\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 Pool\n  </button>\n</div>", 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.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.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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SamplePoolEditModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'ccv-sample-pool-edit-modal', standalone: true, imports: [CommonModule, ReactiveFormsModule, NgbModule], template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-collection me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n    \n    <!-- Pool Name -->\n    <div class=\"mb-3\">\n      <label for=\"poolName\" class=\"form-label\">Pool Name *</label>\n      <input \n        type=\"text\" \n        class=\"form-control\"\n        id=\"poolName\"\n        formControlName=\"poolName\"\n        [class.is-invalid]=\"isFieldInvalid('poolName')\"\n        placeholder=\"Enter pool name\">\n      @if (isFieldInvalid('poolName')) {\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('poolName') }}\n        </div>\n      }\n    </div>\n\n    <!-- Description -->\n    <div class=\"mb-3\">\n      <label for=\"poolDescription\" class=\"form-label\">Description</label>\n      <textarea \n        class=\"form-control\"\n        id=\"poolDescription\"\n        formControlName=\"poolDescription\"\n        rows=\"2\"\n        placeholder=\"Optional pool description\"></textarea>\n    </div>\n\n    <!-- Pool Type and Template Sample -->\n    <div class=\"row\">\n      <div class=\"col-md-6 mb-3\">\n        <div class=\"form-check\">\n          <input \n            class=\"form-check-input\" \n            type=\"checkbox\" \n            id=\"isReference\" \n            formControlName=\"isReference\">\n          <label class=\"form-check-label\" for=\"isReference\">\n            <strong>Reference Pool</strong>\n            <div class=\"form-text\">Check if this is a reference pool</div>\n          </label>\n        </div>\n      </div>\n    </div>\n\n    <!-- Sample Configuration -->\n    <div class=\"mb-4\">\n      <h6 class=\"text-muted mb-3\">Sample Configuration</h6>\n      \n      <!-- Pooled Only Samples -->\n      <div class=\"mb-3\">\n        <label for=\"pooledOnlySamples\" class=\"form-label\">\n          Pooled Only Samples\n          <span class=\"badge bg-primary ms-2\">{{ pooledOnlySamplesCount }} samples</span>\n        </label>\n        <input \n          type=\"text\" \n          class=\"form-control\"\n          id=\"pooledOnlySamples\"\n          formControlName=\"pooledOnlySamplesText\"\n          placeholder=\"e.g., 1, 2, 3, 5-8\">\n        <div class=\"form-text\">\n          Enter sample numbers separated by commas. Ranges like \"5-8\" are supported.\n        </div>\n      </div>\n\n      <!-- Pooled and Independent Samples -->\n      <div class=\"mb-3\">\n        <label for=\"pooledAndIndependentSamples\" class=\"form-label\">\n          Pooled & Independent Samples\n          <span class=\"badge bg-success ms-2\">{{ pooledAndIndependentSamplesCount }} samples</span>\n        </label>\n        <input \n          type=\"text\" \n          class=\"form-control\"\n          id=\"pooledAndIndependentSamples\"\n          formControlName=\"pooledAndIndependentSamplesText\"\n          placeholder=\"e.g., 4, 9, 10-15\">\n        <div class=\"form-text\">\n          Enter sample numbers that are both pooled and run independently.\n        </div>\n      </div>\n\n      <!-- Total Count Display -->\n      <div class=\"alert alert-info\">\n        <i class=\"bi bi-info-circle me-2\"></i>\n        <strong>Total Samples:</strong> {{ totalSamplesCount }}\n        @if (totalSamplesCount > maxSampleCount) {\n          <span class=\"text-danger ms-2\">\n            (Exceeds maximum of {{ maxSampleCount }})\n          </span>\n        }\n      </div>\n    </div>\n\n    <!-- Character Count -->\n    <div class=\"mb-2\">\n      <div class=\"d-flex justify-content-between align-items-center\">\n        <small class=\"text-muted\">\n          Name: {{ editForm.get('poolName')?.value?.length || 0 }}/255 characters\n        </small>\n        @if (hasChanges) {\n          <small class=\"text-info\">\n            <i class=\"bi bi-info-circle me-1\"></i>Changes detected\n          </small>\n        }\n      </div>\n    </div>\n\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() || !hasChanges\">\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 Pool\n  </button>\n</div>" }]
+        }], ctorParameters: () => [], propDecorators: { pool: [{
+                type: Input
+            }], maxSampleCount: [{
+                type: Input
+            }], poolSaved: [{
+                type: Output
+            }] } });
+
+class SamplePoolCreateModal {
+    fb;
+    activeModal;
+    samplePoolService;
+    toastService;
+    metadataTable;
+    poolCreated = new EventEmitter();
+    // Expose Math to template
+    Math = Math;
+    createForm;
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    // Sample selection management
+    samples = signal([], ...(ngDevMode ? [{ debugName: "samples" }] : []));
+    pooledOnlySamples = signal([], ...(ngDevMode ? [{ debugName: "pooledOnlySamples" }] : []));
+    pooledAndIndependentSamples = signal([], ...(ngDevMode ? [{ debugName: "pooledAndIndependentSamples" }] : []));
+    // UI state
+    selectionMode = signal('manual', ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    samplesPerPage = 20;
+    constructor(fb, activeModal, samplePoolService, toastService) {
+        this.fb = fb;
+        this.activeModal = activeModal;
+        this.samplePoolService = samplePoolService;
+        this.toastService = toastService;
+        this.createForm = this.fb.group({
+            poolName: ['', [Validators.required, Validators.maxLength(255)]],
+            poolDescription: [''],
+            isReference: [false],
+            range_start: [1, [Validators.min(1)]],
+            range_end: [10, [Validators.min(1)]],
+            pooled_only_samples_text: [''],
+            pooled_and_independent_samples_text: ['']
+        });
+    }
+    ngOnInit() {
+        if (!this.metadataTable) {
+            this.activeModal.dismiss('No metadata table provided');
+            return;
+        }
+        // Initialize sample list
+        this.initializeSamples();
+        // Update range end validator based on sample count
+        const rangeEndControl = this.createForm.get('range_end');
+        if (rangeEndControl) {
+            rangeEndControl.setValidators([
+                Validators.min(1),
+                Validators.max(this.metadataTable.sampleCount)
+            ]);
+            rangeEndControl.updateValueAndValidity();
+        }
+        const rangeStartControl = this.createForm.get('range_start');
+        if (rangeStartControl) {
+            rangeStartControl.setValidators([
+                Validators.min(1),
+                Validators.max(this.metadataTable.sampleCount)
+            ]);
+            rangeStartControl.updateValueAndValidity();
+        }
+    }
+    initializeSamples() {
+        const sampleItems = [];
+        const existingPooledSamples = this.getExistingPooledSamples();
+        for (let i = 1; i <= this.metadataTable.sampleCount; i++) {
+            sampleItems.push({
+                sampleNumber: i,
+                selected: false,
+                pooled: existingPooledSamples.includes(i)
+            });
+        }
+        this.samples.set(sampleItems);
+    }
+    getExistingPooledSamples() {
+        if (!this.metadataTable.samplePools)
+            return [];
+        const pooledSamples = [];
+        this.metadataTable.samplePools.forEach((pool) => {
+            pooledSamples.push(...pool.pooled_only_samples || []);
+            pooledSamples.push(...pool.pooled_and_independent_samples || []);
+        });
+        return [...new Set(pooledSamples)]; // Remove duplicates
+    }
+    // Sample selection methods
+    toggleSampleSelection(sampleNumber) {
+        const samples = this.samples();
+        const sampleIndex = samples.findIndex(s => s.sampleNumber === sampleNumber);
+        if (sampleIndex >= 0) {
+            samples[sampleIndex].selected = !samples[sampleIndex].selected;
+            this.samples.set([...samples]);
+            this.updateSampleTextInputs();
+        }
+    }
+    selectSamplesInRange() {
+        const start = this.createForm.get('range_start')?.value || 1;
+        const end = this.createForm.get('range_end')?.value || 1;
+        if (start > end) {
+            this.toastService.error('Start sample must be less than or equal to end sample');
+            return;
+        }
+        const samples = this.samples();
+        for (let i = start; i <= end; i++) {
+            const sampleIndex = samples.findIndex(s => s.sampleNumber === i);
+            if (sampleIndex >= 0) {
+                samples[sampleIndex].selected = true;
+            }
+        }
+        this.samples.set([...samples]);
+        this.updateSampleTextInputs();
+        this.toastService.success(`Selected samples ${start} to ${end}`);
+    }
+    clearAllSelections() {
+        const samples = this.samples();
+        samples.forEach(s => s.selected = false);
+        this.samples.set([...samples]);
+        this.updateSampleTextInputs();
+    }
+    updateSampleTextInputs() {
+        const selectedSamples = this.samples().filter(s => s.selected).map(s => s.sampleNumber);
+        const pooledOnly = this.pooledOnlySamples();
+        const pooledAndIndependent = this.pooledAndIndependentSamples();
+        // For now, put all selected samples in pooled_only
+        this.createForm.patchValue({
+            pooled_only_samples_text: selectedSamples.join(', '),
+            pooled_and_independent_samples_text: pooledAndIndependent.join(', ')
+        });
+    }
+    // Pool type assignment
+    assignToPooledOnly() {
+        const selectedSamples = this.samples().filter(s => s.selected).map(s => s.sampleNumber);
+        this.pooledOnlySamples.set(selectedSamples);
+        this.updateSampleTextInputs();
+    }
+    assignToPooledAndIndependent() {
+        const selectedSamples = this.samples().filter(s => s.selected).map(s => s.sampleNumber);
+        this.pooledAndIndependentSamples.set(selectedSamples);
+        this.updateSampleTextInputs();
+    }
+    onSubmit() {
+        if (this.createForm.valid) {
+            this.isLoading.set(true);
+            const formValue = this.createForm.value;
+            // Parse sample arrays from text input or use current assignments
+            const pooledOnlySamples = this.parseSampleNumbers(formValue.pooled_only_samples_text);
+            const pooledAndIndependentSamples = this.parseSampleNumbers(formValue.pooled_and_independent_samples_text);
+            if (pooledOnlySamples.length === 0 && pooledAndIndependentSamples.length === 0) {
+                this.toastService.error('Please select at least one sample for the pool');
+                this.isLoading.set(false);
+                return;
+            }
+            const createData = {
+                poolName: formValue.poolName.trim(),
+                poolDescription: formValue.poolDescription?.trim() || undefined,
+                isReference: formValue.isReference,
+                pooledOnlySamples: pooledOnlySamples,
+                pooledAndIndependentSamples: pooledAndIndependentSamples,
+                metadataTable: this.metadataTable.id
+            };
+            this.samplePoolService.createSamplePool(createData).subscribe({
+                next: (createdPool) => {
+                    this.toastService.success(`Sample pool "${createdPool.poolName}" created successfully`);
+                    this.poolCreated.emit(createdPool);
+                    this.activeModal.close(createdPool);
+                },
+                error: (error) => {
+                    console.error('Error creating sample pool:', error);
+                    this.toastService.error('Failed to create sample pool');
+                    this.isLoading.set(false);
+                }
+            });
+        }
+    }
+    onCancel() {
+        this.activeModal.dismiss();
+    }
+    // Helper methods
+    parseSampleNumbers(text) {
+        if (!text?.trim())
+            return [];
+        const numbers = [];
+        const parts = text.split(',').map(s => s.trim()).filter(s => s.length > 0);
+        parts.forEach(part => {
+            if (part.includes('-')) {
+                // Handle range like "5-8"
+                const [start, end] = part.split('-').map(s => parseInt(s.trim(), 10));
+                if (!isNaN(start) && !isNaN(end) && start <= end) {
+                    for (let i = start; i <= end; i++) {
+                        if (i > 0 && i <= this.metadataTable.sampleCount) {
+                            numbers.push(i);
+                        }
+                    }
+                }
+            }
+            else {
+                // Handle single number
+                const num = parseInt(part, 10);
+                if (!isNaN(num) && num > 0 && num <= this.metadataTable.sampleCount) {
+                    numbers.push(num);
+                }
+            }
+        });
+        return [...new Set(numbers)].sort((a, b) => a - b); // Remove duplicates and sort
+    }
+    // Computed properties for template
+    get selectedSamplesCount() {
+        return this.samples().filter(s => s.selected).length;
+    }
+    get totalPooledSamplesCount() {
+        const pooledOnly = this.parseSampleNumbers(this.createForm.get('pooled_only_samples_text')?.value || '');
+        const pooledAndIndependent = this.parseSampleNumbers(this.createForm.get('pooled_and_independent_samples_text')?.value || '');
+        return pooledOnly.length + pooledAndIndependent.length;
+    }
+    get paginatedSamples() {
+        const samples = this.samples();
+        const start = (this.currentPage() - 1) * this.samplesPerPage;
+        return samples.slice(start, start + this.samplesPerPage);
+    }
+    get totalPages() {
+        return Math.ceil(this.samples().length / this.samplesPerPage);
+    }
+    // Form validation helpers
+    isFieldInvalid(fieldName) {
+        const field = this.createForm.get(fieldName);
+        return !!(field && field.invalid && field.touched);
+    }
+    getFieldError(fieldName) {
+        const field = this.createForm.get(fieldName);
+        if (!field || !field.errors)
+            return '';
+        if (field.errors['required']) {
+            return `${this.getFieldDisplayName(fieldName)} is required`;
+        }
+        if (field.errors['maxlength']) {
+            return `${this.getFieldDisplayName(fieldName)} must be less than ${field.errors['maxlength'].requiredLength} characters`;
+        }
+        if (field.errors['min']) {
+            return `${this.getFieldDisplayName(fieldName)} must be at least ${field.errors['min'].min}`;
+        }
+        if (field.errors['max']) {
+            return `${this.getFieldDisplayName(fieldName)} must be no more than ${field.errors['max'].max}`;
+        }
+        return 'Invalid value';
+    }
+    getFieldDisplayName(fieldName) {
+        const displayNames = {
+            'poolName': 'Pool name',
+            'poolDescription': 'Description',
+            'range_start': 'Range start',
+            'range_end': 'Range end'
+        };
+        return displayNames[fieldName] || fieldName;
+    }
+    // Pagination
+    goToPage(page) {
+        if (page >= 1 && page <= this.totalPages) {
+            this.currentPage.set(page);
+        }
+    }
+    previousPage() {
+        if (this.currentPage() > 1) {
+            this.currentPage.set(this.currentPage() - 1);
+        }
+    }
+    nextPage() {
+        if (this.currentPage() < this.totalPages) {
+            this.currentPage.set(this.currentPage() + 1);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SamplePoolCreateModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }, { token: SamplePoolService }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SamplePoolCreateModal, isStandalone: true, selector: "ccv-sample-pool-create-modal", inputs: { metadataTable: "metadataTable" }, outputs: { poolCreated: "poolCreated" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-plus-circle me-2\"></i>Create Sample Pool\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\" style=\"max-height: 70vh; overflow-y: auto;\">\n  <form [formGroup]=\"createForm\" (ngSubmit)=\"onSubmit()\">\n    \n    <!-- Pool Basic Info -->\n    <div class=\"row mb-4\">\n      <div class=\"col-12\">\n        <h6 class=\"text-primary mb-3\">\n          <i class=\"bi bi-info-circle me-2\"></i>Pool Information\n        </h6>\n      </div>\n      \n      <!-- Pool Name -->\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"poolName\" class=\"form-label\">Pool Name *</label>\n        <input \n          type=\"text\" \n          class=\"form-control\"\n          id=\"poolName\"\n          formControlName=\"poolName\"\n          [class.is-invalid]=\"isFieldInvalid('poolName')\"\n          placeholder=\"Enter pool name\">\n        @if (isFieldInvalid('poolName')) {\n          <div class=\"invalid-feedback\">\n            {{ getFieldError('poolName') }}\n          </div>\n        }\n      </div>\n\n\n      <!-- Description -->\n      <div class=\"col-12 mb-3\">\n        <label for=\"poolDescription\" class=\"form-label\">Description</label>\n        <textarea \n          class=\"form-control\"\n          id=\"poolDescription\"\n          formControlName=\"poolDescription\"\n          rows=\"2\"\n          placeholder=\"Optional pool description\"></textarea>\n      </div>\n\n      <!-- Reference Pool Checkbox -->\n      <div class=\"col-12 mb-3\">\n        <div class=\"form-check\">\n          <input \n            class=\"form-check-input\" \n            type=\"checkbox\" \n            id=\"isReference\" \n            formControlName=\"isReference\">\n          <label class=\"form-check-label\" for=\"isReference\">\n            <strong>Reference Pool</strong>\n            <div class=\"form-text\">Check if this is a reference pool</div>\n          </label>\n        </div>\n      </div>\n    </div>\n\n    <!-- Sample Selection Methods -->\n    <div class=\"mb-4\">\n      <h6 class=\"text-primary mb-3\">\n        <i class=\"bi bi-check2-square me-2\"></i>Sample Selection\n      </h6>\n\n      <!-- Selection Mode Tabs -->\n      <div class=\"btn-group mb-3\" role=\"group\">\n        <input type=\"radio\" class=\"btn-check\" id=\"manualMode\" [value]=\"'manual'\" \n               [checked]=\"selectionMode() === 'manual'\" (click)=\"selectionMode.set('manual')\">\n        <label class=\"btn btn-outline-primary\" for=\"manualMode\">\n          <i class=\"bi bi-hand-index me-1\"></i>Manual Selection\n        </label>\n\n        <input type=\"radio\" class=\"btn-check\" id=\"rangeMode\" [value]=\"'range'\" \n               [checked]=\"selectionMode() === 'range'\" (click)=\"selectionMode.set('range')\">\n        <label class=\"btn btn-outline-primary\" for=\"rangeMode\">\n          <i class=\"bi bi-sliders me-1\"></i>Range Selection\n        </label>\n      </div>\n\n      <!-- Range Selection Controls -->\n      @if (selectionMode() === 'range') {\n        <div class=\"card mb-3\">\n          <div class=\"card-body\">\n            <div class=\"row align-items-end\">\n              <div class=\"col-md-4\">\n                <label for=\"rangeStart\" class=\"form-label\">Start Sample</label>\n                <input \n                  type=\"number\" \n                  class=\"form-control\"\n                  id=\"rangeStart\"\n                  formControlName=\"range_start\"\n                  min=\"1\"\n                  [max]=\"metadataTable.sampleCount\"\n                  [class.is-invalid]=\"isFieldInvalid('range_start')\">\n                @if (isFieldInvalid('range_start')) {\n                  <div class=\"invalid-feedback\">\n                    {{ getFieldError('range_start') }}\n                  </div>\n                }\n              </div>\n              <div class=\"col-md-4\">\n                <label for=\"rangeEnd\" class=\"form-label\">End Sample</label>\n                <input \n                  type=\"number\" \n                  class=\"form-control\"\n                  id=\"rangeEnd\"\n                  formControlName=\"range_end\"\n                  min=\"1\"\n                  [max]=\"metadataTable.sampleCount\"\n                  [class.is-invalid]=\"isFieldInvalid('range_end')\">\n                @if (isFieldInvalid('range_end')) {\n                  <div class=\"invalid-feedback\">\n                    {{ getFieldError('range_end') }}\n                  </div>\n                }\n              </div>\n              <div class=\"col-md-4\">\n                <button type=\"button\" class=\"btn btn-success w-100\" (click)=\"selectSamplesInRange()\">\n                  <i class=\"bi bi-plus-square me-1\"></i>Select Range\n                </button>\n              </div>\n            </div>\n            <div class=\"form-text mt-2\">\n              Select samples from {{ createForm.get('range_start')?.value || 1 }} \n              to {{ createForm.get('range_end')?.value || 1 }} \n              ({{ Math.abs((createForm.get('range_end')?.value || 1) - (createForm.get('range_start')?.value || 1)) + 1 }} samples)\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Sample Grid for Manual Selection -->\n      @if (selectionMode() === 'manual') {\n        <div class=\"card mb-3\">\n          <div class=\"card-header d-flex justify-content-between align-items-center\">\n            <span>\n              <i class=\"bi bi-grid me-2\"></i>Select Samples \n              <span class=\"badge bg-info ms-2\">{{ selectedSamplesCount }} selected</span>\n            </span>\n            <button type=\"button\" class=\"btn btn-sm btn-outline-danger\" (click)=\"clearAllSelections()\">\n              <i class=\"bi bi-x-circle me-1\"></i>Clear All\n            </button>\n          </div>\n          <div class=\"card-body\" style=\"max-height: 300px; overflow-y: auto;\">\n            <!-- Sample Grid -->\n            <div class=\"row g-1 mb-3\">\n              @for (sample of paginatedSamples; track sample.sampleNumber) {\n                <div class=\"col-2\">\n                  <button \n                    type=\"button\" \n                    class=\"btn btn-sm w-100\"\n                    [class.btn-primary]=\"sample.selected && !sample.pooled\"\n                    [class.btn-success]=\"sample.selected && sample.pooled\"\n                    [class.btn-outline-secondary]=\"!sample.selected && !sample.pooled\"\n                    [class.btn-outline-warning]=\"!sample.selected && sample.pooled\"\n                    [disabled]=\"sample.pooled\"\n                    (click)=\"toggleSampleSelection(sample.sampleNumber)\"\n                    [title]=\"sample.pooled ? 'Sample already in another pool' : 'Click to select/deselect'\">\n                    {{ sample.sampleNumber }}\n                    @if (sample.pooled) {\n                      <i class=\"bi bi-lock-fill ms-1\"></i>\n                    }\n                  </button>\n                </div>\n              }\n            </div>\n\n            <!-- Pagination -->\n            @if (totalPages > 1) {\n              <nav>\n                <ul class=\"pagination pagination-sm justify-content-center\">\n                  <li class=\"page-item\" [class.disabled]=\"currentPage() === 1\">\n                    <button class=\"page-link\" type=\"button\" (click)=\"previousPage()\">Previous</button>\n                  </li>\n                  @for (page of [].constructor(Math.min(5, totalPages)); track $index) {\n                    @let pageNum = $index + Math.max(1, currentPage() - 2);\n                    @if (pageNum <= totalPages) {\n                      <li class=\"page-item\" [class.active]=\"pageNum === currentPage()\">\n                        <button class=\"page-link\" type=\"button\" (click)=\"goToPage(pageNum)\">{{ pageNum }}</button>\n                      </li>\n                    }\n                  }\n                  <li class=\"page-item\" [class.disabled]=\"currentPage() === totalPages\">\n                    <button class=\"page-link\" type=\"button\" (click)=\"nextPage()\">Next</button>\n                  </li>\n                </ul>\n              </nav>\n            }\n\n            <div class=\"form-text text-center\">\n              Showing {{ ((currentPage() - 1) * samplesPerPage) + 1 }} - \n              {{ Math.min(currentPage() * samplesPerPage, samples().length) }} \n              of {{ samples().length }} samples\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Selection Summary -->\n      @if (selectedSamplesCount > 0) {\n        <div class=\"alert alert-info\">\n          <div class=\"d-flex justify-content-between align-items-center\">\n            <span>\n              <i class=\"bi bi-info-circle me-2\"></i>\n              <strong>{{ selectedSamplesCount }}</strong> samples selected\n            </span>\n            <div class=\"btn-group btn-group-sm\">\n              <button type=\"button\" class=\"btn btn-outline-primary\" (click)=\"assignToPooledOnly()\">\n                <i class=\"bi bi-arrow-right me-1\"></i>Pooled Only\n              </button>\n              <button type=\"button\" class=\"btn btn-outline-success\" (click)=\"assignToPooledAndIndependent()\">\n                <i class=\"bi bi-arrow-right me-1\"></i>Pooled & Independent\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Sample Configuration -->\n    <div class=\"mb-4\">\n      <h6 class=\"text-primary mb-3\">\n        <i class=\"bi bi-gear me-2\"></i>Sample Configuration\n      </h6>\n      \n      <!-- Pooled Only Samples -->\n      <div class=\"mb-3\">\n        <label for=\"pooledOnlySamples\" class=\"form-label\">\n          Pooled Only Samples\n          <span class=\"badge bg-primary ms-2\">{{ parseSampleNumbers(createForm.get('pooled_only_samples_text')?.value || '').length }} samples</span>\n        </label>\n        <input \n          type=\"text\" \n          class=\"form-control\"\n          id=\"pooledOnlySamples\"\n          formControlName=\"pooled_only_samples_text\"\n          placeholder=\"e.g., 1, 2, 3, 5-8\">\n        <div class=\"form-text\">\n          Enter sample numbers separated by commas. Ranges like \"5-8\" are supported.\n        </div>\n      </div>\n\n      <!-- Pooled and Independent Samples -->\n      <div class=\"mb-3\">\n        <label for=\"pooledAndIndependentSamples\" class=\"form-label\">\n          Pooled & Independent Samples\n          <span class=\"badge bg-success ms-2\">{{ parseSampleNumbers(createForm.get('pooled_and_independent_samples_text')?.value || '').length }} samples</span>\n        </label>\n        <input \n          type=\"text\" \n          class=\"form-control\"\n          id=\"pooledAndIndependentSamples\"\n          formControlName=\"pooled_and_independent_samples_text\"\n          placeholder=\"e.g., 4, 9, 10-15\">\n        <div class=\"form-text\">\n          Enter sample numbers that are both pooled and run independently.\n        </div>\n      </div>\n\n      <!-- Total Count Display -->\n      <div class=\"alert\" \n           [class.alert-success]=\"totalPooledSamplesCount > 0 && totalPooledSamplesCount <= metadataTable.sampleCount\"\n           [class.alert-warning]=\"totalPooledSamplesCount === 0\"\n           [class.alert-danger]=\"totalPooledSamplesCount > metadataTable.sampleCount\">\n        <i class=\"bi bi-info-circle me-2\"></i>\n        <strong>Total Samples:</strong> {{ totalPooledSamplesCount }}\n        @if (totalPooledSamplesCount > metadataTable.sampleCount) {\n          <span class=\"text-danger ms-2\">\n            (Exceeds maximum of {{ metadataTable.sampleCount }})\n          </span>\n        } @else if (totalPooledSamplesCount === 0) {\n          <span class=\"text-warning ms-2\">\n            (Please select at least one sample)\n          </span>\n        }\n      </div>\n    </div>\n\n    <!-- Form Status -->\n    <div class=\"d-flex justify-content-between align-items-center mb-2\">\n      <small class=\"text-muted\">\n        Name: {{ createForm.get('poolName')?.value?.length || 0 }}/255 characters\n      </small>\n      @if (totalPooledSamplesCount > 0) {\n        <small class=\"text-success\">\n          <i class=\"bi bi-check-circle me-1\"></i>Ready to create\n        </small>\n      }\n    </div>\n\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]=\"createForm.invalid || isLoading() || totalPooledSamplesCount === 0 || totalPooledSamplesCount > metadataTable.sampleCount\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-plus-circle me-1\"></i>\n    Create Pool\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.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.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.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { 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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SamplePoolCreateModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'ccv-sample-pool-create-modal', standalone: true, imports: [CommonModule, ReactiveFormsModule, NgbModule], template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-plus-circle me-2\"></i>Create Sample Pool\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\" style=\"max-height: 70vh; overflow-y: auto;\">\n  <form [formGroup]=\"createForm\" (ngSubmit)=\"onSubmit()\">\n    \n    <!-- Pool Basic Info -->\n    <div class=\"row mb-4\">\n      <div class=\"col-12\">\n        <h6 class=\"text-primary mb-3\">\n          <i class=\"bi bi-info-circle me-2\"></i>Pool Information\n        </h6>\n      </div>\n      \n      <!-- Pool Name -->\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"poolName\" class=\"form-label\">Pool Name *</label>\n        <input \n          type=\"text\" \n          class=\"form-control\"\n          id=\"poolName\"\n          formControlName=\"poolName\"\n          [class.is-invalid]=\"isFieldInvalid('poolName')\"\n          placeholder=\"Enter pool name\">\n        @if (isFieldInvalid('poolName')) {\n          <div class=\"invalid-feedback\">\n            {{ getFieldError('poolName') }}\n          </div>\n        }\n      </div>\n\n\n      <!-- Description -->\n      <div class=\"col-12 mb-3\">\n        <label for=\"poolDescription\" class=\"form-label\">Description</label>\n        <textarea \n          class=\"form-control\"\n          id=\"poolDescription\"\n          formControlName=\"poolDescription\"\n          rows=\"2\"\n          placeholder=\"Optional pool description\"></textarea>\n      </div>\n\n      <!-- Reference Pool Checkbox -->\n      <div class=\"col-12 mb-3\">\n        <div class=\"form-check\">\n          <input \n            class=\"form-check-input\" \n            type=\"checkbox\" \n            id=\"isReference\" \n            formControlName=\"isReference\">\n          <label class=\"form-check-label\" for=\"isReference\">\n            <strong>Reference Pool</strong>\n            <div class=\"form-text\">Check if this is a reference pool</div>\n          </label>\n        </div>\n      </div>\n    </div>\n\n    <!-- Sample Selection Methods -->\n    <div class=\"mb-4\">\n      <h6 class=\"text-primary mb-3\">\n        <i class=\"bi bi-check2-square me-2\"></i>Sample Selection\n      </h6>\n\n      <!-- Selection Mode Tabs -->\n      <div class=\"btn-group mb-3\" role=\"group\">\n        <input type=\"radio\" class=\"btn-check\" id=\"manualMode\" [value]=\"'manual'\" \n               [checked]=\"selectionMode() === 'manual'\" (click)=\"selectionMode.set('manual')\">\n        <label class=\"btn btn-outline-primary\" for=\"manualMode\">\n          <i class=\"bi bi-hand-index me-1\"></i>Manual Selection\n        </label>\n\n        <input type=\"radio\" class=\"btn-check\" id=\"rangeMode\" [value]=\"'range'\" \n               [checked]=\"selectionMode() === 'range'\" (click)=\"selectionMode.set('range')\">\n        <label class=\"btn btn-outline-primary\" for=\"rangeMode\">\n          <i class=\"bi bi-sliders me-1\"></i>Range Selection\n        </label>\n      </div>\n\n      <!-- Range Selection Controls -->\n      @if (selectionMode() === 'range') {\n        <div class=\"card mb-3\">\n          <div class=\"card-body\">\n            <div class=\"row align-items-end\">\n              <div class=\"col-md-4\">\n                <label for=\"rangeStart\" class=\"form-label\">Start Sample</label>\n                <input \n                  type=\"number\" \n                  class=\"form-control\"\n                  id=\"rangeStart\"\n                  formControlName=\"range_start\"\n                  min=\"1\"\n                  [max]=\"metadataTable.sampleCount\"\n                  [class.is-invalid]=\"isFieldInvalid('range_start')\">\n                @if (isFieldInvalid('range_start')) {\n                  <div class=\"invalid-feedback\">\n                    {{ getFieldError('range_start') }}\n                  </div>\n                }\n              </div>\n              <div class=\"col-md-4\">\n                <label for=\"rangeEnd\" class=\"form-label\">End Sample</label>\n                <input \n                  type=\"number\" \n                  class=\"form-control\"\n                  id=\"rangeEnd\"\n                  formControlName=\"range_end\"\n                  min=\"1\"\n                  [max]=\"metadataTable.sampleCount\"\n                  [class.is-invalid]=\"isFieldInvalid('range_end')\">\n                @if (isFieldInvalid('range_end')) {\n                  <div class=\"invalid-feedback\">\n                    {{ getFieldError('range_end') }}\n                  </div>\n                }\n              </div>\n              <div class=\"col-md-4\">\n                <button type=\"button\" class=\"btn btn-success w-100\" (click)=\"selectSamplesInRange()\">\n                  <i class=\"bi bi-plus-square me-1\"></i>Select Range\n                </button>\n              </div>\n            </div>\n            <div class=\"form-text mt-2\">\n              Select samples from {{ createForm.get('range_start')?.value || 1 }} \n              to {{ createForm.get('range_end')?.value || 1 }} \n              ({{ Math.abs((createForm.get('range_end')?.value || 1) - (createForm.get('range_start')?.value || 1)) + 1 }} samples)\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Sample Grid for Manual Selection -->\n      @if (selectionMode() === 'manual') {\n        <div class=\"card mb-3\">\n          <div class=\"card-header d-flex justify-content-between align-items-center\">\n            <span>\n              <i class=\"bi bi-grid me-2\"></i>Select Samples \n              <span class=\"badge bg-info ms-2\">{{ selectedSamplesCount }} selected</span>\n            </span>\n            <button type=\"button\" class=\"btn btn-sm btn-outline-danger\" (click)=\"clearAllSelections()\">\n              <i class=\"bi bi-x-circle me-1\"></i>Clear All\n            </button>\n          </div>\n          <div class=\"card-body\" style=\"max-height: 300px; overflow-y: auto;\">\n            <!-- Sample Grid -->\n            <div class=\"row g-1 mb-3\">\n              @for (sample of paginatedSamples; track sample.sampleNumber) {\n                <div class=\"col-2\">\n                  <button \n                    type=\"button\" \n                    class=\"btn btn-sm w-100\"\n                    [class.btn-primary]=\"sample.selected && !sample.pooled\"\n                    [class.btn-success]=\"sample.selected && sample.pooled\"\n                    [class.btn-outline-secondary]=\"!sample.selected && !sample.pooled\"\n                    [class.btn-outline-warning]=\"!sample.selected && sample.pooled\"\n                    [disabled]=\"sample.pooled\"\n                    (click)=\"toggleSampleSelection(sample.sampleNumber)\"\n                    [title]=\"sample.pooled ? 'Sample already in another pool' : 'Click to select/deselect'\">\n                    {{ sample.sampleNumber }}\n                    @if (sample.pooled) {\n                      <i class=\"bi bi-lock-fill ms-1\"></i>\n                    }\n                  </button>\n                </div>\n              }\n            </div>\n\n            <!-- Pagination -->\n            @if (totalPages > 1) {\n              <nav>\n                <ul class=\"pagination pagination-sm justify-content-center\">\n                  <li class=\"page-item\" [class.disabled]=\"currentPage() === 1\">\n                    <button class=\"page-link\" type=\"button\" (click)=\"previousPage()\">Previous</button>\n                  </li>\n                  @for (page of [].constructor(Math.min(5, totalPages)); track $index) {\n                    @let pageNum = $index + Math.max(1, currentPage() - 2);\n                    @if (pageNum <= totalPages) {\n                      <li class=\"page-item\" [class.active]=\"pageNum === currentPage()\">\n                        <button class=\"page-link\" type=\"button\" (click)=\"goToPage(pageNum)\">{{ pageNum }}</button>\n                      </li>\n                    }\n                  }\n                  <li class=\"page-item\" [class.disabled]=\"currentPage() === totalPages\">\n                    <button class=\"page-link\" type=\"button\" (click)=\"nextPage()\">Next</button>\n                  </li>\n                </ul>\n              </nav>\n            }\n\n            <div class=\"form-text text-center\">\n              Showing {{ ((currentPage() - 1) * samplesPerPage) + 1 }} - \n              {{ Math.min(currentPage() * samplesPerPage, samples().length) }} \n              of {{ samples().length }} samples\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Selection Summary -->\n      @if (selectedSamplesCount > 0) {\n        <div class=\"alert alert-info\">\n          <div class=\"d-flex justify-content-between align-items-center\">\n            <span>\n              <i class=\"bi bi-info-circle me-2\"></i>\n              <strong>{{ selectedSamplesCount }}</strong> samples selected\n            </span>\n            <div class=\"btn-group btn-group-sm\">\n              <button type=\"button\" class=\"btn btn-outline-primary\" (click)=\"assignToPooledOnly()\">\n                <i class=\"bi bi-arrow-right me-1\"></i>Pooled Only\n              </button>\n              <button type=\"button\" class=\"btn btn-outline-success\" (click)=\"assignToPooledAndIndependent()\">\n                <i class=\"bi bi-arrow-right me-1\"></i>Pooled & Independent\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Sample Configuration -->\n    <div class=\"mb-4\">\n      <h6 class=\"text-primary mb-3\">\n        <i class=\"bi bi-gear me-2\"></i>Sample Configuration\n      </h6>\n      \n      <!-- Pooled Only Samples -->\n      <div class=\"mb-3\">\n        <label for=\"pooledOnlySamples\" class=\"form-label\">\n          Pooled Only Samples\n          <span class=\"badge bg-primary ms-2\">{{ parseSampleNumbers(createForm.get('pooled_only_samples_text')?.value || '').length }} samples</span>\n        </label>\n        <input \n          type=\"text\" \n          class=\"form-control\"\n          id=\"pooledOnlySamples\"\n          formControlName=\"pooled_only_samples_text\"\n          placeholder=\"e.g., 1, 2, 3, 5-8\">\n        <div class=\"form-text\">\n          Enter sample numbers separated by commas. Ranges like \"5-8\" are supported.\n        </div>\n      </div>\n\n      <!-- Pooled and Independent Samples -->\n      <div class=\"mb-3\">\n        <label for=\"pooledAndIndependentSamples\" class=\"form-label\">\n          Pooled & Independent Samples\n          <span class=\"badge bg-success ms-2\">{{ parseSampleNumbers(createForm.get('pooled_and_independent_samples_text')?.value || '').length }} samples</span>\n        </label>\n        <input \n          type=\"text\" \n          class=\"form-control\"\n          id=\"pooledAndIndependentSamples\"\n          formControlName=\"pooled_and_independent_samples_text\"\n          placeholder=\"e.g., 4, 9, 10-15\">\n        <div class=\"form-text\">\n          Enter sample numbers that are both pooled and run independently.\n        </div>\n      </div>\n\n      <!-- Total Count Display -->\n      <div class=\"alert\" \n           [class.alert-success]=\"totalPooledSamplesCount > 0 && totalPooledSamplesCount <= metadataTable.sampleCount\"\n           [class.alert-warning]=\"totalPooledSamplesCount === 0\"\n           [class.alert-danger]=\"totalPooledSamplesCount > metadataTable.sampleCount\">\n        <i class=\"bi bi-info-circle me-2\"></i>\n        <strong>Total Samples:</strong> {{ totalPooledSamplesCount }}\n        @if (totalPooledSamplesCount > metadataTable.sampleCount) {\n          <span class=\"text-danger ms-2\">\n            (Exceeds maximum of {{ metadataTable.sampleCount }})\n          </span>\n        } @else if (totalPooledSamplesCount === 0) {\n          <span class=\"text-warning ms-2\">\n            (Please select at least one sample)\n          </span>\n        }\n      </div>\n    </div>\n\n    <!-- Form Status -->\n    <div class=\"d-flex justify-content-between align-items-center mb-2\">\n      <small class=\"text-muted\">\n        Name: {{ createForm.get('poolName')?.value?.length || 0 }}/255 characters\n      </small>\n      @if (totalPooledSamplesCount > 0) {\n        <small class=\"text-success\">\n          <i class=\"bi bi-check-circle me-1\"></i>Ready to create\n        </small>\n      }\n    </div>\n\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]=\"createForm.invalid || isLoading() || totalPooledSamplesCount === 0 || totalPooledSamplesCount > metadataTable.sampleCount\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-plus-circle me-1\"></i>\n    Create Pool\n  </button>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }, { type: SamplePoolService }, { type: i3.ToastService }], propDecorators: { metadataTable: [{
+                type: Input
+            }], poolCreated: [{
+                type: Output
+            }] } });
+
+class MetadataTableDetails {
+    route;
+    router;
+    metadataTableService;
+    asyncExportService;
+    chunkedUploadService;
+    samplePoolService;
+    metadataColumnService;
+    toastService;
+    asyncTaskService;
+    modalService;
+    destroy$ = new Subject();
+    fileInput;
+    excelInput;
+    Math = Math;
+    onColumnFilterChange(value) {
+        this.columnFilter.set(value);
+    }
+    clearColumnFilter() {
+        this.columnFilter.set('');
+    }
+    get filteredColumnCount() {
+        return this.sortedColumns().length;
+    }
+    get totalColumnCount() {
+        const columns = this.table()?.columns || [];
+        return columns.filter(col => col && col.name).length;
+    }
+    sortBy(field) {
+        const currentField = this.sortField();
+        const currentDirection = this.sortDirection();
+        if (currentField === field) {
+            this.sortDirection.set(currentDirection === 'asc' ? 'desc' : 'asc');
+        }
+        else {
+            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';
+        }
+        return currentDirection === 'asc' ? 'bi-sort-alpha-down' : 'bi-sort-alpha-up';
+    }
+    isSorted(field) {
+        return this.sortField() === field;
+    }
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    table = signal(null, ...(ngDevMode ? [{ debugName: "table" }] : []));
+    tableId = signal(null, ...(ngDevMode ? [{ debugName: "tableId" }] : []));
+    viewMode = signal('table', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    columnFilter = signal('', ...(ngDevMode ? [{ debugName: "columnFilter" }] : []));
+    sortField = signal('', ...(ngDevMode ? [{ debugName: "sortField" }] : []));
+    sortDirection = signal('asc', ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
+    hasColumns = computed(() => {
+        const table = this.table();
+        return table?.columns && table.columns.length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasColumns" }] : []));
+    hasPools = computed(() => {
+        const table = this.table();
+        return table?.samplePools && table.samplePools.length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasPools" }] : []));
+    sortedColumns = computed(() => {
+        const columns = this.table()?.columns || [];
+        const filter = this.columnFilter().toLowerCase();
+        return [...columns]
+            .filter(col => col && col.name)
+            .filter(col => !filter || col.name.toLowerCase().includes(filter))
+            .sort((a, b) => (a.columnPosition || 0) - (b.columnPosition || 0));
+    }, ...(ngDevMode ? [{ debugName: "sortedColumns" }] : []));
+    dragColumnsForList = signal([], ...(ngDevMode ? [{ debugName: "dragColumnsForList" }] : []));
+    sortedPools = computed(() => {
+        const pools = this.table()?.samplePools || [];
+        return [...pools].sort((a, b) => a.poolName.localeCompare(b.poolName));
+    }, ...(ngDevMode ? [{ debugName: "sortedPools" }] : []));
+    tableRows = computed(() => {
+        const table = this.table();
+        if (!table || !this.hasColumns())
+            return [];
+        const rows = [];
+        for (let i = 0; i < table.sampleCount; i++) {
+            const sampleIndex = i + 1;
+            const row = { _sampleIndex: sampleIndex };
+            this.sortedColumns().forEach(column => {
+                const value = this.getSampleColumnValue(column, sampleIndex);
+                row[`col_${column.id}`] = value;
+            });
+            rows.push(row);
+        }
+        return rows;
+    }, ...(ngDevMode ? [{ debugName: "tableRows" }] : []));
+    poolTableRows = computed(() => {
+        const table = this.table();
+        if (!table || !this.hasPools() || !this.hasColumns())
+            return [];
+        const rows = [];
+        this.sortedPools().forEach(pool => {
+            const row = {
+                _poolName: pool.poolName,
+                _poolId: pool.id,
+                _poolData: pool
+            };
+            this.sortedColumns().forEach(column => {
+                let value = '';
+                const poolColumn = pool.metadataColumns?.find((pc) => (pc.id && column.id && pc.id === column.id) || pc.name === column.name);
+                if (poolColumn) {
+                    value = poolColumn.value || '';
+                }
+                row[`col_${column.id}`] = value;
+            });
+            rows.push(row);
+        });
+        return rows;
+    }, ...(ngDevMode ? [{ debugName: "poolTableRows" }] : []));
+    paginatedRows = computed(() => {
+        const rows = this.tableRows();
+        const page = this.currentPage();
+        const size = this.pageSize();
+        const start = (page - 1) * size;
+        const end = start + size;
+        return rows.slice(start, end);
+    }, ...(ngDevMode ? [{ debugName: "paginatedRows" }] : []));
+    totalPages = computed(() => {
+        const rows = this.tableRows();
+        const size = this.pageSize();
+        return Math.ceil(rows.length / size);
+    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    constructor(route, router, metadataTableService, asyncExportService, chunkedUploadService, samplePoolService, metadataColumnService, toastService, asyncTaskService, modalService) {
+        this.route = route;
+        this.router = router;
+        this.metadataTableService = metadataTableService;
+        this.asyncExportService = asyncExportService;
+        this.chunkedUploadService = chunkedUploadService;
+        this.samplePoolService = samplePoolService;
+        this.metadataColumnService = metadataColumnService;
+        this.toastService = toastService;
+        this.asyncTaskService = asyncTaskService;
+        this.modalService = modalService;
+    }
+    ngOnInit() {
+        this.route.params.subscribe(params => {
+            const id = Number(params['id']);
+            const mode = params['mode'] || 'list';
+            if (id && !isNaN(id)) {
+                this.tableId.set(id);
+                this.viewMode.set(mode);
+                this.loadTable(id);
+                this.setupAsyncTaskRefreshListener(id);
+            }
+            else {
+                this.toastService.error('Invalid table ID');
+                this.navigateBack();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    setupAsyncTaskRefreshListener(tableId) {
+        this.asyncTaskService.metadataTableRefresh$.pipe(takeUntil$1(this.destroy$)).subscribe((refreshedTableId) => {
+            if (refreshedTableId === tableId) {
+                console.log(`Import task completed for table ${refreshedTableId}, refreshing table details`);
+                this.toastService.info('Refreshing table data after successful import');
+                this.loadTable(tableId);
+            }
+        });
+    }
+    loadTable(id) {
+        this.isLoading.set(true);
+        this.metadataTableService.getMetadataTable(id).subscribe({
+            next: (table) => {
+                this.isLoading.set(false);
+                this.table.set(table);
+                const naturalOrder = [...(table.columns || [])].sort((a, b) => (a.columnPosition || 0) - (b.columnPosition || 0));
+                this.dragColumnsForList.set(naturalOrder);
+            },
+            error: (error) => {
+                this.isLoading.set(false);
+                console.error('Error loading metadata table:', error);
+                const errorMsg = error?.error?.detail || 'Table not found';
+                this.toastService.error(errorMsg);
+                if (error.status === 404) {
+                    this.navigateBack();
+                }
+            }
+        });
+    }
+    navigateBack() {
+        this.router.navigate(['/metadata-tables']);
+    }
+    switchToListMode() {
+        const tableId = this.tableId();
+        if (tableId) {
+            this.router.navigate(['/metadata-tables', tableId, 'list']);
+        }
+    }
+    switchToTableMode() {
+        const tableId = this.tableId();
+        if (tableId) {
+            this.router.navigate(['/metadata-tables', tableId, 'table']);
+        }
+    }
+    onPageChange(page) {
+        this.currentPage.set(page);
+    }
+    onPageSizeChange(size) {
+        this.pageSize.set(size);
+        this.currentPage.set(1); // Reset to first page when changing page size
+    }
+    editTable() {
+        const table = this.table();
+        if (!table || !table.canEdit)
+            return;
+        const modalRef = this.modalService.open(MetadataTableEditModal, {
+            size: 'lg',
+            centered: true
+        });
+        modalRef.componentInstance.table = table;
+        modalRef.componentInstance.tableSaved.subscribe((updatedTable) => {
+            // Update the local table data
+            this.table.set(updatedTable);
+            this.toastService.success(`Table "${updatedTable.name}" updated successfully!`);
+        });
+        modalRef.result.catch(() => {
+            // Modal was dismissed - no action needed
+        });
+    }
+    triggerFileInput() {
+        console.log('triggerFileInput called');
+        this.fileInput.nativeElement.click();
+    }
+    triggerExcelInput() {
+        console.log('triggerExcelInput called');
+        this.excelInput.nativeElement.click();
+    }
+    importSdrf(event) {
+        console.log('importSdrf called', event);
+        const input = event.target;
+        if (!input.files || input.files.length === 0) {
+            console.log('No files selected');
+            return;
+        }
+        const file = input.files[0];
+        const table = this.table();
+        if (!table)
+            return;
+        // Validate file type
+        if (!file.name.toLowerCase().endsWith('.txt') && !file.name.toLowerCase().endsWith('.tsv')) {
+            this.toastService.error('Please select a valid SDRF file (.txt or .tsv)');
+            input.value = ''; // Reset input
+            return;
+        }
+        if (confirm(`Import SDRF data into table "${table.name}"?\n\nThis will add new columns and may modify existing data.`)) {
+            input.value = ''; // Reset input early
+            // Use chunked upload service for import with progress tracking
+            this.isLoading.set(true);
+            console.log('Starting SDRF import using chunked upload:', {
+                fileName: file.name,
+                fileSize: file.size,
+                metadataTableId: table.id
+            });
+            // Use chunked upload - it now triggers async import task on completion
+            this.chunkedUploadService.uploadFileInChunks(file, 1024 * 1024, // 1MB chunks
+            {
+                metadataTableId: table.id,
+                createPools: true,
+                replaceExisting: false,
+                onProgress: (progress) => {
+                    console.log(`SDRF upload progress: ${Math.round(progress)}%`);
+                }
+            }).subscribe({
+                next: (result) => {
+                    this.isLoading.set(false);
+                    console.log('SDRF chunked upload completed:', result);
+                    // If a taskId is returned, monitor the async import task
+                    if (result?.taskId) {
+                        console.log('Starting async task monitoring for taskId:', result.taskId);
+                        this.toastService.success(`SDRF import task queued successfully! Task ID: ${result.taskId}`);
+                        // Mark task for monitoring and start real-time updates (same pattern as export)
+                        this.asyncTaskService.monitorTask(result.taskId);
+                        this.asyncTaskService.startRealtimeUpdates();
+                    }
+                    else {
+                        // Fallback for immediate processing (backward compatibility)
+                        this.toastService.success('SDRF file imported successfully!');
+                        this.loadTable(table.id);
+                    }
+                },
+                error: (error) => {
+                    this.isLoading.set(false);
+                    console.error('Error importing SDRF:', error);
+                    const errorMsg = error?.error?.detail || error?.error?.message || 'Failed to import SDRF file';
+                    this.toastService.error(errorMsg);
+                }
+            });
+        }
+        else {
+            input.value = ''; // Reset input if cancelled
+        }
+    }
+    importExcel(event) {
+        const input = event.target;
+        if (!input.files || input.files.length === 0)
+            return;
+        const file = input.files[0];
+        const table = this.table();
+        if (!table)
+            return;
+        // Validate file type
+        if (!file.name.toLowerCase().endsWith('.xlsx') && !file.name.toLowerCase().endsWith('.xls')) {
+            this.toastService.error('Please select a valid Excel file (.xlsx or .xls)');
+            input.value = ''; // Reset input
+            return;
+        }
+        if (confirm(`Import Excel data into table "${table.name}"?\n\nThis will update existing columns and may modify data.`)) {
+            input.value = ''; // Reset input early
+            // Use chunked upload service for import with progress tracking
+            this.isLoading.set(true);
+            console.log('Starting Excel import using chunked upload:', {
+                fileName: file.name,
+                fileSize: file.size,
+                metadataTableId: table.id
+            });
+            // Use chunked upload - it now triggers async import task on completion
+            this.chunkedUploadService.uploadFileInChunks(file, 1024 * 1024, // 1MB chunks
+            {
+                metadataTableId: table.id,
+                createPools: true,
+                replaceExisting: false,
+                onProgress: (progress) => {
+                    console.log(`Excel upload progress: ${Math.round(progress)}%`);
+                }
+            }).subscribe({
+                next: (result) => {
+                    this.isLoading.set(false);
+                    console.log('Excel chunked upload completed:', result);
+                    // If a taskId is returned, monitor the async import task
+                    if (result?.taskId) {
+                        console.log('Starting async task monitoring for taskId:', result.taskId);
+                        this.toastService.success(`Excel import task queued successfully! Task ID: ${result.taskId}`);
+                        // Mark task for monitoring and start real-time updates (same pattern as export)
+                        this.asyncTaskService.monitorTask(result.taskId);
+                        this.asyncTaskService.startRealtimeUpdates();
+                    }
+                    else {
+                        // Fallback for immediate processing (backward compatibility)
+                        this.toastService.success('Excel file imported successfully!');
+                        this.loadTable(table.id);
+                    }
+                },
+                error: (error) => {
+                    this.isLoading.set(false);
+                    console.error('Error importing Excel:', error);
+                    const errorMsg = error?.error?.detail || error?.error?.message || 'Failed to import Excel file';
+                    this.toastService.error(errorMsg);
+                }
+            });
+        }
+        else {
+            input.value = ''; // Reset input if cancelled
+        }
+    }
+    exportToSdrf(format = 'sdrf') {
+        const table = this.table();
+        if (!table || !table.columns || table.columns.length === 0) {
+            this.toastService.error('No columns available for export');
+            return;
+        }
+        if (format === 'excel') {
+            // Show Excel export options modal
+            const modalRef = this.modalService.open(ExcelExportModalComponent, {
+                size: 'lg',
+                backdrop: 'static'
+            });
+            modalRef.result.then((options) => {
+                this.performExcelExport(table, options);
+            }).catch(() => {
+                // Modal was dismissed - no action needed
+            });
+        }
+        else {
+            // Direct SDRF export
+            this.performSdrfExport(table);
+        }
+    }
+    performExcelExport(table, options) {
+        const columnIds = table.columns.map(col => col.id);
+        // Prepare lab group IDs based on options
+        let labGroupIds = undefined;
+        if (options.includeLabGroups === 'selected') {
+            labGroupIds = options.selectedLabGroupIds;
+        }
+        else if (options.includeLabGroups === 'all') {
+            // Pass empty array to signal "include all lab groups"
+            labGroupIds = [];
+        }
+        // For 'none', labGroupIds stays undefined
+        // Use async export only
+        this.asyncExportService.excelTemplate({
+            metadataTableId: table.id,
+            metadataColumnIds: columnIds,
+            sampleNumber: table.sampleCount,
+            exportFormat: 'excel',
+            includePools: options.includePools,
+            labGroupIds: labGroupIds
+        }).subscribe({
+            next: (response) => {
+                this.toastService.success(`Excel export queued successfully! Task ID: ${response.taskId}`);
+                // Start monitoring tasks if not already started
+                this.asyncTaskService.startRealtimeUpdates();
+            },
+            error: (error) => {
+                console.error('Error queuing Excel export:', error);
+                const errorMsg = error?.error?.detail || error?.error?.message || 'Failed to queue Excel export';
+                this.toastService.error(errorMsg);
+            }
+        });
+    }
+    performSdrfExport(table) {
+        const columnIds = table.columns.map(col => col.id);
+        // Use async export only
+        this.asyncExportService.sdrfFile({
+            metadataTableId: table.id,
+            metadataColumnIds: columnIds,
+            sampleNumber: table.sampleCount,
+            exportFormat: 'sdrf',
+            includePools: true
+        }).subscribe({
+            next: (response) => {
+                this.toastService.success(`SDRF export queued successfully! Task ID: ${response.taskId}`);
+                // Start monitoring tasks if not already started
+                this.asyncTaskService.startRealtimeUpdates();
+            },
+            error: (error) => {
+                console.error('Error queuing SDRF export:', error);
+                const errorMsg = error?.error?.detail || error?.error?.message || 'Failed to queue SDRF export';
+                this.toastService.error(errorMsg);
+            }
+        });
+    }
+    handleExportRequest(exportRequest, format) {
+        exportRequest.subscribe({
+            next: (response) => {
+                this.isLoading.set(false);
+                this.toastService.success(`${format.toUpperCase()} export task queued successfully! Task ID: ${response.taskId}`);
+                // Start monitoring tasks if not already started
+                this.asyncTaskService.startRealtimeUpdates();
+            },
+            error: (error) => {
+                this.isLoading.set(false);
+                console.error('Error exporting table:', error);
+                const errorMsg = error?.error?.detail || 'Failed to export table';
+                this.toastService.error(errorMsg);
+            }
+        });
+    }
+    deleteTable() {
+        const table = this.table();
+        if (!table)
+            return;
+        const confirmMessage = `Are you sure you want to delete the table "${table.name}"?\n\nThis action cannot be undone.`;
+        if (confirm(confirmMessage)) {
+            this.isLoading.set(true);
+            this.metadataTableService.deleteMetadataTable(table.id).subscribe({
+                next: () => {
+                    this.toastService.success(`Table "${table.name}" deleted successfully!`);
+                    this.navigateBack();
+                },
+                error: (error) => {
+                    this.isLoading.set(false);
+                    console.error('Error deleting metadata table:', error);
+                    const errorMsg = error?.error?.detail || error?.message || 'Failed to delete table. Please try again.';
+                    this.toastService.error(errorMsg);
+                }
+            });
+        }
+    }
+    getTableStatusBadge() {
+        const table = this.table();
+        if (!table)
+            return '';
+        if (table.isPublished)
+            return 'Published';
+        if (table.isLocked)
+            return 'Locked';
+        return 'Draft';
+    }
+    getTableStatusClass() {
+        const table = this.table();
+        if (!table)
+            return '';
+        if (table.isPublished)
+            return 'bg-success';
+        if (table.isLocked)
+            return 'bg-warning';
+        return 'bg-secondary';
+    }
+    getColumnTypeIcon(column) {
+        const type = column.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';
+    }
+    getColumnTypeClass(column) {
+        const type = column.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';
+    }
+    getColumnHeaderClass(column) {
+        let baseClass = '';
+        const type = column.type?.toLowerCase() || '';
+        if (type.includes(ColumnType.CHARACTERISTICS))
+            baseClass = 'bg-primary-subtle text-primary-emphasis';
+        else if (type.includes(ColumnType.FACTOR_VALUE.replace('_', ' ')))
+            baseClass = 'bg-success-subtle text-success-emphasis';
+        else if (type.includes(ColumnType.COMMENT))
+            baseClass = 'bg-info-subtle text-info-emphasis';
+        else if (type.includes(ColumnType.SOURCE_NAME.replace('_', ' ')))
+            baseClass = 'bg-warning-subtle text-warning-emphasis';
+        else if (type === ColumnType.SPECIAL)
+            baseClass = 'bg-danger-subtle text-danger-emphasis';
+        else
+            baseClass = 'bg-body-secondary text-body';
+        // Add hidden column styling
+        if (column.hidden) {
+            baseClass += ' opacity-50 text-decoration-line-through';
+        }
+        return baseClass;
+    }
+    getShortColumnName(column) {
+        let name = column.name;
+        // Handle different column types
+        const type = column.type?.toLowerCase() || '';
+        if (type.includes(ColumnType.CHARACTERISTICS)) {
+            name = name.replace(/^characteristics\s*\[/i, '').replace(/\]$/, '');
+        }
+        else if (type.includes(ColumnType.FACTOR_VALUE.replace('_', ' '))) {
+            name = name.replace(/^factor\s*value\s*\[/i, '').replace(/\]$/, '');
+        }
+        else if (type.includes(ColumnType.COMMENT)) {
+            name = name.replace(/^comment\s*\[/i, '').replace(/\]$/, '');
+        }
+        else if (type === ColumnType.SPECIAL) {
+            // Special columns have no prefix or brackets - use name as is
+            return name;
+        }
+        // Remove any remaining square brackets for other types
+        name = name.replace(/[\[\]]/g, '');
+        // Clean up extra spaces
+        name = name.trim();
+        return name || column.name; // Fallback to original name if cleaning results in empty string
+    }
+    hasModifiers(column) {
+        return !!(column.modifiers && Array.isArray(column.modifiers) && column.modifiers.length > 0);
+    }
+    getColumnValueDisplay(column) {
+        const defaultValue = column.value || '';
+        if (!this.hasModifiers(column)) {
+            return defaultValue || 'No default value';
+        }
+        return defaultValue ? `Default: ${defaultValue}` : 'Default: (empty)';
+    }
+    getModifiersDisplay(column) {
+        if (!this.hasModifiers(column)) {
+            return [];
+        }
+        return column.modifiers.map(modifier => `Samples ${modifier.samples}: "${modifier.value}"`);
+    }
+    // Sample Pool Methods
+    getPoolSampleCount(pool) {
+        return pool.pooledOnlySamples.length + pool.pooledAndIndependentSamples.length;
+    }
+    getPoolSampleDisplay(pool) {
+        const pooledOnly = pool.pooledOnlySamples.length;
+        const pooledAndIndependent = pool.pooledAndIndependentSamples.length;
+        const total = pooledOnly + pooledAndIndependent;
+        if (pooledOnly > 0 && pooledAndIndependent > 0) {
+            return `${total} samples (${pooledOnly} pool-only, ${pooledAndIndependent} shared)`;
+        }
+        else if (pooledOnly > 0) {
+            return `${pooledOnly} pool-only samples`;
+        }
+        else if (pooledAndIndependent > 0) {
+            return `${pooledAndIndependent} shared samples`;
+        }
+        else {
+            return '0 samples';
+        }
+    }
+    getPoolSamples(pool) {
+        const allSamples = [...pool.pooledOnlySamples, ...pool.pooledAndIndependentSamples].sort((a, b) => a - b);
+        if (allSamples.length === 0)
+            return 'None';
+        // Group consecutive numbers into ranges
+        const ranges = [];
+        let start = allSamples[0];
+        let end = allSamples[0];
+        for (let i = 1; i < allSamples.length; i++) {
+            if (allSamples[i] === end + 1) {
+                end = allSamples[i];
+            }
+            else {
+                ranges.push(start === end ? start.toString() : `${start}-${end}`);
+                start = end = allSamples[i];
+            }
+        }
+        ranges.push(start === end ? start.toString() : `${start}-${end}`);
+        return ranges.join(', ');
+    }
+    getPoolTypeIcon(pool) {
+        return pool.isReference ? 'bi-star-fill' : 'bi-layers';
+    }
+    getPoolTypeClass(pool) {
+        return pool.isReference ? 'text-warning' : 'text-primary';
+    }
+    getPoolTypeLabel(pool) {
+        return pool.isReference ? 'Reference Pool' : 'Sample Pool';
+    }
+    viewPoolDetails(pool) {
+        const modalRef = this.modalService.open(SamplePoolDetailsModal, {
+            size: 'lg',
+            centered: true
+        });
+        modalRef.componentInstance.pool = pool;
+    }
+    editPool(pool) {
+        const table = this.table();
+        if (!table || !table.canEdit)
+            return;
+        const modalRef = this.modalService.open(SamplePoolEditModal, {
+            size: 'lg',
+            centered: true
+        });
+        modalRef.componentInstance.pool = pool;
+        modalRef.componentInstance.maxSampleCount = table.sampleCount;
+        modalRef.componentInstance.poolSaved.subscribe((updatedPool) => {
+            // Reload the entire table to sync all pool-related changes
+            this.loadTable(table.id);
+            this.toastService.success(`Pool "${updatedPool.poolName}" updated successfully!`);
+        });
+    }
+    createPool() {
+        const table = this.table();
+        if (!table || !table.canEdit)
+            return;
+        const modalRef = this.modalService.open(SamplePoolCreateModal, {
+            size: 'xl',
+            centered: true,
+            backdrop: 'static'
+        });
+        modalRef.componentInstance.metadataTable = table;
+        modalRef.componentInstance.poolCreated.subscribe((createdPool) => {
+            // Reload the entire table to sync all pool-related changes
+            this.loadTable(table.id);
+            this.toastService.success(`Pool "${createdPool.poolName}" created successfully!`);
+        });
+        modalRef.result.catch(() => {
+            // Modal was dismissed - no action needed
+        });
+    }
+    deletePool(pool) {
+        const table = this.table();
+        if (!table || !pool.id)
+            return;
+        const confirmMessage = `Are you sure you want to delete the pool "${pool.poolName}"?\n\nThis action cannot be undone.`;
+        if (confirm(confirmMessage)) {
+            this.samplePoolService.deleteSamplePool(pool.id).subscribe({
+                next: () => {
+                    // Reload the entire table to sync all pool-related changes
+                    this.loadTable(table.id);
+                    this.toastService.success(`Pool "${pool.poolName}" deleted successfully!`);
+                },
+                error: (error) => {
+                    console.error('Error deleting pool:', error);
+                    this.toastService.error(`Failed to delete pool "${pool.poolName}"`);
+                }
+            });
+        }
+    }
+    // Metadata value editing methods
+    editColumnValue(column) {
+        const table = this.table();
+        if (!table || !table.canEdit || !column.id)
+            return;
+        // Prepare sample data for multi-sample editing
+        const sampleData = this.tableRows().map(row => ({
+            index: row._sampleIndex,
+            value: row[`col_${column.id}`] || column.value || '',
+            sourceName: row.sourceName || `Sample ${row._sampleIndex}`
+        }));
+        const config = {
+            columnId: column.id,
+            columnName: column.name,
+            columnType: column.type,
+            ontologyType: column.ontologyType,
+            enableTypeahead: true,
+            currentValue: column.value,
+            context: 'table',
+            tableId: table.id,
+            enableMultiSampleEdit: true,
+            sampleData: sampleData,
+            maxSampleCount: table.sampleCount
+        };
+        const modalRef = this.modalService.open(MetadataValueEditModal, {
+            size: 'xl',
+            backdrop: 'static'
+        });
+        modalRef.componentInstance.config = config;
+        // Debug log to check if multi-sample editing is enabled
+        console.log('Multi-sample editing config:', {
+            enableMultiSampleEdit: config.enableMultiSampleEdit,
+            sampleDataLength: config.sampleData?.length,
+            hasMultiSampleEdit: config.enableMultiSampleEdit && config.sampleData && config.sampleData.length > 0
+        });
+        modalRef.componentInstance.valueSaved.subscribe((result) => {
+            let apiData;
+            if (typeof result === 'string') {
+                // Simple string value - update default
+                apiData = {
+                    value: result,
+                    value_type: 'default'
+                };
+            }
+            else {
+                // Multi-sample edit - update specific samples
+                apiData = {
+                    value: result.value,
+                    sample_indices: result.sampleIndices,
+                    value_type: 'sample_specific'
+                };
+            }
+            // Use the API to update the column value
+            const requestData = {
+                value: typeof result === 'string' ? result : result.value,
+                sampleIndices: typeof result === 'string' ? undefined : result.sampleIndices,
+                valueType: typeof result === 'string' ? 'default' : 'sample_specific'
+            };
+            this.metadataColumnService.updateColumnValue(column.id, requestData).subscribe({
+                next: (response) => {
+                    // Update the local column data with the returned column
+                    const currentTable = this.table();
+                    if (currentTable && currentTable.columns && response.column) {
+                        const updatedColumns = currentTable.columns.map(col => col.id === column.id ? response.column : col);
+                        this.table.set({ ...currentTable, columns: updatedColumns });
+                    }
+                    this.toastService.success('Column value updated successfully!');
+                    modalRef.componentInstance.onClose();
+                },
+                error: (error) => {
+                    console.error('Error updating column value:', error);
+                    this.toastService.error('Failed to update column value');
+                }
+            });
+        });
+    }
+    // Toggle column hidden property
+    toggleColumnHidden(column) {
+        const table = this.table();
+        if (!table || !table.canEdit || !column.id)
+            return;
+        const newHiddenValue = !column.hidden;
+        this.metadataColumnService.patchMetadataColumn(column.id, { hidden: newHiddenValue }).subscribe({
+            next: (updatedColumn) => {
+                // Update the local column data
+                const currentTable = this.table();
+                if (currentTable && currentTable.columns) {
+                    const updatedColumns = currentTable.columns.map(col => col.id === column.id ? updatedColumn : col);
+                    this.table.set({ ...currentTable, columns: updatedColumns });
+                    // Reload the table data to sync pool columns
+                    this.loadTable(table.id);
+                }
+                this.toastService.success(`Column "${column.name}" visibility updated successfully!`);
+            },
+            error: (error) => {
+                console.error('Error updating column hidden property:', error);
+                this.toastService.error('Failed to update column visibility');
+            }
+        });
+    }
+    // View column details
+    viewColumnDetails(column) {
+        // For now, we'll show an alert with column details
+        // This can be enhanced with a proper modal later
+        const details = [
+            `Name: ${column.name}`,
+            `Type: ${column.type}`,
+            `Hidden: ${column.hidden ? 'Yes' : 'No'}`,
+            `Mandatory: ${column.mandatory ? 'Yes' : 'No'}`,
+            `Read Only: ${column.readonly ? 'Yes' : 'No'}`,
+            `Default Value: ${column.value || 'None'}`,
+            `Ontology Type: ${column.ontologyType || 'None'}`,
+            `Enable Typeahead: ${column.enableTypeahead ? 'Yes' : 'No'}`
+        ].join('\n');
+        alert(`Column Details:\n\n${details}`);
+    }
+    // Edit column settings
+    editColumnSettings(column) {
+        const table = this.table();
+        if (!table || !table.canEdit || !column.id)
+            return;
+        const modalRef = this.modalService.open(ColumnEditModal, {
+            size: 'lg',
+            backdrop: 'static',
+            keyboard: false
+        });
+        // Configure modal for editing existing column
+        modalRef.componentInstance.column = column;
+        modalRef.componentInstance.templateId = null;
+        modalRef.componentInstance.isEdit = true;
+        // Handle column save
+        modalRef.componentInstance.columnSaved.subscribe((columnData) => {
+            this.updateColumnSettings(column.id, columnData);
+            modalRef.componentInstance.onClose();
+        });
+    }
+    // Update column settings
+    updateColumnSettings(columnId, columnData) {
+        this.metadataColumnService.patchMetadataColumn(columnId, columnData).subscribe({
+            next: (updatedColumn) => {
+                // Update the local column data
+                const currentTable = this.table();
+                if (currentTable && currentTable.columns) {
+                    const updatedColumns = currentTable.columns.map(col => col.id === columnId ? updatedColumn : col);
+                    this.table.set({ ...currentTable, columns: updatedColumns });
+                }
+                this.toastService.success(`Column "${updatedColumn.name}" updated successfully!`);
+                // Reload the table to sync any changes
+                this.loadTable(currentTable.id);
+            },
+            error: (error) => {
+                console.error('Error updating column settings:', error);
+                this.toastService.error('Failed to update column settings');
+            }
+        });
+    }
+    // Pool metadata value editing method
+    editPoolColumnValue(pool, column) {
+        const table = this.table();
+        if (!table || !table.canEdit)
+            return;
+        // Find the pool's metadata column that corresponds to this table column
+        const poolColumn = pool.metadataColumns?.find(pc => pc.name === column.name);
+        if (!poolColumn || !poolColumn.id)
+            return;
+        const config = {
+            columnId: poolColumn.id,
+            columnName: poolColumn.name,
+            columnType: poolColumn.type,
+            ontologyType: poolColumn.ontologyType,
+            enableTypeahead: true,
+            currentValue: poolColumn.value,
+            context: 'pool',
+            tableId: table.id,
+            poolId: pool.id
+        };
+        const modalRef = this.modalService.open(MetadataValueEditModal, {
+            size: 'lg',
+            backdrop: 'static'
+        });
+        modalRef.componentInstance.config = config;
+        modalRef.componentInstance.valueSaved.subscribe((newValue) => {
+            // Update the pool's metadata column value locally
+            const currentTable = this.table();
+            if (currentTable && currentTable.samplePools) {
+                const updatedPools = currentTable.samplePools.map(p => {
+                    if (p.id === pool.id) {
+                        const updatedMetadataColumns = p.metadataColumns.map((mc) => mc.id === poolColumn.id ? { ...mc, value: newValue } : mc);
+                        return { ...p, metadataColumns: updatedMetadataColumns };
+                    }
+                    return p;
+                });
+                this.table.set({ ...currentTable, samplePools: updatedPools });
+            }
+            this.toastService.success('Pool column value updated successfully!');
+            modalRef.componentInstance.onClose();
+        });
+    }
+    // Sample-specific metadata value editing method
+    editSampleColumnValue(column, sampleIndex) {
+        const table = this.table();
+        if (!table || !table.canEdit || !column.id)
+            return;
+        // Get current value for this sample (could be default or modified)
+        const currentValue = this.getSampleColumnValue(column, sampleIndex);
+        const config = {
+            columnId: column.id,
+            columnName: column.name,
+            columnType: column.type,
+            ontologyType: column.ontologyType,
+            enableTypeahead: true,
+            currentValue: currentValue,
+            context: 'table',
+            tableId: table.id
+        };
+        const modalRef = this.modalService.open(MetadataValueEditModal, {
+            size: 'lg',
+            backdrop: 'static'
+        });
+        modalRef.componentInstance.config = config;
+        modalRef.componentInstance.valueSaved.subscribe((newValue) => {
+            // Use the API to update the sample-specific value
+            this.metadataColumnService.updateColumnValue(column.id, {
+                value: newValue,
+                sampleIndices: [sampleIndex],
+                valueType: 'sample_specific'
+            }).subscribe({
+                next: (response) => {
+                    // Update the local column data with the returned column
+                    const currentTable = this.table();
+                    if (currentTable && currentTable.columns && response.column) {
+                        const updatedColumns = currentTable.columns.map(col => col.id === column.id ? response.column : col);
+                        this.table.set({ ...currentTable, columns: updatedColumns });
+                    }
+                    this.toastService.success(`Sample ${sampleIndex} value updated successfully!`);
+                    modalRef.componentInstance.onClose();
+                },
+                error: (error) => {
+                    console.error('Error updating sample value:', error);
+                    this.toastService.error(`Failed to update sample ${sampleIndex} value`);
+                }
+            });
+        });
+    }
+    // Helper method to get current value for a specific sample
+    getSampleColumnValue(column, sampleIndex) {
+        // Check if this sample has a specific modifier
+        if (column.modifiers && column.modifiers.length > 0) {
+            for (const modifier of column.modifiers) {
+                if (modifier?.samples) {
+                    const sampleRanges = modifier.samples.split(',').map((s) => s.trim()).filter((s) => s.length > 0);
+                    for (const range of sampleRanges) {
+                        if (range.includes('-')) {
+                            const parts = range.split('-').map((n) => n.trim());
+                            if (parts.length === 2) {
+                                const start = parseInt(parts[0]);
+                                const end = parseInt(parts[1]);
+                                if (!isNaN(start) && !isNaN(end) && sampleIndex >= start && sampleIndex <= end) {
+                                    return modifier.value || '';
+                                }
+                            }
+                        }
+                        else {
+                            const sampleNum = parseInt(range);
+                            if (!isNaN(sampleNum) && sampleNum === sampleIndex) {
+                                return modifier.value || '';
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        // Return default value if no modifier found
+        return column.value || '';
+    }
+    // Remove column method
+    removeColumn(column) {
+        const table = this.table();
+        if (!table || !table.canEdit || !column.id)
+            return;
+        const confirmMessage = `Are you sure you want to remove the column "${column.name}"?\n\nThis action cannot be undone and will remove all data in this column.`;
+        if (confirm(confirmMessage)) {
+            this.metadataColumnService.deleteMetadataColumn(column.id).subscribe({
+                next: () => {
+                    // Remove the column from the local table data
+                    const currentTable = this.table();
+                    if (currentTable && currentTable.columns) {
+                        const updatedColumns = currentTable.columns.filter(col => col.id !== column.id);
+                        this.table.set({ ...currentTable, columns: updatedColumns });
+                    }
+                    this.toastService.success(`Column "${column.name}" removed successfully!`);
+                },
+                error: (error) => {
+                    console.error('Error removing column:', error);
+                    this.toastService.error(`Failed to remove column "${column.name}"`);
+                }
+            });
+        }
+    }
+    /**
+     * Open modal to add a new column with automatic reordering
+     */
+    openAddColumnModal() {
+        const modalRef = this.modalService.open(ColumnEditModal, {
+            size: 'lg',
+            backdrop: 'static',
+            keyboard: false
+        });
+        // Configure modal for adding new column
+        modalRef.componentInstance.column = null;
+        modalRef.componentInstance.templateId = null;
+        modalRef.componentInstance.isEdit = false;
+        // Handle column save
+        modalRef.componentInstance.columnSaved.subscribe((columnData) => {
+            this.addColumnWithAutoReorder(columnData);
+            modalRef.componentInstance.onClose();
+        });
+    }
+    /**
+     * Add a new column using the new API with automatic reordering
+     */
+    addColumnWithAutoReorder(columnData) {
+        const currentTable = this.table();
+        if (!currentTable) {
+            this.toastService.error('No table selected');
+            return;
+        }
+        this.isLoading.set(true);
+        this.metadataTableService.addColumnWithAutoReorder(currentTable.id, {
+            columnData: columnData
+        }).subscribe({
+            next: (response) => {
+                // Update the local table data with the new column
+                const updatedColumns = [...(currentTable.columns || []), response.column];
+                this.table.set({ ...currentTable, columns: updatedColumns });
+                // Show success message with reordering info
+                let message = `Column "${response.column.name}" added successfully!`;
+                if (response.reordered) {
+                    message += ` Columns reordered using ${response.schemaIdsUsed.length} schema(s).`;
+                }
+                this.toastService.success(message);
+                // Refresh the table to get the latest column positions
+                this.loadTable(currentTable.id);
+            },
+            error: (error) => {
+                console.error('Error adding column:', error);
+                this.toastService.error('Failed to add column');
+            },
+            complete: () => {
+                this.isLoading.set(false);
+            }
+        });
+    }
+    /**
+     * Reorder columns by schema selection
+     */
+    reorderColumns() {
+        const currentTable = this.table();
+        if (!currentTable) {
+            this.toastService.error('No table selected');
+            return;
+        }
+        const modalRef = this.modalService.open(SchemaSelectionModal, {
+            size: 'lg',
+            backdrop: 'static'
+        });
+        modalRef.componentInstance.title = 'Reorder Columns by Schema';
+        modalRef.componentInstance.description = `Select schemas to reorder columns in "${currentTable.name}". Columns will be arranged based on the selected schema order.`;
+        modalRef.result.then((result) => {
+            if (result && result.selectedSchemaIds) {
+                this.performColumnReorder(currentTable.id, result.selectedSchemaIds);
+            }
+        }).catch(() => {
+            // Modal was dismissed - no action needed
+        });
+    }
+    /**
+     * Perform the actual column reordering with async task monitoring
+     */
+    performColumnReorder(tableId, schemaIds) {
+        this.isLoading.set(true);
+        this.metadataTableService.reorderColumnsBySchemaAsync(tableId, schemaIds).subscribe({
+            next: (response) => {
+                console.log('Column reorder task started:', response);
+                this.toastService.success(`Column reorder task queued successfully! Task ID: ${response.taskId}`);
+                // Mark task for monitoring and start real-time updates (same pattern as imports)
+                this.asyncTaskService.monitorTask(response.taskId);
+                this.asyncTaskService.startRealtimeUpdates();
+                this.isLoading.set(false);
+            },
+            error: (error) => {
+                console.error('Error starting column reorder:', error);
+                this.toastService.error('Failed to start column reordering');
+                this.isLoading.set(false);
+            }
+        });
+    }
+    onColumnDrop(event) {
+        if (event.previousIndex === event.currentIndex)
+            return;
+        const currentTable = this.table();
+        if (!currentTable?.canEdit)
+            return;
+        const dragColumns = [...this.dragColumnsForList()];
+        moveItemInArray(dragColumns, event.previousIndex, event.currentIndex);
+        // Update columnPosition for all columns in the new order
+        dragColumns.forEach((col, index) => {
+            col.columnPosition = index;
+        });
+        this.dragColumnsForList.set(dragColumns);
+        // Update the main table data too
+        const updatedTableColumns = [...(currentTable.columns || [])];
+        dragColumns.forEach((dragCol, index) => {
+            const tableColIndex = updatedTableColumns.findIndex(col => col.id === dragCol.id);
+            if (tableColIndex !== -1) {
+                updatedTableColumns[tableColIndex] = { ...updatedTableColumns[tableColIndex], columnPosition: index };
+            }
+        });
+        this.table.update(table => table ? { ...table, columns: updatedTableColumns } : null);
+        const draggedColumn = dragColumns[event.currentIndex];
+        const newPosition = event.currentIndex;
+        console.log(`Moving column "${draggedColumn.name}" to position ${newPosition}`);
+        this.metadataTableService.reorderColumn(currentTable.id, draggedColumn.id, newPosition).subscribe({
+            next: () => {
+                this.toastService.success('Column reordered successfully');
+                this.loadTable(currentTable.id);
+            },
+            error: () => {
+                this.toastService.error('Failed to reorder column');
+                this.loadTable(currentTable.id);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataTableDetails, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: MetadataTableService }, { token: AsyncExportService }, { token: ChunkedUploadService }, { token: SamplePoolService }, { token: MetadataColumnService }, { token: i3.ToastService }, { token: AsyncTaskUIService }, { token: i2.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MetadataTableDetails, isStandalone: true, selector: "ccv-metadata-table-details", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "excelInput", first: true, predicate: ["excelInput"], descendants: true }], ngImport: i0, template: "<div class=\"metadata-table-details-container\">\n  <!-- Header Section with Breadcrumbs -->\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\n    <div class=\"container-fluid\">\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\n        <div class=\"d-flex align-items-center\">\n          <!-- Breadcrumb Navigation -->\n          <nav aria-label=\"breadcrumb\" class=\"me-3\">\n            <ol class=\"breadcrumb mb-0\">\n              <li class=\"breadcrumb-item\">\n                <a routerLink=\"/metadata-tables\" class=\"text-decoration-none\">\n                  <i class=\"bi bi-table me-1\"></i>Metadata Tables\n                </a>\n              </li>\n              <li class=\"breadcrumb-item active\" aria-current=\"page\">\n                @if (table()) {\n                  {{ table()!.name }}\n                } @else {\n                  Table Details\n                }\n              </li>\n            </ol>\n          </nav>\n\n          <!-- Table Status Badge -->\n          @if (table()) {\n            <span class=\"badge ms-2\" [class]=\"getTableStatusClass()\">\n              {{ getTableStatusBadge() }}\n            </span>\n          }\n        </div>\n\n        <!-- Action Buttons -->\n        <div class=\"d-flex gap-2\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary btn-sm\"\n            (click)=\"navigateBack()\"\n            title=\"Back to Tables\">\n            <i class=\"bi bi-arrow-left me-1\"></i>Back\n          </button>\n\n          <!-- View Mode Toggle -->\n          @if (hasColumns()) {\n            <div class=\"btn-group\" role=\"group\">\n              <button\n                type=\"button\"\n                class=\"btn btn-sm\"\n                [class]=\"viewMode() === 'list' ? 'btn-primary' : 'btn-outline-primary'\"\n                (click)=\"switchToListMode()\"\n                title=\"Column List View\">\n                <i class=\"bi bi-list-ul me-1\"></i>List\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-sm\"\n                [class]=\"viewMode() === 'table' ? 'btn-primary' : 'btn-outline-primary'\"\n                (click)=\"switchToTableMode()\"\n                title=\"Table Data View\">\n                <i class=\"bi bi-table me-1\"></i>Table\n              </button>\n            </div>\n          }\n          <!-- Import Dropdown -->\n          @if (table() && table()!.canEdit) {\n            <div class=\"btn-group\" ngbDropdown>\n              <!-- Hidden file inputs -->\n              <input\n                #fileInput\n                type=\"file\"\n                accept=\".txt,.tsv\"\n                style=\"display: none;\"\n                (change)=\"importSdrf($event)\">\n              <input\n                #excelInput\n                type=\"file\"\n                accept=\".xlsx,.xls\"\n                style=\"display: none;\"\n                (change)=\"importExcel($event)\">\n              \n              <button\n                type=\"button\"\n                class=\"btn btn-outline-success btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\"\n                title=\"Import Data\">\n                <i class=\"bi bi-upload me-1\"></i>Import\n              </button>\n              <div class=\"dropdown-menu\" ngbDropdownMenu>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"triggerFileInput(); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-text me-2\"></i>Import SDRF File\n                </a>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"triggerExcelInput(); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-spreadsheet me-2\"></i>Import Excel Template\n                </a>\n              </div>\n            </div>\n          }\n\n          <!-- Export Dropdown -->\n          @if (table() && hasColumns()) {\n            <div class=\"btn-group\" ngbDropdown>\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-info btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\"\n                title=\"Export Table\">\n                <i class=\"bi bi-download me-1\"></i>Export\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"exportToSdrf('sdrf'); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-text me-2\"></i>Export as SDRF\n                </a>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"exportToSdrf('excel'); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-spreadsheet me-2\"></i>Export as Excel\n                </a>\n              </div>\n            </div>\n          }\n\n          <!-- Edit Button -->\n          @if (table() && table()!.canEdit) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-primary btn-sm\"\n              (click)=\"editTable()\"\n              [disabled]=\"isLoading()\"\n              title=\"Edit Table\">\n              <i class=\"bi bi-pencil me-1\"></i>Edit\n            </button>\n          }\n\n          <!-- Reorder Columns Button -->\n          @if (table() && table()!.canEdit && hasColumns()) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-warning btn-sm\"\n              (click)=\"reorderColumns()\"\n              [disabled]=\"isLoading()\"\n              title=\"Reorder Columns by Schema\">\n              <i class=\"bi bi-arrows-move me-1\"></i>Reorder\n            </button>\n          }\n\n          <!-- Create Pool Button -->\n          @if (table() && table()!.canEdit && hasColumns()) {\n            <button\n              type=\"button\"\n              class=\"btn btn-success btn-sm\"\n              (click)=\"createPool()\"\n              [disabled]=\"isLoading()\"\n              title=\"Create Sample Pool\">\n              <i class=\"bi bi-plus-circle me-1\"></i>Create Pool\n            </button>\n          }\n\n          <!-- More Actions Dropdown -->\n          @if (table() && table()!.canEdit) {\n            <div class=\"btn-group\" ngbDropdown>\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-danger btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\">\n                <i class=\"bi bi-three-dots-vertical\"></i>\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n                <a class=\"dropdown-item text-danger\" href=\"#\" (click)=\"deleteTable(); $event.preventDefault()\">\n                  <i class=\"bi bi-trash me-2\"></i>Delete Table\n                </a>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <!-- Loading Spinner -->\n  @if (isLoading()) {\n    <div class=\"d-flex justify-content-center align-items-center\" style=\"height: 400px;\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n  }\n\n  <!-- Table Details Content -->\n  @if (table() && !isLoading()) {\n    <div class=\"table-details-content p-4\">\n\n      <!-- Table Information Card -->\n      <div class=\"card mb-4\">\n        <div class=\"card-header\">\n          <div class=\"d-flex align-items-center justify-content-between\">\n            <h5 class=\"mb-0\">\n              <i class=\"bi bi-info-circle me-2\"></i>Table Information\n            </h5>\n            <small class=\"text-muted\">\n              Created {{ table()!.createdAt | date:'medium' }}\n            </small>\n          </div>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"row\">\n            <div class=\"col-md-8\">\n              <h3 class=\"fw-bold mb-3\">{{ table()!.name }}</h3>\n              @if (table()!.description) {\n                <p class=\"text-muted mb-3\">{{ table()!.description }}</p>\n              }\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-hash text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Sample Count:</span>\n                    <span class=\"badge bg-primary\">{{ table()!.sampleCount }}</span>\n                  </div>\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-columns-gap text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Columns:</span>\n                    <span class=\"badge bg-info\">{{ table()!.columns?.length || 0 }}</span>\n                  </div>\n                </div>\n                <div class=\"col-md-6\">\n                  @if (table()!.ownerUsername) {\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <i class=\"bi bi-person text-muted me-2\"></i>\n                      <span class=\"fw-semibold me-2\">Owner:</span>\n                      <span>{{ table()!.ownerUsername }}</span>\n                    </div>\n                  }\n                  @if (table()!.labGroupName) {\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <i class=\"bi bi-people text-muted me-2\"></i>\n                      <span class=\"fw-semibold me-2\">Lab Group:</span>\n                      <span>{{ table()!.labGroupName }}</span>\n                    </div>\n                  }\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-tag text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Version:</span>\n                    <span class=\"badge bg-light text-dark\">{{ table()!.version || 'v1.0' }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-md-4 text-end\">\n              <div class=\"d-flex flex-column gap-2\">\n                @if (table()!.isLocked) {\n                  <span class=\"badge bg-warning\">\n                    <i class=\"bi bi-lock me-1\"></i>Locked\n                  </span>\n                }\n                @if (table()!.isPublished) {\n                  <span class=\"badge bg-success\">\n                    <i class=\"bi bi-cloud-check me-1\"></i>Published\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Sample Pool Table -->\n      @if (viewMode() === 'table' && hasPools()) {\n        <div class=\"card mb-4\">\n          <div class=\"card-header\">\n            <h5 class=\"mb-0\">\n              <i class=\"bi bi-layers me-2\"></i>Sample Pool Table\n              <span class=\"badge bg-warning ms-2\">{{ sortedPools().length }} pools</span>\n            </h5>\n          </div>\n          <div class=\"card-body p-0\">\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead class=\"table-light\">\n                  <tr>\n                    <th scope=\"col\" style=\"width: 80px;\" class=\"bg-secondary bg-opacity-10 text-secondary\">Pool</th>\n                    @for (column of sortedColumns(); track column.id) {\n                      <th scope=\"col\" [class]=\"getColumnHeaderClass(column)\" [title]=\"column.name\">\n                        <div class=\"header-cell d-flex justify-content-between align-items-center\">\n                          <span>{{ getShortColumnName(column) }}</span>\n                          @if (table()!.canEdit) {\n                            <div class=\"header-actions\">\n                              <button\n                                type=\"button\"\n                                class=\"btn btn-sm btn-outline-primary header-edit-btn me-1\"\n                                (click)=\"editColumnValue(column)\"\n                                [title]=\"'Edit default value for ' + column.name\">\n                                <i class=\"bi bi-pencil\"></i>\n                              </button>\n                            </div>\n                          }\n                        </div>\n                      </th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (poolRow of poolTableRows(); track poolRow._poolId) {\n                    <tr class=\"pool-row\" [class.editable]=\"table()!.canEdit\">\n                      <td class=\"text-muted fw-semibold\" \n                          [class.clickable]=\"table()!.canEdit\"\n                          (click)=\"table()!.canEdit ? editPool(poolRow._poolData) : null\"\n                          [title]=\"table()!.canEdit ? 'Click to edit pool: ' + poolRow._poolName : poolRow._poolName\">\n                        <i class=\"bi bi-layers me-2\"></i>{{ poolRow._poolName }}\n                        @if (table()!.canEdit) {\n                          <i class=\"bi bi-pencil-square ms-1 text-primary\" style=\"font-size: 0.8em;\"></i>\n                        }\n                      </td>\n                      @for (column of sortedColumns(); track column.id) {\n                        <td\n                          class=\"pool-cell\"\n                          [class.opacity-50]=\"column.hidden\"\n                          [attr.data-pool-id]=\"poolRow._poolId\"\n                          [attr.data-column-id]=\"column.id\"\n                          (click)=\"table()!.canEdit ? editPoolColumnValue(poolRow._poolData, column) : null\"\n                          [title]=\"table()!.canEdit ? 'Click to edit ' + column.name + ' for pool ' + poolRow._poolName : ''\">\n                          {{ poolRow['col_' + column.id] || '-' }}\n                        </td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Columns/Table Section -->\n      <div class=\"card\">\n        <div class=\"card-header\">\n          <div class=\"d-flex align-items-center justify-content-between\">\n            <h5 class=\"mb-0\">\n              @if (viewMode() === 'list') {\n                <i class=\"bi bi-list-columns me-2\"></i>Table Columns\n              } @else {\n                <i class=\"bi bi-table me-2\"></i>Table Data\n              }\n            </h5>\n            \n            <!-- Column Filter -->\n            @if (hasColumns()) {\n              <div class=\"d-flex align-items-center me-3\">\n                <div class=\"input-group input-group-sm\" style=\"width: 250px;\">\n                  <span class=\"input-group-text\">\n                    <i class=\"bi bi-funnel text-muted\"></i>\n                  </span>\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    placeholder=\"Filter columns...\"\n                    [value]=\"columnFilter()\"\n                    (input)=\"onColumnFilterChange($any($event.target).value)\">\n                  @if (columnFilter()) {\n                    <button\n                      type=\"button\"\n                      class=\"btn btn-outline-secondary\"\n                      (click)=\"clearColumnFilter()\"\n                      title=\"Clear filter\">\n                      <i class=\"bi bi-x\"></i>\n                    </button>\n                  }\n                </div>\n                @if (columnFilter()) {\n                  <small class=\"text-muted ms-2\">\n                    {{ filteredColumnCount }}/{{ totalColumnCount }}\n                  </small>\n                }\n              </div>\n            }\n            \n            <div class=\"d-flex gap-2 align-items-center\">\n              @if (viewMode() === 'list') {\n                <span class=\"badge bg-primary\">{{ sortedColumns().length }} columns</span>\n                @if (table() && table()!.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-success btn-sm\"\n                    (click)=\"openAddColumnModal()\"\n                    [disabled]=\"isLoading()\"\n                    title=\"Add new column with automatic reordering\">\n                    <i class=\"bi bi-plus-circle me-1\"></i>Add Column\n                  </button>\n                }\n                @if (table() && table()!.canEdit && sortedColumns().length === 0) {\n                  <small class=\"text-muted\">Import SDRF to add columns</small>\n                }\n              } @else {\n                <span class=\"badge bg-info\">{{ tableRows().length }} samples</span>\n                @if (hasPools()) {\n                  <span class=\"badge bg-warning\">{{ sortedPools().length }} pools</span>\n                }\n                <span class=\"badge bg-primary\">{{ sortedColumns().length }} columns</span>\n                @if (table() && table()!.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-success btn-sm\"\n                    (click)=\"openAddColumnModal()\"\n                    [disabled]=\"isLoading()\"\n                    title=\"Add new column with automatic reordering\">\n                    <i class=\"bi bi-plus-circle me-1\"></i>Add Column\n                  </button>\n                }\n              }\n            </div>\n          </div>\n        </div>\n\n        @if (hasColumns()) {\n          <!-- List Mode: Column Definitions -->\n          @if (viewMode() === 'list') {\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead>\n                  <tr>\n                    <th scope=\"col\" style=\"width: 40px;\">\n                      @if (table()!.canEdit) {\n                        <i class=\"bi bi-arrows-move text-muted\" title=\"Drag to reorder\"></i>\n                      }\n                    </th>\n                    <th scope=\"col\" style=\"width: 60px;\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('position')\"\n                        [class.sorted]=\"isSorted('position')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>#</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('position')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('name')\"\n                        [class.sorted]=\"isSorted('name')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Column Name</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('name')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('type')\"\n                        [class.sorted]=\"isSorted('type')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Type</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('type')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('value')\"\n                        [class.sorted]=\"isSorted('value')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Value</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('value')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\">Properties</th>\n                    <th scope=\"col\" style=\"width: 100px;\">Actions</th>\n                  </tr>\n                </thead>\n                <tbody cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" [cdkDropListData]=\"dragColumnsForList()\">\n                  @for (column of dragColumnsForList(); track column.id) {\n                    <tr cdkDrag [cdkDragData]=\"column\" [cdkDragDisabled]=\"!table()!.canEdit\">\n                      <td class=\"text-center\">\n                        @if (table()!.canEdit) {\n                          <i class=\"bi bi-grip-vertical drag-handle\" cdkDragHandle></i>\n                        }\n                      </td>\n                      <td class=\"text-muted fw-semibold\">\n                        {{ (column.columnPosition || 0) + 1 }}\n                      </td>\n                      <td>\n                        <div class=\"d-flex align-items-center\">\n                          <i class=\"me-2\" [class]=\"getColumnTypeIcon(column) + ' ' + getColumnTypeClass(column)\"></i>\n                          <span class=\"fw-semibold\">{{ column.name }}</span>\n                        </div>\n                      </td>\n                      <td>\n                        <span class=\"badge bg-light text-dark\">{{ column.type }}</span>\n                      </td>\n                      <td>\n                        <div>\n                          <!-- Default Value -->\n                          <div class=\"fw-semibold\">{{ getColumnValueDisplay(column) }}</div>\n\n                          <!-- Sample-specific Modifiers -->\n                          @if (hasModifiers(column)) {\n                            <div class=\"mt-1\">\n                              @for (modifierDisplay of getModifiersDisplay(column); track $index) {\n                                <small class=\"badge bg-light text-dark me-1 mb-1 d-inline-block\"\n                                       style=\"font-size: 0.7rem;\"\n                                       [title]=\"modifierDisplay\">\n                                  {{ modifierDisplay }}\n                                </small>\n                              }\n                            </div>\n                          }\n                        </div>\n                      </td>\n                      <td>\n                        <div class=\"d-flex gap-1 flex-wrap\">\n                          @if (column.mandatory) {\n                            <span class=\"badge bg-danger\" title=\"Required field\">Required</span>\n                          }\n                          @if (column.readonly) {\n                            <span class=\"badge bg-secondary\" title=\"Read-only field\">Read-only</span>\n                          }\n                          @if (column.hidden) {\n                            <span class=\"badge bg-warning\" title=\"Hidden field\">Hidden</span>\n                          }\n                          @if (column.autoGenerated) {\n                            <span class=\"badge bg-info\" title=\"Auto-generated field\">Auto</span>\n                          }\n                          @if (column.ontologyType) {\n                            <span class=\"badge bg-success\" title=\"Ontology: {{ column.ontologyType }}\">\n                              {{ column.ontologyType }}\n                            </span>\n                          }\n                        </div>\n                      </td>\n                      <td>\n                        <div class=\"btn-group btn-group-sm\">\n                          <button type=\"button\" class=\"btn btn-outline-primary\"\n                                  (click)=\"viewColumnDetails(column)\"\n                                  title=\"View column details\">\n                            <i class=\"bi bi-eye\"></i>\n                          </button>\n                          @if (table()!.canEdit) {\n                            <button type=\"button\" \n                                    class=\"btn\"\n                                    [class]=\"column.hidden ? 'btn-outline-warning' : 'btn-outline-success'\"\n                                    (click)=\"toggleColumnHidden(column)\"\n                                    [title]=\"column.hidden ? 'Show column' : 'Hide column'\">\n                              <i class=\"bi\" [class]=\"column.hidden ? 'bi-eye-slash' : 'bi-eye'\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-success\"\n                                    (click)=\"editColumnValue(column)\"\n                                    title=\"Edit default value\">\n                              <i class=\"bi bi-pencil-square\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-secondary\"\n                                    (click)=\"editColumnSettings(column)\"\n                                    title=\"Edit column settings\">\n                              <i class=\"bi bi-gear\"></i>\n                            </button>\n                          }\n                        </div>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n\n          <!-- Table Data -->\n          @if (viewMode() === 'table') {\n            <div class=\"card-body p-0\">\n              <div class=\"table-responsive\">\n                <table class=\"table table-hover mb-0\">\n                  <thead class=\"table-light\">\n                    <tr>\n                      <th scope=\"col\" style=\"width: 80px;\" class=\"bg-secondary bg-opacity-10 text-secondary\">#</th>\n                      @for (column of sortedColumns(); track column.id) {\n                        <th scope=\"col\" [class]=\"getColumnHeaderClass(column)\" [title]=\"column.name\">\n                          <div class=\"header-cell d-flex justify-content-between align-items-center\">\n                            <span>{{ getShortColumnName(column) }}</span>\n                            @if (table()!.canEdit) {\n                              <div class=\"header-actions\">\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm header-edit-btn me-1\"\n                                  [class]=\"column.hidden ? 'btn-outline-warning' : 'btn-outline-success'\"\n                                  (click)=\"toggleColumnHidden(column)\"\n                                  [title]=\"column.hidden ? 'Show column' : 'Hide column'\">\n                                  <i class=\"bi\" [class]=\"column.hidden ? 'bi-eye-slash' : 'bi-eye'\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-primary header-edit-btn me-1\"\n                                  (click)=\"editColumnValue(column)\"\n                                  [title]=\"'Edit default value for ' + column.name\">\n                                  <i class=\"bi bi-pencil\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-danger header-edit-btn\"\n                                  (click)=\"removeColumn(column)\"\n                                  [title]=\"'Remove ' + column.name + ' column'\">\n                                  <i class=\"bi bi-trash\"></i>\n                                </button>\n                              </div>\n                            }\n                          </div>\n                        </th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (row of paginatedRows(); track row._sampleIndex) {\n                      <tr class=\"sample-row\" [class.editable]=\"table()!.canEdit\">\n                        <td class=\"text-muted fw-semibold\">{{ row._sampleIndex }}</td>\n                        @for (column of sortedColumns(); track column.id) {\n                          <td\n                            class=\"sample-cell\"\n                            [class.opacity-50]=\"column.hidden\"\n                            [attr.data-sample-index]=\"row._sampleIndex\"\n                            [attr.data-column-id]=\"column.id\"\n                            (click)=\"table()!.canEdit ? editSampleColumnValue(column, row._sampleIndex) : null\"\n                            [title]=\"table()!.canEdit ? 'Click to edit ' + column.name + ' for sample ' + row._sampleIndex : ''\">\n                            {{ row['col_' + column.id] || '-' }}\n                          </td>\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n\n              <!-- Table Mode Pagination -->\n              @if (viewMode() === 'table' && totalPages() > 1) {\n                <div class=\"d-flex justify-content-between align-items-center p-3 border-top\">\n                  <div class=\"d-flex align-items-center gap-2\">\n                    <span class=\"text-muted\">Rows per page:</span>\n                    <select class=\"form-select form-select-sm\" style=\"width: auto;\"\n                            [value]=\"pageSize()\"\n                            (change)=\"onPageSizeChange(+($any($event.target).value))\">\n                      <option value=\"10\">10</option>\n                      <option value=\"25\">25</option>\n                      <option value=\"50\">50</option>\n                      <option value=\"100\">100</option>\n                    </select>\n                  </div>\n                  <ngb-pagination\n                    [collectionSize]=\"tableRows().length\"\n                    [page]=\"currentPage()\"\n                    [pageSize]=\"pageSize()\"\n                    [maxSize]=\"5\"\n                    [boundaryLinks]=\"true\"\n                    [rotate]=\"true\"\n                    (pageChange)=\"onPageChange($event)\"\n                    class=\"pagination-sm mb-0\">\n                  </ngb-pagination>\n                  <span class=\"text-muted\">\n                    Showing {{ (currentPage() - 1) * pageSize() + 1 }}-{{ Math.min(currentPage() * pageSize(), tableRows().length) }}\n                    of {{ tableRows().length }} samples\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"card-body text-center py-5\">\n            <div class=\"text-muted\">\n              <i class=\"bi bi-inbox display-1 mb-3\"></i>\n              <h5>No Columns Found</h5>\n              <p>This table doesn't have any columns defined yet.</p>\n              @if (table()!.canEdit) {\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"openAddColumnModal()\">\n                  <i class=\"bi bi-plus me-1\"></i>Add First Column\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.header-cell{position:relative}.header-cell .header-actions{opacity:0;transition:opacity .15s ease}thead th:hover .header-actions{opacity:1}.header-edit-btn{--bs-btn-padding-y: .125rem;--bs-btn-padding-x: .25rem;--bs-btn-font-size: .65rem;border:none!important}.header-edit-btn.btn-outline-primary:hover{background-color:var(--bs-primary);border-color:var(--bs-primary)}.header-edit-btn.btn-outline-danger:hover{background-color:var(--bs-danger);border-color:var(--bs-danger)}.sample-row.editable .sample-cell{cursor:pointer;transition:background-color .1s ease}.sample-row.editable .sample-cell:hover{background-color:#28a74514;position:relative}.sample-row.editable .sample-cell:hover:after{content:\"\\270e\";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#28a74599;font-size:.75em;pointer-events:none}.pool-row.editable td.clickable{cursor:pointer;transition:background-color .1s ease}.pool-row.editable td.clickable:hover{background-color:#0dcaf01a;color:var(--bs-info)}.pool-row.editable td.clickable:hover .bi-pencil-square{opacity:.8}.pool-row.editable td.clickable .bi-pencil-square{opacity:.4;transition:opacity .1s ease}.pool-row.editable .pool-cell{cursor:pointer;transition:background-color .1s ease}.pool-row.editable .pool-cell:hover{background-color:#ffc10726;position:relative}.pool-row.editable .pool-cell:hover:after{content:\"\\270e\";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#ffc107cc;font-size:.75em;pointer-events:none}@media (max-width: 768px){.sample-row.editable .sample-cell,.pool-row.editable .pool-cell{transition:none}}.sortable{cursor:pointer;user-select:none;transition:background-color .2s ease}.sortable:hover{background-color:rgba(var(--bs-primary-rgb),.1)}.sortable.sorted{background-color:rgba(var(--bs-primary-rgb),.15)}.sortable.sorted .bi{color:var(--bs-primary)}.sortable .bi{opacity:.5;transition:all .2s ease;font-size:.75em}.sortable:hover .bi{opacity:.8}.drag-handle{cursor:grab;opacity:.6;transition:opacity .2s ease}.drag-handle:hover{opacity:1}.drag-handle:active{cursor:grabbing}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:var(--bs-light);border:1px solid var(--bs-border-color)}.cdk-drag-preview .header-cell{padding:.5rem;font-size:.875rem;font-weight:500}.cdk-drag-placeholder{opacity:.5;background:rgba(var(--bs-primary-rgb),.1)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging th:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: i2.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataTableDetails, decorators: [{
+            type: Component,
+            args: [{ selector: 'ccv-metadata-table-details', standalone: true, imports: [CommonModule, RouterModule, NgbModule, DragDropModule], template: "<div class=\"metadata-table-details-container\">\n  <!-- Header Section with Breadcrumbs -->\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\n    <div class=\"container-fluid\">\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\n        <div class=\"d-flex align-items-center\">\n          <!-- Breadcrumb Navigation -->\n          <nav aria-label=\"breadcrumb\" class=\"me-3\">\n            <ol class=\"breadcrumb mb-0\">\n              <li class=\"breadcrumb-item\">\n                <a routerLink=\"/metadata-tables\" class=\"text-decoration-none\">\n                  <i class=\"bi bi-table me-1\"></i>Metadata Tables\n                </a>\n              </li>\n              <li class=\"breadcrumb-item active\" aria-current=\"page\">\n                @if (table()) {\n                  {{ table()!.name }}\n                } @else {\n                  Table Details\n                }\n              </li>\n            </ol>\n          </nav>\n\n          <!-- Table Status Badge -->\n          @if (table()) {\n            <span class=\"badge ms-2\" [class]=\"getTableStatusClass()\">\n              {{ getTableStatusBadge() }}\n            </span>\n          }\n        </div>\n\n        <!-- Action Buttons -->\n        <div class=\"d-flex gap-2\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary btn-sm\"\n            (click)=\"navigateBack()\"\n            title=\"Back to Tables\">\n            <i class=\"bi bi-arrow-left me-1\"></i>Back\n          </button>\n\n          <!-- View Mode Toggle -->\n          @if (hasColumns()) {\n            <div class=\"btn-group\" role=\"group\">\n              <button\n                type=\"button\"\n                class=\"btn btn-sm\"\n                [class]=\"viewMode() === 'list' ? 'btn-primary' : 'btn-outline-primary'\"\n                (click)=\"switchToListMode()\"\n                title=\"Column List View\">\n                <i class=\"bi bi-list-ul me-1\"></i>List\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-sm\"\n                [class]=\"viewMode() === 'table' ? 'btn-primary' : 'btn-outline-primary'\"\n                (click)=\"switchToTableMode()\"\n                title=\"Table Data View\">\n                <i class=\"bi bi-table me-1\"></i>Table\n              </button>\n            </div>\n          }\n          <!-- Import Dropdown -->\n          @if (table() && table()!.canEdit) {\n            <div class=\"btn-group\" ngbDropdown>\n              <!-- Hidden file inputs -->\n              <input\n                #fileInput\n                type=\"file\"\n                accept=\".txt,.tsv\"\n                style=\"display: none;\"\n                (change)=\"importSdrf($event)\">\n              <input\n                #excelInput\n                type=\"file\"\n                accept=\".xlsx,.xls\"\n                style=\"display: none;\"\n                (change)=\"importExcel($event)\">\n              \n              <button\n                type=\"button\"\n                class=\"btn btn-outline-success btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\"\n                title=\"Import Data\">\n                <i class=\"bi bi-upload me-1\"></i>Import\n              </button>\n              <div class=\"dropdown-menu\" ngbDropdownMenu>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"triggerFileInput(); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-text me-2\"></i>Import SDRF File\n                </a>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"triggerExcelInput(); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-spreadsheet me-2\"></i>Import Excel Template\n                </a>\n              </div>\n            </div>\n          }\n\n          <!-- Export Dropdown -->\n          @if (table() && hasColumns()) {\n            <div class=\"btn-group\" ngbDropdown>\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-info btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\"\n                title=\"Export Table\">\n                <i class=\"bi bi-download me-1\"></i>Export\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"exportToSdrf('sdrf'); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-text me-2\"></i>Export as SDRF\n                </a>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"exportToSdrf('excel'); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-spreadsheet me-2\"></i>Export as Excel\n                </a>\n              </div>\n            </div>\n          }\n\n          <!-- Edit Button -->\n          @if (table() && table()!.canEdit) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-primary btn-sm\"\n              (click)=\"editTable()\"\n              [disabled]=\"isLoading()\"\n              title=\"Edit Table\">\n              <i class=\"bi bi-pencil me-1\"></i>Edit\n            </button>\n          }\n\n          <!-- Reorder Columns Button -->\n          @if (table() && table()!.canEdit && hasColumns()) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-warning btn-sm\"\n              (click)=\"reorderColumns()\"\n              [disabled]=\"isLoading()\"\n              title=\"Reorder Columns by Schema\">\n              <i class=\"bi bi-arrows-move me-1\"></i>Reorder\n            </button>\n          }\n\n          <!-- Create Pool Button -->\n          @if (table() && table()!.canEdit && hasColumns()) {\n            <button\n              type=\"button\"\n              class=\"btn btn-success btn-sm\"\n              (click)=\"createPool()\"\n              [disabled]=\"isLoading()\"\n              title=\"Create Sample Pool\">\n              <i class=\"bi bi-plus-circle me-1\"></i>Create Pool\n            </button>\n          }\n\n          <!-- More Actions Dropdown -->\n          @if (table() && table()!.canEdit) {\n            <div class=\"btn-group\" ngbDropdown>\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-danger btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\">\n                <i class=\"bi bi-three-dots-vertical\"></i>\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n                <a class=\"dropdown-item text-danger\" href=\"#\" (click)=\"deleteTable(); $event.preventDefault()\">\n                  <i class=\"bi bi-trash me-2\"></i>Delete Table\n                </a>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <!-- Loading Spinner -->\n  @if (isLoading()) {\n    <div class=\"d-flex justify-content-center align-items-center\" style=\"height: 400px;\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n  }\n\n  <!-- Table Details Content -->\n  @if (table() && !isLoading()) {\n    <div class=\"table-details-content p-4\">\n\n      <!-- Table Information Card -->\n      <div class=\"card mb-4\">\n        <div class=\"card-header\">\n          <div class=\"d-flex align-items-center justify-content-between\">\n            <h5 class=\"mb-0\">\n              <i class=\"bi bi-info-circle me-2\"></i>Table Information\n            </h5>\n            <small class=\"text-muted\">\n              Created {{ table()!.createdAt | date:'medium' }}\n            </small>\n          </div>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"row\">\n            <div class=\"col-md-8\">\n              <h3 class=\"fw-bold mb-3\">{{ table()!.name }}</h3>\n              @if (table()!.description) {\n                <p class=\"text-muted mb-3\">{{ table()!.description }}</p>\n              }\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-hash text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Sample Count:</span>\n                    <span class=\"badge bg-primary\">{{ table()!.sampleCount }}</span>\n                  </div>\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-columns-gap text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Columns:</span>\n                    <span class=\"badge bg-info\">{{ table()!.columns?.length || 0 }}</span>\n                  </div>\n                </div>\n                <div class=\"col-md-6\">\n                  @if (table()!.ownerUsername) {\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <i class=\"bi bi-person text-muted me-2\"></i>\n                      <span class=\"fw-semibold me-2\">Owner:</span>\n                      <span>{{ table()!.ownerUsername }}</span>\n                    </div>\n                  }\n                  @if (table()!.labGroupName) {\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <i class=\"bi bi-people text-muted me-2\"></i>\n                      <span class=\"fw-semibold me-2\">Lab Group:</span>\n                      <span>{{ table()!.labGroupName }}</span>\n                    </div>\n                  }\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-tag text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Version:</span>\n                    <span class=\"badge bg-light text-dark\">{{ table()!.version || 'v1.0' }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-md-4 text-end\">\n              <div class=\"d-flex flex-column gap-2\">\n                @if (table()!.isLocked) {\n                  <span class=\"badge bg-warning\">\n                    <i class=\"bi bi-lock me-1\"></i>Locked\n                  </span>\n                }\n                @if (table()!.isPublished) {\n                  <span class=\"badge bg-success\">\n                    <i class=\"bi bi-cloud-check me-1\"></i>Published\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Sample Pool Table -->\n      @if (viewMode() === 'table' && hasPools()) {\n        <div class=\"card mb-4\">\n          <div class=\"card-header\">\n            <h5 class=\"mb-0\">\n              <i class=\"bi bi-layers me-2\"></i>Sample Pool Table\n              <span class=\"badge bg-warning ms-2\">{{ sortedPools().length }} pools</span>\n            </h5>\n          </div>\n          <div class=\"card-body p-0\">\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead class=\"table-light\">\n                  <tr>\n                    <th scope=\"col\" style=\"width: 80px;\" class=\"bg-secondary bg-opacity-10 text-secondary\">Pool</th>\n                    @for (column of sortedColumns(); track column.id) {\n                      <th scope=\"col\" [class]=\"getColumnHeaderClass(column)\" [title]=\"column.name\">\n                        <div class=\"header-cell d-flex justify-content-between align-items-center\">\n                          <span>{{ getShortColumnName(column) }}</span>\n                          @if (table()!.canEdit) {\n                            <div class=\"header-actions\">\n                              <button\n                                type=\"button\"\n                                class=\"btn btn-sm btn-outline-primary header-edit-btn me-1\"\n                                (click)=\"editColumnValue(column)\"\n                                [title]=\"'Edit default value for ' + column.name\">\n                                <i class=\"bi bi-pencil\"></i>\n                              </button>\n                            </div>\n                          }\n                        </div>\n                      </th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (poolRow of poolTableRows(); track poolRow._poolId) {\n                    <tr class=\"pool-row\" [class.editable]=\"table()!.canEdit\">\n                      <td class=\"text-muted fw-semibold\" \n                          [class.clickable]=\"table()!.canEdit\"\n                          (click)=\"table()!.canEdit ? editPool(poolRow._poolData) : null\"\n                          [title]=\"table()!.canEdit ? 'Click to edit pool: ' + poolRow._poolName : poolRow._poolName\">\n                        <i class=\"bi bi-layers me-2\"></i>{{ poolRow._poolName }}\n                        @if (table()!.canEdit) {\n                          <i class=\"bi bi-pencil-square ms-1 text-primary\" style=\"font-size: 0.8em;\"></i>\n                        }\n                      </td>\n                      @for (column of sortedColumns(); track column.id) {\n                        <td\n                          class=\"pool-cell\"\n                          [class.opacity-50]=\"column.hidden\"\n                          [attr.data-pool-id]=\"poolRow._poolId\"\n                          [attr.data-column-id]=\"column.id\"\n                          (click)=\"table()!.canEdit ? editPoolColumnValue(poolRow._poolData, column) : null\"\n                          [title]=\"table()!.canEdit ? 'Click to edit ' + column.name + ' for pool ' + poolRow._poolName : ''\">\n                          {{ poolRow['col_' + column.id] || '-' }}\n                        </td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Columns/Table Section -->\n      <div class=\"card\">\n        <div class=\"card-header\">\n          <div class=\"d-flex align-items-center justify-content-between\">\n            <h5 class=\"mb-0\">\n              @if (viewMode() === 'list') {\n                <i class=\"bi bi-list-columns me-2\"></i>Table Columns\n              } @else {\n                <i class=\"bi bi-table me-2\"></i>Table Data\n              }\n            </h5>\n            \n            <!-- Column Filter -->\n            @if (hasColumns()) {\n              <div class=\"d-flex align-items-center me-3\">\n                <div class=\"input-group input-group-sm\" style=\"width: 250px;\">\n                  <span class=\"input-group-text\">\n                    <i class=\"bi bi-funnel text-muted\"></i>\n                  </span>\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    placeholder=\"Filter columns...\"\n                    [value]=\"columnFilter()\"\n                    (input)=\"onColumnFilterChange($any($event.target).value)\">\n                  @if (columnFilter()) {\n                    <button\n                      type=\"button\"\n                      class=\"btn btn-outline-secondary\"\n                      (click)=\"clearColumnFilter()\"\n                      title=\"Clear filter\">\n                      <i class=\"bi bi-x\"></i>\n                    </button>\n                  }\n                </div>\n                @if (columnFilter()) {\n                  <small class=\"text-muted ms-2\">\n                    {{ filteredColumnCount }}/{{ totalColumnCount }}\n                  </small>\n                }\n              </div>\n            }\n            \n            <div class=\"d-flex gap-2 align-items-center\">\n              @if (viewMode() === 'list') {\n                <span class=\"badge bg-primary\">{{ sortedColumns().length }} columns</span>\n                @if (table() && table()!.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-success btn-sm\"\n                    (click)=\"openAddColumnModal()\"\n                    [disabled]=\"isLoading()\"\n                    title=\"Add new column with automatic reordering\">\n                    <i class=\"bi bi-plus-circle me-1\"></i>Add Column\n                  </button>\n                }\n                @if (table() && table()!.canEdit && sortedColumns().length === 0) {\n                  <small class=\"text-muted\">Import SDRF to add columns</small>\n                }\n              } @else {\n                <span class=\"badge bg-info\">{{ tableRows().length }} samples</span>\n                @if (hasPools()) {\n                  <span class=\"badge bg-warning\">{{ sortedPools().length }} pools</span>\n                }\n                <span class=\"badge bg-primary\">{{ sortedColumns().length }} columns</span>\n                @if (table() && table()!.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-success btn-sm\"\n                    (click)=\"openAddColumnModal()\"\n                    [disabled]=\"isLoading()\"\n                    title=\"Add new column with automatic reordering\">\n                    <i class=\"bi bi-plus-circle me-1\"></i>Add Column\n                  </button>\n                }\n              }\n            </div>\n          </div>\n        </div>\n\n        @if (hasColumns()) {\n          <!-- List Mode: Column Definitions -->\n          @if (viewMode() === 'list') {\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead>\n                  <tr>\n                    <th scope=\"col\" style=\"width: 40px;\">\n                      @if (table()!.canEdit) {\n                        <i class=\"bi bi-arrows-move text-muted\" title=\"Drag to reorder\"></i>\n                      }\n                    </th>\n                    <th scope=\"col\" style=\"width: 60px;\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('position')\"\n                        [class.sorted]=\"isSorted('position')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>#</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('position')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('name')\"\n                        [class.sorted]=\"isSorted('name')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Column Name</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('name')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('type')\"\n                        [class.sorted]=\"isSorted('type')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Type</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('type')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('value')\"\n                        [class.sorted]=\"isSorted('value')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Value</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('value')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\">Properties</th>\n                    <th scope=\"col\" style=\"width: 100px;\">Actions</th>\n                  </tr>\n                </thead>\n                <tbody cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" [cdkDropListData]=\"dragColumnsForList()\">\n                  @for (column of dragColumnsForList(); track column.id) {\n                    <tr cdkDrag [cdkDragData]=\"column\" [cdkDragDisabled]=\"!table()!.canEdit\">\n                      <td class=\"text-center\">\n                        @if (table()!.canEdit) {\n                          <i class=\"bi bi-grip-vertical drag-handle\" cdkDragHandle></i>\n                        }\n                      </td>\n                      <td class=\"text-muted fw-semibold\">\n                        {{ (column.columnPosition || 0) + 1 }}\n                      </td>\n                      <td>\n                        <div class=\"d-flex align-items-center\">\n                          <i class=\"me-2\" [class]=\"getColumnTypeIcon(column) + ' ' + getColumnTypeClass(column)\"></i>\n                          <span class=\"fw-semibold\">{{ column.name }}</span>\n                        </div>\n                      </td>\n                      <td>\n                        <span class=\"badge bg-light text-dark\">{{ column.type }}</span>\n                      </td>\n                      <td>\n                        <div>\n                          <!-- Default Value -->\n                          <div class=\"fw-semibold\">{{ getColumnValueDisplay(column) }}</div>\n\n                          <!-- Sample-specific Modifiers -->\n                          @if (hasModifiers(column)) {\n                            <div class=\"mt-1\">\n                              @for (modifierDisplay of getModifiersDisplay(column); track $index) {\n                                <small class=\"badge bg-light text-dark me-1 mb-1 d-inline-block\"\n                                       style=\"font-size: 0.7rem;\"\n                                       [title]=\"modifierDisplay\">\n                                  {{ modifierDisplay }}\n                                </small>\n                              }\n                            </div>\n                          }\n                        </div>\n                      </td>\n                      <td>\n                        <div class=\"d-flex gap-1 flex-wrap\">\n                          @if (column.mandatory) {\n                            <span class=\"badge bg-danger\" title=\"Required field\">Required</span>\n                          }\n                          @if (column.readonly) {\n                            <span class=\"badge bg-secondary\" title=\"Read-only field\">Read-only</span>\n                          }\n                          @if (column.hidden) {\n                            <span class=\"badge bg-warning\" title=\"Hidden field\">Hidden</span>\n                          }\n                          @if (column.autoGenerated) {\n                            <span class=\"badge bg-info\" title=\"Auto-generated field\">Auto</span>\n                          }\n                          @if (column.ontologyType) {\n                            <span class=\"badge bg-success\" title=\"Ontology: {{ column.ontologyType }}\">\n                              {{ column.ontologyType }}\n                            </span>\n                          }\n                        </div>\n                      </td>\n                      <td>\n                        <div class=\"btn-group btn-group-sm\">\n                          <button type=\"button\" class=\"btn btn-outline-primary\"\n                                  (click)=\"viewColumnDetails(column)\"\n                                  title=\"View column details\">\n                            <i class=\"bi bi-eye\"></i>\n                          </button>\n                          @if (table()!.canEdit) {\n                            <button type=\"button\" \n                                    class=\"btn\"\n                                    [class]=\"column.hidden ? 'btn-outline-warning' : 'btn-outline-success'\"\n                                    (click)=\"toggleColumnHidden(column)\"\n                                    [title]=\"column.hidden ? 'Show column' : 'Hide column'\">\n                              <i class=\"bi\" [class]=\"column.hidden ? 'bi-eye-slash' : 'bi-eye'\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-success\"\n                                    (click)=\"editColumnValue(column)\"\n                                    title=\"Edit default value\">\n                              <i class=\"bi bi-pencil-square\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-secondary\"\n                                    (click)=\"editColumnSettings(column)\"\n                                    title=\"Edit column settings\">\n                              <i class=\"bi bi-gear\"></i>\n                            </button>\n                          }\n                        </div>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n\n          <!-- Table Data -->\n          @if (viewMode() === 'table') {\n            <div class=\"card-body p-0\">\n              <div class=\"table-responsive\">\n                <table class=\"table table-hover mb-0\">\n                  <thead class=\"table-light\">\n                    <tr>\n                      <th scope=\"col\" style=\"width: 80px;\" class=\"bg-secondary bg-opacity-10 text-secondary\">#</th>\n                      @for (column of sortedColumns(); track column.id) {\n                        <th scope=\"col\" [class]=\"getColumnHeaderClass(column)\" [title]=\"column.name\">\n                          <div class=\"header-cell d-flex justify-content-between align-items-center\">\n                            <span>{{ getShortColumnName(column) }}</span>\n                            @if (table()!.canEdit) {\n                              <div class=\"header-actions\">\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm header-edit-btn me-1\"\n                                  [class]=\"column.hidden ? 'btn-outline-warning' : 'btn-outline-success'\"\n                                  (click)=\"toggleColumnHidden(column)\"\n                                  [title]=\"column.hidden ? 'Show column' : 'Hide column'\">\n                                  <i class=\"bi\" [class]=\"column.hidden ? 'bi-eye-slash' : 'bi-eye'\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-primary header-edit-btn me-1\"\n                                  (click)=\"editColumnValue(column)\"\n                                  [title]=\"'Edit default value for ' + column.name\">\n                                  <i class=\"bi bi-pencil\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-danger header-edit-btn\"\n                                  (click)=\"removeColumn(column)\"\n                                  [title]=\"'Remove ' + column.name + ' column'\">\n                                  <i class=\"bi bi-trash\"></i>\n                                </button>\n                              </div>\n                            }\n                          </div>\n                        </th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (row of paginatedRows(); track row._sampleIndex) {\n                      <tr class=\"sample-row\" [class.editable]=\"table()!.canEdit\">\n                        <td class=\"text-muted fw-semibold\">{{ row._sampleIndex }}</td>\n                        @for (column of sortedColumns(); track column.id) {\n                          <td\n                            class=\"sample-cell\"\n                            [class.opacity-50]=\"column.hidden\"\n                            [attr.data-sample-index]=\"row._sampleIndex\"\n                            [attr.data-column-id]=\"column.id\"\n                            (click)=\"table()!.canEdit ? editSampleColumnValue(column, row._sampleIndex) : null\"\n                            [title]=\"table()!.canEdit ? 'Click to edit ' + column.name + ' for sample ' + row._sampleIndex : ''\">\n                            {{ row['col_' + column.id] || '-' }}\n                          </td>\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n\n              <!-- Table Mode Pagination -->\n              @if (viewMode() === 'table' && totalPages() > 1) {\n                <div class=\"d-flex justify-content-between align-items-center p-3 border-top\">\n                  <div class=\"d-flex align-items-center gap-2\">\n                    <span class=\"text-muted\">Rows per page:</span>\n                    <select class=\"form-select form-select-sm\" style=\"width: auto;\"\n                            [value]=\"pageSize()\"\n                            (change)=\"onPageSizeChange(+($any($event.target).value))\">\n                      <option value=\"10\">10</option>\n                      <option value=\"25\">25</option>\n                      <option value=\"50\">50</option>\n                      <option value=\"100\">100</option>\n                    </select>\n                  </div>\n                  <ngb-pagination\n                    [collectionSize]=\"tableRows().length\"\n                    [page]=\"currentPage()\"\n                    [pageSize]=\"pageSize()\"\n                    [maxSize]=\"5\"\n                    [boundaryLinks]=\"true\"\n                    [rotate]=\"true\"\n                    (pageChange)=\"onPageChange($event)\"\n                    class=\"pagination-sm mb-0\">\n                  </ngb-pagination>\n                  <span class=\"text-muted\">\n                    Showing {{ (currentPage() - 1) * pageSize() + 1 }}-{{ Math.min(currentPage() * pageSize(), tableRows().length) }}\n                    of {{ tableRows().length }} samples\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"card-body text-center py-5\">\n            <div class=\"text-muted\">\n              <i class=\"bi bi-inbox display-1 mb-3\"></i>\n              <h5>No Columns Found</h5>\n              <p>This table doesn't have any columns defined yet.</p>\n              @if (table()!.canEdit) {\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"openAddColumnModal()\">\n                  <i class=\"bi bi-plus me-1\"></i>Add First Column\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.header-cell{position:relative}.header-cell .header-actions{opacity:0;transition:opacity .15s ease}thead th:hover .header-actions{opacity:1}.header-edit-btn{--bs-btn-padding-y: .125rem;--bs-btn-padding-x: .25rem;--bs-btn-font-size: .65rem;border:none!important}.header-edit-btn.btn-outline-primary:hover{background-color:var(--bs-primary);border-color:var(--bs-primary)}.header-edit-btn.btn-outline-danger:hover{background-color:var(--bs-danger);border-color:var(--bs-danger)}.sample-row.editable .sample-cell{cursor:pointer;transition:background-color .1s ease}.sample-row.editable .sample-cell:hover{background-color:#28a74514;position:relative}.sample-row.editable .sample-cell:hover:after{content:\"\\270e\";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#28a74599;font-size:.75em;pointer-events:none}.pool-row.editable td.clickable{cursor:pointer;transition:background-color .1s ease}.pool-row.editable td.clickable:hover{background-color:#0dcaf01a;color:var(--bs-info)}.pool-row.editable td.clickable:hover .bi-pencil-square{opacity:.8}.pool-row.editable td.clickable .bi-pencil-square{opacity:.4;transition:opacity .1s ease}.pool-row.editable .pool-cell{cursor:pointer;transition:background-color .1s ease}.pool-row.editable .pool-cell:hover{background-color:#ffc10726;position:relative}.pool-row.editable .pool-cell:hover:after{content:\"\\270e\";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#ffc107cc;font-size:.75em;pointer-events:none}@media (max-width: 768px){.sample-row.editable .sample-cell,.pool-row.editable .pool-cell{transition:none}}.sortable{cursor:pointer;user-select:none;transition:background-color .2s ease}.sortable:hover{background-color:rgba(var(--bs-primary-rgb),.1)}.sortable.sorted{background-color:rgba(var(--bs-primary-rgb),.15)}.sortable.sorted .bi{color:var(--bs-primary)}.sortable .bi{opacity:.5;transition:all .2s ease;font-size:.75em}.sortable:hover .bi{opacity:.8}.drag-handle{cursor:grab;opacity:.6;transition:opacity .2s ease}.drag-handle:hover{opacity:1}.drag-handle:active{cursor:grabbing}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:var(--bs-light);border:1px solid var(--bs-border-color)}.cdk-drag-preview .header-cell{padding:.5rem;font-size:.875rem;font-weight:500}.cdk-drag-placeholder{opacity:.5;background:rgba(var(--bs-primary-rgb),.1)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging th:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: MetadataTableService }, { type: AsyncExportService }, { type: ChunkedUploadService }, { type: SamplePoolService }, { type: MetadataColumnService }, { type: i3.ToastService }, { type: AsyncTaskUIService }, { type: i2.NgbModal }], propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }], excelInput: [{
+                type: ViewChild,
+                args: ['excelInput']
+            }] } });
+
 class CupcakeVanilla {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CupcakeVanilla, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: CupcakeVanilla, isStandalone: true, selector: "ccv-cupcake-vanilla", ngImport: i0, template: `
@@ -7430,5 +9161,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AdminWebSocketService, AsyncExportService, AsyncImportService, AsyncTaskService, AsyncTaskUIService, AsyncValidationService, COLUMN_TYPE_CONFIGS, ChunkedImportService, ChunkedUploadService, ColumnEditModal, ColumnTemplateEditModal, ColumnTemplates, ColumnType, CupcakeVanilla, ElectronService, ExcelExportModalComponent, FavoriteManagement, FavouriteMetadataOptionService, MSTermType, 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, MetadataTableDetails, MetadataTableEditModal, MetadataTableService, MetadataTableTemplateEditModal, MetadataTableTemplateService, MetadataTableTemplates, MetadataValidationModal, MetadataValueEditModal, NotificationService, NotificationType, OFFICIAL_SDRF_COLUMNS, ONTOLOGY_TYPE_CONFIGS, OntologySearchService, OntologyType, OntologyTypeLabels, OntologyUtils, SDRFDefaultsService, SamplePoolCreateModal, SamplePoolDetailsModal, SamplePoolEditModal, SamplePoolService, SchemaSelectionModal, SchemaService, SdrfAgeInput, SdrfCleavageInput, SdrfColumnCategory, SdrfModificationInput, SdrfSpikedCompoundInput, SdrfSyntaxService, SearchReplaceModal, 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