@noatgnu/cupcake-vanilla 1.1.0 → 1.2.0

package/fesm2022/noatgnu-cupcake-vanilla.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, signal, computed, EventEmitter, inject, Output, Input, Component, effect } from '@angular/core';
-import * as i3 from '@cupcake/core';
-import { BaseApiService, WebSocketService, NotificationService as NotificationService$1, LabGroupService, ToastService, ResourceVisibility } from '@cupcake/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 } from 'rxjs';
 import jsSHA from 'jssha';
@@ -11,8 +11,6 @@ import * as i1 from '@angular/forms';
 import { FormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTypeahead, NgbModule, NgbNavModule, NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import * as i4 from '@cupcake/vanilla';
-import { SdrfSyntaxService as SdrfSyntaxService$1, OntologyType as OntologyType$1, SdrfAgeInput as SdrfAgeInput$1, SdrfModificationInput as SdrfModificationInput$1, SdrfCleavageInput as SdrfCleavageInput$1, SdrfSpikedCompoundInput as SdrfSpikedCompoundInput$1, COLUMN_TYPE_CONFIGS as COLUMN_TYPE_CONFIGS$1, ONTOLOGY_TYPE_CONFIGS as ONTOLOGY_TYPE_CONFIGS$1, OFFICIAL_SDRF_COLUMNS as OFFICIAL_SDRF_COLUMNS$1, ColumnType as ColumnType$1, MetadataValueEditModal as MetadataValueEditModal$1 } from '@cupcake/vanilla';
 import * as i5$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 
@@ -3224,7 +3222,7 @@ class MetadataValueEditModal {
     currentUser = signal(null, ...(ngDevMode ? [{ debugName: "currentUser" }] : []));
     userLabGroups = signal([], ...(ngDevMode ? [{ debugName: "userLabGroups" }] : []));
     activeFavoritesTab = 'user';
-    sdrfSyntaxService = inject(SdrfSyntaxService$1);
+    sdrfSyntaxService = inject(SdrfSyntaxService);
     specialSyntaxType = signal(null, ...(ngDevMode ? [{ debugName: "specialSyntaxType" }] : []));
     showSpecialInput = signal(false, ...(ngDevMode ? [{ debugName: "showSpecialInput" }] : []));
     specialInputValue = signal('', ...(ngDevMode ? [{ debugName: "specialInputValue" }] : []));
@@ -3332,7 +3330,7 @@ class MetadataValueEditModal {
         return suggestion.displayName || suggestion.value;
     };
     inputFormatter = (suggestion) => {
-        if (suggestion && suggestion.ontologyType === OntologyType$1.MS_UNIQUE_VOCABULARIES && suggestion.fullData && suggestion.fullData.name) {
+        if (suggestion && suggestion.ontologyType === OntologyType.MS_UNIQUE_VOCABULARIES && suggestion.fullData && suggestion.fullData.name) {
             if (suggestion.fullData.accession) {
                 return `NT=${suggestion.fullData.name};AC=${suggestion.fullData.accession}`;
             }
@@ -3624,7 +3622,7 @@ class MetadataValueEditModal {
             let value;
             if (typeof rawValue === 'object' && rawValue !== null) {
                 // For MS Unique Vocabularies, use SDRF formatting
-                if (rawValue.ontologyType === OntologyType$1.MS_UNIQUE_VOCABULARIES && rawValue.fullData && rawValue.fullData.name) {
+                if (rawValue.ontologyType === OntologyType.MS_UNIQUE_VOCABULARIES && rawValue.fullData && rawValue.fullData.name) {
                     if (rawValue.fullData.accession) {
                         value = `NT=${rawValue.fullData.name};AC=${rawValue.fullData.accession}`;
                     }
@@ -3650,8 +3648,8 @@ class MetadataValueEditModal {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MetadataValueEditModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }, { token: i3.AuthService }, { token: i4.FavouriteMetadataOptionService }, { token: i4.MetadataColumnService }, { token: i4.MetadataColumnTemplateService }, { token: i3.LabGroupService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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$1, selector: "ccv-sdrf-age-input", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: SdrfModificationInput$1, selector: "ccv-sdrf-modification-input", inputs: ["value", "templateId", "columnId"], outputs: ["valueChange"] }, { kind: "component", type: SdrfCleavageInput$1, selector: "ccv-sdrf-cleavage-input", inputs: ["value", "templateId", "columnId"], outputs: ["valueChange"] }, { kind: "component", type: SdrfSpikedCompoundInput$1, selector: "ccv-sdrf-spiked-compound-input", inputs: ["value"], outputs: ["valueChange"] }, { kind: "pipe", type: i5.SlicePipe, name: "slice" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MetadataValueEditModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }, { token: i3.AuthService }, { token: FavouriteMetadataOptionService }, { token: MetadataColumnService }, { token: MetadataColumnTemplateService }, { token: i3.LabGroupService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: MetadataValueEditModal, isStandalone: true, selector: "ccv-metadata-value-edit-modal", inputs: { config: "config" }, outputs: { valueSaved: "valueSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-pencil-square me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <div class=\"row\">\n    <!-- Main Content -->\n    <div [class]=\"hasMultiSampleEdit ? 'col-md-8' : 'col-12'\">\n      <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Column Information -->\n    <div class=\"mb-3\">\n      <div class=\"row\">\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">Column Name:</small>\n          <div class=\"fw-semibold\">{{ config.columnName }}</div>\n        </div>\n        <div class=\"col-md-6\">\n          <small class=\"text-muted\">Column Type:</small>\n          <div><span class=\"badge bg-light text-dark\">{{ config.columnType }}</span></div>\n        </div>\n      </div>\n      @if (hasOntologyType) {\n        <div class=\"mt-2\">\n          <small class=\"text-muted\">Ontology Type:</small>\n          <div><span class=\"badge bg-info\">{{ ontologyTypeLabel }}</span></div>\n        </div>\n      }\n    </div>\n\n    <hr class=\"mb-4\">\n\n    <!-- Favorite Options Section -->\n    @if (hasFavorites && !isLoadingFavorites()) {\n      <div class=\"mb-4\">\n        <h6 class=\"text-muted mb-3\">\n          <i class=\"bi bi-heart-fill me-2 text-danger\"></i>Recommended Values\n        </h6>\n\n        <!-- Favorites Navigation Tabs -->\n        <ul ngbNav #favoritesNav=\"ngbNav\" [(activeId)]=\"activeFavoritesTab\" class=\"nav-tabs\">\n          @if (userFavorites().length > 0) {\n            <li [ngbNavItem]=\"'user'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-person-fill me-1\"></i>Your Favorites\n                <span class=\"badge bg-primary ms-1\">{{ userFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, userFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of userFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Your personal favorite values for this column\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n\n          @if (labGroupFavorites().length > 0) {\n            <li [ngbNavItem]=\"'lab_group'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-people-fill me-1\"></i>Lab Group\n                <span class=\"badge bg-info ms-1\">{{ labGroupFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, labGroupFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of labGroupFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Favorite values shared by your lab group\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n\n          @if (globalFavorites().length > 0) {\n            <li [ngbNavItem]=\"'global'\">\n              <button ngbNavLink>\n                <i class=\"bi bi-globe me-1\"></i>Global\n                <span class=\"badge bg-success ms-1\">{{ globalFavorites().length }}</span>\n              </button>\n              <ng-template ngbNavContent>\n                <div class=\"mt-3\">\n                  <select \n                    class=\"form-select\" \n                    size=\"5\" \n                    (change)=\"onFavoriteSelected($event, globalFavorites())\">\n                    <option value=\"\">Select a favorite value...</option>\n                    @for (favorite of globalFavorites(); track favorite.id) {\n                      <option [value]=\"favorite.id\">\n                        {{ getFavoriteDisplayValue(favorite) }}\n                        @if (hasCustomDisplayValue(favorite)) { (Custom Display) }\n                      </option>\n                    }\n                  </select>\n                  <div class=\"form-text\">\n                    <i class=\"bi bi-info-circle me-1\"></i>Globally recommended values for this column\n                  </div>\n                </div>\n              </ng-template>\n            </li>\n          }\n        </ul>\n\n        <div [ngbNavOutlet]=\"favoritesNav\" class=\"mt-3\"></div>\n\n        <hr class=\"my-3\">\n      </div>\n    }\n\n    @if (isLoadingFavorites()) {\n      <div class=\"text-center mb-4\">\n        <div class=\"spinner-border spinner-border-sm text-primary me-2\"></div>\n        <small class=\"text-muted\">Loading favorite options...</small>\n      </div>\n      <hr class=\"my-3\">\n    }\n\n    <!-- Value Input Section -->\n    <div class=\"mb-3\">\n      <div class=\"d-flex justify-content-between align-items-center mb-2\">\n        <label for=\"metadataValue\" class=\"form-label mb-0\">\n          Metadata Value\n          @if (hasOntologyType) {\n            <span class=\"badge bg-success ms-2\">\n              <i class=\"bi bi-search me-1\"></i>Autocomplete Available\n            </span>\n          }\n          @if (specialSyntaxType()) {\n            <span class=\"badge bg-info ms-2\">\n              <i class=\"bi bi-gear me-1\"></i>{{ getSpecialInputTitle() }}\n            </span>\n          }\n        </label>\n\n        @if (specialSyntaxType()) {\n          <div class=\"form-check form-switch\">\n            <input\n              class=\"form-check-input\"\n              type=\"checkbox\"\n              id=\"specialInputToggle\"\n              [checked]=\"showSpecialInput()\"\n              (change)=\"toggleSpecialInput()\">\n            <label class=\"form-check-label small text-muted\" for=\"specialInputToggle\">\n              Enhanced Editor\n            </label>\n          </div>\n        }\n      </div>\n\n      <!-- Special SDRF Syntax Input Components -->\n      @if (showSpecialInput() && specialSyntaxType()) {\n        <div class=\"border rounded p-3 mb-3 bg-body-secondary\">\n          <div class=\"mb-2\">\n            <small class=\"text-muted fw-semibold\">\n              <i class=\"bi bi-gear me-1\"></i>{{ getSpecialInputTitle() }}\n            </small>\n          </div>\n\n          @switch (specialSyntaxType()) {\n            @case ('age') {\n              <ccv-sdrf-age-input\n                [value]=\"specialInputValue()\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-age-input>\n            }\n            @case ('modification') {\n              <ccv-sdrf-modification-input\n                [value]=\"specialInputValue()\"\n                [columnId]=\"config.columnId ?? null\"\n                [templateId]=\"config.templateId ?? null\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-modification-input>\n            }\n            @case ('cleavage') {\n              <ccv-sdrf-cleavage-input\n                [value]=\"specialInputValue()\"\n                [columnId]=\"config.columnId ?? null\"\n                [templateId]=\"config.templateId ?? null\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-cleavage-input>\n            }\n            @case ('spiked_compound') {\n              <ccv-sdrf-spiked-compound-input\n                [value]=\"specialInputValue()\"\n                (valueChange)=\"onSpecialInputChange($event)\">\n              </ccv-sdrf-spiked-compound-input>\n            }\n          }\n\n          <div class=\"form-text mt-2\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Use the enhanced editor for structured input, or toggle off for manual text entry.\n          </div>\n        </div>\n      }\n\n      @if (hasOntologyType && !showSpecialInput()) {\n        <!-- Search type selection for ontology -->\n        <div class=\"mb-2\">\n          <small class=\"text-muted d-block mb-1\">Search Mode:</small>\n          <div class=\"btn-group btn-group-sm\" role=\"group\">\n            <button\n              type=\"button\"\n              class=\"btn\"\n              [class]=\"searchType() === 'icontains' ? 'btn-primary' : 'btn-outline-primary'\"\n              (click)=\"onSearchTypeChange('icontains')\">\n              <i class=\"bi bi-search me-1\"></i>Contains\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn\"\n              [class]=\"searchType() === 'istartswith' ? 'btn-primary' : 'btn-outline-primary'\"\n              (click)=\"onSearchTypeChange('istartswith')\">\n              <i class=\"bi bi-arrow-right me-1\"></i>Starts with\n            </button>\n          </div>\n        </div>\n\n        <!-- Typeahead input for ontology suggestions -->\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            [class.border-success]=\"selectedFavorite() !== null\"\n            id=\"metadataValue\"\n            formControlName=\"value\"\n            placeholder=\"Type to search ontology suggestions...\"\n            [ngbTypeahead]=\"searchOntology\"\n            [resultFormatter]=\"formatSuggestion\"\n            [inputFormatter]=\"inputFormatter\"\n            (selectItem)=\"onSuggestionSelected($event)\"\n            [editable]=\"true\"\n            [showHint]=\"true\"\n            [focusFirst]=\"false\"\n            container=\"body\">\n          @if (isLoadingSuggestions()) {\n            <span class=\"input-group-text\">\n              <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n              </div>\n            </span>\n          } @else {\n            <span class=\"input-group-text\">\n              <i class=\"bi bi-search text-muted\"></i>\n            </span>\n          }\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary\"\n            (click)=\"clearValue()\"\n            title=\"Clear value\">\n            <i class=\"bi bi-x\"></i>\n          </button>\n        </div>\n        <div class=\"form-text\">\n          <i class=\"bi bi-info-circle me-1\"></i>\n          Search {{ searchType() === 'icontains' ? 'contains' : 'starts with' }} for {{ ontologyTypeLabel }} ontology\n        </div>\n      } @else if (!showSpecialInput()) {\n        <!-- Regular input when no ontology type or special input is disabled -->\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            [class.border-success]=\"selectedFavorite() !== null\"\n            id=\"metadataValue\"\n            formControlName=\"value\"\n            placeholder=\"Enter metadata value\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary\"\n            (click)=\"clearValue()\"\n            title=\"Clear value\">\n            <i class=\"bi bi-x\"></i>\n          </button>\n        </div>\n        <div class=\"form-text text-muted\">\n          @if (specialSyntaxType()) {\n            Manual text entry mode. Use the Enhanced Editor toggle for structured {{ specialSyntaxType() }} input.\n          } @else {\n            Enter the value manually (no ontology suggestions available for this column type)\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Character count and value info -->\n    <div class=\"mb-3\">\n      <div class=\"d-flex justify-content-between align-items-center\">\n        <small class=\"text-muted\">\n          Characters: {{ editForm.get('value')?.value?.length || 0 }}/500\n        </small>\n        @if (getSelectedFavoriteInfo()) {\n          <small class=\"text-info\">\n            <i class=\"bi bi-info-circle me-1\"></i>{{ getSelectedFavoriteInfo() }}\n          </small>\n        }\n      </div>\n    </div>\n\n      </form>\n    </div>\n\n    <!-- Sample Selection Panel -->\n    @if (hasMultiSampleEdit) {\n      <div class=\"col-md-4\">\n        <div class=\"border-start ps-3\">\n          <div class=\"d-flex justify-content-between align-items-center mb-3\">\n            <h6 class=\"mb-0 text-muted\">\n              <i class=\"bi bi-list-check me-1\"></i>Apply to Samples\n            </h6>\n            <span class=\"badge bg-primary\">\n              {{ selectedSampleCount }}/{{ totalSampleCount }}\n            </span>\n          </div>\n\n          <!-- Select All/Clear All Controls -->\n          <div class=\"d-flex gap-1 mb-3\">\n            <button \n              type=\"button\" \n              class=\"btn btn-outline-primary btn-sm flex-fill\"\n              (click)=\"selectAllSamples()\"\n              [disabled]=\"selectedSampleCount === totalSampleCount\">\n              <i class=\"bi bi-check-all me-1\"></i>All\n            </button>\n            <button \n              type=\"button\" \n              class=\"btn btn-outline-secondary btn-sm flex-fill\"\n              (click)=\"clearSampleSelection()\"\n              [disabled]=\"selectedSampleCount === 0\">\n              <i class=\"bi bi-x me-1\"></i>Clear\n            </button>\n          </div>\n\n          <!-- Sample List -->\n          <div class=\"sample-list\" style=\"max-height: 400px; overflow-y: auto;\">\n            @for (sample of sampleData; track sample.index) {\n              <div class=\"form-check d-flex align-items-center mb-2 p-2 rounded border-bottom\">\n                <input \n                  class=\"form-check-input me-2\" \n                  type=\"checkbox\" \n                  [id]=\"'sample-' + sample.index\"\n                  [checked]=\"isSampleSelected(sample.index)\"\n                  (change)=\"toggleSampleSelection(sample.index)\">\n                <label \n                  [for]=\"'sample-' + sample.index\" \n                  class=\"form-check-label flex-grow-1 cursor-pointer\">\n                  <div class=\"d-flex justify-content-between align-items-center\">\n                    <div>\n                      <div class=\"fw-semibold\">Sample {{ sample.index }}</div>\n                      @if (sample.sourceName) {\n                        <small class=\"text-muted\">{{ sample.sourceName }}</small>\n                      }\n                    </div>\n                    <div class=\"text-end\">\n                      <small class=\"text-muted\">Current:</small>\n                      <div class=\"small fw-mono\" [title]=\"sample.value || ''\">\n                        {{ (sample.value && sample.value.length > 15) ? (sample.value | slice:0:15) + '...' : (sample.value || '-') }}\n                      </div>\n                    </div>\n                  </div>\n                </label>\n              </div>\n            }\n          </div>\n\n          @if (selectedSampleCount > 0) {\n            <div class=\"alert alert-info mt-3 p-2\">\n              <small>\n                <i class=\"bi bi-info-circle me-1\"></i>\n                The value will be applied to {{ selectedSampleCount }} selected sample{{ selectedSampleCount !== 1 ? 's' : '' }}.\n              </small>\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n<div class=\"modal-footer\">\n  <div class=\"me-auto\">\n    @if (editForm.get('value')?.value && !isLoading() && !isFromFavoriteManagement) {\n      <div class=\"btn-group dropup\" ngbDropdown>\n        <button\n          type=\"button\"\n          class=\"btn btn-outline-warning btn-sm dropdown-toggle\"\n          ngbDropdownToggle>\n          <i class=\"bi bi-heart me-1\"></i>Add to Favorites\n        </button>\n        <div class=\"dropdown-menu\" ngbDropdownMenu>\n          <button\n            type=\"button\"\n            class=\"dropdown-item\"\n            (click)=\"addToFavorites('user')\">\n            <i class=\"bi bi-person me-2\"></i>Personal Favorite\n          </button>\n          <button\n            type=\"button\"\n            class=\"dropdown-item\"\n            (click)=\"addToFavorites('lab_group')\">\n            <i class=\"bi bi-people me-2\"></i>Lab Group Favorite\n          </button>\n          <button\n            type=\"button\"\n            class=\"dropdown-item\"\n            (click)=\"addToFavorites('global')\">\n            <i class=\"bi bi-globe me-2\"></i>Global Recommendation\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"d-flex gap-2\">\n    <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n      <i class=\"bi bi-x-circle me-1\"></i>Cancel\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      (click)=\"onSubmit()\"\n      [disabled]=\"editForm.invalid || isLoading()\">\n      @if (isLoading()) {\n        <span class=\"spinner-border spinner-border-sm me-2\"></span>\n      }\n      <i class=\"bi bi-check-circle me-1\"></i>\n      Save Value\n    </button>\n  </div>\n</div>\n", styles: [".sample-list .form-check{border:1px solid transparent;transition:all .2s ease}.sample-list .form-check:hover{background-color:rgba(var(--bs-primary-rgb),.05);border-color:rgba(var(--bs-primary-rgb),.2)}.sample-list .form-check .form-check-input:checked~.form-check-label .fw-semibold{color:var(--bs-primary)}.cursor-pointer{cursor:pointer}.fw-mono{font-family:var(--bs-font-monospace)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2.NgbNavLinkButton, selector: "button[ngbNavLink]" }, { kind: "directive", type: i2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "directive", type: i2.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "ngmodule", type: NgbNavModule }, { kind: "component", type: SdrfAgeInput, selector: "ccv-sdrf-age-input", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: SdrfModificationInput, selector: "ccv-sdrf-modification-input", inputs: ["value", "templateId", "columnId"], outputs: ["valueChange"] }, { kind: "component", type: SdrfCleavageInput, selector: "ccv-sdrf-cleavage-input", inputs: ["value", "templateId", "columnId"], outputs: ["valueChange"] }, { kind: "component", type: SdrfSpikedCompoundInput, selector: "ccv-sdrf-spiked-compound-input", inputs: ["value"], outputs: ["valueChange"] }, { kind: "pipe", type: i5.SlicePipe, name: "slice" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MetadataValueEditModal, decorators: [{
             type: Component,
@@ -3660,12 +3658,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         ReactiveFormsModule,
                         NgbModule,
                         NgbNavModule,
-                        SdrfAgeInput$1,
-                        SdrfModificationInput$1,
-                        SdrfCleavageInput$1,
-                        SdrfSpikedCompoundInput$1
+                        SdrfAgeInput,
+                        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"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }, { type: i3.AuthService }, { type: i4.FavouriteMetadataOptionService }, { type: i4.MetadataColumnService }, { type: i4.MetadataColumnTemplateService }, { type: i3.LabGroupService }], propDecorators: { config: [{
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }, { type: i3.AuthService }, { type: FavouriteMetadataOptionService }, { type: MetadataColumnService }, { type: MetadataColumnTemplateService }, { type: i3.LabGroupService }], propDecorators: { config: [{
                 type: Input
             }], valueSaved: [{
                 type: Output
@@ -4492,13 +4490,13 @@ Do you want to continue?`;
         };
         return displayNames[fieldName] || fieldName;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MetadataTableEditModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }, { token: i2.NgbModal }, { token: i4.MetadataTableService }, { token: i3.LabGroupService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MetadataTableEditModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }, { token: i2.NgbModal }, { token: MetadataTableService }, { token: i3.LabGroupService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: MetadataTableEditModal, isStandalone: true, selector: "ccv-metadata-table-edit-modal", inputs: { table: "table", isCreateMode: "isCreateMode" }, outputs: { tableSaved: "tableSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-table 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    <!-- Table Name -->\n    <div class=\"mb-3\">\n      <label for=\"tableName\" class=\"form-label\">\n        Table Name *\n      </label>\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        id=\"tableName\"\n        formControlName=\"name\"\n        [class.is-invalid]=\"isFieldInvalid('name')\"\n        placeholder=\"Enter table name\"\n        maxlength=\"255\">\n      @if (isFieldInvalid('name')) {\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('name') }}\n        </div>\n      }\n    </div>\n\n    <!-- Description -->\n    <div class=\"mb-3\">\n      <label for=\"tableDescription\" class=\"form-label\">\n        Description\n      </label>\n      <textarea\n        class=\"form-control\"\n        id=\"tableDescription\"\n        formControlName=\"description\"\n        rows=\"3\"\n        placeholder=\"Optional description of the metadata table\"></textarea>\n      <div class=\"form-text\">\n        Provide a brief description of what this metadata table contains or its purpose.\n      </div>\n    </div>\n\n    <!-- Sample Count and Version Row -->\n    <div class=\"row\">\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"sampleCount\" class=\"form-label\">\n          Sample Count *\n        </label>\n        <input\n          type=\"number\"\n          class=\"form-control\"\n          id=\"sampleCount\"\n          formControlName=\"sampleCount\"\n          [class.is-invalid]=\"isFieldInvalid('sampleCount')\"\n          placeholder=\"Number of samples\"\n          min=\"1\"\n          max=\"10000\">\n        @if (isFieldInvalid('sampleCount')) {\n          <div class=\"invalid-feedback\">\n            {{ getFieldError('sampleCount') }}\n          </div>\n        }\n        <div class=\"form-text\">\n          Number of samples in this metadata table (1-10,000).\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"version\" class=\"form-label\">\n          Version\n        </label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"version\"\n          formControlName=\"version\"\n          [class.is-invalid]=\"isFieldInvalid('version')\"\n          placeholder=\"e.g., 1.0, v2.1\"\n          maxlength=\"50\">\n        @if (isFieldInvalid('version')) {\n          <div class=\"invalid-feedback\">\n            {{ getFieldError('version') }}\n          </div>\n        }\n        <div class=\"form-text\">\n          Version identifier for this table.\n        </div>\n      </div>\n    </div>\n\n    <!-- Lab Group Assignment -->\n    <div class=\"mb-3\">\n      <label for=\"labGroup\" class=\"form-label\">\n        Lab Group Assignment\n      </label>\n      @if (isLoadingLabGroups()) {\n        <div class=\"d-flex align-items-center\">\n          <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\n            <span class=\"visually-hidden\">Loading...</span>\n          </div>\n          <span class=\"text-muted\">Loading lab groups...</span>\n        </div>\n      } @else {\n        <select\n          class=\"form-select\"\n          id=\"labGroup\"\n          formControlName=\"labGroup\">\n          <option [value]=\"null\">No lab group (Personal)</option>\n          @for (group of availableLabGroups(); track group.id) {\n            <option [value]=\"group.id\">{{ group.name }}</option>\n          }\n        </select>\n      }\n      <div class=\"form-text\">\n        Assign this table to a lab group for shared access, or leave unassigned for personal use.\n      </div>\n    </div>\n\n    <!-- Table Status Info (Read-only) -->\n    @if (table) {\n      <div class=\"mb-3\">\n        <label class=\"form-label\">Current Status</label>\n        <div class=\"d-flex 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          } @else {\n            <span class=\"badge bg-success\">\n              <i class=\"bi bi-unlock me-1\"></i>Unlocked\n            </span>\n          }\n          @if (table.isPublished) {\n            <span class=\"badge bg-info\">\n              <i class=\"bi bi-check-circle me-1\"></i>Published\n            </span>\n          } @else {\n            <span class=\"badge bg-secondary\">\n              <i class=\"bi bi-clock me-1\"></i>Draft\n            </span>\n          }\n        </div>\n        <div class=\"form-text\">\n          Lock status and publication state can be managed through advanced options.\n        </div>\n      </div>\n    }\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('name')?.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() || (!isCreateMode && !hasChanges)\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    @if (isCreateMode) {\n      <i class=\"bi bi-plus-circle me-1\"></i>\n      Create Table\n    } @else {\n      <i class=\"bi bi-check-circle me-1\"></i>\n      Save Changes\n    }\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.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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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.0", ngImport: i0, type: MetadataTableEditModal, decorators: [{
             type: Component,
             args: [{ selector: 'ccv-metadata-table-edit-modal', standalone: true, imports: [CommonModule, ReactiveFormsModule, NgbModule], template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-table 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    <!-- Table Name -->\n    <div class=\"mb-3\">\n      <label for=\"tableName\" class=\"form-label\">\n        Table Name *\n      </label>\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        id=\"tableName\"\n        formControlName=\"name\"\n        [class.is-invalid]=\"isFieldInvalid('name')\"\n        placeholder=\"Enter table name\"\n        maxlength=\"255\">\n      @if (isFieldInvalid('name')) {\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('name') }}\n        </div>\n      }\n    </div>\n\n    <!-- Description -->\n    <div class=\"mb-3\">\n      <label for=\"tableDescription\" class=\"form-label\">\n        Description\n      </label>\n      <textarea\n        class=\"form-control\"\n        id=\"tableDescription\"\n        formControlName=\"description\"\n        rows=\"3\"\n        placeholder=\"Optional description of the metadata table\"></textarea>\n      <div class=\"form-text\">\n        Provide a brief description of what this metadata table contains or its purpose.\n      </div>\n    </div>\n\n    <!-- Sample Count and Version Row -->\n    <div class=\"row\">\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"sampleCount\" class=\"form-label\">\n          Sample Count *\n        </label>\n        <input\n          type=\"number\"\n          class=\"form-control\"\n          id=\"sampleCount\"\n          formControlName=\"sampleCount\"\n          [class.is-invalid]=\"isFieldInvalid('sampleCount')\"\n          placeholder=\"Number of samples\"\n          min=\"1\"\n          max=\"10000\">\n        @if (isFieldInvalid('sampleCount')) {\n          <div class=\"invalid-feedback\">\n            {{ getFieldError('sampleCount') }}\n          </div>\n        }\n        <div class=\"form-text\">\n          Number of samples in this metadata table (1-10,000).\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"version\" class=\"form-label\">\n          Version\n        </label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          id=\"version\"\n          formControlName=\"version\"\n          [class.is-invalid]=\"isFieldInvalid('version')\"\n          placeholder=\"e.g., 1.0, v2.1\"\n          maxlength=\"50\">\n        @if (isFieldInvalid('version')) {\n          <div class=\"invalid-feedback\">\n            {{ getFieldError('version') }}\n          </div>\n        }\n        <div class=\"form-text\">\n          Version identifier for this table.\n        </div>\n      </div>\n    </div>\n\n    <!-- Lab Group Assignment -->\n    <div class=\"mb-3\">\n      <label for=\"labGroup\" class=\"form-label\">\n        Lab Group Assignment\n      </label>\n      @if (isLoadingLabGroups()) {\n        <div class=\"d-flex align-items-center\">\n          <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\n            <span class=\"visually-hidden\">Loading...</span>\n          </div>\n          <span class=\"text-muted\">Loading lab groups...</span>\n        </div>\n      } @else {\n        <select\n          class=\"form-select\"\n          id=\"labGroup\"\n          formControlName=\"labGroup\">\n          <option [value]=\"null\">No lab group (Personal)</option>\n          @for (group of availableLabGroups(); track group.id) {\n            <option [value]=\"group.id\">{{ group.name }}</option>\n          }\n        </select>\n      }\n      <div class=\"form-text\">\n        Assign this table to a lab group for shared access, or leave unassigned for personal use.\n      </div>\n    </div>\n\n    <!-- Table Status Info (Read-only) -->\n    @if (table) {\n      <div class=\"mb-3\">\n        <label class=\"form-label\">Current Status</label>\n        <div class=\"d-flex 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          } @else {\n            <span class=\"badge bg-success\">\n              <i class=\"bi bi-unlock me-1\"></i>Unlocked\n            </span>\n          }\n          @if (table.isPublished) {\n            <span class=\"badge bg-info\">\n              <i class=\"bi bi-check-circle me-1\"></i>Published\n            </span>\n          } @else {\n            <span class=\"badge bg-secondary\">\n              <i class=\"bi bi-clock me-1\"></i>Draft\n            </span>\n          }\n        </div>\n        <div class=\"form-text\">\n          Lock status and publication state can be managed through advanced options.\n        </div>\n      </div>\n    }\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('name')?.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() || (!isCreateMode && !hasChanges)\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    @if (isCreateMode) {\n      <i class=\"bi bi-plus-circle me-1\"></i>\n      Create Table\n    } @else {\n      <i class=\"bi bi-check-circle me-1\"></i>\n      Save Changes\n    }\n  </button>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }, { type: i2.NgbModal }, { type: i4.MetadataTableService }, { type: i3.LabGroupService }], propDecorators: { table: [{
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }, { type: i2.NgbModal }, { type: MetadataTableService }, { type: i3.LabGroupService }], propDecorators: { table: [{
                 type: Input
             }], isCreateMode: [{
                 type: Input
@@ -4522,8 +4520,8 @@ class ColumnEditModal {
     // Selected ontology configuration (includes custom filters)
     selectedOntologyConfig = null;
     // Available options for dropdowns from library
-    columnTypes = COLUMN_TYPE_CONFIGS$1;
-    ontologyTypes = ONTOLOGY_TYPE_CONFIGS$1;
+    columnTypes = COLUMN_TYPE_CONFIGS;
+    ontologyTypes = ONTOLOGY_TYPE_CONFIGS;
     // Template selection properties
     templateFilter = '';
     selectedTemplateId = '';
@@ -4537,7 +4535,7 @@ class ColumnEditModal {
     totalTemplatePages = 0;
     Math = Math;
     // Official SDRF column configurations from library
-    officialSdrfColumns = OFFICIAL_SDRF_COLUMNS$1;
+    officialSdrfColumns = OFFICIAL_SDRF_COLUMNS;
     // Column selection mode
     showOfficialColumns = false;
     selectedOfficialColumn = null;
@@ -4553,7 +4551,7 @@ class ColumnEditModal {
         this.sdrfSyntaxService = sdrfSyntaxService;
         this.editForm = this.fb.group({
             name: ['', [Validators.required, Validators.minLength(1)]],
-            type: [ColumnType$1.CHARACTERISTICS, Validators.required],
+            type: [ColumnType.CHARACTERISTICS, Validators.required],
             value: [''],
             ontologyType: ['0'], // Default to 'None' (index 0)
             enableTypeahead: [false],
@@ -4670,7 +4668,7 @@ class ColumnEditModal {
             templateId: this.selectedTemplate?.id || this.templateId || undefined,
             customOntologyFilters: customFilters
         };
-        const modalRef = this.modalService.open(MetadataValueEditModal$1, {
+        const modalRef = this.modalService.open(MetadataValueEditModal, {
             size: 'lg',
             backdrop: 'static'
         });
@@ -4761,7 +4759,7 @@ class ColumnEditModal {
         // Reset form to default values
         this.editForm.reset({
             name: '',
-            type: ColumnType$1.CHARACTERISTICS,
+            type: ColumnType.CHARACTERISTICS,
             value: '',
             ontologyType: '',
             enableTypeahead: false,
@@ -4959,13 +4957,13 @@ class ColumnEditModal {
         }
         return columnType;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: ColumnEditModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }, { token: i2.NgbModal }, { token: i4.MetadataColumnTemplateService }, { token: i4.SdrfSyntaxService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", 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.0", 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", 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"] }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }, { type: i2.NgbModal }, { type: i4.MetadataColumnTemplateService }, { type: i4.SdrfSyntaxService }], propDecorators: { column: [{
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }, { type: i2.NgbModal }, { type: MetadataColumnTemplateService }, { type: SdrfSyntaxService }], propDecorators: { column: [{
                 type: Input
             }], templateId: [{
                 type: Input