@noatgnu/cupcake-vanilla 1.3.18 → 1.3.20

package/fesm2022/noatgnu-cupcake-vanilla.mjs

@@ -4777,30 +4777,27 @@ class AsyncTaskUIService {
     downloadTaskResult(taskId) {
         this.libraryAsyncTaskService.getDownloadUrl(taskId).subscribe({
             next: (response) => {
-                console.log('Download task result - checking Desktop service:', {
-                    isDesktop: this.desktopService.isDesktop,
-                    runtime: this.desktopService.runtime,
-                    downloadUrl: response.downloadUrl
-                });
                 if (this.desktopService.isDesktop) {
-                    console.log('Using desktop download for:', response.downloadUrl);
                     this.desktopService.downloadFile(response.downloadUrl)
                         .then((filePath) => {
-                        console.log('Desktop download successful:', filePath);
                         this.toastService.success(`File downloaded to: ${filePath}`);
                     })
-                        .catch((error) => {
-                        console.error('Error downloading file:', error);
+                        .catch(() => {
                         this.toastService.error('Failed to download file');
                     });
                 }
                 else {
-                    console.log('Using browser fallback for:', response.downloadUrl);
-                    window.open(response.downloadUrl, '_blank');
+                    const a = document.createElement('a');
+                    a.href = response.downloadUrl;
+                    a.download = response.filename || '';
+                    a.style.display = 'none';
+                    const panel = document.body.querySelector('app-async-task-monitor') ?? document.body;
+                    panel.appendChild(a);
+                    a.click();
+                    panel.removeChild(a);
                 }
             },
-            error: (error) => {
-                console.error('Error getting download URL:', error);
+            error: () => {
                 this.toastService.error('Failed to get download URL');
             }
         });
@@ -4915,21 +4912,9 @@ class AsyncTaskUIService {
             taskType === TaskType.EXPORT_MULTIPLE_SDRF || taskType === TaskType.EXPORT_MULTIPLE_EXCEL;
     }
     handleExportTaskCompletion(task) {
-        console.log('AsyncTaskUIService: handleExportTaskCompletion called for task:', task.id, 'type:', task.taskType);
         const taskName = this.getTaskDisplayName(task.taskType);
         const tableName = task.metadataTableName ? ` for "${task.metadataTableName}"` : '';
-        if (task.taskType === TaskType.EXPORT_SDRF || task.taskType === TaskType.EXPORT_EXCEL) {
-            console.log('AsyncTaskUIService: Single export task - starting download in 1500ms');
-            setTimeout(() => {
-                console.log('AsyncTaskUIService: Calling downloadTaskResult for task:', task.id);
-                this.downloadTaskResult(task.id);
-            }, 1500);
-            this.toastService.success(`${taskName}${tableName} completed! Starting download...`, 4000);
-        }
-        else {
-            console.log('AsyncTaskUIService: Bulk export task - no auto-download');
-            this.toastService.success(`${taskName}${tableName} completed! Check your downloads.`, 6000);
-        }
+        this.toastService.success(`${taskName}${tableName} completed! Use the download button to save the file.`, 6000);
     }
     handleValidationTaskCompletion(task) {
         const taskName = this.getTaskDisplayName(task.taskType);
@@ -4967,13 +4952,7 @@ class AsyncTaskUIService {
             keyboard: false
         });
         modalRef.componentInstance.results = validationResults;
-        modalRef.result.then((result) => {
-            if (result === 'edit') {
-                console.log('User wants to edit table to fix validation issues');
-            }
-        }).catch(() => {
-            // Modal dismissed
-        });
+        modalRef.result.catch(() => { });
     }
     handleImportTaskCompletion(task) {
         const taskName = this.getTaskDisplayName(task.taskType);
@@ -5411,7 +5390,7 @@ class ColumnEditModal {
     selectedTemplateId = '';
     selectedTemplate = null;
     templates = [];
-    isLoadingTemplates = false;
+    isLoadingTemplates = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingTemplates" }] : /* istanbul ignore next */ []));
     // Pagination
     currentTemplatePage = 1;
     templatePageSize = 5;
@@ -5457,7 +5436,6 @@ class ColumnEditModal {
             this.populateForm();
         }
         if (!this.isEdit) {
-            this.loadColumnTemplates();
             this.loadAvailableSchemas();
         }
     }
@@ -5487,46 +5465,20 @@ class ColumnEditModal {
             const index = this.ontologyTypes.findIndex(o => o.value === ontologyType && (!o.customFilters || Object.keys(o.customFilters).length === 0));
             return index >= 0 ? index : 0;
         }
-        console.log('[Column] Looking for ontology match:', {
-            ontologyType,
-            customFilters,
-            keys: Object.keys(customFilters)
-        });
-        // Handle both wrapped and unwrapped formats
-        // Also handle camelCase from API vs snake_case in config
-        // API returns: {"msUniqueVocabularies": {"termType": "cell line"}}
-        // Config has: {"ms_unique_vocabularies": {"term_type": "cell line"}}
-        // Convert ontologyType to camelCase to match API format
         const camelOntologyType = ontologyType.replace(/_([a-z])/g, (g) => g[1].toUpperCase());
         let actualFilters = customFilters[ontologyType] || customFilters[camelOntologyType] || customFilters;
-        console.log('[Column] Actual filters after unwrapping:', actualFilters);
         const matchingIndex = this.ontologyTypes.findIndex(opt => {
             if (opt.value !== ontologyType)
                 return false;
             if (!opt.customFilters)
                 return false;
-            // Get the filter value from config (wrapped with snake_case key)
             const optFilterValue = opt.customFilters[ontologyType];
             if (!optFilterValue)
                 return false;
-            // Compare term_type values (handle both snake_case and camelCase)
             const optTermType = optFilterValue['term_type'];
             const actualTermType = actualFilters['term_type'] || actualFilters['termType'];
-            const matches = optTermType === actualTermType;
-            console.log('[Column] Comparing:', {
-                label: opt.label,
-                optTermType,
-                actualTermType,
-                matches
-            });
-            return matches;
+            return optTermType === actualTermType;
         });
-        if (matchingIndex >= 0) {
-            console.log('[Column] Found match at index:', matchingIndex, this.ontologyTypes[matchingIndex].label);
-        }
-        else {
-            console.warn('[Column] No match found for:', { ontologyType, customFilters });
-        }
         return matchingIndex >= 0 ? matchingIndex : 0;
     }
     onSubmit() {
@@ -5544,12 +5496,6 @@ class ColumnEditModal {
             const ontologyTypeValue = selectedOntology?.value;
             // Extract custom filters from the selected ontology config
             const customOntologyFilters = selectedOntology?.customFilters || {};
-            console.log('[Column Edit] Submitting column:', {
-                ontologyTypeIndex,
-                selectedOntology,
-                ontologyTypeValue,
-                customOntologyFilters
-            });
             const columnData = {
                 name: formValue.name,
                 type: formValue.type,
@@ -5564,7 +5510,6 @@ class ColumnEditModal {
                 notAvailable: formValue.notAvailable || false,
                 staffOnly: formValue.staffOnly || false
             };
-            console.log('[Column Edit] Final columnData:', columnData);
             this.columnSaved.emit(columnData);
         }
         else {
@@ -5664,10 +5609,10 @@ class ColumnEditModal {
             this.templates = [];
             this.totalTemplates = 0;
             this.totalTemplatePages = 0;
-            this.isLoadingTemplates = false;
+            this.isLoadingTemplates.set(false);
             return;
         }
-        this.isLoadingTemplates = true;
+        this.isLoadingTemplates.set(true);
         const offset = (this.currentTemplatePage - 1) * this.templatePageSize;
         const params = {
             limit: this.templatePageSize,
@@ -5682,11 +5627,10 @@ class ColumnEditModal {
                 this.templates = response.results || [];
                 this.totalTemplates = response.count || 0;
                 this.totalTemplatePages = Math.ceil(this.totalTemplates / this.templatePageSize);
-                this.isLoadingTemplates = false;
+                this.isLoadingTemplates.set(false);
             },
-            error: (error) => {
-                console.error('Error loading column templates:', error);
-                this.isLoadingTemplates = false;
+            error: () => {
+                this.isLoadingTemplates.set(false);
             }
         });
     }
@@ -5695,9 +5639,7 @@ class ColumnEditModal {
             next: (schemas) => {
                 this.availableSchemas = schemas;
             },
-            error: (error) => {
-                console.error('Error loading schemas:', error);
-            }
+            error: () => { }
         });
     }
     toggleSystemTemplatesFilter(systemOnly) {
@@ -5879,11 +5821,11 @@ class ColumnEditModal {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ColumnEditModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }, { token: i2.NgbModal }, { token: MetadataColumnTemplateService }, { token: SchemaService }, { token: SdrfSyntaxService }, { token: OfficialColumnCacheService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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 existing templates to ensure data compliance and consistency.\n            </p>\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 (min 3 characters)...\"\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 if (templateFilter.length > 0 && templateFilter.length < 3) {\n                  <option value=\"\" disabled>Type at least 3 characters to search...</option>\n                } @else if (templates.length === 0) {\n                  <option value=\"\" disabled>No templates found</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) }})}@if (template.isSystemTemplate) { [Official]}\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      <!-- Validation Error -->\n      @if (validationError()) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-danger\">\n            <i class=\"bi bi-exclamation-triangle me-2\"></i>{{ validationError() }}\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              (Select from official SDRF columns or custom templates)\n            } @else {\n              (Optional - select a template to change column settings)\n            }\n          </small>\n        </h6>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <!-- Filter Options -->\n        <div class=\"row mb-2 g-2\">\n          <div class=\"col-auto\">\n            <div class=\"btn-group btn-group-sm\" role=\"group\">\n              <input type=\"radio\" class=\"btn-check\" name=\"templateType\" id=\"allTemplates\"\n                     [checked]=\"!showSystemTemplatesOnly\" (change)=\"toggleSystemTemplatesFilter(false)\">\n              <label class=\"btn btn-outline-primary\" for=\"allTemplates\">All Templates</label>\n\n              <input type=\"radio\" class=\"btn-check\" name=\"templateType\" id=\"systemTemplates\"\n                     [checked]=\"showSystemTemplatesOnly\" (change)=\"toggleSystemTemplatesFilter(true)\">\n              <label class=\"btn btn-outline-primary\" for=\"systemTemplates\">\n                <i class=\"bi bi-shield-check me-1\"></i>Official Only\n              </label>\n            </div>\n          </div>\n          @if (availableSchemas.length > 0) {\n            <div class=\"col-auto\">\n              <select\n                class=\"form-select form-select-sm\"\n                [(ngModel)]=\"selectedSchemaFilter\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (change)=\"onSchemaFilterChange(selectedSchemaFilter)\">\n                <option value=\"\">All Schemas</option>\n                @for (schema of availableSchemas; track schema.id) {\n                  <option [value]=\"schema.name\">{{ schema.displayName || schema.name }}</option>\n                }\n              </select>\n            </div>\n          }\n        </div>\n\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 (min 3 characters)...\"\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=\"\">-- Select a template --</option>\n          @if (isLoadingTemplates) {\n            <option value=\"\" disabled>Loading templates...</option>\n          } @else if (templateFilter.length > 0 && templateFilter.length < 3) {\n            <option value=\"\" disabled>Type at least 3 characters to search...</option>\n          } @else if (templates.length === 0 && templateFilter.length >= 3) {\n            <option value=\"\" disabled>No templates found matching \"{{ templateFilter }}\"</option>\n          } @else {\n            @for (template of templates; track template.id) {\n              <option [value]=\"template.id\">\n                @if (template.isSystemTemplate) {<i class=\"bi bi-shield-check\"></i> }{{ 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.columnName }}\" selected.\n            @if (selectedTemplate.isSystemTemplate) {\n              <span class=\"badge bg-success ms-1\">Official SDRF</span>\n            }\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 a template above\">\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 a template above to set the column name and configuration.\n          }\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnType\" class=\"form-label\">\n          Column Type *\n          <span class=\"text-muted ms-2\">\n            <i class=\"bi bi-info-circle\"></i>\n            Managed through templates\n          </span>\n        </label>\n        <select\n          class=\"form-select\"\n          id=\"columnType\"\n          formControlName=\"type\"\n          [class.is-invalid]=\"editForm.get('type')?.invalid && editForm.get('type')?.touched\">\n          @for (type of columnTypes; track type.value) {\n            <option [value]=\"type.value\">{{ type.label }}</option>\n          }\n        </select>\n      </div>\n\n      <!-- Advanced Mode Toggle -->\n      <div class=\"col-12 mb-3\">\n        <div class=\"form-check form-switch\">\n          <input\n            class=\"form-check-input\"\n            type=\"checkbox\"\n            id=\"advancedMode\"\n            [checked]=\"showAdvancedMode()\"\n            (change)=\"toggleAdvancedMode()\">\n          <label class=\"form-check-label\" for=\"advancedMode\">\n            <i class=\"bi bi-gear me-1\"></i>Advanced Mode\n          </label>\n          <div class=\"form-text\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Show advanced options for ontology configuration and column settings\n          </div>\n        </div>\n      </div>\n\n      @if (showAdvancedMode()) {\n        <div class=\"col-md-6 mb-3\">\n          <label for=\"ontologyType\" class=\"form-label\">\n            Ontology Type\n            <span class=\"badge bg-warning ms-2\">\n              <i class=\"bi bi-exclamation-triangle me-1\"></i>Advanced\n            </span>\n          </label>\n        <select\n          class=\"form-select\"\n          id=\"ontologyType\"\n          formControlName=\"ontologyType\"\n          (change)=\"onOntologyTypeChange($event)\">\n          @for (ontology of ontologyTypes; track $index) {\n            <option [value]=\"$index\">{{ ontology.label }}</option>\n          }\n        </select>\n\n        @if (hasOntologyType) {\n          <div class=\"form-text mt-2\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Custom ontology filters will be applied based on the selected type\n          </div>\n        }\n        </div>\n\n        @if (hasOntologyType) {\n          <div class=\"col-12 mb-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"enableTypeahead\"\n                formControlName=\"enableTypeahead\">\n              <label class=\"form-check-label\" for=\"enableTypeahead\">\n                <i class=\"bi bi-search me-1\"></i>Enable Typeahead Autocomplete\n              </label>\n              <div class=\"form-text\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                Enable autocomplete suggestions from {{ selectedOntologyConfig?.label || 'selected' }} ontology when editing values\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Column Options - Advanced Mode Only -->\n        <div class=\"col-12 mb-3\">\n          <h6 class=\"text-muted border-bottom pb-2\">\n            <i class=\"bi bi-sliders me-2\"></i>Column Options\n            <span class=\"badge bg-warning ms-2\">\n              <i class=\"bi bi-exclamation-triangle me-1\"></i>Advanced\n            </span>\n          </h6>\n        </div>\n\n        <div class=\"col-12 mb-3\">\n          <div class=\"row\">\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"mandatory\"\n                  formControlName=\"mandatory\">\n                <label class=\"form-check-label\" for=\"mandatory\">\n                  <i class=\"bi bi-exclamation-circle me-1\"></i>Mandatory\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"hidden\"\n                  formControlName=\"hidden\">\n                <label class=\"form-check-label\" for=\"hidden\">\n                  <i class=\"bi bi-eye-slash me-1\"></i>Hidden\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"readonly\"\n                  formControlName=\"readonly\">\n                <label class=\"form-check-label\" for=\"readonly\">\n                  <i class=\"bi bi-lock me-1\"></i>Read Only\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"notApplicable\"\n                  formControlName=\"notApplicable\">\n                <label class=\"form-check-label\" for=\"notApplicable\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"notAvailable\"\n                  formControlName=\"notAvailable\">\n                <label class=\"form-check-label\" for=\"notAvailable\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"staffOnly\"\n                  formControlName=\"staffOnly\">\n                <label class=\"form-check-label\" for=\"staffOnly\">\n                  <i class=\"bi bi-shield-lock me-1\"></i>Staff Only\n                </label>\n              </div>\n            </div>\n          </div>\n          <div class=\"row mt-2\">\n            <div class=\"col-12\">\n              <div class=\"alert alert-info py-2\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                <small>\n                  <strong>Staff Only:</strong> When enabled, this column will only be visible and editable by staff members.\n                </small>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"defaultValue\" class=\"form-label\">\n          Default Value\n          @if (hasTypeaheadEnabled) {\n            <span class=\"badge bg-success ms-2\">\n              <i class=\"bi bi-search me-1\"></i>Typeahead Enabled\n            </span>\n          }\n        </label>\n\n        @if (editForm.get('notApplicable')?.value || editForm.get('notAvailable')?.value) {\n          <div class=\"mb-2\">\n            <small class=\"text-muted d-block mb-1\">Quick Select:</small>\n            <div class=\"btn-group btn-group-sm\" role=\"group\">\n              @if (editForm.get('notApplicable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not applicable')\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </button>\n              }\n              @if (editForm.get('notAvailable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not available')\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            id=\"defaultValue\"\n            formControlName=\"value\"\n            placeholder=\"Enter default value\"\n            readonly>\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-primary\"\n            (click)=\"openValueEditModal()\"\n            title=\"Open advanced value editor\">\n            <i class=\"bi bi-pencil me-1\"></i>Edit\n          </button>\n        </div>\n\n        <div class=\"form-text\">\n          @if (hasTypeaheadEnabled) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to use autocomplete suggestions from {{ selectedOntologyConfig?.label || 'selected' }} ontology\n          } @else if (hasOntologyType) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set default value. Enable typeahead in Advanced Mode for autocomplete suggestions.\n          } @else if (showAdvancedMode()) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set the default value (select an ontology type above for smart suggestions)\n          } @else {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set the default value (enable Advanced Mode for ontology autocomplete)\n          }\n        </div>\n      </div>\n\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\n  </button>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary\"\n    (click)=\"onSubmit()\"\n    [disabled]=\"editFormInvalid() || 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],[formArray],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: i7$1.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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 existing templates to ensure data compliance and consistency.\n            </p>\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 (min 3 characters)...\"\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 if (templateFilter.length > 0 && templateFilter.length < 3) {\n                  <option value=\"\" disabled>Type at least 3 characters to search...</option>\n                } @else if (templates.length === 0) {\n                  <option value=\"\" disabled>No templates found</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) }})}@if (template.isSystemTemplate) { [Official]}\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      <!-- Validation Error -->\n      @if (validationError()) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-danger\">\n            <i class=\"bi bi-exclamation-triangle me-2\"></i>{{ validationError() }}\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              (Select from official SDRF columns or custom templates)\n            } @else {\n              (Optional - select a template to change column settings)\n            }\n          </small>\n        </h6>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <!-- Filter Options -->\n        <div class=\"row mb-2 g-2\">\n          <div class=\"col-auto\">\n            <div class=\"btn-group btn-group-sm\" role=\"group\">\n              <input type=\"radio\" class=\"btn-check\" name=\"templateType\" id=\"allTemplates\"\n                     [checked]=\"!showSystemTemplatesOnly\" (change)=\"toggleSystemTemplatesFilter(false)\">\n              <label class=\"btn btn-outline-primary\" for=\"allTemplates\">All Templates</label>\n\n              <input type=\"radio\" class=\"btn-check\" name=\"templateType\" id=\"systemTemplates\"\n                     [checked]=\"showSystemTemplatesOnly\" (change)=\"toggleSystemTemplatesFilter(true)\">\n              <label class=\"btn btn-outline-primary\" for=\"systemTemplates\">\n                <i class=\"bi bi-shield-check me-1\"></i>Official Only\n              </label>\n            </div>\n          </div>\n          @if (availableSchemas.length > 0) {\n            <div class=\"col-auto\">\n              <select\n                class=\"form-select form-select-sm\"\n                [(ngModel)]=\"selectedSchemaFilter\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (change)=\"onSchemaFilterChange(selectedSchemaFilter)\">\n                <option value=\"\">All Schemas</option>\n                @for (schema of availableSchemas; track schema.id) {\n                  <option [value]=\"schema.name\">{{ schema.displayName || schema.name }}</option>\n                }\n              </select>\n            </div>\n          }\n        </div>\n\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 (min 3 characters)...\"\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=\"\">-- Select a template --</option>\n          @if (isLoadingTemplates()) {\n            <option value=\"\" disabled>Loading templates...</option>\n          } @else if (templateFilter.length > 0 && templateFilter.length < 3) {\n            <option value=\"\" disabled>Type at least 3 characters to search...</option>\n          } @else if (templates.length === 0 && templateFilter.length === 0) {\n            <option value=\"\" disabled>Search above to find column templates...</option>\n          } @else if (templates.length === 0 && templateFilter.length >= 3) {\n            <option value=\"\" disabled>No templates found matching \"{{ templateFilter }}\"</option>\n          } @else {\n            @for (template of templates; track template.id) {\n              <option [value]=\"template.id\">\n                @if (template.isSystemTemplate) {<i class=\"bi bi-shield-check\"></i> }{{ 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.columnName }}\" selected.\n            @if (selectedTemplate.isSystemTemplate) {\n              <span class=\"badge bg-success ms-1\">Official SDRF</span>\n            }\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 a template above\">\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 a template above to set the column name and configuration.\n          }\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnType\" class=\"form-label\">\n          Column Type *\n          <span class=\"text-muted ms-2\">\n            <i class=\"bi bi-info-circle\"></i>\n            Managed through templates\n          </span>\n        </label>\n        <select\n          class=\"form-select\"\n          id=\"columnType\"\n          formControlName=\"type\"\n          [class.is-invalid]=\"editForm.get('type')?.invalid && editForm.get('type')?.touched\">\n          @for (type of columnTypes; track type.value) {\n            <option [value]=\"type.value\">{{ type.label }}</option>\n          }\n        </select>\n      </div>\n\n      <!-- Advanced Mode Toggle -->\n      <div class=\"col-12 mb-3\">\n        <div class=\"form-check form-switch\">\n          <input\n            class=\"form-check-input\"\n            type=\"checkbox\"\n            id=\"advancedMode\"\n            [checked]=\"showAdvancedMode()\"\n            (change)=\"toggleAdvancedMode()\">\n          <label class=\"form-check-label\" for=\"advancedMode\">\n            <i class=\"bi bi-gear me-1\"></i>Advanced Mode\n          </label>\n          <div class=\"form-text\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Show advanced options for ontology configuration and column settings\n          </div>\n        </div>\n      </div>\n\n      @if (showAdvancedMode()) {\n        <div class=\"col-md-6 mb-3\">\n          <label for=\"ontologyType\" class=\"form-label\">\n            Ontology Type\n            <span class=\"badge bg-warning ms-2\">\n              <i class=\"bi bi-exclamation-triangle me-1\"></i>Advanced\n            </span>\n          </label>\n        <select\n          class=\"form-select\"\n          id=\"ontologyType\"\n          formControlName=\"ontologyType\"\n          (change)=\"onOntologyTypeChange($event)\">\n          @for (ontology of ontologyTypes; track $index) {\n            <option [value]=\"$index\">{{ ontology.label }}</option>\n          }\n        </select>\n\n        @if (hasOntologyType) {\n          <div class=\"form-text mt-2\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Custom ontology filters will be applied based on the selected type\n          </div>\n        }\n        </div>\n\n        @if (hasOntologyType) {\n          <div class=\"col-12 mb-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"enableTypeahead\"\n                formControlName=\"enableTypeahead\">\n              <label class=\"form-check-label\" for=\"enableTypeahead\">\n                <i class=\"bi bi-search me-1\"></i>Enable Typeahead Autocomplete\n              </label>\n              <div class=\"form-text\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                Enable autocomplete suggestions from {{ selectedOntologyConfig?.label || 'selected' }} ontology when editing values\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Column Options - Advanced Mode Only -->\n        <div class=\"col-12 mb-3\">\n          <h6 class=\"text-muted border-bottom pb-2\">\n            <i class=\"bi bi-sliders me-2\"></i>Column Options\n            <span class=\"badge bg-warning ms-2\">\n              <i class=\"bi bi-exclamation-triangle me-1\"></i>Advanced\n            </span>\n          </h6>\n        </div>\n\n        <div class=\"col-12 mb-3\">\n          <div class=\"row\">\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"mandatory\"\n                  formControlName=\"mandatory\">\n                <label class=\"form-check-label\" for=\"mandatory\">\n                  <i class=\"bi bi-exclamation-circle me-1\"></i>Mandatory\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"hidden\"\n                  formControlName=\"hidden\">\n                <label class=\"form-check-label\" for=\"hidden\">\n                  <i class=\"bi bi-eye-slash me-1\"></i>Hidden\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"readonly\"\n                  formControlName=\"readonly\">\n                <label class=\"form-check-label\" for=\"readonly\">\n                  <i class=\"bi bi-lock me-1\"></i>Read Only\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"notApplicable\"\n                  formControlName=\"notApplicable\">\n                <label class=\"form-check-label\" for=\"notApplicable\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"notAvailable\"\n                  formControlName=\"notAvailable\">\n                <label class=\"form-check-label\" for=\"notAvailable\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"staffOnly\"\n                  formControlName=\"staffOnly\">\n                <label class=\"form-check-label\" for=\"staffOnly\">\n                  <i class=\"bi bi-shield-lock me-1\"></i>Staff Only\n                </label>\n              </div>\n            </div>\n          </div>\n          <div class=\"row mt-2\">\n            <div class=\"col-12\">\n              <div class=\"alert alert-info py-2\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                <small>\n                  <strong>Staff Only:</strong> When enabled, this column will only be visible and editable by staff members.\n                </small>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"defaultValue\" class=\"form-label\">\n          Default Value\n          @if (hasTypeaheadEnabled) {\n            <span class=\"badge bg-success ms-2\">\n              <i class=\"bi bi-search me-1\"></i>Typeahead Enabled\n            </span>\n          }\n        </label>\n\n        @if (editForm.get('notApplicable')?.value || editForm.get('notAvailable')?.value) {\n          <div class=\"mb-2\">\n            <small class=\"text-muted d-block mb-1\">Quick Select:</small>\n            <div class=\"btn-group btn-group-sm\" role=\"group\">\n              @if (editForm.get('notApplicable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not applicable')\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </button>\n              }\n              @if (editForm.get('notAvailable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not available')\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            id=\"defaultValue\"\n            formControlName=\"value\"\n            placeholder=\"Enter default value\"\n            readonly>\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-primary\"\n            (click)=\"openValueEditModal()\"\n            title=\"Open advanced value editor\">\n            <i class=\"bi bi-pencil me-1\"></i>Edit\n          </button>\n        </div>\n\n        <div class=\"form-text\">\n          @if (hasTypeaheadEnabled) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to use autocomplete suggestions from {{ selectedOntologyConfig?.label || 'selected' }} ontology\n          } @else if (hasOntologyType) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set default value. Enable typeahead in Advanced Mode for autocomplete suggestions.\n          } @else if (showAdvancedMode()) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set the default value (select an ontology type above for smart suggestions)\n          } @else {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set the default value (enable Advanced Mode for ontology autocomplete)\n          }\n        </div>\n      </div>\n\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\n  </button>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary\"\n    (click)=\"onSubmit()\"\n    [disabled]=\"editFormInvalid() || 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],[formArray],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: i7$1.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ColumnEditModal, decorators: [{
             type: Component,
-            args: [{ selector: 'ccv-column-edit-modal', imports: [CommonModule, ReactiveFormsModule, FormsModule, NgbModule], changeDetection: ChangeDetectionStrategy.OnPush, 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 existing templates to ensure data compliance and consistency.\n            </p>\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 (min 3 characters)...\"\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 if (templateFilter.length > 0 && templateFilter.length < 3) {\n                  <option value=\"\" disabled>Type at least 3 characters to search...</option>\n                } @else if (templates.length === 0) {\n                  <option value=\"\" disabled>No templates found</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) }})}@if (template.isSystemTemplate) { [Official]}\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      <!-- Validation Error -->\n      @if (validationError()) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-danger\">\n            <i class=\"bi bi-exclamation-triangle me-2\"></i>{{ validationError() }}\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              (Select from official SDRF columns or custom templates)\n            } @else {\n              (Optional - select a template to change column settings)\n            }\n          </small>\n        </h6>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <!-- Filter Options -->\n        <div class=\"row mb-2 g-2\">\n          <div class=\"col-auto\">\n            <div class=\"btn-group btn-group-sm\" role=\"group\">\n              <input type=\"radio\" class=\"btn-check\" name=\"templateType\" id=\"allTemplates\"\n                     [checked]=\"!showSystemTemplatesOnly\" (change)=\"toggleSystemTemplatesFilter(false)\">\n              <label class=\"btn btn-outline-primary\" for=\"allTemplates\">All Templates</label>\n\n              <input type=\"radio\" class=\"btn-check\" name=\"templateType\" id=\"systemTemplates\"\n                     [checked]=\"showSystemTemplatesOnly\" (change)=\"toggleSystemTemplatesFilter(true)\">\n              <label class=\"btn btn-outline-primary\" for=\"systemTemplates\">\n                <i class=\"bi bi-shield-check me-1\"></i>Official Only\n              </label>\n            </div>\n          </div>\n          @if (availableSchemas.length > 0) {\n            <div class=\"col-auto\">\n              <select\n                class=\"form-select form-select-sm\"\n                [(ngModel)]=\"selectedSchemaFilter\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (change)=\"onSchemaFilterChange(selectedSchemaFilter)\">\n                <option value=\"\">All Schemas</option>\n                @for (schema of availableSchemas; track schema.id) {\n                  <option [value]=\"schema.name\">{{ schema.displayName || schema.name }}</option>\n                }\n              </select>\n            </div>\n          }\n        </div>\n\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 (min 3 characters)...\"\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=\"\">-- Select a template --</option>\n          @if (isLoadingTemplates) {\n            <option value=\"\" disabled>Loading templates...</option>\n          } @else if (templateFilter.length > 0 && templateFilter.length < 3) {\n            <option value=\"\" disabled>Type at least 3 characters to search...</option>\n          } @else if (templates.length === 0 && templateFilter.length >= 3) {\n            <option value=\"\" disabled>No templates found matching \"{{ templateFilter }}\"</option>\n          } @else {\n            @for (template of templates; track template.id) {\n              <option [value]=\"template.id\">\n                @if (template.isSystemTemplate) {<i class=\"bi bi-shield-check\"></i> }{{ 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.columnName }}\" selected.\n            @if (selectedTemplate.isSystemTemplate) {\n              <span class=\"badge bg-success ms-1\">Official SDRF</span>\n            }\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 a template above\">\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 a template above to set the column name and configuration.\n          }\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnType\" class=\"form-label\">\n          Column Type *\n          <span class=\"text-muted ms-2\">\n            <i class=\"bi bi-info-circle\"></i>\n            Managed through templates\n          </span>\n        </label>\n        <select\n          class=\"form-select\"\n          id=\"columnType\"\n          formControlName=\"type\"\n          [class.is-invalid]=\"editForm.get('type')?.invalid && editForm.get('type')?.touched\">\n          @for (type of columnTypes; track type.value) {\n            <option [value]=\"type.value\">{{ type.label }}</option>\n          }\n        </select>\n      </div>\n\n      <!-- Advanced Mode Toggle -->\n      <div class=\"col-12 mb-3\">\n        <div class=\"form-check form-switch\">\n          <input\n            class=\"form-check-input\"\n            type=\"checkbox\"\n            id=\"advancedMode\"\n            [checked]=\"showAdvancedMode()\"\n            (change)=\"toggleAdvancedMode()\">\n          <label class=\"form-check-label\" for=\"advancedMode\">\n            <i class=\"bi bi-gear me-1\"></i>Advanced Mode\n          </label>\n          <div class=\"form-text\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Show advanced options for ontology configuration and column settings\n          </div>\n        </div>\n      </div>\n\n      @if (showAdvancedMode()) {\n        <div class=\"col-md-6 mb-3\">\n          <label for=\"ontologyType\" class=\"form-label\">\n            Ontology Type\n            <span class=\"badge bg-warning ms-2\">\n              <i class=\"bi bi-exclamation-triangle me-1\"></i>Advanced\n            </span>\n          </label>\n        <select\n          class=\"form-select\"\n          id=\"ontologyType\"\n          formControlName=\"ontologyType\"\n          (change)=\"onOntologyTypeChange($event)\">\n          @for (ontology of ontologyTypes; track $index) {\n            <option [value]=\"$index\">{{ ontology.label }}</option>\n          }\n        </select>\n\n        @if (hasOntologyType) {\n          <div class=\"form-text mt-2\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Custom ontology filters will be applied based on the selected type\n          </div>\n        }\n        </div>\n\n        @if (hasOntologyType) {\n          <div class=\"col-12 mb-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"enableTypeahead\"\n                formControlName=\"enableTypeahead\">\n              <label class=\"form-check-label\" for=\"enableTypeahead\">\n                <i class=\"bi bi-search me-1\"></i>Enable Typeahead Autocomplete\n              </label>\n              <div class=\"form-text\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                Enable autocomplete suggestions from {{ selectedOntologyConfig?.label || 'selected' }} ontology when editing values\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Column Options - Advanced Mode Only -->\n        <div class=\"col-12 mb-3\">\n          <h6 class=\"text-muted border-bottom pb-2\">\n            <i class=\"bi bi-sliders me-2\"></i>Column Options\n            <span class=\"badge bg-warning ms-2\">\n              <i class=\"bi bi-exclamation-triangle me-1\"></i>Advanced\n            </span>\n          </h6>\n        </div>\n\n        <div class=\"col-12 mb-3\">\n          <div class=\"row\">\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"mandatory\"\n                  formControlName=\"mandatory\">\n                <label class=\"form-check-label\" for=\"mandatory\">\n                  <i class=\"bi bi-exclamation-circle me-1\"></i>Mandatory\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"hidden\"\n                  formControlName=\"hidden\">\n                <label class=\"form-check-label\" for=\"hidden\">\n                  <i class=\"bi bi-eye-slash me-1\"></i>Hidden\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"readonly\"\n                  formControlName=\"readonly\">\n                <label class=\"form-check-label\" for=\"readonly\">\n                  <i class=\"bi bi-lock me-1\"></i>Read Only\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"notApplicable\"\n                  formControlName=\"notApplicable\">\n                <label class=\"form-check-label\" for=\"notApplicable\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"notAvailable\"\n                  formControlName=\"notAvailable\">\n                <label class=\"form-check-label\" for=\"notAvailable\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"staffOnly\"\n                  formControlName=\"staffOnly\">\n                <label class=\"form-check-label\" for=\"staffOnly\">\n                  <i class=\"bi bi-shield-lock me-1\"></i>Staff Only\n                </label>\n              </div>\n            </div>\n          </div>\n          <div class=\"row mt-2\">\n            <div class=\"col-12\">\n              <div class=\"alert alert-info py-2\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                <small>\n                  <strong>Staff Only:</strong> When enabled, this column will only be visible and editable by staff members.\n                </small>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"defaultValue\" class=\"form-label\">\n          Default Value\n          @if (hasTypeaheadEnabled) {\n            <span class=\"badge bg-success ms-2\">\n              <i class=\"bi bi-search me-1\"></i>Typeahead Enabled\n            </span>\n          }\n        </label>\n\n        @if (editForm.get('notApplicable')?.value || editForm.get('notAvailable')?.value) {\n          <div class=\"mb-2\">\n            <small class=\"text-muted d-block mb-1\">Quick Select:</small>\n            <div class=\"btn-group btn-group-sm\" role=\"group\">\n              @if (editForm.get('notApplicable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not applicable')\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </button>\n              }\n              @if (editForm.get('notAvailable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not available')\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            id=\"defaultValue\"\n            formControlName=\"value\"\n            placeholder=\"Enter default value\"\n            readonly>\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-primary\"\n            (click)=\"openValueEditModal()\"\n            title=\"Open advanced value editor\">\n            <i class=\"bi bi-pencil me-1\"></i>Edit\n          </button>\n        </div>\n\n        <div class=\"form-text\">\n          @if (hasTypeaheadEnabled) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to use autocomplete suggestions from {{ selectedOntologyConfig?.label || 'selected' }} ontology\n          } @else if (hasOntologyType) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set default value. Enable typeahead in Advanced Mode for autocomplete suggestions.\n          } @else if (showAdvancedMode()) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set the default value (select an ontology type above for smart suggestions)\n          } @else {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set the default value (enable Advanced Mode for ontology autocomplete)\n          }\n        </div>\n      </div>\n\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\n  </button>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary\"\n    (click)=\"onSubmit()\"\n    [disabled]=\"editFormInvalid() || isLoading()\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-check-circle me-1\"></i>\n    {{ isEdit ? 'Update' : 'Add' }} Column\n  </button>\n</div>\n", styles: [".template-selection-container{border:1px solid var(--bs-border-color);border-radius:.375rem;padding:.5rem}.template-item{cursor:pointer;transition:all .2s ease}.template-item:hover{background-color:rgba(var(--bs-primary-rgb),.1);border-color:var(--bs-primary)!important}.template-item.selected{background-color:rgba(var(--bs-primary-rgb),.15);border-color:var(--bs-primary)!important;box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.25)}.cursor-pointer{cursor:pointer}.card.cursor-pointer{transition:all .2s ease}.card.cursor-pointer:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.card.cursor-pointer.border-info{border-width:2px}.modal-lg{max-width:900px}\n"] }]
+            args: [{ selector: 'ccv-column-edit-modal', imports: [CommonModule, ReactiveFormsModule, FormsModule, NgbModule], changeDetection: ChangeDetectionStrategy.OnPush, 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 existing templates to ensure data compliance and consistency.\n            </p>\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 (min 3 characters)...\"\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 if (templateFilter.length > 0 && templateFilter.length < 3) {\n                  <option value=\"\" disabled>Type at least 3 characters to search...</option>\n                } @else if (templates.length === 0) {\n                  <option value=\"\" disabled>No templates found</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) }})}@if (template.isSystemTemplate) { [Official]}\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      <!-- Validation Error -->\n      @if (validationError()) {\n        <div class=\"col-12 mb-3\">\n          <div class=\"alert alert-danger\">\n            <i class=\"bi bi-exclamation-triangle me-2\"></i>{{ validationError() }}\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              (Select from official SDRF columns or custom templates)\n            } @else {\n              (Optional - select a template to change column settings)\n            }\n          </small>\n        </h6>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <!-- Filter Options -->\n        <div class=\"row mb-2 g-2\">\n          <div class=\"col-auto\">\n            <div class=\"btn-group btn-group-sm\" role=\"group\">\n              <input type=\"radio\" class=\"btn-check\" name=\"templateType\" id=\"allTemplates\"\n                     [checked]=\"!showSystemTemplatesOnly\" (change)=\"toggleSystemTemplatesFilter(false)\">\n              <label class=\"btn btn-outline-primary\" for=\"allTemplates\">All Templates</label>\n\n              <input type=\"radio\" class=\"btn-check\" name=\"templateType\" id=\"systemTemplates\"\n                     [checked]=\"showSystemTemplatesOnly\" (change)=\"toggleSystemTemplatesFilter(true)\">\n              <label class=\"btn btn-outline-primary\" for=\"systemTemplates\">\n                <i class=\"bi bi-shield-check me-1\"></i>Official Only\n              </label>\n            </div>\n          </div>\n          @if (availableSchemas.length > 0) {\n            <div class=\"col-auto\">\n              <select\n                class=\"form-select form-select-sm\"\n                [(ngModel)]=\"selectedSchemaFilter\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (change)=\"onSchemaFilterChange(selectedSchemaFilter)\">\n                <option value=\"\">All Schemas</option>\n                @for (schema of availableSchemas; track schema.id) {\n                  <option [value]=\"schema.name\">{{ schema.displayName || schema.name }}</option>\n                }\n              </select>\n            </div>\n          }\n        </div>\n\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 (min 3 characters)...\"\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=\"\">-- Select a template --</option>\n          @if (isLoadingTemplates()) {\n            <option value=\"\" disabled>Loading templates...</option>\n          } @else if (templateFilter.length > 0 && templateFilter.length < 3) {\n            <option value=\"\" disabled>Type at least 3 characters to search...</option>\n          } @else if (templates.length === 0 && templateFilter.length === 0) {\n            <option value=\"\" disabled>Search above to find column templates...</option>\n          } @else if (templates.length === 0 && templateFilter.length >= 3) {\n            <option value=\"\" disabled>No templates found matching \"{{ templateFilter }}\"</option>\n          } @else {\n            @for (template of templates; track template.id) {\n              <option [value]=\"template.id\">\n                @if (template.isSystemTemplate) {<i class=\"bi bi-shield-check\"></i> }{{ 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.columnName }}\" selected.\n            @if (selectedTemplate.isSystemTemplate) {\n              <span class=\"badge bg-success ms-1\">Official SDRF</span>\n            }\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 a template above\">\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 a template above to set the column name and configuration.\n          }\n        </div>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"columnType\" class=\"form-label\">\n          Column Type *\n          <span class=\"text-muted ms-2\">\n            <i class=\"bi bi-info-circle\"></i>\n            Managed through templates\n          </span>\n        </label>\n        <select\n          class=\"form-select\"\n          id=\"columnType\"\n          formControlName=\"type\"\n          [class.is-invalid]=\"editForm.get('type')?.invalid && editForm.get('type')?.touched\">\n          @for (type of columnTypes; track type.value) {\n            <option [value]=\"type.value\">{{ type.label }}</option>\n          }\n        </select>\n      </div>\n\n      <!-- Advanced Mode Toggle -->\n      <div class=\"col-12 mb-3\">\n        <div class=\"form-check form-switch\">\n          <input\n            class=\"form-check-input\"\n            type=\"checkbox\"\n            id=\"advancedMode\"\n            [checked]=\"showAdvancedMode()\"\n            (change)=\"toggleAdvancedMode()\">\n          <label class=\"form-check-label\" for=\"advancedMode\">\n            <i class=\"bi bi-gear me-1\"></i>Advanced Mode\n          </label>\n          <div class=\"form-text\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Show advanced options for ontology configuration and column settings\n          </div>\n        </div>\n      </div>\n\n      @if (showAdvancedMode()) {\n        <div class=\"col-md-6 mb-3\">\n          <label for=\"ontologyType\" class=\"form-label\">\n            Ontology Type\n            <span class=\"badge bg-warning ms-2\">\n              <i class=\"bi bi-exclamation-triangle me-1\"></i>Advanced\n            </span>\n          </label>\n        <select\n          class=\"form-select\"\n          id=\"ontologyType\"\n          formControlName=\"ontologyType\"\n          (change)=\"onOntologyTypeChange($event)\">\n          @for (ontology of ontologyTypes; track $index) {\n            <option [value]=\"$index\">{{ ontology.label }}</option>\n          }\n        </select>\n\n        @if (hasOntologyType) {\n          <div class=\"form-text mt-2\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Custom ontology filters will be applied based on the selected type\n          </div>\n        }\n        </div>\n\n        @if (hasOntologyType) {\n          <div class=\"col-12 mb-3\">\n            <div class=\"form-check form-switch\">\n              <input\n                class=\"form-check-input\"\n                type=\"checkbox\"\n                id=\"enableTypeahead\"\n                formControlName=\"enableTypeahead\">\n              <label class=\"form-check-label\" for=\"enableTypeahead\">\n                <i class=\"bi bi-search me-1\"></i>Enable Typeahead Autocomplete\n              </label>\n              <div class=\"form-text\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                Enable autocomplete suggestions from {{ selectedOntologyConfig?.label || 'selected' }} ontology when editing values\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Column Options - Advanced Mode Only -->\n        <div class=\"col-12 mb-3\">\n          <h6 class=\"text-muted border-bottom pb-2\">\n            <i class=\"bi bi-sliders me-2\"></i>Column Options\n            <span class=\"badge bg-warning ms-2\">\n              <i class=\"bi bi-exclamation-triangle me-1\"></i>Advanced\n            </span>\n          </h6>\n        </div>\n\n        <div class=\"col-12 mb-3\">\n          <div class=\"row\">\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"mandatory\"\n                  formControlName=\"mandatory\">\n                <label class=\"form-check-label\" for=\"mandatory\">\n                  <i class=\"bi bi-exclamation-circle me-1\"></i>Mandatory\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"hidden\"\n                  formControlName=\"hidden\">\n                <label class=\"form-check-label\" for=\"hidden\">\n                  <i class=\"bi bi-eye-slash me-1\"></i>Hidden\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"readonly\"\n                  formControlName=\"readonly\">\n                <label class=\"form-check-label\" for=\"readonly\">\n                  <i class=\"bi bi-lock me-1\"></i>Read Only\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"notApplicable\"\n                  formControlName=\"notApplicable\">\n                <label class=\"form-check-label\" for=\"notApplicable\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"notAvailable\"\n                  formControlName=\"notAvailable\">\n                <label class=\"form-check-label\" for=\"notAvailable\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </label>\n              </div>\n            </div>\n            <div class=\"col-md-3\">\n              <div class=\"form-check form-switch\">\n                <input\n                  class=\"form-check-input\"\n                  type=\"checkbox\"\n                  id=\"staffOnly\"\n                  formControlName=\"staffOnly\">\n                <label class=\"form-check-label\" for=\"staffOnly\">\n                  <i class=\"bi bi-shield-lock me-1\"></i>Staff Only\n                </label>\n              </div>\n            </div>\n          </div>\n          <div class=\"row mt-2\">\n            <div class=\"col-12\">\n              <div class=\"alert alert-info py-2\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                <small>\n                  <strong>Staff Only:</strong> When enabled, this column will only be visible and editable by staff members.\n                </small>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"defaultValue\" class=\"form-label\">\n          Default Value\n          @if (hasTypeaheadEnabled) {\n            <span class=\"badge bg-success ms-2\">\n              <i class=\"bi bi-search me-1\"></i>Typeahead Enabled\n            </span>\n          }\n        </label>\n\n        @if (editForm.get('notApplicable')?.value || editForm.get('notAvailable')?.value) {\n          <div class=\"mb-2\">\n            <small class=\"text-muted d-block mb-1\">Quick Select:</small>\n            <div class=\"btn-group btn-group-sm\" role=\"group\">\n              @if (editForm.get('notApplicable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not applicable')\">\n                  <i class=\"bi bi-dash-circle me-1\"></i>Not Applicable\n                </button>\n              }\n              @if (editForm.get('notAvailable')?.value) {\n                <button\n                  type=\"button\"\n                  class=\"btn btn-outline-secondary\"\n                  (click)=\"setDefaultValue('not available')\">\n                  <i class=\"bi bi-question-circle me-1\"></i>Not Available\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <div class=\"input-group\">\n          <input\n            type=\"text\"\n            class=\"form-control\"\n            id=\"defaultValue\"\n            formControlName=\"value\"\n            placeholder=\"Enter default value\"\n            readonly>\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-primary\"\n            (click)=\"openValueEditModal()\"\n            title=\"Open advanced value editor\">\n            <i class=\"bi bi-pencil me-1\"></i>Edit\n          </button>\n        </div>\n\n        <div class=\"form-text\">\n          @if (hasTypeaheadEnabled) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to use autocomplete suggestions from {{ selectedOntologyConfig?.label || 'selected' }} ontology\n          } @else if (hasOntologyType) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set default value. Enable typeahead in Advanced Mode for autocomplete suggestions.\n          } @else if (showAdvancedMode()) {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set the default value (select an ontology type above for smart suggestions)\n          } @else {\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Click \"Edit\" to set the default value (enable Advanced Mode for ontology autocomplete)\n          }\n        </div>\n      </div>\n\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\n  </button>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary\"\n    (click)=\"onSubmit()\"\n    [disabled]=\"editFormInvalid() || isLoading()\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-check-circle me-1\"></i>\n    {{ isEdit ? 'Update' : 'Add' }} Column\n  </button>\n</div>\n", styles: [".template-selection-container{border:1px solid var(--bs-border-color);border-radius:.375rem;padding:.5rem}.template-item{cursor:pointer;transition:all .2s ease}.template-item:hover{background-color:rgba(var(--bs-primary-rgb),.1);border-color:var(--bs-primary)!important}.template-item.selected{background-color:rgba(var(--bs-primary-rgb),.15);border-color:var(--bs-primary)!important;box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.25)}.cursor-pointer{cursor:pointer}.card.cursor-pointer{transition:all .2s ease}.card.cursor-pointer:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.card.cursor-pointer.border-info{border-width:2px}.modal-lg{max-width:900px}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }, { type: i2.NgbModal }, { type: MetadataColumnTemplateService }, { type: SchemaService }, { type: SdrfSyntaxService }, { type: OfficialColumnCacheService }], propDecorators: { column: [{
                 type: Input
             }], templateId: [{