@noatgnu/cupcake-vanilla 1.2.13 → 1.2.15

package/fesm2022/noatgnu-cupcake-vanilla.mjs

@@ -664,6 +664,18 @@ class MetadataTableService extends BaseApiService {
     replaceColumnValue(id, request) {
         return this.post(`${this.apiUrl}/metadata-tables/${id}/replace_column_value/`, request);
     }
+    /**
+     * Bulk delete columns from a metadata table
+     */
+    bulkDeleteColumns(id, request) {
+        return this.post(`${this.apiUrl}/metadata-tables/${id}/bulk_delete_columns/`, request);
+    }
+    /**
+     * Bulk update staff-only status for columns
+     */
+    bulkUpdateStaffOnly(id, request) {
+        return this.post(`${this.apiUrl}/metadata-tables/${id}/bulk_update_staff_only/`, request);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataTableService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataTableService, providedIn: 'root' });
 }
@@ -743,6 +755,12 @@ class MetadataColumnService extends BaseApiService {
     updateColumnValue(id, request) {
         return this.post(`${this.apiUrl}/metadata-columns/${id}/update_column_value/`, request);
     }
+    /**
+     * Bulk update sample values with different values for each sample
+     */
+    bulkUpdateSampleValues(id, updates) {
+        return this.post(`${this.apiUrl}/metadata-columns/${id}/bulk_update_sample_values/`, { updates });
+    }
     /**
      * Apply automatic ontology mapping to a column
      */
@@ -956,6 +974,18 @@ class MetadataTableTemplateService extends BaseApiService {
     createTableFromSchemas(request) {
         return this.post(`${this.apiUrl}/metadata-table-templates/create_table_from_schemas/`, request);
     }
+    /**
+     * Bulk delete columns from a metadata table template
+     */
+    bulkDeleteColumns(id, request) {
+        return this.post(`${this.apiUrl}/metadata-table-templates/${id}/bulk_delete_columns/`, request);
+    }
+    /**
+     * Bulk update staff-only status for columns in a template
+     */
+    bulkUpdateStaffOnly(id, request) {
+        return this.post(`${this.apiUrl}/metadata-table-templates/${id}/bulk_update_staff_only/`, request);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataTableTemplateService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataTableTemplateService, providedIn: 'root' });
 }
@@ -5153,6 +5183,7 @@ class MetadataTableTemplateEditModal {
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     // Column management
     _templateColumns = signal([], ...(ngDevMode ? [{ debugName: "_templateColumns" }] : []));
+    selectedColumnIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedColumnIds" }] : []));
     templateColumns = computed(() => {
         // Sort columns by position, then by name+type for grouping same columns together
         return this._templateColumns().sort((a, b) => {
@@ -5165,6 +5196,16 @@ class MetadataTableTemplateEditModal {
             return aKey.localeCompare(bKey);
         });
     }, ...(ngDevMode ? [{ debugName: "templateColumns" }] : []));
+    allColumnsSelected = computed(() => {
+        const columns = this._templateColumns();
+        const selected = this.selectedColumnIds();
+        return columns.length > 0 && columns.every(col => col.id && selected.has(col.id));
+    }, ...(ngDevMode ? [{ debugName: "allColumnsSelected" }] : []));
+    someColumnsSelected = computed(() => {
+        const columns = this._templateColumns();
+        const selected = this.selectedColumnIds();
+        return columns.some(col => col.id && selected.has(col.id)) && !this.allColumnsSelected();
+    }, ...(ngDevMode ? [{ debugName: "someColumnsSelected" }] : []));
     // Available options for dropdowns
     visibilityOptions = [
         { value: ResourceVisibility.PRIVATE, label: 'Private' },
@@ -5293,6 +5334,90 @@ class MetadataTableTemplateEditModal {
             this._templateColumns.set(updatedColumns);
         }
     }
+    toggleColumnSelection(columnId) {
+        const selected = new Set(this.selectedColumnIds());
+        if (selected.has(columnId)) {
+            selected.delete(columnId);
+        }
+        else {
+            selected.add(columnId);
+        }
+        this.selectedColumnIds.set(selected);
+    }
+    toggleAllColumns() {
+        const columns = this._templateColumns();
+        if (this.allColumnsSelected()) {
+            this.selectedColumnIds.set(new Set());
+        }
+        else {
+            const allIds = new Set(columns.filter(col => col.id).map(col => col.id));
+            this.selectedColumnIds.set(allIds);
+        }
+    }
+    bulkToggleStaffOnly(staffOnly) {
+        const selected = this.selectedColumnIds();
+        if (selected.size === 0) {
+            this.toastService.error('Please select columns first');
+            return;
+        }
+        if (!this.template?.id) {
+            this.toastService.error('Template ID not found');
+            return;
+        }
+        const columnIds = Array.from(selected);
+        this.isLoading.set(true);
+        this.metadataTableTemplateService.bulkUpdateStaffOnly(this.template.id, {
+            columnIds,
+            staffOnly
+        }).subscribe({
+            next: (result) => {
+                this.isLoading.set(false);
+                this.toastService.success(`Updated ${result.updatedCount} column(s)`);
+                this.selectedColumnIds.set(new Set());
+                this.reloadTemplateColumns();
+            },
+            error: (error) => {
+                this.isLoading.set(false);
+                console.error('Error bulk updating columns:', error);
+                this.toastService.error('Failed to update columns');
+            }
+        });
+    }
+    bulkDeleteColumns() {
+        const selected = this.selectedColumnIds();
+        if (selected.size === 0) {
+            this.toastService.error('Please select columns first');
+            return;
+        }
+        if (!this.template?.id) {
+            this.toastService.error('Template ID not found');
+            return;
+        }
+        const columnIds = Array.from(selected);
+        const columnNames = this._templateColumns()
+            .filter(col => col.id && selected.has(col.id))
+            .map(col => col.name)
+            .join(', ');
+        if (!confirm(`Are you sure you want to delete ${columnIds.length} column(s)?\n\n${columnNames}`)) {
+            return;
+        }
+        this.isLoading.set(true);
+        this.metadataTableTemplateService.bulkDeleteColumns(this.template.id, {
+            columnIds
+        }).subscribe({
+            next: (result) => {
+                this.isLoading.set(false);
+                this.toastService.success(`Deleted ${result.deletedCount} column(s)`);
+                this.selectedColumnIds.set(new Set());
+                this.reloadTemplateColumns();
+            },
+            error: (error) => {
+                this.isLoading.set(false);
+                console.error('Error bulk deleting columns:', error);
+                this.toastService.error('Failed to delete columns');
+            }
+        });
+    }
     onColumnDrop(event) {
         // If dropped in the same position, no action needed
         if (event.previousIndex === event.currentIndex) {
@@ -5446,11 +5571,11 @@ class MetadataTableTemplateEditModal {
         columns.push(...regroupedColumns);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataTableTemplateEditModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }, { token: i2.NgbModal }, { token: MetadataTableTemplateService }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MetadataTableTemplateEditModal, isStandalone: true, selector: "ccv-metadata-table-template-edit-modal", inputs: { template: "template", labGroups: "labGroups", isEdit: "isEdit" }, outputs: { templateSaved: "templateSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-file-earmark-text me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"row\">\n      <!-- Basic Information -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-info-circle me-2\"></i>Basic Information\n        </h6>\n      </div>\n      \n      <div class=\"col-12 mb-3\">\n        <label for=\"templateName\" class=\"form-label\">Template Name *</label>\n        <input \n          type=\"text\" \n          class=\"form-control\"\n          id=\"templateName\"\n          formControlName=\"name\"\n          [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n          placeholder=\"Enter template name\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('name') }}\n        </div>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"description\" class=\"form-label\">Description</label>\n        <textarea \n          class=\"form-control\" \n          id=\"description\"\n          formControlName=\"description\"\n          rows=\"3\"\n          placeholder=\"Optional description\"></textarea>\n      </div>\n\n      <!-- Configuration -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-gear me-2\"></i>Configuration\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"labGroup\" class=\"form-label\">Lab Group</label>\n        <select \n          class=\"form-select\"\n          id=\"labGroup\"\n          formControlName=\"labGroupId\">\n          <option [ngValue]=\"null\">No Lab Group</option>\n          @for (group of labGroups; track group.id) {\n            <option [ngValue]=\"group.id\">{{ group.name }}</option>\n          }\n        </select>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <label for=\"visibility\" class=\"form-label\">Visibility</label>\n            <select \n              class=\"form-select\"\n              id=\"visibility\"\n              formControlName=\"visibility\">\n              @for (option of visibilityOptions; track option.value) {\n                <option [value]=\"option.value\">{{ option.label }}</option>\n              }\n            </select>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"form-check form-switch\">\n              <input \n                class=\"form-check-input\" \n                type=\"checkbox\" \n                id=\"isDefault\"\n                formControlName=\"isDefault\">\n              <label class=\"form-check-label\" for=\"isDefault\">\n                <i class=\"bi bi-star me-1\"></i>Default Template\n              </label>\n              <small class=\"form-text text-muted d-block\">Use as default for new projects</small>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Column Management -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-columns-gap me-2\"></i>Template Columns\n          <button type=\"button\" class=\"btn btn-sm btn-outline-primary ms-2\" (click)=\"addColumn()\">\n            <i class=\"bi bi-plus me-1\"></i>Add Column\n          </button>\n          @if (isEdit && template?.id) {\n            <button type=\"button\" class=\"btn btn-sm btn-success ms-2\" (click)=\"addColumnWithAutoReorder()\" \n                    [disabled]=\"isLoading()\"\n                    title=\"Add column with automatic schema-based reordering\">\n              <i class=\"bi bi-plus-circle me-1\"></i>Add Column (Auto-Reorder)\n            </button>\n          }\n        </h6>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        @if (templateColumns().length > 0) {\n          <div class=\"table-responsive\">\n            <table class=\"table table-sm table-hover\">\n              <thead class=\"table-light\">\n                <tr>\n                  <th style=\"width: 40px;\"><i class=\"bi bi-arrows-move\"></i></th>\n                  <th>Position</th>\n                  <th>Column Name</th>\n                  <th>Type</th>\n                  <th>Default Value</th>\n                  <th>Options</th>\n                  <th style=\"width: 120px;\">Actions</th>\n                </tr>\n              </thead>\n              <tbody cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" [cdkDropListData]=\"_templateColumns()\">\n                @for (column of _templateColumns(); track column.id; let i = $index) {\n                  <tr cdkDrag [cdkDragData]=\"column\" class=\"column-row\" [attr.data-column-id]=\"column.id\">\n                    <td class=\"text-center\">\n                      <i class=\"bi bi-grip-vertical drag-handle\" cdkDragHandle></i>\n                    </td>\n                    <td>\n                      <span class=\"badge bg-secondary\">{{ i + 1 }}</span>\n                    </td>\n                    <td>\n                      <strong>{{ column.name }}</strong>\n                    </td>\n                    <td>\n                      <span class=\"badge bg-info\">{{ column.type }}</span>\n                    </td>\n                    <td>\n                      <span class=\"text-muted\">{{ column.value || '-' }}</span>\n                    </td>\n                    <td>\n                      <div class=\"d-flex gap-1\">\n                        @if (column.mandatory) {\n                          <span class=\"badge badge-pill bg-warning\" title=\"Mandatory\">\n                            <i class=\"bi bi-exclamation-circle\"></i>\n                          </span>\n                        }\n                        @if (column.hidden) {\n                          <span class=\"badge badge-pill bg-secondary\" title=\"Hidden\">\n                            <i class=\"bi bi-eye-slash\"></i>\n                          </span>\n                        }\n                        @if (column.readonly) {\n                          <span class=\"badge badge-pill bg-dark\" title=\"Read Only\">\n                            <i class=\"bi bi-lock\"></i>\n                          </span>\n                        }\n                        @if (column.ontologyType) {\n                          <span class=\"badge badge-pill bg-success\" title=\"Has Ontology\">\n                            <i class=\"bi bi-tags\"></i>\n                          </span>\n                        }\n                      </div>\n                    </td>\n                    <td>\n                      <div class=\"btn-group btn-group-sm\" role=\"group\">\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-primary\" \n                          (click)=\"editColumn(column)\"\n                          title=\"Edit column\">\n                          <i class=\"bi bi-pencil\"></i>\n                        </button>\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-info\" \n                          (click)=\"duplicateColumn(column)\"\n                          title=\"Duplicate column\">\n                          <i class=\"bi bi-copy\"></i>\n                        </button>\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-danger\" \n                          (click)=\"removeColumn(column)\"\n                          title=\"Remove column\">\n                          <i class=\"bi bi-trash\"></i>\n                        </button>\n                      </div>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n        } @else {\n          <div class=\"text-center py-4 text-muted\">\n            <i class=\"bi bi-columns-gap fs-1 mb-2\"></i>\n            <p>No columns in this template yet.</p>\n            <div class=\"d-flex gap-2 justify-content-center\">\n              <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addColumn()\">\n                <i class=\"bi bi-plus me-1\"></i>Add First Column\n              </button>\n              @if (isEdit && template?.id) {\n                <button type=\"button\" class=\"btn btn-success btn-sm\" (click)=\"addColumnWithAutoReorder()\" \n                        [disabled]=\"isLoading()\"\n                        title=\"Add column with automatic schema-based reordering\">\n                  <i class=\"bi bi-plus-circle me-1\"></i>Add with Auto-Reorder\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\n  </button>\n  <button \n    type=\"button\" \n    class=\"btn btn-primary\" \n    (click)=\"onSubmit()\"\n    [disabled]=\"editForm.invalid || isLoading()\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-check-circle me-1\"></i>\n    {{ isEdit ? 'Update' : 'Create' }} Template\n  </button>\n</div>\n", styles: [".column-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.column-row.cdk-drag-disabled{opacity:.5}.column-row.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-row.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:var(--cupcake-card-bg)}.column-row.cdk-drag-preview td{border:none!important}.column-row.cdk-drag-placeholder{opacity:0}.drag-handle{cursor:grab;color:var(--cupcake-text-muted)}.drag-handle:hover{color:var(--cupcake-text)}.drag-handle:active{cursor:grabbing}.column-row[data-column-group]{position:relative}.column-row[data-column-group]:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bs-primary)}.badge.badge-pill{border-radius:50px;font-size:.65em;padding:.25em .5em}.modal-lg{max-width:900px}.table-responsive{border-radius:.375rem;overflow:hidden}.table-sm{font-size:.875rem}.table-sm th,.table-sm td{padding:.5rem;vertical-align:middle}.text-center.py-4{background:var(--cupcake-bg-tertiary);border-radius:.375rem;margin:1rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MetadataTableTemplateEditModal, isStandalone: true, selector: "ccv-metadata-table-template-edit-modal", inputs: { template: "template", labGroups: "labGroups", isEdit: "isEdit" }, outputs: { templateSaved: "templateSaved" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-file-earmark-text me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"row\">\n      <!-- Basic Information -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-info-circle me-2\"></i>Basic Information\n        </h6>\n      </div>\n      \n      <div class=\"col-12 mb-3\">\n        <label for=\"templateName\" class=\"form-label\">Template Name *</label>\n        <input \n          type=\"text\" \n          class=\"form-control\"\n          id=\"templateName\"\n          formControlName=\"name\"\n          [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n          placeholder=\"Enter template name\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('name') }}\n        </div>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"description\" class=\"form-label\">Description</label>\n        <textarea \n          class=\"form-control\" \n          id=\"description\"\n          formControlName=\"description\"\n          rows=\"3\"\n          placeholder=\"Optional description\"></textarea>\n      </div>\n\n      <!-- Configuration -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-gear me-2\"></i>Configuration\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"labGroup\" class=\"form-label\">Lab Group</label>\n        <select \n          class=\"form-select\"\n          id=\"labGroup\"\n          formControlName=\"labGroupId\">\n          <option [ngValue]=\"null\">No Lab Group</option>\n          @for (group of labGroups; track group.id) {\n            <option [ngValue]=\"group.id\">{{ group.name }}</option>\n          }\n        </select>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <label for=\"visibility\" class=\"form-label\">Visibility</label>\n            <select \n              class=\"form-select\"\n              id=\"visibility\"\n              formControlName=\"visibility\">\n              @for (option of visibilityOptions; track option.value) {\n                <option [value]=\"option.value\">{{ option.label }}</option>\n              }\n            </select>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"form-check form-switch\">\n              <input \n                class=\"form-check-input\" \n                type=\"checkbox\" \n                id=\"isDefault\"\n                formControlName=\"isDefault\">\n              <label class=\"form-check-label\" for=\"isDefault\">\n                <i class=\"bi bi-star me-1\"></i>Default Template\n              </label>\n              <small class=\"form-text text-muted d-block\">Use as default for new projects</small>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Column Management -->\n      <div class=\"col-12 mb-3\">\n        <div class=\"d-flex justify-content-between align-items-center border-bottom pb-2\">\n          <h6 class=\"text-muted mb-0\">\n            <i class=\"bi bi-columns-gap me-2\"></i>Template Columns\n          </h6>\n          <div class=\"d-flex gap-2\">\n            <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"addColumn()\">\n              <i class=\"bi bi-plus me-1\"></i>Add Column\n            </button>\n            @if (isEdit && template?.id) {\n              <button type=\"button\" class=\"btn btn-sm btn-success\" (click)=\"addColumnWithAutoReorder()\"\n                      [disabled]=\"isLoading()\"\n                      title=\"Add column with automatic schema-based reordering\">\n                <i class=\"bi bi-plus-circle me-1\"></i>Add Column (Auto-Reorder)\n              </button>\n            }\n          </div>\n        </div>\n        @if (selectedColumnIds().size > 0) {\n          <div class=\"alert alert-info py-2 px-3 mt-2 mb-0\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <span>\n                <i class=\"bi bi-check-square me-1\"></i>\n                {{ selectedColumnIds().size }} column(s) selected\n              </span>\n              <div class=\"btn-group btn-group-sm\">\n                <button type=\"button\" class=\"btn btn-warning\" (click)=\"bulkToggleStaffOnly(true)\" title=\"Mark selected as Staff Only\" [disabled]=\"isLoading() || !isEdit || !template?.id\">\n                  <i class=\"bi bi-shield-lock me-1\"></i>Mark Staff Only\n                </button>\n                <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"bulkToggleStaffOnly(false)\" title=\"Mark selected as User Visible\" [disabled]=\"isLoading() || !isEdit || !template?.id\">\n                  <i class=\"bi bi-person me-1\"></i>Mark User Visible\n                </button>\n                <button type=\"button\" class=\"btn btn-danger\" (click)=\"bulkDeleteColumns()\" title=\"Delete selected columns\" [disabled]=\"isLoading() || !isEdit || !template?.id\">\n                  <i class=\"bi bi-trash me-1\"></i>Delete\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        @if (templateColumns().length > 0) {\n          <div class=\"table-responsive\">\n            <table class=\"table table-sm table-hover\">\n              <thead class=\"table-light\">\n                <tr>\n                  <th style=\"width: 40px;\">\n                    <input type=\"checkbox\" class=\"form-check-input\"\n                           [checked]=\"allColumnsSelected()\"\n                           [indeterminate]=\"someColumnsSelected()\"\n                           (change)=\"toggleAllColumns()\"\n                           title=\"Select all columns\">\n                  </th>\n                  <th style=\"width: 40px;\"><i class=\"bi bi-arrows-move\"></i></th>\n                  <th>Position</th>\n                  <th>Column Name</th>\n                  <th>Type</th>\n                  <th>Default Value</th>\n                  <th>Options</th>\n                  <th style=\"width: 120px;\">Actions</th>\n                </tr>\n              </thead>\n              <tbody cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" [cdkDropListData]=\"_templateColumns()\">\n                @for (column of _templateColumns(); track column.id; let i = $index) {\n                  <tr cdkDrag [cdkDragData]=\"column\" class=\"column-row\" [attr.data-column-id]=\"column.id\">\n                    <td class=\"text-center\">\n                      <input type=\"checkbox\" class=\"form-check-input\"\n                             [checked]=\"column.id && selectedColumnIds().has(column.id)\"\n                             (change)=\"column.id && toggleColumnSelection(column.id)\"\n                             (click)=\"$event.stopPropagation()\">\n                    </td>\n                    <td class=\"text-center\">\n                      <i class=\"bi bi-grip-vertical drag-handle\" cdkDragHandle></i>\n                    </td>\n                    <td>\n                      <span class=\"badge bg-secondary\">{{ i + 1 }}</span>\n                    </td>\n                    <td>\n                      <strong>{{ column.name }}</strong>\n                    </td>\n                    <td>\n                      <span class=\"badge bg-info\">{{ column.type }}</span>\n                    </td>\n                    <td>\n                      <span class=\"text-muted\">{{ column.value || '-' }}</span>\n                    </td>\n                    <td>\n                      <div class=\"d-flex gap-1\">\n                        @if (column.mandatory) {\n                          <span class=\"badge badge-pill bg-warning\" title=\"Mandatory\">\n                            <i class=\"bi bi-exclamation-circle\"></i>\n                          </span>\n                        }\n                        @if (column.hidden) {\n                          <span class=\"badge badge-pill bg-secondary\" title=\"Hidden\">\n                            <i class=\"bi bi-eye-slash\"></i>\n                          </span>\n                        }\n                        @if (column.readonly) {\n                          <span class=\"badge badge-pill bg-dark\" title=\"Read Only\">\n                            <i class=\"bi bi-lock\"></i>\n                          </span>\n                        }\n                        @if (column.staffOnly) {\n                          <span class=\"badge badge-pill bg-warning text-dark\" title=\"Staff Only\">\n                            <i class=\"bi bi-shield-lock\"></i>\n                          </span>\n                        }\n                        @if (column.ontologyType) {\n                          <span class=\"badge badge-pill bg-success\" title=\"Has Ontology\">\n                            <i class=\"bi bi-tags\"></i>\n                          </span>\n                        }\n                      </div>\n                    </td>\n                    <td>\n                      <div class=\"btn-group btn-group-sm\" role=\"group\">\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-primary\" \n                          (click)=\"editColumn(column)\"\n                          title=\"Edit column\">\n                          <i class=\"bi bi-pencil\"></i>\n                        </button>\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-info\" \n                          (click)=\"duplicateColumn(column)\"\n                          title=\"Duplicate column\">\n                          <i class=\"bi bi-copy\"></i>\n                        </button>\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-danger\" \n                          (click)=\"removeColumn(column)\"\n                          title=\"Remove column\">\n                          <i class=\"bi bi-trash\"></i>\n                        </button>\n                      </div>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n        } @else {\n          <div class=\"text-center py-4 text-muted\">\n            <i class=\"bi bi-columns-gap fs-1 mb-2\"></i>\n            <p>No columns in this template yet.</p>\n            <div class=\"d-flex gap-2 justify-content-center\">\n              <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addColumn()\">\n                <i class=\"bi bi-plus me-1\"></i>Add First Column\n              </button>\n              @if (isEdit && template?.id) {\n                <button type=\"button\" class=\"btn btn-success btn-sm\" (click)=\"addColumnWithAutoReorder()\" \n                        [disabled]=\"isLoading()\"\n                        title=\"Add column with automatic schema-based reordering\">\n                  <i class=\"bi bi-plus-circle me-1\"></i>Add with Auto-Reorder\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\n  </button>\n  <button \n    type=\"button\" \n    class=\"btn btn-primary\" \n    (click)=\"onSubmit()\"\n    [disabled]=\"editForm.invalid || isLoading()\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-check-circle me-1\"></i>\n    {{ isEdit ? 'Update' : 'Create' }} Template\n  </button>\n</div>\n", styles: [".column-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.column-row.cdk-drag-disabled{opacity:.5}.column-row.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-row.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:var(--cupcake-card-bg)}.column-row.cdk-drag-preview td{border:none!important}.column-row.cdk-drag-placeholder{opacity:0}.drag-handle{cursor:grab;color:var(--cupcake-text-muted)}.drag-handle:hover{color:var(--cupcake-text)}.drag-handle:active{cursor:grabbing}.column-row[data-column-group]{position:relative}.column-row[data-column-group]:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bs-primary)}.badge.badge-pill{border-radius:50px;font-size:.65em;padding:.25em .5em}.modal-lg{max-width:900px}.table-responsive{border-radius:.375rem;overflow:hidden}.table-sm{font-size:.875rem}.table-sm th,.table-sm td{padding:.5rem;vertical-align:middle}.text-center.py-4{background:var(--cupcake-bg-tertiary);border-radius:.375rem;margin:1rem 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataTableTemplateEditModal, decorators: [{
             type: Component,
-            args: [{ selector: 'ccv-metadata-table-template-edit-modal', imports: [CommonModule, ReactiveFormsModule, NgbModule, DragDropModule], template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-file-earmark-text me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"row\">\n      <!-- Basic Information -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-info-circle me-2\"></i>Basic Information\n        </h6>\n      </div>\n      \n      <div class=\"col-12 mb-3\">\n        <label for=\"templateName\" class=\"form-label\">Template Name *</label>\n        <input \n          type=\"text\" \n          class=\"form-control\"\n          id=\"templateName\"\n          formControlName=\"name\"\n          [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n          placeholder=\"Enter template name\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('name') }}\n        </div>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"description\" class=\"form-label\">Description</label>\n        <textarea \n          class=\"form-control\" \n          id=\"description\"\n          formControlName=\"description\"\n          rows=\"3\"\n          placeholder=\"Optional description\"></textarea>\n      </div>\n\n      <!-- Configuration -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-gear me-2\"></i>Configuration\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"labGroup\" class=\"form-label\">Lab Group</label>\n        <select \n          class=\"form-select\"\n          id=\"labGroup\"\n          formControlName=\"labGroupId\">\n          <option [ngValue]=\"null\">No Lab Group</option>\n          @for (group of labGroups; track group.id) {\n            <option [ngValue]=\"group.id\">{{ group.name }}</option>\n          }\n        </select>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <label for=\"visibility\" class=\"form-label\">Visibility</label>\n            <select \n              class=\"form-select\"\n              id=\"visibility\"\n              formControlName=\"visibility\">\n              @for (option of visibilityOptions; track option.value) {\n                <option [value]=\"option.value\">{{ option.label }}</option>\n              }\n            </select>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"form-check form-switch\">\n              <input \n                class=\"form-check-input\" \n                type=\"checkbox\" \n                id=\"isDefault\"\n                formControlName=\"isDefault\">\n              <label class=\"form-check-label\" for=\"isDefault\">\n                <i class=\"bi bi-star me-1\"></i>Default Template\n              </label>\n              <small class=\"form-text text-muted d-block\">Use as default for new projects</small>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Column Management -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-columns-gap me-2\"></i>Template Columns\n          <button type=\"button\" class=\"btn btn-sm btn-outline-primary ms-2\" (click)=\"addColumn()\">\n            <i class=\"bi bi-plus me-1\"></i>Add Column\n          </button>\n          @if (isEdit && template?.id) {\n            <button type=\"button\" class=\"btn btn-sm btn-success ms-2\" (click)=\"addColumnWithAutoReorder()\" \n                    [disabled]=\"isLoading()\"\n                    title=\"Add column with automatic schema-based reordering\">\n              <i class=\"bi bi-plus-circle me-1\"></i>Add Column (Auto-Reorder)\n            </button>\n          }\n        </h6>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        @if (templateColumns().length > 0) {\n          <div class=\"table-responsive\">\n            <table class=\"table table-sm table-hover\">\n              <thead class=\"table-light\">\n                <tr>\n                  <th style=\"width: 40px;\"><i class=\"bi bi-arrows-move\"></i></th>\n                  <th>Position</th>\n                  <th>Column Name</th>\n                  <th>Type</th>\n                  <th>Default Value</th>\n                  <th>Options</th>\n                  <th style=\"width: 120px;\">Actions</th>\n                </tr>\n              </thead>\n              <tbody cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" [cdkDropListData]=\"_templateColumns()\">\n                @for (column of _templateColumns(); track column.id; let i = $index) {\n                  <tr cdkDrag [cdkDragData]=\"column\" class=\"column-row\" [attr.data-column-id]=\"column.id\">\n                    <td class=\"text-center\">\n                      <i class=\"bi bi-grip-vertical drag-handle\" cdkDragHandle></i>\n                    </td>\n                    <td>\n                      <span class=\"badge bg-secondary\">{{ i + 1 }}</span>\n                    </td>\n                    <td>\n                      <strong>{{ column.name }}</strong>\n                    </td>\n                    <td>\n                      <span class=\"badge bg-info\">{{ column.type }}</span>\n                    </td>\n                    <td>\n                      <span class=\"text-muted\">{{ column.value || '-' }}</span>\n                    </td>\n                    <td>\n                      <div class=\"d-flex gap-1\">\n                        @if (column.mandatory) {\n                          <span class=\"badge badge-pill bg-warning\" title=\"Mandatory\">\n                            <i class=\"bi bi-exclamation-circle\"></i>\n                          </span>\n                        }\n                        @if (column.hidden) {\n                          <span class=\"badge badge-pill bg-secondary\" title=\"Hidden\">\n                            <i class=\"bi bi-eye-slash\"></i>\n                          </span>\n                        }\n                        @if (column.readonly) {\n                          <span class=\"badge badge-pill bg-dark\" title=\"Read Only\">\n                            <i class=\"bi bi-lock\"></i>\n                          </span>\n                        }\n                        @if (column.ontologyType) {\n                          <span class=\"badge badge-pill bg-success\" title=\"Has Ontology\">\n                            <i class=\"bi bi-tags\"></i>\n                          </span>\n                        }\n                      </div>\n                    </td>\n                    <td>\n                      <div class=\"btn-group btn-group-sm\" role=\"group\">\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-primary\" \n                          (click)=\"editColumn(column)\"\n                          title=\"Edit column\">\n                          <i class=\"bi bi-pencil\"></i>\n                        </button>\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-info\" \n                          (click)=\"duplicateColumn(column)\"\n                          title=\"Duplicate column\">\n                          <i class=\"bi bi-copy\"></i>\n                        </button>\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-danger\" \n                          (click)=\"removeColumn(column)\"\n                          title=\"Remove column\">\n                          <i class=\"bi bi-trash\"></i>\n                        </button>\n                      </div>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n        } @else {\n          <div class=\"text-center py-4 text-muted\">\n            <i class=\"bi bi-columns-gap fs-1 mb-2\"></i>\n            <p>No columns in this template yet.</p>\n            <div class=\"d-flex gap-2 justify-content-center\">\n              <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addColumn()\">\n                <i class=\"bi bi-plus me-1\"></i>Add First Column\n              </button>\n              @if (isEdit && template?.id) {\n                <button type=\"button\" class=\"btn btn-success btn-sm\" (click)=\"addColumnWithAutoReorder()\" \n                        [disabled]=\"isLoading()\"\n                        title=\"Add column with automatic schema-based reordering\">\n                  <i class=\"bi bi-plus-circle me-1\"></i>Add with Auto-Reorder\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\n  </button>\n  <button \n    type=\"button\" \n    class=\"btn btn-primary\" \n    (click)=\"onSubmit()\"\n    [disabled]=\"editForm.invalid || isLoading()\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-check-circle me-1\"></i>\n    {{ isEdit ? 'Update' : 'Create' }} Template\n  </button>\n</div>\n", styles: [".column-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.column-row.cdk-drag-disabled{opacity:.5}.column-row.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-row.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:var(--cupcake-card-bg)}.column-row.cdk-drag-preview td{border:none!important}.column-row.cdk-drag-placeholder{opacity:0}.drag-handle{cursor:grab;color:var(--cupcake-text-muted)}.drag-handle:hover{color:var(--cupcake-text)}.drag-handle:active{cursor:grabbing}.column-row[data-column-group]{position:relative}.column-row[data-column-group]:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bs-primary)}.badge.badge-pill{border-radius:50px;font-size:.65em;padding:.25em .5em}.modal-lg{max-width:900px}.table-responsive{border-radius:.375rem;overflow:hidden}.table-sm{font-size:.875rem}.table-sm th,.table-sm td{padding:.5rem;vertical-align:middle}.text-center.py-4{background:var(--cupcake-bg-tertiary);border-radius:.375rem;margin:1rem 0}\n"] }]
+            args: [{ selector: 'ccv-metadata-table-template-edit-modal', imports: [CommonModule, ReactiveFormsModule, NgbModule, DragDropModule], template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-file-earmark-text me-2\"></i>{{ title }}\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"onCancel()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"editForm\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"row\">\n      <!-- Basic Information -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-info-circle me-2\"></i>Basic Information\n        </h6>\n      </div>\n      \n      <div class=\"col-12 mb-3\">\n        <label for=\"templateName\" class=\"form-label\">Template Name *</label>\n        <input \n          type=\"text\" \n          class=\"form-control\"\n          id=\"templateName\"\n          formControlName=\"name\"\n          [class.is-invalid]=\"editForm.get('name')?.invalid && editForm.get('name')?.touched\"\n          placeholder=\"Enter template name\">\n        <div class=\"invalid-feedback\">\n          {{ getFieldError('name') }}\n        </div>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <label for=\"description\" class=\"form-label\">Description</label>\n        <textarea \n          class=\"form-control\" \n          id=\"description\"\n          formControlName=\"description\"\n          rows=\"3\"\n          placeholder=\"Optional description\"></textarea>\n      </div>\n\n      <!-- Configuration -->\n      <div class=\"col-12 mb-3\">\n        <h6 class=\"text-muted border-bottom pb-2\">\n          <i class=\"bi bi-gear me-2\"></i>Configuration\n        </h6>\n      </div>\n\n      <div class=\"col-md-6 mb-3\">\n        <label for=\"labGroup\" class=\"form-label\">Lab Group</label>\n        <select \n          class=\"form-select\"\n          id=\"labGroup\"\n          formControlName=\"labGroupId\">\n          <option [ngValue]=\"null\">No Lab Group</option>\n          @for (group of labGroups; track group.id) {\n            <option [ngValue]=\"group.id\">{{ group.name }}</option>\n          }\n        </select>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <label for=\"visibility\" class=\"form-label\">Visibility</label>\n            <select \n              class=\"form-select\"\n              id=\"visibility\"\n              formControlName=\"visibility\">\n              @for (option of visibilityOptions; track option.value) {\n                <option [value]=\"option.value\">{{ option.label }}</option>\n              }\n            </select>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"form-check form-switch\">\n              <input \n                class=\"form-check-input\" \n                type=\"checkbox\" \n                id=\"isDefault\"\n                formControlName=\"isDefault\">\n              <label class=\"form-check-label\" for=\"isDefault\">\n                <i class=\"bi bi-star me-1\"></i>Default Template\n              </label>\n              <small class=\"form-text text-muted d-block\">Use as default for new projects</small>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Column Management -->\n      <div class=\"col-12 mb-3\">\n        <div class=\"d-flex justify-content-between align-items-center border-bottom pb-2\">\n          <h6 class=\"text-muted mb-0\">\n            <i class=\"bi bi-columns-gap me-2\"></i>Template Columns\n          </h6>\n          <div class=\"d-flex gap-2\">\n            <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"addColumn()\">\n              <i class=\"bi bi-plus me-1\"></i>Add Column\n            </button>\n            @if (isEdit && template?.id) {\n              <button type=\"button\" class=\"btn btn-sm btn-success\" (click)=\"addColumnWithAutoReorder()\"\n                      [disabled]=\"isLoading()\"\n                      title=\"Add column with automatic schema-based reordering\">\n                <i class=\"bi bi-plus-circle me-1\"></i>Add Column (Auto-Reorder)\n              </button>\n            }\n          </div>\n        </div>\n        @if (selectedColumnIds().size > 0) {\n          <div class=\"alert alert-info py-2 px-3 mt-2 mb-0\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <span>\n                <i class=\"bi bi-check-square me-1\"></i>\n                {{ selectedColumnIds().size }} column(s) selected\n              </span>\n              <div class=\"btn-group btn-group-sm\">\n                <button type=\"button\" class=\"btn btn-warning\" (click)=\"bulkToggleStaffOnly(true)\" title=\"Mark selected as Staff Only\" [disabled]=\"isLoading() || !isEdit || !template?.id\">\n                  <i class=\"bi bi-shield-lock me-1\"></i>Mark Staff Only\n                </button>\n                <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"bulkToggleStaffOnly(false)\" title=\"Mark selected as User Visible\" [disabled]=\"isLoading() || !isEdit || !template?.id\">\n                  <i class=\"bi bi-person me-1\"></i>Mark User Visible\n                </button>\n                <button type=\"button\" class=\"btn btn-danger\" (click)=\"bulkDeleteColumns()\" title=\"Delete selected columns\" [disabled]=\"isLoading() || !isEdit || !template?.id\">\n                  <i class=\"bi bi-trash me-1\"></i>Delete\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        @if (templateColumns().length > 0) {\n          <div class=\"table-responsive\">\n            <table class=\"table table-sm table-hover\">\n              <thead class=\"table-light\">\n                <tr>\n                  <th style=\"width: 40px;\">\n                    <input type=\"checkbox\" class=\"form-check-input\"\n                           [checked]=\"allColumnsSelected()\"\n                           [indeterminate]=\"someColumnsSelected()\"\n                           (change)=\"toggleAllColumns()\"\n                           title=\"Select all columns\">\n                  </th>\n                  <th style=\"width: 40px;\"><i class=\"bi bi-arrows-move\"></i></th>\n                  <th>Position</th>\n                  <th>Column Name</th>\n                  <th>Type</th>\n                  <th>Default Value</th>\n                  <th>Options</th>\n                  <th style=\"width: 120px;\">Actions</th>\n                </tr>\n              </thead>\n              <tbody cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" [cdkDropListData]=\"_templateColumns()\">\n                @for (column of _templateColumns(); track column.id; let i = $index) {\n                  <tr cdkDrag [cdkDragData]=\"column\" class=\"column-row\" [attr.data-column-id]=\"column.id\">\n                    <td class=\"text-center\">\n                      <input type=\"checkbox\" class=\"form-check-input\"\n                             [checked]=\"column.id && selectedColumnIds().has(column.id)\"\n                             (change)=\"column.id && toggleColumnSelection(column.id)\"\n                             (click)=\"$event.stopPropagation()\">\n                    </td>\n                    <td class=\"text-center\">\n                      <i class=\"bi bi-grip-vertical drag-handle\" cdkDragHandle></i>\n                    </td>\n                    <td>\n                      <span class=\"badge bg-secondary\">{{ i + 1 }}</span>\n                    </td>\n                    <td>\n                      <strong>{{ column.name }}</strong>\n                    </td>\n                    <td>\n                      <span class=\"badge bg-info\">{{ column.type }}</span>\n                    </td>\n                    <td>\n                      <span class=\"text-muted\">{{ column.value || '-' }}</span>\n                    </td>\n                    <td>\n                      <div class=\"d-flex gap-1\">\n                        @if (column.mandatory) {\n                          <span class=\"badge badge-pill bg-warning\" title=\"Mandatory\">\n                            <i class=\"bi bi-exclamation-circle\"></i>\n                          </span>\n                        }\n                        @if (column.hidden) {\n                          <span class=\"badge badge-pill bg-secondary\" title=\"Hidden\">\n                            <i class=\"bi bi-eye-slash\"></i>\n                          </span>\n                        }\n                        @if (column.readonly) {\n                          <span class=\"badge badge-pill bg-dark\" title=\"Read Only\">\n                            <i class=\"bi bi-lock\"></i>\n                          </span>\n                        }\n                        @if (column.staffOnly) {\n                          <span class=\"badge badge-pill bg-warning text-dark\" title=\"Staff Only\">\n                            <i class=\"bi bi-shield-lock\"></i>\n                          </span>\n                        }\n                        @if (column.ontologyType) {\n                          <span class=\"badge badge-pill bg-success\" title=\"Has Ontology\">\n                            <i class=\"bi bi-tags\"></i>\n                          </span>\n                        }\n                      </div>\n                    </td>\n                    <td>\n                      <div class=\"btn-group btn-group-sm\" role=\"group\">\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-primary\" \n                          (click)=\"editColumn(column)\"\n                          title=\"Edit column\">\n                          <i class=\"bi bi-pencil\"></i>\n                        </button>\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-info\" \n                          (click)=\"duplicateColumn(column)\"\n                          title=\"Duplicate column\">\n                          <i class=\"bi bi-copy\"></i>\n                        </button>\n                        <button \n                          type=\"button\"\n                          class=\"btn btn-outline-danger\" \n                          (click)=\"removeColumn(column)\"\n                          title=\"Remove column\">\n                          <i class=\"bi bi-trash\"></i>\n                        </button>\n                      </div>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n        } @else {\n          <div class=\"text-center py-4 text-muted\">\n            <i class=\"bi bi-columns-gap fs-1 mb-2\"></i>\n            <p>No columns in this template yet.</p>\n            <div class=\"d-flex gap-2 justify-content-center\">\n              <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addColumn()\">\n                <i class=\"bi bi-plus me-1\"></i>Add First Column\n              </button>\n              @if (isEdit && template?.id) {\n                <button type=\"button\" class=\"btn btn-success btn-sm\" (click)=\"addColumnWithAutoReorder()\" \n                        [disabled]=\"isLoading()\"\n                        title=\"Add column with automatic schema-based reordering\">\n                  <i class=\"bi bi-plus-circle me-1\"></i>Add with Auto-Reorder\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"onCancel()\">\n    <i class=\"bi bi-x-circle me-1\"></i>Cancel\n  </button>\n  <button \n    type=\"button\" \n    class=\"btn btn-primary\" \n    (click)=\"onSubmit()\"\n    [disabled]=\"editForm.invalid || isLoading()\">\n    @if (isLoading()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-check-circle me-1\"></i>\n    {{ isEdit ? 'Update' : 'Create' }} Template\n  </button>\n</div>\n", styles: [".column-row{transition:transform .2s cubic-bezier(0,0,.2,1)}.column-row.cdk-drag-disabled{opacity:.5}.column-row.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-row.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:var(--cupcake-card-bg)}.column-row.cdk-drag-preview td{border:none!important}.column-row.cdk-drag-placeholder{opacity:0}.drag-handle{cursor:grab;color:var(--cupcake-text-muted)}.drag-handle:hover{color:var(--cupcake-text)}.drag-handle:active{cursor:grabbing}.column-row[data-column-group]{position:relative}.column-row[data-column-group]:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bs-primary)}.badge.badge-pill{border-radius:50px;font-size:.65em;padding:.25em .5em}.modal-lg{max-width:900px}.table-responsive{border-radius:.375rem;overflow:hidden}.table-sm{font-size:.875rem}.table-sm th,.table-sm td{padding:.5rem;vertical-align:middle}.text-center.py-4{background:var(--cupcake-bg-tertiary);border-radius:.375rem;margin:1rem 0}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }, { type: i2.NgbModal }, { type: MetadataTableTemplateService }, { type: i3.ToastService }], propDecorators: { template: [{
                 type: Input
             }], labGroups: [{
@@ -8789,6 +8914,47 @@ class MetadataTableDetails {
             }
         });
     }
+    autofillColumnValues(column) {
+        const table = this.table();
+        if (!table || !table.canEdit || !column.id)
+            return;
+        const config = {
+            column: column,
+            metadataTableId: table.id,
+            sampleCount: table.sampleCount,
+            selectedSampleIndices: []
+        };
+        const modalRef = this.modalService.open(MetadataColumnAutofillModal, {
+            size: 'lg',
+            backdrop: 'static'
+        });
+        modalRef.componentInstance.config = config;
+        modalRef.result.then((result) => {
+            const updates = result.values.map(v => ({
+                sampleIndex: v.sampleIndex,
+                value: v.value
+            }));
+            this.metadataColumnService.bulkUpdateSampleValues(column.id, updates).subscribe({
+                next: (response) => {
+                    this.loadTable(table.id);
+                    if (response.failedCount === 0) {
+                        this.toastService.success(`Auto-filled ${response.updatedCount} sample(s) for "${column.name}"`);
+                    }
+                    else {
+                        this.toastService.warning(`Auto-filled ${response.updatedCount} sample(s), ${response.failedCount} failed for "${column.name}"`);
+                        if (response.failedUpdates) {
+                            console.error('Failed updates:', response.failedUpdates);
+                        }
+                    }
+                },
+                error: (error) => {
+                    console.error('Error auto-filling column values:', error);
+                    this.toastService.error('Failed to auto-fill column values');
+                }
+            });
+        }, () => {
+        });
+    }
     // View column details
     viewColumnDetails(column) {
         // For now, we'll show an alert with column details
@@ -9123,11 +9289,11 @@ class MetadataTableDetails {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataTableDetails, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: MetadataTableService }, { token: AsyncExportService }, { token: ChunkedUploadService }, { token: SamplePoolService }, { token: MetadataColumnService }, { token: i3.ToastService }, { token: AsyncTaskUIService }, { token: i2.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MetadataTableDetails, isStandalone: true, selector: "ccv-metadata-table-details", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "excelInput", first: true, predicate: ["excelInput"], descendants: true }], ngImport: i0, template: "<div class=\"metadata-table-details-container\">\n  <!-- Header Section with Breadcrumbs -->\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\n    <div class=\"container-fluid\">\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\n        <div class=\"d-flex align-items-center\">\n          <!-- Breadcrumb Navigation -->\n          <nav aria-label=\"breadcrumb\" class=\"me-3\">\n            <ol class=\"breadcrumb mb-0\">\n              <li class=\"breadcrumb-item\">\n                <a routerLink=\"/metadata-tables\" class=\"text-decoration-none\">\n                  <i class=\"bi bi-table me-1\"></i>Metadata Tables\n                </a>\n              </li>\n              <li class=\"breadcrumb-item active\" aria-current=\"page\">\n                @if (table()) {\n                  {{ table()!.name }}\n                } @else {\n                  Table Details\n                }\n              </li>\n            </ol>\n          </nav>\n\n          <!-- Table Status Badge -->\n          @if (table()) {\n            <span class=\"badge ms-2\" [class]=\"getTableStatusClass()\">\n              {{ getTableStatusBadge() }}\n            </span>\n          }\n        </div>\n\n        <!-- Action Buttons -->\n        <div class=\"d-flex gap-2\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary btn-sm\"\n            (click)=\"navigateBack()\"\n            title=\"Back to Tables\">\n            <i class=\"bi bi-arrow-left me-1\"></i>Back\n          </button>\n\n          <!-- View Mode Toggle -->\n          @if (hasColumns()) {\n            <div class=\"btn-group\" role=\"group\">\n              <button\n                type=\"button\"\n                class=\"btn btn-sm\"\n                [class]=\"viewMode() === 'list' ? 'btn-primary' : 'btn-outline-primary'\"\n                (click)=\"switchToListMode()\"\n                title=\"Column List View\">\n                <i class=\"bi bi-list-ul me-1\"></i>List\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-sm\"\n                [class]=\"viewMode() === 'table' ? 'btn-primary' : 'btn-outline-primary'\"\n                (click)=\"switchToTableMode()\"\n                title=\"Table Data View\">\n                <i class=\"bi bi-table me-1\"></i>Table\n              </button>\n            </div>\n          }\n          <!-- Import Dropdown -->\n          @if (table() && table()!.canEdit) {\n            <div class=\"btn-group\" ngbDropdown>\n              <!-- Hidden file inputs -->\n              <input\n                #fileInput\n                type=\"file\"\n                accept=\".txt,.tsv\"\n                style=\"display: none;\"\n                (change)=\"importSdrf($event)\">\n              <input\n                #excelInput\n                type=\"file\"\n                accept=\".xlsx,.xls\"\n                style=\"display: none;\"\n                (change)=\"importExcel($event)\">\n              \n              <button\n                type=\"button\"\n                class=\"btn btn-outline-success btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\"\n                title=\"Import Data\">\n                <i class=\"bi bi-upload me-1\"></i>Import\n              </button>\n              <div class=\"dropdown-menu\" ngbDropdownMenu>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"triggerFileInput(); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-text me-2\"></i>Import SDRF File\n                </a>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"triggerExcelInput(); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-spreadsheet me-2\"></i>Import Excel Template\n                </a>\n              </div>\n            </div>\n          }\n\n          <!-- Export Dropdown -->\n          @if (table() && hasColumns()) {\n            <div class=\"btn-group\" ngbDropdown>\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-info btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\"\n                title=\"Export Table\">\n                <i class=\"bi bi-download me-1\"></i>Export\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"exportToSdrf('sdrf'); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-text me-2\"></i>Export as SDRF\n                </a>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"exportToSdrf('excel'); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-spreadsheet me-2\"></i>Export as Excel\n                </a>\n              </div>\n            </div>\n          }\n\n          <!-- Edit Button -->\n          @if (table() && table()!.canEdit) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-primary btn-sm\"\n              (click)=\"editTable()\"\n              [disabled]=\"isLoading()\"\n              title=\"Edit Table\">\n              <i class=\"bi bi-pencil me-1\"></i>Edit\n            </button>\n          }\n\n          <!-- Reorder Columns Button -->\n          @if (table() && table()!.canEdit && hasColumns()) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-warning btn-sm\"\n              (click)=\"reorderColumns()\"\n              [disabled]=\"isLoading()\"\n              title=\"Reorder Columns by Schema\">\n              <i class=\"bi bi-arrows-move me-1\"></i>Reorder\n            </button>\n          }\n\n          <!-- Create Pool Button -->\n          @if (table() && table()!.canEdit && hasColumns()) {\n            <button\n              type=\"button\"\n              class=\"btn btn-success btn-sm\"\n              (click)=\"createPool()\"\n              [disabled]=\"isLoading()\"\n              title=\"Create Sample Pool\">\n              <i class=\"bi bi-plus-circle me-1\"></i>Create Pool\n            </button>\n          }\n\n          <!-- More Actions Dropdown -->\n          @if (table() && table()!.canEdit) {\n            <div class=\"btn-group\" ngbDropdown>\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-danger btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\">\n                <i class=\"bi bi-three-dots-vertical\"></i>\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n                <a class=\"dropdown-item text-danger\" href=\"#\" (click)=\"deleteTable(); $event.preventDefault()\">\n                  <i class=\"bi bi-trash me-2\"></i>Delete Table\n                </a>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <!-- Loading Spinner -->\n  @if (isLoading()) {\n    <div class=\"d-flex justify-content-center align-items-center\" style=\"height: 400px;\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n  }\n\n  <!-- Table Details Content -->\n  @if (table() && !isLoading()) {\n    <div class=\"table-details-content p-4\">\n\n      <!-- Table Information Card -->\n      <div class=\"card mb-4\">\n        <div class=\"card-header\">\n          <div class=\"d-flex align-items-center justify-content-between\">\n            <h5 class=\"mb-0\">\n              <i class=\"bi bi-info-circle me-2\"></i>Table Information\n            </h5>\n            <small class=\"text-muted\">\n              Created {{ table()!.createdAt | date:'medium' }}\n            </small>\n          </div>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"row\">\n            <div class=\"col-md-8\">\n              <h3 class=\"fw-bold mb-3\">{{ table()!.name }}</h3>\n              @if (table()!.description) {\n                <p class=\"text-muted mb-3\">{{ table()!.description }}</p>\n              }\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-hash text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Sample Count:</span>\n                    <span class=\"badge bg-primary\">{{ table()!.sampleCount }}</span>\n                  </div>\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-columns-gap text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Columns:</span>\n                    <span class=\"badge bg-info\">{{ table()!.columns?.length || 0 }}</span>\n                  </div>\n                </div>\n                <div class=\"col-md-6\">\n                  @if (table()!.ownerUsername) {\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <i class=\"bi bi-person text-muted me-2\"></i>\n                      <span class=\"fw-semibold me-2\">Owner:</span>\n                      <span>{{ table()!.ownerUsername }}</span>\n                    </div>\n                  }\n                  @if (table()!.labGroupName) {\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <i class=\"bi bi-people text-muted me-2\"></i>\n                      <span class=\"fw-semibold me-2\">Lab Group:</span>\n                      <span>{{ table()!.labGroupName }}</span>\n                    </div>\n                  }\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-tag text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Version:</span>\n                    <span class=\"badge bg-light text-dark\">{{ table()!.version || 'v1.0' }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-md-4 text-end\">\n              <div class=\"d-flex flex-column gap-2\">\n                @if (table()!.isLocked) {\n                  <span class=\"badge bg-warning\">\n                    <i class=\"bi bi-lock me-1\"></i>Locked\n                  </span>\n                }\n                @if (table()!.isPublished) {\n                  <span class=\"badge bg-success\">\n                    <i class=\"bi bi-cloud-check me-1\"></i>Published\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Sample Pool Table -->\n      @if (viewMode() === 'table' && hasPools()) {\n        <div class=\"card mb-4\">\n          <div class=\"card-header\">\n            <h5 class=\"mb-0\">\n              <i class=\"bi bi-layers me-2\"></i>Sample Pool Table\n              <span class=\"badge bg-warning ms-2\">{{ sortedPools().length }} pools</span>\n            </h5>\n          </div>\n          <div class=\"card-body p-0\">\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead class=\"table-light\">\n                  <tr>\n                    <th scope=\"col\" style=\"width: 80px;\" class=\"bg-secondary bg-opacity-10 text-secondary\">Pool</th>\n                    @for (column of sortedColumns(); track column.id) {\n                      <th scope=\"col\" [class]=\"getColumnHeaderClass(column)\" [title]=\"column.name\">\n                        <div class=\"header-cell d-flex justify-content-between align-items-center\">\n                          <span>{{ getShortColumnName(column) }}</span>\n                          @if (table()!.canEdit) {\n                            <div class=\"header-actions\">\n                              <button\n                                type=\"button\"\n                                class=\"btn btn-sm btn-outline-primary header-edit-btn me-1\"\n                                (click)=\"editColumnValue(column)\"\n                                [title]=\"'Edit default value for ' + column.name\">\n                                <i class=\"bi bi-pencil\"></i>\n                              </button>\n                            </div>\n                          }\n                        </div>\n                      </th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (poolRow of poolTableRows(); track poolRow._poolId) {\n                    <tr class=\"pool-row\" [class.editable]=\"table()!.canEdit\">\n                      <td class=\"text-muted fw-semibold\" \n                          [class.clickable]=\"table()!.canEdit\"\n                          (click)=\"table()!.canEdit ? editPool(poolRow._poolData) : null\"\n                          [title]=\"table()!.canEdit ? 'Click to edit pool: ' + poolRow._poolName : poolRow._poolName\">\n                        <i class=\"bi bi-layers me-2\"></i>{{ poolRow._poolName }}\n                        @if (table()!.canEdit) {\n                          <i class=\"bi bi-pencil-square ms-1 text-primary\" style=\"font-size: 0.8em;\"></i>\n                        }\n                      </td>\n                      @for (column of sortedColumns(); track column.id) {\n                        <td\n                          class=\"pool-cell\"\n                          [class.opacity-50]=\"column.hidden\"\n                          [attr.data-pool-id]=\"poolRow._poolId\"\n                          [attr.data-column-id]=\"column.id\"\n                          (click)=\"table()!.canEdit ? editPoolColumnValue(poolRow._poolData, column) : null\"\n                          [title]=\"table()!.canEdit ? 'Click to edit ' + column.name + ' for pool ' + poolRow._poolName : ''\">\n                          {{ poolRow['col_' + column.id] || '-' }}\n                        </td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Columns/Table Section -->\n      <div class=\"card\">\n        <div class=\"card-header\">\n          <div class=\"d-flex align-items-center justify-content-between\">\n            <h5 class=\"mb-0\">\n              @if (viewMode() === 'list') {\n                <i class=\"bi bi-list-columns me-2\"></i>Table Columns\n              } @else {\n                <i class=\"bi bi-table me-2\"></i>Table Data\n              }\n            </h5>\n            \n            <!-- Column Filter -->\n            @if (hasColumns()) {\n              <div class=\"d-flex align-items-center me-3\">\n                <div class=\"input-group input-group-sm\" style=\"width: 250px;\">\n                  <span class=\"input-group-text\">\n                    <i class=\"bi bi-funnel text-muted\"></i>\n                  </span>\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    placeholder=\"Filter columns...\"\n                    [value]=\"columnFilter()\"\n                    (input)=\"onColumnFilterChange($any($event.target).value)\">\n                  @if (columnFilter()) {\n                    <button\n                      type=\"button\"\n                      class=\"btn btn-outline-secondary\"\n                      (click)=\"clearColumnFilter()\"\n                      title=\"Clear filter\">\n                      <i class=\"bi bi-x\"></i>\n                    </button>\n                  }\n                </div>\n                @if (columnFilter()) {\n                  <small class=\"text-muted ms-2\">\n                    {{ filteredColumnCount }}/{{ totalColumnCount }}\n                  </small>\n                }\n              </div>\n            }\n            \n            <div class=\"d-flex gap-2 align-items-center\">\n              @if (viewMode() === 'list') {\n                <span class=\"badge bg-primary\">{{ sortedColumns().length }} columns</span>\n                @if (table() && table()!.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-success btn-sm\"\n                    (click)=\"openAddColumnModal()\"\n                    [disabled]=\"isLoading()\"\n                    title=\"Add new column with automatic reordering\">\n                    <i class=\"bi bi-plus-circle me-1\"></i>Add Column\n                  </button>\n                }\n                @if (table() && table()!.canEdit && sortedColumns().length === 0) {\n                  <small class=\"text-muted\">Import SDRF to add columns</small>\n                }\n              } @else {\n                <span class=\"badge bg-info\">{{ tableRows().length }} samples</span>\n                @if (hasPools()) {\n                  <span class=\"badge bg-warning\">{{ sortedPools().length }} pools</span>\n                }\n                <span class=\"badge bg-primary\">{{ sortedColumns().length }} columns</span>\n                @if (table() && table()!.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-success btn-sm\"\n                    (click)=\"openAddColumnModal()\"\n                    [disabled]=\"isLoading()\"\n                    title=\"Add new column with automatic reordering\">\n                    <i class=\"bi bi-plus-circle me-1\"></i>Add Column\n                  </button>\n                }\n              }\n            </div>\n          </div>\n        </div>\n\n        @if (hasColumns()) {\n          <!-- List Mode: Column Definitions -->\n          @if (viewMode() === 'list') {\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead>\n                  <tr>\n                    <th scope=\"col\" style=\"width: 40px;\">\n                      @if (table()!.canEdit) {\n                        <i class=\"bi bi-arrows-move text-muted\" title=\"Drag to reorder\"></i>\n                      }\n                    </th>\n                    <th scope=\"col\" style=\"width: 60px;\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('position')\"\n                        [class.sorted]=\"isSorted('position')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>#</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('position')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('name')\"\n                        [class.sorted]=\"isSorted('name')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Column Name</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('name')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('type')\"\n                        [class.sorted]=\"isSorted('type')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Type</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('type')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('value')\"\n                        [class.sorted]=\"isSorted('value')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Value</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('value')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\">Properties</th>\n                    <th scope=\"col\" style=\"width: 100px;\">Actions</th>\n                  </tr>\n                </thead>\n                <tbody cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" [cdkDropListData]=\"dragColumnsForList()\">\n                  @for (column of dragColumnsForList(); track column.id) {\n                    <tr cdkDrag [cdkDragData]=\"column\" [cdkDragDisabled]=\"!table()!.canEdit\">\n                      <td class=\"text-center\">\n                        @if (table()!.canEdit) {\n                          <i class=\"bi bi-grip-vertical drag-handle\" cdkDragHandle></i>\n                        }\n                      </td>\n                      <td class=\"text-muted fw-semibold\">\n                        {{ (column.columnPosition || 0) + 1 }}\n                      </td>\n                      <td>\n                        <div class=\"d-flex align-items-center\">\n                          <i class=\"me-2\" [class]=\"getColumnTypeIcon(column) + ' ' + getColumnTypeClass(column)\"></i>\n                          <span class=\"fw-semibold\">{{ column.name }}</span>\n                        </div>\n                      </td>\n                      <td>\n                        <span class=\"badge bg-light text-dark\">{{ column.type }}</span>\n                      </td>\n                      <td>\n                        <div>\n                          <!-- Default Value -->\n                          <div class=\"fw-semibold\">{{ getColumnValueDisplay(column) }}</div>\n\n                          <!-- Sample-specific Modifiers -->\n                          @if (hasModifiers(column)) {\n                            <div class=\"mt-1\">\n                              @for (modifierDisplay of getModifiersDisplay(column); track $index) {\n                                <small class=\"badge bg-light text-dark me-1 mb-1 d-inline-block\"\n                                       style=\"font-size: 0.7rem;\"\n                                       [title]=\"modifierDisplay\">\n                                  {{ modifierDisplay }}\n                                </small>\n                              }\n                            </div>\n                          }\n                        </div>\n                      </td>\n                      <td>\n                        <div class=\"d-flex gap-1 flex-wrap\">\n                          @if (column.mandatory) {\n                            <span class=\"badge bg-danger\" title=\"Required field\">Required</span>\n                          }\n                          @if (column.readonly) {\n                            <span class=\"badge bg-secondary\" title=\"Read-only field\">Read-only</span>\n                          }\n                          @if (column.hidden) {\n                            <span class=\"badge bg-warning\" title=\"Hidden field\">Hidden</span>\n                          }\n                          @if (column.autoGenerated) {\n                            <span class=\"badge bg-info\" title=\"Auto-generated field\">Auto</span>\n                          }\n                          @if (column.ontologyType) {\n                            <span class=\"badge bg-success\" title=\"Ontology: {{ column.ontologyType }}\">\n                              {{ column.ontologyType }}\n                            </span>\n                          }\n                        </div>\n                      </td>\n                      <td>\n                        <div class=\"btn-group btn-group-sm\">\n                          <button type=\"button\" class=\"btn btn-outline-primary\"\n                                  (click)=\"viewColumnDetails(column)\"\n                                  title=\"View column details\">\n                            <i class=\"bi bi-eye\"></i>\n                          </button>\n                          @if (table()!.canEdit) {\n                            <button type=\"button\" \n                                    class=\"btn\"\n                                    [class]=\"column.hidden ? 'btn-outline-warning' : 'btn-outline-success'\"\n                                    (click)=\"toggleColumnHidden(column)\"\n                                    [title]=\"column.hidden ? 'Show column' : 'Hide column'\">\n                              <i class=\"bi\" [class]=\"column.hidden ? 'bi-eye-slash' : 'bi-eye'\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-success\"\n                                    (click)=\"editColumnValue(column)\"\n                                    title=\"Edit default value\">\n                              <i class=\"bi bi-pencil-square\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-secondary\"\n                                    (click)=\"editColumnSettings(column)\"\n                                    title=\"Edit column settings\">\n                              <i class=\"bi bi-gear\"></i>\n                            </button>\n                          }\n                        </div>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n\n          <!-- Table Data -->\n          @if (viewMode() === 'table') {\n            <div class=\"card-body p-0\">\n              <div class=\"table-responsive\">\n                <table class=\"table table-hover mb-0\">\n                  <thead class=\"table-light\">\n                    <tr>\n                      <th scope=\"col\" style=\"width: 80px;\" class=\"bg-secondary bg-opacity-10 text-secondary\">#</th>\n                      @for (column of sortedColumns(); track column.id) {\n                        <th scope=\"col\" [class]=\"getColumnHeaderClass(column)\" [title]=\"column.name\">\n                          <div class=\"header-cell d-flex justify-content-between align-items-center\">\n                            <span>{{ getShortColumnName(column) }}</span>\n                            @if (table()!.canEdit) {\n                              <div class=\"header-actions\">\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm header-edit-btn me-1\"\n                                  [class]=\"column.hidden ? 'btn-outline-warning' : 'btn-outline-success'\"\n                                  (click)=\"toggleColumnHidden(column)\"\n                                  [title]=\"column.hidden ? 'Show column' : 'Hide column'\">\n                                  <i class=\"bi\" [class]=\"column.hidden ? 'bi-eye-slash' : 'bi-eye'\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-primary header-edit-btn me-1\"\n                                  (click)=\"editColumnValue(column)\"\n                                  [title]=\"'Edit default value for ' + column.name\">\n                                  <i class=\"bi bi-pencil\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-danger header-edit-btn\"\n                                  (click)=\"removeColumn(column)\"\n                                  [title]=\"'Remove ' + column.name + ' column'\">\n                                  <i class=\"bi bi-trash\"></i>\n                                </button>\n                              </div>\n                            }\n                          </div>\n                        </th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (row of paginatedRows(); track row._sampleIndex) {\n                      <tr class=\"sample-row\" [class.editable]=\"table()!.canEdit\">\n                        <td class=\"text-muted fw-semibold\">{{ row._sampleIndex }}</td>\n                        @for (column of sortedColumns(); track column.id) {\n                          <td\n                            class=\"sample-cell\"\n                            [class.opacity-50]=\"column.hidden\"\n                            [attr.data-sample-index]=\"row._sampleIndex\"\n                            [attr.data-column-id]=\"column.id\"\n                            (click)=\"table()!.canEdit ? editSampleColumnValue(column, row._sampleIndex) : null\"\n                            [title]=\"table()!.canEdit ? 'Click to edit ' + column.name + ' for sample ' + row._sampleIndex : ''\">\n                            {{ row['col_' + column.id] || '-' }}\n                          </td>\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n\n              <!-- Table Mode Pagination -->\n              @if (viewMode() === 'table' && totalPages() > 1) {\n                <div class=\"d-flex justify-content-between align-items-center p-3 border-top\">\n                  <div class=\"d-flex align-items-center gap-2\">\n                    <span class=\"text-muted\">Rows per page:</span>\n                    <select class=\"form-select form-select-sm\" style=\"width: auto;\"\n                            [value]=\"pageSize()\"\n                            (change)=\"onPageSizeChange(+($any($event.target).value))\">\n                      <option value=\"10\">10</option>\n                      <option value=\"25\">25</option>\n                      <option value=\"50\">50</option>\n                      <option value=\"100\">100</option>\n                    </select>\n                  </div>\n                  <ngb-pagination\n                    [collectionSize]=\"tableRows().length\"\n                    [page]=\"currentPage()\"\n                    [pageSize]=\"pageSize()\"\n                    [maxSize]=\"5\"\n                    [boundaryLinks]=\"true\"\n                    [rotate]=\"true\"\n                    (pageChange)=\"onPageChange($event)\"\n                    class=\"pagination-sm mb-0\">\n                  </ngb-pagination>\n                  <span class=\"text-muted\">\n                    Showing {{ (currentPage() - 1) * pageSize() + 1 }}-{{ Math.min(currentPage() * pageSize(), tableRows().length) }}\n                    of {{ tableRows().length }} samples\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"card-body text-center py-5\">\n            <div class=\"text-muted\">\n              <i class=\"bi bi-inbox display-1 mb-3\"></i>\n              <h5>No Columns Found</h5>\n              <p>This table doesn't have any columns defined yet.</p>\n              @if (table()!.canEdit) {\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"openAddColumnModal()\">\n                  <i class=\"bi bi-plus me-1\"></i>Add First Column\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.header-cell{position:relative}.header-cell .header-actions{opacity:0;transition:opacity .15s ease}thead th:hover .header-actions{opacity:1}.header-edit-btn{--bs-btn-padding-y: .125rem;--bs-btn-padding-x: .25rem;--bs-btn-font-size: .65rem;border:none!important}.header-edit-btn.btn-outline-primary:hover{background-color:var(--bs-primary);border-color:var(--bs-primary)}.header-edit-btn.btn-outline-danger:hover{background-color:var(--bs-danger);border-color:var(--bs-danger)}.sample-row.editable .sample-cell{cursor:pointer;transition:background-color .1s ease}.sample-row.editable .sample-cell:hover{background-color:#28a74514;position:relative}.sample-row.editable .sample-cell:hover:after{content:\"\\270e\";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#28a74599;font-size:.75em;pointer-events:none}.pool-row.editable td.clickable{cursor:pointer;transition:background-color .1s ease}.pool-row.editable td.clickable:hover{background-color:#0dcaf01a;color:var(--bs-info)}.pool-row.editable td.clickable:hover .bi-pencil-square{opacity:.8}.pool-row.editable td.clickable .bi-pencil-square{opacity:.4;transition:opacity .1s ease}.pool-row.editable .pool-cell{cursor:pointer;transition:background-color .1s ease}.pool-row.editable .pool-cell:hover{background-color:#ffc10726;position:relative}.pool-row.editable .pool-cell:hover:after{content:\"\\270e\";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#ffc107cc;font-size:.75em;pointer-events:none}@media (max-width: 768px){.sample-row.editable .sample-cell,.pool-row.editable .pool-cell{transition:none}}.sortable{cursor:pointer;user-select:none;transition:background-color .2s ease}.sortable:hover{background-color:rgba(var(--bs-primary-rgb),.1)}.sortable.sorted{background-color:rgba(var(--bs-primary-rgb),.15)}.sortable.sorted .bi{color:var(--bs-primary)}.sortable .bi{opacity:.5;transition:all .2s ease;font-size:.75em}.sortable:hover .bi{opacity:.8}.drag-handle{cursor:grab;opacity:.6;transition:opacity .2s ease}.drag-handle:hover{opacity:1}.drag-handle:active{cursor:grabbing}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:var(--bs-light);border:1px solid var(--bs-border-color)}.cdk-drag-preview .header-cell{padding:.5rem;font-size:.875rem;font-weight:500}.cdk-drag-placeholder{opacity:.5;background:rgba(var(--bs-primary-rgb),.1)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging th:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: i2.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MetadataTableDetails, isStandalone: true, selector: "ccv-metadata-table-details", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "excelInput", first: true, predicate: ["excelInput"], descendants: true }], ngImport: i0, template: "<div class=\"metadata-table-details-container\">\n  <!-- Header Section with Breadcrumbs -->\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\n    <div class=\"container-fluid\">\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\n        <div class=\"d-flex align-items-center\">\n          <!-- Breadcrumb Navigation -->\n          <nav aria-label=\"breadcrumb\" class=\"me-3\">\n            <ol class=\"breadcrumb mb-0\">\n              <li class=\"breadcrumb-item\">\n                <a routerLink=\"/metadata-tables\" class=\"text-decoration-none\">\n                  <i class=\"bi bi-table me-1\"></i>Metadata Tables\n                </a>\n              </li>\n              <li class=\"breadcrumb-item active\" aria-current=\"page\">\n                @if (table()) {\n                  {{ table()!.name }}\n                } @else {\n                  Table Details\n                }\n              </li>\n            </ol>\n          </nav>\n\n          <!-- Table Status Badge -->\n          @if (table()) {\n            <span class=\"badge ms-2\" [class]=\"getTableStatusClass()\">\n              {{ getTableStatusBadge() }}\n            </span>\n          }\n        </div>\n\n        <!-- Action Buttons -->\n        <div class=\"d-flex gap-2\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary btn-sm\"\n            (click)=\"navigateBack()\"\n            title=\"Back to Tables\">\n            <i class=\"bi bi-arrow-left me-1\"></i>Back\n          </button>\n\n          <!-- View Mode Toggle -->\n          @if (hasColumns()) {\n            <div class=\"btn-group\" role=\"group\">\n              <button\n                type=\"button\"\n                class=\"btn btn-sm\"\n                [class]=\"viewMode() === 'list' ? 'btn-primary' : 'btn-outline-primary'\"\n                (click)=\"switchToListMode()\"\n                title=\"Column List View\">\n                <i class=\"bi bi-list-ul me-1\"></i>List\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-sm\"\n                [class]=\"viewMode() === 'table' ? 'btn-primary' : 'btn-outline-primary'\"\n                (click)=\"switchToTableMode()\"\n                title=\"Table Data View\">\n                <i class=\"bi bi-table me-1\"></i>Table\n              </button>\n            </div>\n          }\n          <!-- Import Dropdown -->\n          @if (table() && table()!.canEdit) {\n            <div class=\"btn-group\" ngbDropdown>\n              <!-- Hidden file inputs -->\n              <input\n                #fileInput\n                type=\"file\"\n                accept=\".txt,.tsv\"\n                style=\"display: none;\"\n                (change)=\"importSdrf($event)\">\n              <input\n                #excelInput\n                type=\"file\"\n                accept=\".xlsx,.xls\"\n                style=\"display: none;\"\n                (change)=\"importExcel($event)\">\n              \n              <button\n                type=\"button\"\n                class=\"btn btn-outline-success btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\"\n                title=\"Import Data\">\n                <i class=\"bi bi-upload me-1\"></i>Import\n              </button>\n              <div class=\"dropdown-menu\" ngbDropdownMenu>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"triggerFileInput(); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-text me-2\"></i>Import SDRF File\n                </a>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"triggerExcelInput(); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-spreadsheet me-2\"></i>Import Excel Template\n                </a>\n              </div>\n            </div>\n          }\n\n          <!-- Export Dropdown -->\n          @if (table() && hasColumns()) {\n            <div class=\"btn-group\" ngbDropdown>\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-info btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\"\n                title=\"Export Table\">\n                <i class=\"bi bi-download me-1\"></i>Export\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"exportToSdrf('sdrf'); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-text me-2\"></i>Export as SDRF\n                </a>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"exportToSdrf('excel'); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-spreadsheet me-2\"></i>Export as Excel\n                </a>\n              </div>\n            </div>\n          }\n\n          <!-- Edit Button -->\n          @if (table() && table()!.canEdit) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-primary btn-sm\"\n              (click)=\"editTable()\"\n              [disabled]=\"isLoading()\"\n              title=\"Edit Table\">\n              <i class=\"bi bi-pencil me-1\"></i>Edit\n            </button>\n          }\n\n          <!-- Reorder Columns Button -->\n          @if (table() && table()!.canEdit && hasColumns()) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-warning btn-sm\"\n              (click)=\"reorderColumns()\"\n              [disabled]=\"isLoading()\"\n              title=\"Reorder Columns by Schema\">\n              <i class=\"bi bi-arrows-move me-1\"></i>Reorder\n            </button>\n          }\n\n          <!-- Create Pool Button -->\n          @if (table() && table()!.canEdit && hasColumns()) {\n            <button\n              type=\"button\"\n              class=\"btn btn-success btn-sm\"\n              (click)=\"createPool()\"\n              [disabled]=\"isLoading()\"\n              title=\"Create Sample Pool\">\n              <i class=\"bi bi-plus-circle me-1\"></i>Create Pool\n            </button>\n          }\n\n          <!-- More Actions Dropdown -->\n          @if (table() && table()!.canEdit) {\n            <div class=\"btn-group\" ngbDropdown>\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-danger btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\">\n                <i class=\"bi bi-three-dots-vertical\"></i>\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n                <a class=\"dropdown-item text-danger\" href=\"#\" (click)=\"deleteTable(); $event.preventDefault()\">\n                  <i class=\"bi bi-trash me-2\"></i>Delete Table\n                </a>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <!-- Loading Spinner -->\n  @if (isLoading()) {\n    <div class=\"d-flex justify-content-center align-items-center\" style=\"height: 400px;\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n  }\n\n  <!-- Table Details Content -->\n  @if (table() && !isLoading()) {\n    <div class=\"table-details-content p-4\">\n\n      <!-- Table Information Card -->\n      <div class=\"card mb-4\">\n        <div class=\"card-header\">\n          <div class=\"d-flex align-items-center justify-content-between\">\n            <h5 class=\"mb-0\">\n              <i class=\"bi bi-info-circle me-2\"></i>Table Information\n            </h5>\n            <small class=\"text-muted\">\n              Created {{ table()!.createdAt | date:'medium' }}\n            </small>\n          </div>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"row\">\n            <div class=\"col-md-8\">\n              <h3 class=\"fw-bold mb-3\">{{ table()!.name }}</h3>\n              @if (table()!.description) {\n                <p class=\"text-muted mb-3\">{{ table()!.description }}</p>\n              }\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-hash text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Sample Count:</span>\n                    <span class=\"badge bg-primary\">{{ table()!.sampleCount }}</span>\n                  </div>\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-columns-gap text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Columns:</span>\n                    <span class=\"badge bg-info\">{{ table()!.columns?.length || 0 }}</span>\n                  </div>\n                </div>\n                <div class=\"col-md-6\">\n                  @if (table()!.ownerUsername) {\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <i class=\"bi bi-person text-muted me-2\"></i>\n                      <span class=\"fw-semibold me-2\">Owner:</span>\n                      <span>{{ table()!.ownerUsername }}</span>\n                    </div>\n                  }\n                  @if (table()!.labGroupName) {\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <i class=\"bi bi-people text-muted me-2\"></i>\n                      <span class=\"fw-semibold me-2\">Lab Group:</span>\n                      <span>{{ table()!.labGroupName }}</span>\n                    </div>\n                  }\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-tag text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Version:</span>\n                    <span class=\"badge bg-light text-dark\">{{ table()!.version || 'v1.0' }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-md-4 text-end\">\n              <div class=\"d-flex flex-column gap-2\">\n                @if (table()!.isLocked) {\n                  <span class=\"badge bg-warning\">\n                    <i class=\"bi bi-lock me-1\"></i>Locked\n                  </span>\n                }\n                @if (table()!.isPublished) {\n                  <span class=\"badge bg-success\">\n                    <i class=\"bi bi-cloud-check me-1\"></i>Published\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Sample Pool Table -->\n      @if (viewMode() === 'table' && hasPools()) {\n        <div class=\"card mb-4\">\n          <div class=\"card-header\">\n            <h5 class=\"mb-0\">\n              <i class=\"bi bi-layers me-2\"></i>Sample Pool Table\n              <span class=\"badge bg-warning ms-2\">{{ sortedPools().length }} pools</span>\n            </h5>\n          </div>\n          <div class=\"card-body p-0\">\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead class=\"table-light\">\n                  <tr>\n                    <th scope=\"col\" style=\"width: 80px;\" class=\"bg-secondary bg-opacity-10 text-secondary\">Pool</th>\n                    @for (column of sortedColumns(); track column.id) {\n                      <th scope=\"col\" [class]=\"getColumnHeaderClass(column)\" [title]=\"column.name\">\n                        <div class=\"header-cell d-flex justify-content-between align-items-center\">\n                          <span>{{ getShortColumnName(column) }}</span>\n                          @if (table()!.canEdit) {\n                            <div class=\"header-actions\">\n                              <button\n                                type=\"button\"\n                                class=\"btn btn-sm btn-outline-primary header-edit-btn me-1\"\n                                (click)=\"editColumnValue(column)\"\n                                [title]=\"'Edit default value for ' + column.name\">\n                                <i class=\"bi bi-pencil\"></i>\n                              </button>\n                            </div>\n                          }\n                        </div>\n                      </th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (poolRow of poolTableRows(); track poolRow._poolId) {\n                    <tr class=\"pool-row\" [class.editable]=\"table()!.canEdit\">\n                      <td class=\"text-muted fw-semibold\" \n                          [class.clickable]=\"table()!.canEdit\"\n                          (click)=\"table()!.canEdit ? editPool(poolRow._poolData) : null\"\n                          [title]=\"table()!.canEdit ? 'Click to edit pool: ' + poolRow._poolName : poolRow._poolName\">\n                        <i class=\"bi bi-layers me-2\"></i>{{ poolRow._poolName }}\n                        @if (table()!.canEdit) {\n                          <i class=\"bi bi-pencil-square ms-1 text-primary\" style=\"font-size: 0.8em;\"></i>\n                        }\n                      </td>\n                      @for (column of sortedColumns(); track column.id) {\n                        <td\n                          class=\"pool-cell\"\n                          [class.opacity-50]=\"column.hidden\"\n                          [attr.data-pool-id]=\"poolRow._poolId\"\n                          [attr.data-column-id]=\"column.id\"\n                          (click)=\"table()!.canEdit ? editPoolColumnValue(poolRow._poolData, column) : null\"\n                          [title]=\"table()!.canEdit ? 'Click to edit ' + column.name + ' for pool ' + poolRow._poolName : ''\">\n                          {{ poolRow['col_' + column.id] || '-' }}\n                        </td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Columns/Table Section -->\n      <div class=\"card\">\n        <div class=\"card-header\">\n          <div class=\"d-flex align-items-center justify-content-between\">\n            <h5 class=\"mb-0\">\n              @if (viewMode() === 'list') {\n                <i class=\"bi bi-list-columns me-2\"></i>Table Columns\n              } @else {\n                <i class=\"bi bi-table me-2\"></i>Table Data\n              }\n            </h5>\n            \n            <!-- Column Filter -->\n            @if (hasColumns()) {\n              <div class=\"d-flex align-items-center me-3\">\n                <div class=\"input-group input-group-sm\" style=\"width: 250px;\">\n                  <span class=\"input-group-text\">\n                    <i class=\"bi bi-funnel text-muted\"></i>\n                  </span>\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    placeholder=\"Filter columns...\"\n                    [value]=\"columnFilter()\"\n                    (input)=\"onColumnFilterChange($any($event.target).value)\">\n                  @if (columnFilter()) {\n                    <button\n                      type=\"button\"\n                      class=\"btn btn-outline-secondary\"\n                      (click)=\"clearColumnFilter()\"\n                      title=\"Clear filter\">\n                      <i class=\"bi bi-x\"></i>\n                    </button>\n                  }\n                </div>\n                @if (columnFilter()) {\n                  <small class=\"text-muted ms-2\">\n                    {{ filteredColumnCount }}/{{ totalColumnCount }}\n                  </small>\n                }\n              </div>\n            }\n            \n            <div class=\"d-flex gap-2 align-items-center\">\n              @if (viewMode() === 'list') {\n                <span class=\"badge bg-primary\">{{ sortedColumns().length }} columns</span>\n                @if (table() && table()!.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-success btn-sm\"\n                    (click)=\"openAddColumnModal()\"\n                    [disabled]=\"isLoading()\"\n                    title=\"Add new column with automatic reordering\">\n                    <i class=\"bi bi-plus-circle me-1\"></i>Add Column\n                  </button>\n                }\n                @if (table() && table()!.canEdit && sortedColumns().length === 0) {\n                  <small class=\"text-muted\">Import SDRF to add columns</small>\n                }\n              } @else {\n                <span class=\"badge bg-info\">{{ tableRows().length }} samples</span>\n                @if (hasPools()) {\n                  <span class=\"badge bg-warning\">{{ sortedPools().length }} pools</span>\n                }\n                <span class=\"badge bg-primary\">{{ sortedColumns().length }} columns</span>\n                @if (table() && table()!.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-success btn-sm\"\n                    (click)=\"openAddColumnModal()\"\n                    [disabled]=\"isLoading()\"\n                    title=\"Add new column with automatic reordering\">\n                    <i class=\"bi bi-plus-circle me-1\"></i>Add Column\n                  </button>\n                }\n              }\n            </div>\n          </div>\n        </div>\n\n        @if (hasColumns()) {\n          <!-- List Mode: Column Definitions -->\n          @if (viewMode() === 'list') {\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead>\n                  <tr>\n                    <th scope=\"col\" style=\"width: 40px;\">\n                      @if (table()!.canEdit) {\n                        <i class=\"bi bi-arrows-move text-muted\" title=\"Drag to reorder\"></i>\n                      }\n                    </th>\n                    <th scope=\"col\" style=\"width: 60px;\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('position')\"\n                        [class.sorted]=\"isSorted('position')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>#</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('position')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('name')\"\n                        [class.sorted]=\"isSorted('name')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Column Name</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('name')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('type')\"\n                        [class.sorted]=\"isSorted('type')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Type</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('type')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('value')\"\n                        [class.sorted]=\"isSorted('value')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Value</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('value')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\">Properties</th>\n                    <th scope=\"col\" style=\"width: 100px;\">Actions</th>\n                  </tr>\n                </thead>\n                <tbody cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" [cdkDropListData]=\"dragColumnsForList()\">\n                  @for (column of dragColumnsForList(); track column.id) {\n                    <tr cdkDrag [cdkDragData]=\"column\" [cdkDragDisabled]=\"!table()!.canEdit\">\n                      <td class=\"text-center\">\n                        @if (table()!.canEdit) {\n                          <i class=\"bi bi-grip-vertical drag-handle\" cdkDragHandle></i>\n                        }\n                      </td>\n                      <td class=\"text-muted fw-semibold\">\n                        {{ (column.columnPosition || 0) + 1 }}\n                      </td>\n                      <td>\n                        <div class=\"d-flex align-items-center\">\n                          <i class=\"me-2\" [class]=\"getColumnTypeIcon(column) + ' ' + getColumnTypeClass(column)\"></i>\n                          <span class=\"fw-semibold\">{{ column.name }}</span>\n                        </div>\n                      </td>\n                      <td>\n                        <span class=\"badge bg-light text-dark\">{{ column.type }}</span>\n                      </td>\n                      <td>\n                        <div>\n                          <!-- Default Value -->\n                          <div class=\"fw-semibold\">{{ getColumnValueDisplay(column) }}</div>\n\n                          <!-- Sample-specific Modifiers -->\n                          @if (hasModifiers(column)) {\n                            <div class=\"mt-1\">\n                              @for (modifierDisplay of getModifiersDisplay(column); track $index) {\n                                <small class=\"badge bg-light text-dark me-1 mb-1 d-inline-block\"\n                                       style=\"font-size: 0.7rem;\"\n                                       [title]=\"modifierDisplay\">\n                                  {{ modifierDisplay }}\n                                </small>\n                              }\n                            </div>\n                          }\n                        </div>\n                      </td>\n                      <td>\n                        <div class=\"d-flex gap-1 flex-wrap\">\n                          @if (column.mandatory) {\n                            <span class=\"badge bg-danger\" title=\"Required field\">Required</span>\n                          }\n                          @if (column.readonly) {\n                            <span class=\"badge bg-secondary\" title=\"Read-only field\">Read-only</span>\n                          }\n                          @if (column.hidden) {\n                            <span class=\"badge bg-warning\" title=\"Hidden field\">Hidden</span>\n                          }\n                          @if (column.autoGenerated) {\n                            <span class=\"badge bg-info\" title=\"Auto-generated field\">Auto</span>\n                          }\n                          @if (column.ontologyType) {\n                            <span class=\"badge bg-success\" title=\"Ontology: {{ column.ontologyType }}\">\n                              {{ column.ontologyType }}\n                            </span>\n                          }\n                        </div>\n                      </td>\n                      <td>\n                        <div class=\"btn-group btn-group-sm\">\n                          <button type=\"button\" class=\"btn btn-outline-primary\"\n                                  (click)=\"viewColumnDetails(column)\"\n                                  title=\"View column details\">\n                            <i class=\"bi bi-eye\"></i>\n                          </button>\n                          @if (table()!.canEdit) {\n                            <button type=\"button\" \n                                    class=\"btn\"\n                                    [class]=\"column.hidden ? 'btn-outline-warning' : 'btn-outline-success'\"\n                                    (click)=\"toggleColumnHidden(column)\"\n                                    [title]=\"column.hidden ? 'Show column' : 'Hide column'\">\n                              <i class=\"bi\" [class]=\"column.hidden ? 'bi-eye-slash' : 'bi-eye'\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-success\"\n                                    (click)=\"editColumnValue(column)\"\n                                    title=\"Edit default value\">\n                              <i class=\"bi bi-pencil-square\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-info\"\n                                    (click)=\"autofillColumnValues(column)\"\n                                    title=\"Auto-fill values\">\n                              <i class=\"bi bi-magic\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-secondary\"\n                                    (click)=\"editColumnSettings(column)\"\n                                    title=\"Edit column settings\">\n                              <i class=\"bi bi-gear\"></i>\n                            </button>\n                          }\n                        </div>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n\n          <!-- Table Data -->\n          @if (viewMode() === 'table') {\n            <div class=\"card-body p-0\">\n              <div class=\"table-responsive\">\n                <table class=\"table table-hover mb-0\">\n                  <thead class=\"table-light\">\n                    <tr>\n                      <th scope=\"col\" style=\"width: 80px;\" class=\"bg-secondary bg-opacity-10 text-secondary\">#</th>\n                      @for (column of sortedColumns(); track column.id) {\n                        <th scope=\"col\" [class]=\"getColumnHeaderClass(column)\" [title]=\"column.name\">\n                          <div class=\"header-cell d-flex justify-content-between align-items-center\">\n                            <span>{{ getShortColumnName(column) }}</span>\n                            @if (table()!.canEdit) {\n                              <div class=\"header-actions\">\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm header-edit-btn me-1\"\n                                  [class]=\"column.hidden ? 'btn-outline-warning' : 'btn-outline-success'\"\n                                  (click)=\"toggleColumnHidden(column)\"\n                                  [title]=\"column.hidden ? 'Show column' : 'Hide column'\">\n                                  <i class=\"bi\" [class]=\"column.hidden ? 'bi-eye-slash' : 'bi-eye'\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-primary header-edit-btn me-1\"\n                                  (click)=\"editColumnValue(column)\"\n                                  [title]=\"'Edit default value for ' + column.name\">\n                                  <i class=\"bi bi-pencil\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-info header-edit-btn me-1\"\n                                  (click)=\"autofillColumnValues(column)\"\n                                  [title]=\"'Auto-fill values for ' + column.name\">\n                                  <i class=\"bi bi-magic\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-danger header-edit-btn\"\n                                  (click)=\"removeColumn(column)\"\n                                  [title]=\"'Remove ' + column.name + ' column'\">\n                                  <i class=\"bi bi-trash\"></i>\n                                </button>\n                              </div>\n                            }\n                          </div>\n                        </th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (row of paginatedRows(); track row._sampleIndex) {\n                      <tr class=\"sample-row\" [class.editable]=\"table()!.canEdit\">\n                        <td class=\"text-muted fw-semibold\">{{ row._sampleIndex }}</td>\n                        @for (column of sortedColumns(); track column.id) {\n                          <td\n                            class=\"sample-cell\"\n                            [class.opacity-50]=\"column.hidden\"\n                            [attr.data-sample-index]=\"row._sampleIndex\"\n                            [attr.data-column-id]=\"column.id\"\n                            (click)=\"table()!.canEdit ? editSampleColumnValue(column, row._sampleIndex) : null\"\n                            [title]=\"table()!.canEdit ? 'Click to edit ' + column.name + ' for sample ' + row._sampleIndex : ''\">\n                            {{ row['col_' + column.id] || '-' }}\n                          </td>\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n\n              <!-- Table Mode Pagination -->\n              @if (viewMode() === 'table' && totalPages() > 1) {\n                <div class=\"d-flex justify-content-between align-items-center p-3 border-top\">\n                  <div class=\"d-flex align-items-center gap-2\">\n                    <span class=\"text-muted\">Rows per page:</span>\n                    <select class=\"form-select form-select-sm\" style=\"width: auto;\"\n                            [value]=\"pageSize()\"\n                            (change)=\"onPageSizeChange(+($any($event.target).value))\">\n                      <option value=\"10\">10</option>\n                      <option value=\"25\">25</option>\n                      <option value=\"50\">50</option>\n                      <option value=\"100\">100</option>\n                    </select>\n                  </div>\n                  <ngb-pagination\n                    [collectionSize]=\"tableRows().length\"\n                    [page]=\"currentPage()\"\n                    [pageSize]=\"pageSize()\"\n                    [maxSize]=\"5\"\n                    [boundaryLinks]=\"true\"\n                    [rotate]=\"true\"\n                    (pageChange)=\"onPageChange($event)\"\n                    class=\"pagination-sm mb-0\">\n                  </ngb-pagination>\n                  <span class=\"text-muted\">\n                    Showing {{ (currentPage() - 1) * pageSize() + 1 }}-{{ Math.min(currentPage() * pageSize(), tableRows().length) }}\n                    of {{ tableRows().length }} samples\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"card-body text-center py-5\">\n            <div class=\"text-muted\">\n              <i class=\"bi bi-inbox display-1 mb-3\"></i>\n              <h5>No Columns Found</h5>\n              <p>This table doesn't have any columns defined yet.</p>\n              @if (table()!.canEdit) {\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"openAddColumnModal()\">\n                  <i class=\"bi bi-plus me-1\"></i>Add First Column\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.header-cell{position:relative}.header-cell .header-actions{opacity:0;transition:opacity .15s ease}thead th:hover .header-actions{opacity:1}.header-edit-btn{--bs-btn-padding-y: .125rem;--bs-btn-padding-x: .25rem;--bs-btn-font-size: .65rem;border:none!important}.header-edit-btn.btn-outline-primary:hover{background-color:var(--bs-primary);border-color:var(--bs-primary)}.header-edit-btn.btn-outline-danger:hover{background-color:var(--bs-danger);border-color:var(--bs-danger)}.sample-row.editable .sample-cell{cursor:pointer;transition:background-color .1s ease}.sample-row.editable .sample-cell:hover{background-color:#28a74514;position:relative}.sample-row.editable .sample-cell:hover:after{content:\"\\270e\";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#28a74599;font-size:.75em;pointer-events:none}.pool-row.editable td.clickable{cursor:pointer;transition:background-color .1s ease}.pool-row.editable td.clickable:hover{background-color:#0dcaf01a;color:var(--bs-info)}.pool-row.editable td.clickable:hover .bi-pencil-square{opacity:.8}.pool-row.editable td.clickable .bi-pencil-square{opacity:.4;transition:opacity .1s ease}.pool-row.editable .pool-cell{cursor:pointer;transition:background-color .1s ease}.pool-row.editable .pool-cell:hover{background-color:#ffc10726;position:relative}.pool-row.editable .pool-cell:hover:after{content:\"\\270e\";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#ffc107cc;font-size:.75em;pointer-events:none}@media (max-width: 768px){.sample-row.editable .sample-cell,.pool-row.editable .pool-cell{transition:none}}.sortable{cursor:pointer;user-select:none;transition:background-color .2s ease}.sortable:hover{background-color:rgba(var(--bs-primary-rgb),.1)}.sortable.sorted{background-color:rgba(var(--bs-primary-rgb),.15)}.sortable.sorted .bi{color:var(--bs-primary)}.sortable .bi{opacity:.5;transition:all .2s ease;font-size:.75em}.sortable:hover .bi{opacity:.8}.drag-handle{cursor:grab;opacity:.6;transition:opacity .2s ease}.drag-handle:hover{opacity:1}.drag-handle:active{cursor:grabbing}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:var(--bs-light);border:1px solid var(--bs-border-color)}.cdk-drag-preview .header-cell{padding:.5rem;font-size:.875rem;font-weight:500}.cdk-drag-placeholder{opacity:.5;background:rgba(var(--bs-primary-rgb),.1)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging th:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: NgbModule }, { kind: "directive", type: i2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: i2.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataTableDetails, decorators: [{
             type: Component,
-            args: [{ selector: 'ccv-metadata-table-details', standalone: true, imports: [CommonModule, RouterModule, NgbModule, DragDropModule], template: "<div class=\"metadata-table-details-container\">\n  <!-- Header Section with Breadcrumbs -->\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\n    <div class=\"container-fluid\">\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\n        <div class=\"d-flex align-items-center\">\n          <!-- Breadcrumb Navigation -->\n          <nav aria-label=\"breadcrumb\" class=\"me-3\">\n            <ol class=\"breadcrumb mb-0\">\n              <li class=\"breadcrumb-item\">\n                <a routerLink=\"/metadata-tables\" class=\"text-decoration-none\">\n                  <i class=\"bi bi-table me-1\"></i>Metadata Tables\n                </a>\n              </li>\n              <li class=\"breadcrumb-item active\" aria-current=\"page\">\n                @if (table()) {\n                  {{ table()!.name }}\n                } @else {\n                  Table Details\n                }\n              </li>\n            </ol>\n          </nav>\n\n          <!-- Table Status Badge -->\n          @if (table()) {\n            <span class=\"badge ms-2\" [class]=\"getTableStatusClass()\">\n              {{ getTableStatusBadge() }}\n            </span>\n          }\n        </div>\n\n        <!-- Action Buttons -->\n        <div class=\"d-flex gap-2\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary btn-sm\"\n            (click)=\"navigateBack()\"\n            title=\"Back to Tables\">\n            <i class=\"bi bi-arrow-left me-1\"></i>Back\n          </button>\n\n          <!-- View Mode Toggle -->\n          @if (hasColumns()) {\n            <div class=\"btn-group\" role=\"group\">\n              <button\n                type=\"button\"\n                class=\"btn btn-sm\"\n                [class]=\"viewMode() === 'list' ? 'btn-primary' : 'btn-outline-primary'\"\n                (click)=\"switchToListMode()\"\n                title=\"Column List View\">\n                <i class=\"bi bi-list-ul me-1\"></i>List\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-sm\"\n                [class]=\"viewMode() === 'table' ? 'btn-primary' : 'btn-outline-primary'\"\n                (click)=\"switchToTableMode()\"\n                title=\"Table Data View\">\n                <i class=\"bi bi-table me-1\"></i>Table\n              </button>\n            </div>\n          }\n          <!-- Import Dropdown -->\n          @if (table() && table()!.canEdit) {\n            <div class=\"btn-group\" ngbDropdown>\n              <!-- Hidden file inputs -->\n              <input\n                #fileInput\n                type=\"file\"\n                accept=\".txt,.tsv\"\n                style=\"display: none;\"\n                (change)=\"importSdrf($event)\">\n              <input\n                #excelInput\n                type=\"file\"\n                accept=\".xlsx,.xls\"\n                style=\"display: none;\"\n                (change)=\"importExcel($event)\">\n              \n              <button\n                type=\"button\"\n                class=\"btn btn-outline-success btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\"\n                title=\"Import Data\">\n                <i class=\"bi bi-upload me-1\"></i>Import\n              </button>\n              <div class=\"dropdown-menu\" ngbDropdownMenu>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"triggerFileInput(); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-text me-2\"></i>Import SDRF File\n                </a>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"triggerExcelInput(); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-spreadsheet me-2\"></i>Import Excel Template\n                </a>\n              </div>\n            </div>\n          }\n\n          <!-- Export Dropdown -->\n          @if (table() && hasColumns()) {\n            <div class=\"btn-group\" ngbDropdown>\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-info btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\"\n                title=\"Export Table\">\n                <i class=\"bi bi-download me-1\"></i>Export\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"exportToSdrf('sdrf'); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-text me-2\"></i>Export as SDRF\n                </a>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"exportToSdrf('excel'); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-spreadsheet me-2\"></i>Export as Excel\n                </a>\n              </div>\n            </div>\n          }\n\n          <!-- Edit Button -->\n          @if (table() && table()!.canEdit) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-primary btn-sm\"\n              (click)=\"editTable()\"\n              [disabled]=\"isLoading()\"\n              title=\"Edit Table\">\n              <i class=\"bi bi-pencil me-1\"></i>Edit\n            </button>\n          }\n\n          <!-- Reorder Columns Button -->\n          @if (table() && table()!.canEdit && hasColumns()) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-warning btn-sm\"\n              (click)=\"reorderColumns()\"\n              [disabled]=\"isLoading()\"\n              title=\"Reorder Columns by Schema\">\n              <i class=\"bi bi-arrows-move me-1\"></i>Reorder\n            </button>\n          }\n\n          <!-- Create Pool Button -->\n          @if (table() && table()!.canEdit && hasColumns()) {\n            <button\n              type=\"button\"\n              class=\"btn btn-success btn-sm\"\n              (click)=\"createPool()\"\n              [disabled]=\"isLoading()\"\n              title=\"Create Sample Pool\">\n              <i class=\"bi bi-plus-circle me-1\"></i>Create Pool\n            </button>\n          }\n\n          <!-- More Actions Dropdown -->\n          @if (table() && table()!.canEdit) {\n            <div class=\"btn-group\" ngbDropdown>\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-danger btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\">\n                <i class=\"bi bi-three-dots-vertical\"></i>\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n                <a class=\"dropdown-item text-danger\" href=\"#\" (click)=\"deleteTable(); $event.preventDefault()\">\n                  <i class=\"bi bi-trash me-2\"></i>Delete Table\n                </a>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <!-- Loading Spinner -->\n  @if (isLoading()) {\n    <div class=\"d-flex justify-content-center align-items-center\" style=\"height: 400px;\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n  }\n\n  <!-- Table Details Content -->\n  @if (table() && !isLoading()) {\n    <div class=\"table-details-content p-4\">\n\n      <!-- Table Information Card -->\n      <div class=\"card mb-4\">\n        <div class=\"card-header\">\n          <div class=\"d-flex align-items-center justify-content-between\">\n            <h5 class=\"mb-0\">\n              <i class=\"bi bi-info-circle me-2\"></i>Table Information\n            </h5>\n            <small class=\"text-muted\">\n              Created {{ table()!.createdAt | date:'medium' }}\n            </small>\n          </div>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"row\">\n            <div class=\"col-md-8\">\n              <h3 class=\"fw-bold mb-3\">{{ table()!.name }}</h3>\n              @if (table()!.description) {\n                <p class=\"text-muted mb-3\">{{ table()!.description }}</p>\n              }\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-hash text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Sample Count:</span>\n                    <span class=\"badge bg-primary\">{{ table()!.sampleCount }}</span>\n                  </div>\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-columns-gap text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Columns:</span>\n                    <span class=\"badge bg-info\">{{ table()!.columns?.length || 0 }}</span>\n                  </div>\n                </div>\n                <div class=\"col-md-6\">\n                  @if (table()!.ownerUsername) {\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <i class=\"bi bi-person text-muted me-2\"></i>\n                      <span class=\"fw-semibold me-2\">Owner:</span>\n                      <span>{{ table()!.ownerUsername }}</span>\n                    </div>\n                  }\n                  @if (table()!.labGroupName) {\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <i class=\"bi bi-people text-muted me-2\"></i>\n                      <span class=\"fw-semibold me-2\">Lab Group:</span>\n                      <span>{{ table()!.labGroupName }}</span>\n                    </div>\n                  }\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-tag text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Version:</span>\n                    <span class=\"badge bg-light text-dark\">{{ table()!.version || 'v1.0' }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-md-4 text-end\">\n              <div class=\"d-flex flex-column gap-2\">\n                @if (table()!.isLocked) {\n                  <span class=\"badge bg-warning\">\n                    <i class=\"bi bi-lock me-1\"></i>Locked\n                  </span>\n                }\n                @if (table()!.isPublished) {\n                  <span class=\"badge bg-success\">\n                    <i class=\"bi bi-cloud-check me-1\"></i>Published\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Sample Pool Table -->\n      @if (viewMode() === 'table' && hasPools()) {\n        <div class=\"card mb-4\">\n          <div class=\"card-header\">\n            <h5 class=\"mb-0\">\n              <i class=\"bi bi-layers me-2\"></i>Sample Pool Table\n              <span class=\"badge bg-warning ms-2\">{{ sortedPools().length }} pools</span>\n            </h5>\n          </div>\n          <div class=\"card-body p-0\">\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead class=\"table-light\">\n                  <tr>\n                    <th scope=\"col\" style=\"width: 80px;\" class=\"bg-secondary bg-opacity-10 text-secondary\">Pool</th>\n                    @for (column of sortedColumns(); track column.id) {\n                      <th scope=\"col\" [class]=\"getColumnHeaderClass(column)\" [title]=\"column.name\">\n                        <div class=\"header-cell d-flex justify-content-between align-items-center\">\n                          <span>{{ getShortColumnName(column) }}</span>\n                          @if (table()!.canEdit) {\n                            <div class=\"header-actions\">\n                              <button\n                                type=\"button\"\n                                class=\"btn btn-sm btn-outline-primary header-edit-btn me-1\"\n                                (click)=\"editColumnValue(column)\"\n                                [title]=\"'Edit default value for ' + column.name\">\n                                <i class=\"bi bi-pencil\"></i>\n                              </button>\n                            </div>\n                          }\n                        </div>\n                      </th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (poolRow of poolTableRows(); track poolRow._poolId) {\n                    <tr class=\"pool-row\" [class.editable]=\"table()!.canEdit\">\n                      <td class=\"text-muted fw-semibold\" \n                          [class.clickable]=\"table()!.canEdit\"\n                          (click)=\"table()!.canEdit ? editPool(poolRow._poolData) : null\"\n                          [title]=\"table()!.canEdit ? 'Click to edit pool: ' + poolRow._poolName : poolRow._poolName\">\n                        <i class=\"bi bi-layers me-2\"></i>{{ poolRow._poolName }}\n                        @if (table()!.canEdit) {\n                          <i class=\"bi bi-pencil-square ms-1 text-primary\" style=\"font-size: 0.8em;\"></i>\n                        }\n                      </td>\n                      @for (column of sortedColumns(); track column.id) {\n                        <td\n                          class=\"pool-cell\"\n                          [class.opacity-50]=\"column.hidden\"\n                          [attr.data-pool-id]=\"poolRow._poolId\"\n                          [attr.data-column-id]=\"column.id\"\n                          (click)=\"table()!.canEdit ? editPoolColumnValue(poolRow._poolData, column) : null\"\n                          [title]=\"table()!.canEdit ? 'Click to edit ' + column.name + ' for pool ' + poolRow._poolName : ''\">\n                          {{ poolRow['col_' + column.id] || '-' }}\n                        </td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Columns/Table Section -->\n      <div class=\"card\">\n        <div class=\"card-header\">\n          <div class=\"d-flex align-items-center justify-content-between\">\n            <h5 class=\"mb-0\">\n              @if (viewMode() === 'list') {\n                <i class=\"bi bi-list-columns me-2\"></i>Table Columns\n              } @else {\n                <i class=\"bi bi-table me-2\"></i>Table Data\n              }\n            </h5>\n            \n            <!-- Column Filter -->\n            @if (hasColumns()) {\n              <div class=\"d-flex align-items-center me-3\">\n                <div class=\"input-group input-group-sm\" style=\"width: 250px;\">\n                  <span class=\"input-group-text\">\n                    <i class=\"bi bi-funnel text-muted\"></i>\n                  </span>\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    placeholder=\"Filter columns...\"\n                    [value]=\"columnFilter()\"\n                    (input)=\"onColumnFilterChange($any($event.target).value)\">\n                  @if (columnFilter()) {\n                    <button\n                      type=\"button\"\n                      class=\"btn btn-outline-secondary\"\n                      (click)=\"clearColumnFilter()\"\n                      title=\"Clear filter\">\n                      <i class=\"bi bi-x\"></i>\n                    </button>\n                  }\n                </div>\n                @if (columnFilter()) {\n                  <small class=\"text-muted ms-2\">\n                    {{ filteredColumnCount }}/{{ totalColumnCount }}\n                  </small>\n                }\n              </div>\n            }\n            \n            <div class=\"d-flex gap-2 align-items-center\">\n              @if (viewMode() === 'list') {\n                <span class=\"badge bg-primary\">{{ sortedColumns().length }} columns</span>\n                @if (table() && table()!.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-success btn-sm\"\n                    (click)=\"openAddColumnModal()\"\n                    [disabled]=\"isLoading()\"\n                    title=\"Add new column with automatic reordering\">\n                    <i class=\"bi bi-plus-circle me-1\"></i>Add Column\n                  </button>\n                }\n                @if (table() && table()!.canEdit && sortedColumns().length === 0) {\n                  <small class=\"text-muted\">Import SDRF to add columns</small>\n                }\n              } @else {\n                <span class=\"badge bg-info\">{{ tableRows().length }} samples</span>\n                @if (hasPools()) {\n                  <span class=\"badge bg-warning\">{{ sortedPools().length }} pools</span>\n                }\n                <span class=\"badge bg-primary\">{{ sortedColumns().length }} columns</span>\n                @if (table() && table()!.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-success btn-sm\"\n                    (click)=\"openAddColumnModal()\"\n                    [disabled]=\"isLoading()\"\n                    title=\"Add new column with automatic reordering\">\n                    <i class=\"bi bi-plus-circle me-1\"></i>Add Column\n                  </button>\n                }\n              }\n            </div>\n          </div>\n        </div>\n\n        @if (hasColumns()) {\n          <!-- List Mode: Column Definitions -->\n          @if (viewMode() === 'list') {\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead>\n                  <tr>\n                    <th scope=\"col\" style=\"width: 40px;\">\n                      @if (table()!.canEdit) {\n                        <i class=\"bi bi-arrows-move text-muted\" title=\"Drag to reorder\"></i>\n                      }\n                    </th>\n                    <th scope=\"col\" style=\"width: 60px;\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('position')\"\n                        [class.sorted]=\"isSorted('position')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>#</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('position')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('name')\"\n                        [class.sorted]=\"isSorted('name')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Column Name</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('name')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('type')\"\n                        [class.sorted]=\"isSorted('type')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Type</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('type')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('value')\"\n                        [class.sorted]=\"isSorted('value')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Value</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('value')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\">Properties</th>\n                    <th scope=\"col\" style=\"width: 100px;\">Actions</th>\n                  </tr>\n                </thead>\n                <tbody cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" [cdkDropListData]=\"dragColumnsForList()\">\n                  @for (column of dragColumnsForList(); track column.id) {\n                    <tr cdkDrag [cdkDragData]=\"column\" [cdkDragDisabled]=\"!table()!.canEdit\">\n                      <td class=\"text-center\">\n                        @if (table()!.canEdit) {\n                          <i class=\"bi bi-grip-vertical drag-handle\" cdkDragHandle></i>\n                        }\n                      </td>\n                      <td class=\"text-muted fw-semibold\">\n                        {{ (column.columnPosition || 0) + 1 }}\n                      </td>\n                      <td>\n                        <div class=\"d-flex align-items-center\">\n                          <i class=\"me-2\" [class]=\"getColumnTypeIcon(column) + ' ' + getColumnTypeClass(column)\"></i>\n                          <span class=\"fw-semibold\">{{ column.name }}</span>\n                        </div>\n                      </td>\n                      <td>\n                        <span class=\"badge bg-light text-dark\">{{ column.type }}</span>\n                      </td>\n                      <td>\n                        <div>\n                          <!-- Default Value -->\n                          <div class=\"fw-semibold\">{{ getColumnValueDisplay(column) }}</div>\n\n                          <!-- Sample-specific Modifiers -->\n                          @if (hasModifiers(column)) {\n                            <div class=\"mt-1\">\n                              @for (modifierDisplay of getModifiersDisplay(column); track $index) {\n                                <small class=\"badge bg-light text-dark me-1 mb-1 d-inline-block\"\n                                       style=\"font-size: 0.7rem;\"\n                                       [title]=\"modifierDisplay\">\n                                  {{ modifierDisplay }}\n                                </small>\n                              }\n                            </div>\n                          }\n                        </div>\n                      </td>\n                      <td>\n                        <div class=\"d-flex gap-1 flex-wrap\">\n                          @if (column.mandatory) {\n                            <span class=\"badge bg-danger\" title=\"Required field\">Required</span>\n                          }\n                          @if (column.readonly) {\n                            <span class=\"badge bg-secondary\" title=\"Read-only field\">Read-only</span>\n                          }\n                          @if (column.hidden) {\n                            <span class=\"badge bg-warning\" title=\"Hidden field\">Hidden</span>\n                          }\n                          @if (column.autoGenerated) {\n                            <span class=\"badge bg-info\" title=\"Auto-generated field\">Auto</span>\n                          }\n                          @if (column.ontologyType) {\n                            <span class=\"badge bg-success\" title=\"Ontology: {{ column.ontologyType }}\">\n                              {{ column.ontologyType }}\n                            </span>\n                          }\n                        </div>\n                      </td>\n                      <td>\n                        <div class=\"btn-group btn-group-sm\">\n                          <button type=\"button\" class=\"btn btn-outline-primary\"\n                                  (click)=\"viewColumnDetails(column)\"\n                                  title=\"View column details\">\n                            <i class=\"bi bi-eye\"></i>\n                          </button>\n                          @if (table()!.canEdit) {\n                            <button type=\"button\" \n                                    class=\"btn\"\n                                    [class]=\"column.hidden ? 'btn-outline-warning' : 'btn-outline-success'\"\n                                    (click)=\"toggleColumnHidden(column)\"\n                                    [title]=\"column.hidden ? 'Show column' : 'Hide column'\">\n                              <i class=\"bi\" [class]=\"column.hidden ? 'bi-eye-slash' : 'bi-eye'\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-success\"\n                                    (click)=\"editColumnValue(column)\"\n                                    title=\"Edit default value\">\n                              <i class=\"bi bi-pencil-square\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-secondary\"\n                                    (click)=\"editColumnSettings(column)\"\n                                    title=\"Edit column settings\">\n                              <i class=\"bi bi-gear\"></i>\n                            </button>\n                          }\n                        </div>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n\n          <!-- Table Data -->\n          @if (viewMode() === 'table') {\n            <div class=\"card-body p-0\">\n              <div class=\"table-responsive\">\n                <table class=\"table table-hover mb-0\">\n                  <thead class=\"table-light\">\n                    <tr>\n                      <th scope=\"col\" style=\"width: 80px;\" class=\"bg-secondary bg-opacity-10 text-secondary\">#</th>\n                      @for (column of sortedColumns(); track column.id) {\n                        <th scope=\"col\" [class]=\"getColumnHeaderClass(column)\" [title]=\"column.name\">\n                          <div class=\"header-cell d-flex justify-content-between align-items-center\">\n                            <span>{{ getShortColumnName(column) }}</span>\n                            @if (table()!.canEdit) {\n                              <div class=\"header-actions\">\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm header-edit-btn me-1\"\n                                  [class]=\"column.hidden ? 'btn-outline-warning' : 'btn-outline-success'\"\n                                  (click)=\"toggleColumnHidden(column)\"\n                                  [title]=\"column.hidden ? 'Show column' : 'Hide column'\">\n                                  <i class=\"bi\" [class]=\"column.hidden ? 'bi-eye-slash' : 'bi-eye'\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-primary header-edit-btn me-1\"\n                                  (click)=\"editColumnValue(column)\"\n                                  [title]=\"'Edit default value for ' + column.name\">\n                                  <i class=\"bi bi-pencil\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-danger header-edit-btn\"\n                                  (click)=\"removeColumn(column)\"\n                                  [title]=\"'Remove ' + column.name + ' column'\">\n                                  <i class=\"bi bi-trash\"></i>\n                                </button>\n                              </div>\n                            }\n                          </div>\n                        </th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (row of paginatedRows(); track row._sampleIndex) {\n                      <tr class=\"sample-row\" [class.editable]=\"table()!.canEdit\">\n                        <td class=\"text-muted fw-semibold\">{{ row._sampleIndex }}</td>\n                        @for (column of sortedColumns(); track column.id) {\n                          <td\n                            class=\"sample-cell\"\n                            [class.opacity-50]=\"column.hidden\"\n                            [attr.data-sample-index]=\"row._sampleIndex\"\n                            [attr.data-column-id]=\"column.id\"\n                            (click)=\"table()!.canEdit ? editSampleColumnValue(column, row._sampleIndex) : null\"\n                            [title]=\"table()!.canEdit ? 'Click to edit ' + column.name + ' for sample ' + row._sampleIndex : ''\">\n                            {{ row['col_' + column.id] || '-' }}\n                          </td>\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n\n              <!-- Table Mode Pagination -->\n              @if (viewMode() === 'table' && totalPages() > 1) {\n                <div class=\"d-flex justify-content-between align-items-center p-3 border-top\">\n                  <div class=\"d-flex align-items-center gap-2\">\n                    <span class=\"text-muted\">Rows per page:</span>\n                    <select class=\"form-select form-select-sm\" style=\"width: auto;\"\n                            [value]=\"pageSize()\"\n                            (change)=\"onPageSizeChange(+($any($event.target).value))\">\n                      <option value=\"10\">10</option>\n                      <option value=\"25\">25</option>\n                      <option value=\"50\">50</option>\n                      <option value=\"100\">100</option>\n                    </select>\n                  </div>\n                  <ngb-pagination\n                    [collectionSize]=\"tableRows().length\"\n                    [page]=\"currentPage()\"\n                    [pageSize]=\"pageSize()\"\n                    [maxSize]=\"5\"\n                    [boundaryLinks]=\"true\"\n                    [rotate]=\"true\"\n                    (pageChange)=\"onPageChange($event)\"\n                    class=\"pagination-sm mb-0\">\n                  </ngb-pagination>\n                  <span class=\"text-muted\">\n                    Showing {{ (currentPage() - 1) * pageSize() + 1 }}-{{ Math.min(currentPage() * pageSize(), tableRows().length) }}\n                    of {{ tableRows().length }} samples\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"card-body text-center py-5\">\n            <div class=\"text-muted\">\n              <i class=\"bi bi-inbox display-1 mb-3\"></i>\n              <h5>No Columns Found</h5>\n              <p>This table doesn't have any columns defined yet.</p>\n              @if (table()!.canEdit) {\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"openAddColumnModal()\">\n                  <i class=\"bi bi-plus me-1\"></i>Add First Column\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.header-cell{position:relative}.header-cell .header-actions{opacity:0;transition:opacity .15s ease}thead th:hover .header-actions{opacity:1}.header-edit-btn{--bs-btn-padding-y: .125rem;--bs-btn-padding-x: .25rem;--bs-btn-font-size: .65rem;border:none!important}.header-edit-btn.btn-outline-primary:hover{background-color:var(--bs-primary);border-color:var(--bs-primary)}.header-edit-btn.btn-outline-danger:hover{background-color:var(--bs-danger);border-color:var(--bs-danger)}.sample-row.editable .sample-cell{cursor:pointer;transition:background-color .1s ease}.sample-row.editable .sample-cell:hover{background-color:#28a74514;position:relative}.sample-row.editable .sample-cell:hover:after{content:\"\\270e\";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#28a74599;font-size:.75em;pointer-events:none}.pool-row.editable td.clickable{cursor:pointer;transition:background-color .1s ease}.pool-row.editable td.clickable:hover{background-color:#0dcaf01a;color:var(--bs-info)}.pool-row.editable td.clickable:hover .bi-pencil-square{opacity:.8}.pool-row.editable td.clickable .bi-pencil-square{opacity:.4;transition:opacity .1s ease}.pool-row.editable .pool-cell{cursor:pointer;transition:background-color .1s ease}.pool-row.editable .pool-cell:hover{background-color:#ffc10726;position:relative}.pool-row.editable .pool-cell:hover:after{content:\"\\270e\";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#ffc107cc;font-size:.75em;pointer-events:none}@media (max-width: 768px){.sample-row.editable .sample-cell,.pool-row.editable .pool-cell{transition:none}}.sortable{cursor:pointer;user-select:none;transition:background-color .2s ease}.sortable:hover{background-color:rgba(var(--bs-primary-rgb),.1)}.sortable.sorted{background-color:rgba(var(--bs-primary-rgb),.15)}.sortable.sorted .bi{color:var(--bs-primary)}.sortable .bi{opacity:.5;transition:all .2s ease;font-size:.75em}.sortable:hover .bi{opacity:.8}.drag-handle{cursor:grab;opacity:.6;transition:opacity .2s ease}.drag-handle:hover{opacity:1}.drag-handle:active{cursor:grabbing}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:var(--bs-light);border:1px solid var(--bs-border-color)}.cdk-drag-preview .header-cell{padding:.5rem;font-size:.875rem;font-weight:500}.cdk-drag-placeholder{opacity:.5;background:rgba(var(--bs-primary-rgb),.1)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging th:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'ccv-metadata-table-details', standalone: true, imports: [CommonModule, RouterModule, NgbModule, DragDropModule], template: "<div class=\"metadata-table-details-container\">\n  <!-- Header Section with Breadcrumbs -->\n  <nav class=\"navbar navbar-expand-lg bg-body-tertiary shadow-sm\">\n    <div class=\"container-fluid\">\n      <div class=\"d-flex align-items-center justify-content-between w-100\">\n        <div class=\"d-flex align-items-center\">\n          <!-- Breadcrumb Navigation -->\n          <nav aria-label=\"breadcrumb\" class=\"me-3\">\n            <ol class=\"breadcrumb mb-0\">\n              <li class=\"breadcrumb-item\">\n                <a routerLink=\"/metadata-tables\" class=\"text-decoration-none\">\n                  <i class=\"bi bi-table me-1\"></i>Metadata Tables\n                </a>\n              </li>\n              <li class=\"breadcrumb-item active\" aria-current=\"page\">\n                @if (table()) {\n                  {{ table()!.name }}\n                } @else {\n                  Table Details\n                }\n              </li>\n            </ol>\n          </nav>\n\n          <!-- Table Status Badge -->\n          @if (table()) {\n            <span class=\"badge ms-2\" [class]=\"getTableStatusClass()\">\n              {{ getTableStatusBadge() }}\n            </span>\n          }\n        </div>\n\n        <!-- Action Buttons -->\n        <div class=\"d-flex gap-2\">\n          <button\n            type=\"button\"\n            class=\"btn btn-outline-secondary btn-sm\"\n            (click)=\"navigateBack()\"\n            title=\"Back to Tables\">\n            <i class=\"bi bi-arrow-left me-1\"></i>Back\n          </button>\n\n          <!-- View Mode Toggle -->\n          @if (hasColumns()) {\n            <div class=\"btn-group\" role=\"group\">\n              <button\n                type=\"button\"\n                class=\"btn btn-sm\"\n                [class]=\"viewMode() === 'list' ? 'btn-primary' : 'btn-outline-primary'\"\n                (click)=\"switchToListMode()\"\n                title=\"Column List View\">\n                <i class=\"bi bi-list-ul me-1\"></i>List\n              </button>\n              <button\n                type=\"button\"\n                class=\"btn btn-sm\"\n                [class]=\"viewMode() === 'table' ? 'btn-primary' : 'btn-outline-primary'\"\n                (click)=\"switchToTableMode()\"\n                title=\"Table Data View\">\n                <i class=\"bi bi-table me-1\"></i>Table\n              </button>\n            </div>\n          }\n          <!-- Import Dropdown -->\n          @if (table() && table()!.canEdit) {\n            <div class=\"btn-group\" ngbDropdown>\n              <!-- Hidden file inputs -->\n              <input\n                #fileInput\n                type=\"file\"\n                accept=\".txt,.tsv\"\n                style=\"display: none;\"\n                (change)=\"importSdrf($event)\">\n              <input\n                #excelInput\n                type=\"file\"\n                accept=\".xlsx,.xls\"\n                style=\"display: none;\"\n                (change)=\"importExcel($event)\">\n              \n              <button\n                type=\"button\"\n                class=\"btn btn-outline-success btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\"\n                title=\"Import Data\">\n                <i class=\"bi bi-upload me-1\"></i>Import\n              </button>\n              <div class=\"dropdown-menu\" ngbDropdownMenu>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"triggerFileInput(); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-text me-2\"></i>Import SDRF File\n                </a>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"triggerExcelInput(); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-spreadsheet me-2\"></i>Import Excel Template\n                </a>\n              </div>\n            </div>\n          }\n\n          <!-- Export Dropdown -->\n          @if (table() && hasColumns()) {\n            <div class=\"btn-group\" ngbDropdown>\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-info btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\"\n                title=\"Export Table\">\n                <i class=\"bi bi-download me-1\"></i>Export\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"exportToSdrf('sdrf'); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-text me-2\"></i>Export as SDRF\n                </a>\n                <a class=\"dropdown-item\" href=\"#\" (click)=\"exportToSdrf('excel'); $event.preventDefault()\">\n                  <i class=\"bi bi-file-earmark-spreadsheet me-2\"></i>Export as Excel\n                </a>\n              </div>\n            </div>\n          }\n\n          <!-- Edit Button -->\n          @if (table() && table()!.canEdit) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-primary btn-sm\"\n              (click)=\"editTable()\"\n              [disabled]=\"isLoading()\"\n              title=\"Edit Table\">\n              <i class=\"bi bi-pencil me-1\"></i>Edit\n            </button>\n          }\n\n          <!-- Reorder Columns Button -->\n          @if (table() && table()!.canEdit && hasColumns()) {\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-warning btn-sm\"\n              (click)=\"reorderColumns()\"\n              [disabled]=\"isLoading()\"\n              title=\"Reorder Columns by Schema\">\n              <i class=\"bi bi-arrows-move me-1\"></i>Reorder\n            </button>\n          }\n\n          <!-- Create Pool Button -->\n          @if (table() && table()!.canEdit && hasColumns()) {\n            <button\n              type=\"button\"\n              class=\"btn btn-success btn-sm\"\n              (click)=\"createPool()\"\n              [disabled]=\"isLoading()\"\n              title=\"Create Sample Pool\">\n              <i class=\"bi bi-plus-circle me-1\"></i>Create Pool\n            </button>\n          }\n\n          <!-- More Actions Dropdown -->\n          @if (table() && table()!.canEdit) {\n            <div class=\"btn-group\" ngbDropdown>\n              <button\n                type=\"button\"\n                class=\"btn btn-outline-danger btn-sm dropdown-toggle\"\n                ngbDropdownToggle\n                [disabled]=\"isLoading()\">\n                <i class=\"bi bi-three-dots-vertical\"></i>\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-end\" ngbDropdownMenu>\n                <a class=\"dropdown-item text-danger\" href=\"#\" (click)=\"deleteTable(); $event.preventDefault()\">\n                  <i class=\"bi bi-trash me-2\"></i>Delete Table\n                </a>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </nav>\n\n  <!-- Loading Spinner -->\n  @if (isLoading()) {\n    <div class=\"d-flex justify-content-center align-items-center\" style=\"height: 400px;\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n  }\n\n  <!-- Table Details Content -->\n  @if (table() && !isLoading()) {\n    <div class=\"table-details-content p-4\">\n\n      <!-- Table Information Card -->\n      <div class=\"card mb-4\">\n        <div class=\"card-header\">\n          <div class=\"d-flex align-items-center justify-content-between\">\n            <h5 class=\"mb-0\">\n              <i class=\"bi bi-info-circle me-2\"></i>Table Information\n            </h5>\n            <small class=\"text-muted\">\n              Created {{ table()!.createdAt | date:'medium' }}\n            </small>\n          </div>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"row\">\n            <div class=\"col-md-8\">\n              <h3 class=\"fw-bold mb-3\">{{ table()!.name }}</h3>\n              @if (table()!.description) {\n                <p class=\"text-muted mb-3\">{{ table()!.description }}</p>\n              }\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-hash text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Sample Count:</span>\n                    <span class=\"badge bg-primary\">{{ table()!.sampleCount }}</span>\n                  </div>\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-columns-gap text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Columns:</span>\n                    <span class=\"badge bg-info\">{{ table()!.columns?.length || 0 }}</span>\n                  </div>\n                </div>\n                <div class=\"col-md-6\">\n                  @if (table()!.ownerUsername) {\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <i class=\"bi bi-person text-muted me-2\"></i>\n                      <span class=\"fw-semibold me-2\">Owner:</span>\n                      <span>{{ table()!.ownerUsername }}</span>\n                    </div>\n                  }\n                  @if (table()!.labGroupName) {\n                    <div class=\"d-flex align-items-center mb-2\">\n                      <i class=\"bi bi-people text-muted me-2\"></i>\n                      <span class=\"fw-semibold me-2\">Lab Group:</span>\n                      <span>{{ table()!.labGroupName }}</span>\n                    </div>\n                  }\n                  <div class=\"d-flex align-items-center mb-2\">\n                    <i class=\"bi bi-tag text-muted me-2\"></i>\n                    <span class=\"fw-semibold me-2\">Version:</span>\n                    <span class=\"badge bg-light text-dark\">{{ table()!.version || 'v1.0' }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-md-4 text-end\">\n              <div class=\"d-flex flex-column gap-2\">\n                @if (table()!.isLocked) {\n                  <span class=\"badge bg-warning\">\n                    <i class=\"bi bi-lock me-1\"></i>Locked\n                  </span>\n                }\n                @if (table()!.isPublished) {\n                  <span class=\"badge bg-success\">\n                    <i class=\"bi bi-cloud-check me-1\"></i>Published\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Sample Pool Table -->\n      @if (viewMode() === 'table' && hasPools()) {\n        <div class=\"card mb-4\">\n          <div class=\"card-header\">\n            <h5 class=\"mb-0\">\n              <i class=\"bi bi-layers me-2\"></i>Sample Pool Table\n              <span class=\"badge bg-warning ms-2\">{{ sortedPools().length }} pools</span>\n            </h5>\n          </div>\n          <div class=\"card-body p-0\">\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead class=\"table-light\">\n                  <tr>\n                    <th scope=\"col\" style=\"width: 80px;\" class=\"bg-secondary bg-opacity-10 text-secondary\">Pool</th>\n                    @for (column of sortedColumns(); track column.id) {\n                      <th scope=\"col\" [class]=\"getColumnHeaderClass(column)\" [title]=\"column.name\">\n                        <div class=\"header-cell d-flex justify-content-between align-items-center\">\n                          <span>{{ getShortColumnName(column) }}</span>\n                          @if (table()!.canEdit) {\n                            <div class=\"header-actions\">\n                              <button\n                                type=\"button\"\n                                class=\"btn btn-sm btn-outline-primary header-edit-btn me-1\"\n                                (click)=\"editColumnValue(column)\"\n                                [title]=\"'Edit default value for ' + column.name\">\n                                <i class=\"bi bi-pencil\"></i>\n                              </button>\n                            </div>\n                          }\n                        </div>\n                      </th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (poolRow of poolTableRows(); track poolRow._poolId) {\n                    <tr class=\"pool-row\" [class.editable]=\"table()!.canEdit\">\n                      <td class=\"text-muted fw-semibold\" \n                          [class.clickable]=\"table()!.canEdit\"\n                          (click)=\"table()!.canEdit ? editPool(poolRow._poolData) : null\"\n                          [title]=\"table()!.canEdit ? 'Click to edit pool: ' + poolRow._poolName : poolRow._poolName\">\n                        <i class=\"bi bi-layers me-2\"></i>{{ poolRow._poolName }}\n                        @if (table()!.canEdit) {\n                          <i class=\"bi bi-pencil-square ms-1 text-primary\" style=\"font-size: 0.8em;\"></i>\n                        }\n                      </td>\n                      @for (column of sortedColumns(); track column.id) {\n                        <td\n                          class=\"pool-cell\"\n                          [class.opacity-50]=\"column.hidden\"\n                          [attr.data-pool-id]=\"poolRow._poolId\"\n                          [attr.data-column-id]=\"column.id\"\n                          (click)=\"table()!.canEdit ? editPoolColumnValue(poolRow._poolData, column) : null\"\n                          [title]=\"table()!.canEdit ? 'Click to edit ' + column.name + ' for pool ' + poolRow._poolName : ''\">\n                          {{ poolRow['col_' + column.id] || '-' }}\n                        </td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Columns/Table Section -->\n      <div class=\"card\">\n        <div class=\"card-header\">\n          <div class=\"d-flex align-items-center justify-content-between\">\n            <h5 class=\"mb-0\">\n              @if (viewMode() === 'list') {\n                <i class=\"bi bi-list-columns me-2\"></i>Table Columns\n              } @else {\n                <i class=\"bi bi-table me-2\"></i>Table Data\n              }\n            </h5>\n            \n            <!-- Column Filter -->\n            @if (hasColumns()) {\n              <div class=\"d-flex align-items-center me-3\">\n                <div class=\"input-group input-group-sm\" style=\"width: 250px;\">\n                  <span class=\"input-group-text\">\n                    <i class=\"bi bi-funnel text-muted\"></i>\n                  </span>\n                  <input\n                    type=\"text\"\n                    class=\"form-control\"\n                    placeholder=\"Filter columns...\"\n                    [value]=\"columnFilter()\"\n                    (input)=\"onColumnFilterChange($any($event.target).value)\">\n                  @if (columnFilter()) {\n                    <button\n                      type=\"button\"\n                      class=\"btn btn-outline-secondary\"\n                      (click)=\"clearColumnFilter()\"\n                      title=\"Clear filter\">\n                      <i class=\"bi bi-x\"></i>\n                    </button>\n                  }\n                </div>\n                @if (columnFilter()) {\n                  <small class=\"text-muted ms-2\">\n                    {{ filteredColumnCount }}/{{ totalColumnCount }}\n                  </small>\n                }\n              </div>\n            }\n            \n            <div class=\"d-flex gap-2 align-items-center\">\n              @if (viewMode() === 'list') {\n                <span class=\"badge bg-primary\">{{ sortedColumns().length }} columns</span>\n                @if (table() && table()!.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-success btn-sm\"\n                    (click)=\"openAddColumnModal()\"\n                    [disabled]=\"isLoading()\"\n                    title=\"Add new column with automatic reordering\">\n                    <i class=\"bi bi-plus-circle me-1\"></i>Add Column\n                  </button>\n                }\n                @if (table() && table()!.canEdit && sortedColumns().length === 0) {\n                  <small class=\"text-muted\">Import SDRF to add columns</small>\n                }\n              } @else {\n                <span class=\"badge bg-info\">{{ tableRows().length }} samples</span>\n                @if (hasPools()) {\n                  <span class=\"badge bg-warning\">{{ sortedPools().length }} pools</span>\n                }\n                <span class=\"badge bg-primary\">{{ sortedColumns().length }} columns</span>\n                @if (table() && table()!.canEdit) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-success btn-sm\"\n                    (click)=\"openAddColumnModal()\"\n                    [disabled]=\"isLoading()\"\n                    title=\"Add new column with automatic reordering\">\n                    <i class=\"bi bi-plus-circle me-1\"></i>Add Column\n                  </button>\n                }\n              }\n            </div>\n          </div>\n        </div>\n\n        @if (hasColumns()) {\n          <!-- List Mode: Column Definitions -->\n          @if (viewMode() === 'list') {\n            <div class=\"table-responsive\">\n              <table class=\"table table-hover mb-0\">\n                <thead>\n                  <tr>\n                    <th scope=\"col\" style=\"width: 40px;\">\n                      @if (table()!.canEdit) {\n                        <i class=\"bi bi-arrows-move text-muted\" title=\"Drag to reorder\"></i>\n                      }\n                    </th>\n                    <th scope=\"col\" style=\"width: 60px;\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('position')\"\n                        [class.sorted]=\"isSorted('position')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>#</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('position')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('name')\"\n                        [class.sorted]=\"isSorted('name')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Column Name</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('name')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('type')\"\n                        [class.sorted]=\"isSorted('type')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Type</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('type')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\" \n                        class=\"sortable\" \n                        (click)=\"sortBy('value')\"\n                        [class.sorted]=\"isSorted('value')\">\n                      <div class=\"d-flex align-items-center justify-content-between\">\n                        <span>Value</span>\n                        <i class=\"bi ms-1\" [class]=\"getSortIcon('value')\"></i>\n                      </div>\n                    </th>\n                    <th scope=\"col\">Properties</th>\n                    <th scope=\"col\" style=\"width: 100px;\">Actions</th>\n                  </tr>\n                </thead>\n                <tbody cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\" [cdkDropListData]=\"dragColumnsForList()\">\n                  @for (column of dragColumnsForList(); track column.id) {\n                    <tr cdkDrag [cdkDragData]=\"column\" [cdkDragDisabled]=\"!table()!.canEdit\">\n                      <td class=\"text-center\">\n                        @if (table()!.canEdit) {\n                          <i class=\"bi bi-grip-vertical drag-handle\" cdkDragHandle></i>\n                        }\n                      </td>\n                      <td class=\"text-muted fw-semibold\">\n                        {{ (column.columnPosition || 0) + 1 }}\n                      </td>\n                      <td>\n                        <div class=\"d-flex align-items-center\">\n                          <i class=\"me-2\" [class]=\"getColumnTypeIcon(column) + ' ' + getColumnTypeClass(column)\"></i>\n                          <span class=\"fw-semibold\">{{ column.name }}</span>\n                        </div>\n                      </td>\n                      <td>\n                        <span class=\"badge bg-light text-dark\">{{ column.type }}</span>\n                      </td>\n                      <td>\n                        <div>\n                          <!-- Default Value -->\n                          <div class=\"fw-semibold\">{{ getColumnValueDisplay(column) }}</div>\n\n                          <!-- Sample-specific Modifiers -->\n                          @if (hasModifiers(column)) {\n                            <div class=\"mt-1\">\n                              @for (modifierDisplay of getModifiersDisplay(column); track $index) {\n                                <small class=\"badge bg-light text-dark me-1 mb-1 d-inline-block\"\n                                       style=\"font-size: 0.7rem;\"\n                                       [title]=\"modifierDisplay\">\n                                  {{ modifierDisplay }}\n                                </small>\n                              }\n                            </div>\n                          }\n                        </div>\n                      </td>\n                      <td>\n                        <div class=\"d-flex gap-1 flex-wrap\">\n                          @if (column.mandatory) {\n                            <span class=\"badge bg-danger\" title=\"Required field\">Required</span>\n                          }\n                          @if (column.readonly) {\n                            <span class=\"badge bg-secondary\" title=\"Read-only field\">Read-only</span>\n                          }\n                          @if (column.hidden) {\n                            <span class=\"badge bg-warning\" title=\"Hidden field\">Hidden</span>\n                          }\n                          @if (column.autoGenerated) {\n                            <span class=\"badge bg-info\" title=\"Auto-generated field\">Auto</span>\n                          }\n                          @if (column.ontologyType) {\n                            <span class=\"badge bg-success\" title=\"Ontology: {{ column.ontologyType }}\">\n                              {{ column.ontologyType }}\n                            </span>\n                          }\n                        </div>\n                      </td>\n                      <td>\n                        <div class=\"btn-group btn-group-sm\">\n                          <button type=\"button\" class=\"btn btn-outline-primary\"\n                                  (click)=\"viewColumnDetails(column)\"\n                                  title=\"View column details\">\n                            <i class=\"bi bi-eye\"></i>\n                          </button>\n                          @if (table()!.canEdit) {\n                            <button type=\"button\" \n                                    class=\"btn\"\n                                    [class]=\"column.hidden ? 'btn-outline-warning' : 'btn-outline-success'\"\n                                    (click)=\"toggleColumnHidden(column)\"\n                                    [title]=\"column.hidden ? 'Show column' : 'Hide column'\">\n                              <i class=\"bi\" [class]=\"column.hidden ? 'bi-eye-slash' : 'bi-eye'\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-success\"\n                                    (click)=\"editColumnValue(column)\"\n                                    title=\"Edit default value\">\n                              <i class=\"bi bi-pencil-square\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-info\"\n                                    (click)=\"autofillColumnValues(column)\"\n                                    title=\"Auto-fill values\">\n                              <i class=\"bi bi-magic\"></i>\n                            </button>\n                            <button type=\"button\" class=\"btn btn-outline-secondary\"\n                                    (click)=\"editColumnSettings(column)\"\n                                    title=\"Edit column settings\">\n                              <i class=\"bi bi-gear\"></i>\n                            </button>\n                          }\n                        </div>\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n\n          <!-- Table Data -->\n          @if (viewMode() === 'table') {\n            <div class=\"card-body p-0\">\n              <div class=\"table-responsive\">\n                <table class=\"table table-hover mb-0\">\n                  <thead class=\"table-light\">\n                    <tr>\n                      <th scope=\"col\" style=\"width: 80px;\" class=\"bg-secondary bg-opacity-10 text-secondary\">#</th>\n                      @for (column of sortedColumns(); track column.id) {\n                        <th scope=\"col\" [class]=\"getColumnHeaderClass(column)\" [title]=\"column.name\">\n                          <div class=\"header-cell d-flex justify-content-between align-items-center\">\n                            <span>{{ getShortColumnName(column) }}</span>\n                            @if (table()!.canEdit) {\n                              <div class=\"header-actions\">\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm header-edit-btn me-1\"\n                                  [class]=\"column.hidden ? 'btn-outline-warning' : 'btn-outline-success'\"\n                                  (click)=\"toggleColumnHidden(column)\"\n                                  [title]=\"column.hidden ? 'Show column' : 'Hide column'\">\n                                  <i class=\"bi\" [class]=\"column.hidden ? 'bi-eye-slash' : 'bi-eye'\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-primary header-edit-btn me-1\"\n                                  (click)=\"editColumnValue(column)\"\n                                  [title]=\"'Edit default value for ' + column.name\">\n                                  <i class=\"bi bi-pencil\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-info header-edit-btn me-1\"\n                                  (click)=\"autofillColumnValues(column)\"\n                                  [title]=\"'Auto-fill values for ' + column.name\">\n                                  <i class=\"bi bi-magic\"></i>\n                                </button>\n                                <button\n                                  type=\"button\"\n                                  class=\"btn btn-sm btn-outline-danger header-edit-btn\"\n                                  (click)=\"removeColumn(column)\"\n                                  [title]=\"'Remove ' + column.name + ' column'\">\n                                  <i class=\"bi bi-trash\"></i>\n                                </button>\n                              </div>\n                            }\n                          </div>\n                        </th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (row of paginatedRows(); track row._sampleIndex) {\n                      <tr class=\"sample-row\" [class.editable]=\"table()!.canEdit\">\n                        <td class=\"text-muted fw-semibold\">{{ row._sampleIndex }}</td>\n                        @for (column of sortedColumns(); track column.id) {\n                          <td\n                            class=\"sample-cell\"\n                            [class.opacity-50]=\"column.hidden\"\n                            [attr.data-sample-index]=\"row._sampleIndex\"\n                            [attr.data-column-id]=\"column.id\"\n                            (click)=\"table()!.canEdit ? editSampleColumnValue(column, row._sampleIndex) : null\"\n                            [title]=\"table()!.canEdit ? 'Click to edit ' + column.name + ' for sample ' + row._sampleIndex : ''\">\n                            {{ row['col_' + column.id] || '-' }}\n                          </td>\n                        }\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n\n              <!-- Table Mode Pagination -->\n              @if (viewMode() === 'table' && totalPages() > 1) {\n                <div class=\"d-flex justify-content-between align-items-center p-3 border-top\">\n                  <div class=\"d-flex align-items-center gap-2\">\n                    <span class=\"text-muted\">Rows per page:</span>\n                    <select class=\"form-select form-select-sm\" style=\"width: auto;\"\n                            [value]=\"pageSize()\"\n                            (change)=\"onPageSizeChange(+($any($event.target).value))\">\n                      <option value=\"10\">10</option>\n                      <option value=\"25\">25</option>\n                      <option value=\"50\">50</option>\n                      <option value=\"100\">100</option>\n                    </select>\n                  </div>\n                  <ngb-pagination\n                    [collectionSize]=\"tableRows().length\"\n                    [page]=\"currentPage()\"\n                    [pageSize]=\"pageSize()\"\n                    [maxSize]=\"5\"\n                    [boundaryLinks]=\"true\"\n                    [rotate]=\"true\"\n                    (pageChange)=\"onPageChange($event)\"\n                    class=\"pagination-sm mb-0\">\n                  </ngb-pagination>\n                  <span class=\"text-muted\">\n                    Showing {{ (currentPage() - 1) * pageSize() + 1 }}-{{ Math.min(currentPage() * pageSize(), tableRows().length) }}\n                    of {{ tableRows().length }} samples\n                  </span>\n                </div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"card-body text-center py-5\">\n            <div class=\"text-muted\">\n              <i class=\"bi bi-inbox display-1 mb-3\"></i>\n              <h5>No Columns Found</h5>\n              <p>This table doesn't have any columns defined yet.</p>\n              @if (table()!.canEdit) {\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"openAddColumnModal()\">\n                  <i class=\"bi bi-plus me-1\"></i>Add First Column\n                </button>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";.header-cell{position:relative}.header-cell .header-actions{opacity:0;transition:opacity .15s ease}thead th:hover .header-actions{opacity:1}.header-edit-btn{--bs-btn-padding-y: .125rem;--bs-btn-padding-x: .25rem;--bs-btn-font-size: .65rem;border:none!important}.header-edit-btn.btn-outline-primary:hover{background-color:var(--bs-primary);border-color:var(--bs-primary)}.header-edit-btn.btn-outline-danger:hover{background-color:var(--bs-danger);border-color:var(--bs-danger)}.sample-row.editable .sample-cell{cursor:pointer;transition:background-color .1s ease}.sample-row.editable .sample-cell:hover{background-color:#28a74514;position:relative}.sample-row.editable .sample-cell:hover:after{content:\"\\270e\";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#28a74599;font-size:.75em;pointer-events:none}.pool-row.editable td.clickable{cursor:pointer;transition:background-color .1s ease}.pool-row.editable td.clickable:hover{background-color:#0dcaf01a;color:var(--bs-info)}.pool-row.editable td.clickable:hover .bi-pencil-square{opacity:.8}.pool-row.editable td.clickable .bi-pencil-square{opacity:.4;transition:opacity .1s ease}.pool-row.editable .pool-cell{cursor:pointer;transition:background-color .1s ease}.pool-row.editable .pool-cell:hover{background-color:#ffc10726;position:relative}.pool-row.editable .pool-cell:hover:after{content:\"\\270e\";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#ffc107cc;font-size:.75em;pointer-events:none}@media (max-width: 768px){.sample-row.editable .sample-cell,.pool-row.editable .pool-cell{transition:none}}.sortable{cursor:pointer;user-select:none;transition:background-color .2s ease}.sortable:hover{background-color:rgba(var(--bs-primary-rgb),.1)}.sortable.sorted{background-color:rgba(var(--bs-primary-rgb),.15)}.sortable.sorted .bi{color:var(--bs-primary)}.sortable .bi{opacity:.5;transition:all .2s ease;font-size:.75em}.sortable:hover .bi{opacity:.8}.drag-handle{cursor:grab;opacity:.6;transition:opacity .2s ease}.drag-handle:hover{opacity:1}.drag-handle:active{cursor:grabbing}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:var(--bs-light);border:1px solid var(--bs-border-color)}.cdk-drag-preview .header-cell{padding:.5rem;font-size:.875rem;font-weight:500}.cdk-drag-placeholder{opacity:.5;background:rgba(var(--bs-primary-rgb),.1)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging th:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: MetadataTableService }, { type: AsyncExportService }, { type: ChunkedUploadService }, { type: SamplePoolService }, { type: MetadataColumnService }, { type: i3.ToastService }, { type: AsyncTaskUIService }, { type: i2.NgbModal }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -9136,6 +9302,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                 args: ['excelInput']
             }] } });
 
+class MetadataColumnAutofillModal {
+    fb;
+    activeModal;
+    config;
+    autofillForm;
+    isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
+    fillMode = signal('template', ...(ngDevMode ? [{ debugName: "fillMode" }] : []));
+    sampleIndices = signal([], ...(ngDevMode ? [{ debugName: "sampleIndices" }] : []));
+    allSampleNumbers = computed(() => {
+        return Array.from({ length: this.config.sampleCount }, (_, idx) => idx + 1);
+    }, ...(ngDevMode ? [{ debugName: "allSampleNumbers" }] : []));
+    previewValues = computed(() => {
+        const mode = this.fillMode();
+        const indices = this.sampleIndices();
+        if (indices.length === 0) {
+            return [];
+        }
+        if (mode === 'template') {
+            const template = this.autofillForm?.get('template')?.value || '';
+            if (!template)
+                return [];
+            return indices.map(index => ({
+                index,
+                value: this.generateValue(template, index)
+            }));
+        }
+        else {
+            const startValue = this.autofillForm?.get('rangeStart')?.value;
+            const increment = this.autofillForm?.get('rangeIncrement')?.value || 1;
+            if (startValue === null || startValue === undefined)
+                return [];
+            return indices.map((index, i) => ({
+                index,
+                value: (startValue + (i * increment)).toString()
+            }));
+        }
+    }, ...(ngDevMode ? [{ debugName: "previewValues" }] : []));
+    constructor(fb, activeModal) {
+        this.fb = fb;
+        this.activeModal = activeModal;
+        this.autofillForm = this.fb.group({
+            fillMode: ['template'],
+            template: ['run {sample_index}', [Validators.required]],
+            rangeStart: [1],
+            rangeIncrement: [1],
+            applyToSelection: [true],
+            selectedIndices: [[]]
+        });
+    }
+    ngOnInit() {
+        const indices = this.config.selectedSampleIndices && this.config.selectedSampleIndices.length > 0
+            ? this.config.selectedSampleIndices
+            : Array.from({ length: this.config.sampleCount }, (_, i) => i + 1);
+        this.sampleIndices.set(indices);
+        this.autofillForm.patchValue({ selectedIndices: indices });
+        this.autofillForm.get('template')?.valueChanges.subscribe(() => {
+            this.previewValues();
+        });
+        this.autofillForm.get('rangeStart')?.valueChanges.subscribe(() => {
+            this.previewValues();
+        });
+        this.autofillForm.get('rangeIncrement')?.valueChanges.subscribe(() => {
+            this.previewValues();
+        });
+    }
+    generateValue(template, sampleIndex) {
+        return template
+            .replace(/{sample_index}/g, sampleIndex.toString())
+            .replace(/{index}/g, sampleIndex.toString())
+            .replace(/{n}/g, sampleIndex.toString());
+    }
+    toggleSample(index) {
+        const current = this.sampleIndices();
+        const newIndices = current.includes(index)
+            ? current.filter(i => i !== index)
+            : [...current, index].sort((a, b) => a - b);
+        this.sampleIndices.set(newIndices);
+        this.autofillForm.patchValue({ selectedIndices: newIndices });
+    }
+    selectAllSamples() {
+        const allIndices = Array.from({ length: this.config.sampleCount }, (_, i) => i + 1);
+        this.sampleIndices.set(allIndices);
+        this.autofillForm.patchValue({ selectedIndices: allIndices });
+    }
+    clearSelection() {
+        this.sampleIndices.set([]);
+        this.autofillForm.patchValue({ selectedIndices: [] });
+    }
+    isSampleSelected(index) {
+        return this.sampleIndices().includes(index);
+    }
+    onSubmit() {
+        if (this.autofillForm.invalid || this.isSubmitting()) {
+            return;
+        }
+        const indices = this.sampleIndices();
+        if (indices.length === 0) {
+            return;
+        }
+        const mode = this.fillMode();
+        let values;
+        if (mode === 'template') {
+            const template = this.autofillForm.get('template')?.value;
+            values = indices.map(index => ({
+                sampleIndex: index,
+                value: this.generateValue(template, index)
+            }));
+        }
+        else {
+            const startValue = this.autofillForm.get('rangeStart')?.value;
+            const increment = this.autofillForm.get('rangeIncrement')?.value || 1;
+            values = indices.map((index, i) => ({
+                sampleIndex: index,
+                value: (startValue + (i * increment)).toString()
+            }));
+        }
+        this.activeModal.close({
+            fillMode: mode,
+            sampleIndices: indices,
+            values
+        });
+    }
+    close() {
+        this.activeModal.dismiss('cancel');
+    }
+    useTemplate(template) {
+        this.autofillForm.patchValue({ template });
+    }
+    isFieldInvalid(fieldName) {
+        const field = this.autofillForm.get(fieldName);
+        return !!(field && field.invalid && field.touched);
+    }
+    Array = Array;
+    Math = Math;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataColumnAutofillModal, deps: [{ token: i1.FormBuilder }, { token: i2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MetadataColumnAutofillModal, isStandalone: true, selector: "ccv-metadata-column-autofill-modal", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-magic me-2\"></i>Auto-fill Column Values\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"close()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"autofillForm\">\n    <div class=\"row\">\n      <div class=\"col-12 mb-3\">\n        <div class=\"alert alert-info\">\n          <i class=\"bi bi-info-circle me-2\"></i>\n          <strong>Column:</strong> {{ config.column.name }} ({{ config.column.type }})\n        </div>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <label class=\"form-label\">Fill Mode</label>\n        <div class=\"btn-group w-100\">\n          <button\n            type=\"button\"\n            class=\"btn\"\n            [class.btn-primary]=\"fillMode() === 'template'\"\n            [class.btn-outline-secondary]=\"fillMode() !== 'template'\"\n            (click)=\"fillMode.set('template'); autofillForm.patchValue({ fillMode: 'template' })\"\n          >\n            <i class=\"bi bi-code-square me-1\"></i>Template\n          </button>\n          <button\n            type=\"button\"\n            class=\"btn\"\n            [class.btn-primary]=\"fillMode() === 'range'\"\n            [class.btn-outline-secondary]=\"fillMode() !== 'range'\"\n            (click)=\"fillMode.set('range'); autofillForm.patchValue({ fillMode: 'range' })\"\n          >\n            <i class=\"bi bi-123 me-1\"></i>Numeric Range\n          </button>\n        </div>\n      </div>\n\n      @if (fillMode() === 'template') {\n        <div class=\"col-12 mb-3\">\n          <label for=\"template\" class=\"form-label\">\n            Value Template *\n          </label>\n          <input\n            type=\"text\"\n            id=\"template\"\n            class=\"form-control\"\n            formControlName=\"template\"\n            placeholder=\"run {sample_index}\"\n            [class.is-invalid]=\"isFieldInvalid('template')\"\n          />\n          @if (isFieldInvalid('template')) {\n            <div class=\"invalid-feedback\">Template is required</div>\n          }\n          <div class=\"form-text\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Use <code>{{ '{' }}sample_index{{ '}' }}</code>, <code>{{ '{' }}index{{ '}' }}</code>, or <code>{{ '{' }}n{{ '}' }}</code> as placeholder for sample number.\n          </div>\n        </div>\n\n        <div class=\"col-12 mb-3\">\n          <label class=\"form-label\">Quick Templates</label>\n          <div class=\"d-flex flex-wrap gap-2\">\n            <button\n              type=\"button\"\n              class=\"btn btn-sm btn-outline-secondary\"\n              (click)=\"useTemplate('run {sample_index}')\"\n            >\n              <i class=\"bi bi-lightning me-1\"></i>run {{ '{' }}n{{ '}' }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn btn-sm btn-outline-secondary\"\n              (click)=\"useTemplate('sample_{sample_index}')\"\n            >\n              <i class=\"bi bi-lightning me-1\"></i>sample_{{ '{' }}n{{ '}' }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn btn-sm btn-outline-secondary\"\n              (click)=\"useTemplate('assay {sample_index}')\"\n            >\n              <i class=\"bi bi-lightning me-1\"></i>assay {{ '{' }}n{{ '}' }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn btn-sm btn-outline-secondary\"\n              (click)=\"useTemplate('replicate_{sample_index}')\"\n            >\n              <i class=\"bi bi-lightning me-1\"></i>replicate_{{ '{' }}n{{ '}' }}\n            </button>\n          </div>\n        </div>\n      }\n\n      @if (fillMode() === 'range') {\n        <div class=\"col-12 mb-3\">\n          <div class=\"row\">\n            <div class=\"col-6\">\n              <label for=\"rangeStart\" class=\"form-label\">\n                Start Value *\n              </label>\n              <input\n                type=\"number\"\n                id=\"rangeStart\"\n                class=\"form-control\"\n                formControlName=\"rangeStart\"\n                placeholder=\"1\"\n                [class.is-invalid]=\"isFieldInvalid('rangeStart')\"\n              />\n              @if (isFieldInvalid('rangeStart')) {\n                <div class=\"invalid-feedback\">Start value is required</div>\n              }\n              <div class=\"form-text\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                First value in the sequence\n              </div>\n            </div>\n            <div class=\"col-6\">\n              <label for=\"rangeIncrement\" class=\"form-label\">\n                Increment *\n              </label>\n              <input\n                type=\"number\"\n                id=\"rangeIncrement\"\n                class=\"form-control\"\n                formControlName=\"rangeIncrement\"\n                placeholder=\"1\"\n                [class.is-invalid]=\"isFieldInvalid('rangeIncrement')\"\n              />\n              @if (isFieldInvalid('rangeIncrement')) {\n                <div class=\"invalid-feedback\">Increment is required</div>\n              }\n              <div class=\"form-text\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                Step between values\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"d-flex justify-content-between align-items-center mb-2\">\n          <label class=\"form-label mb-0\">\n            Apply to Samples <span class=\"text-muted\">({{ sampleIndices().length }} of {{ config.sampleCount }} selected)</span>\n          </label>\n          <div class=\"btn-group btn-group-sm\">\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-primary\"\n              (click)=\"selectAllSamples()\"\n            >\n              <i class=\"bi bi-check-all me-1\"></i>Select All\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-secondary\"\n              (click)=\"clearSelection()\"\n            >\n              <i class=\"bi bi-x me-1\"></i>Clear\n            </button>\n          </div>\n        </div>\n\n        <div class=\"sample-grid\">\n          @for (i of allSampleNumbers(); track i) {\n            <button\n              type=\"button\"\n              class=\"btn btn-sm sample-button\"\n              [class.btn-primary]=\"isSampleSelected(i)\"\n              [class.btn-outline-secondary]=\"!isSampleSelected(i)\"\n              (click)=\"toggleSample(i)\"\n            >\n              {{ i }}\n            </button>\n          }\n        </div>\n        <div class=\"form-text\">\n          <i class=\"bi bi-info-circle me-1\"></i>\n          Click sample numbers to select/deselect. Auto-fill will only apply to selected samples.\n        </div>\n      </div>\n\n      <div class=\"col-12\">\n        <label class=\"form-label\">\n          Preview\n          @if (previewValues().length > 0) {\n            <span class=\"text-muted\">(Showing {{ Math.min(10, previewValues().length) }} of {{ previewValues().length }})</span>\n          }\n        </label>\n\n        @if (previewValues().length === 0) {\n          <div class=\"alert alert-warning\">\n            <i class=\"bi bi-exclamation-triangle me-2\"></i>\n            No samples selected. Please select at least one sample.\n          </div>\n        } @else {\n          <div class=\"preview-list\">\n            @for (item of previewValues().slice(0, 10); track item.index) {\n              <div class=\"preview-item\">\n                <span class=\"badge bg-secondary me-2\">Sample {{ item.index }}</span>\n                <span class=\"preview-value\">{{ item.value }}</span>\n              </div>\n            }\n            @if (previewValues().length > 10) {\n              <div class=\"preview-item text-muted\">\n                <i class=\"bi bi-three-dots\"></i>\n                and {{ previewValues().length - 10 }} more...\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button\n    type=\"button\"\n    class=\"btn btn-outline-secondary\"\n    (click)=\"close()\"\n    [disabled]=\"isSubmitting()\"\n  >\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]=\"autofillForm.invalid || sampleIndices().length === 0 || isSubmitting()\"\n  >\n    @if (isSubmitting()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-magic me-1\"></i>\n    Apply Auto-fill\n  </button>\n</div>\n", styles: [".sample-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(45px,1fr));gap:.5rem;max-height:280px;overflow-y:auto;padding:.75rem;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);background-color:var(--bs-light)}.sample-button{min-width:45px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem}.preview-list{max-height:250px;overflow-y:auto;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);padding:.75rem;background-color:var(--bs-light)}.preview-item{padding:.5rem .75rem;margin-bottom:.5rem;background-color:#fff;border-radius:var(--bs-border-radius);display:flex;align-items:center;border:1px solid var(--bs-border-color-translucent)}.preview-item:last-child{margin-bottom:0}.preview-value{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-weight:500;color:var(--bs-body-color)}\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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MetadataColumnAutofillModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'ccv-metadata-column-autofill-modal', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\">\n    <i class=\"bi bi-magic me-2\"></i>Auto-fill Column Values\n  </h4>\n  <button type=\"button\" class=\"btn-close\" (click)=\"close()\"></button>\n</div>\n\n<div class=\"modal-body\">\n  <form [formGroup]=\"autofillForm\">\n    <div class=\"row\">\n      <div class=\"col-12 mb-3\">\n        <div class=\"alert alert-info\">\n          <i class=\"bi bi-info-circle me-2\"></i>\n          <strong>Column:</strong> {{ config.column.name }} ({{ config.column.type }})\n        </div>\n      </div>\n\n      <div class=\"col-12 mb-3\">\n        <label class=\"form-label\">Fill Mode</label>\n        <div class=\"btn-group w-100\">\n          <button\n            type=\"button\"\n            class=\"btn\"\n            [class.btn-primary]=\"fillMode() === 'template'\"\n            [class.btn-outline-secondary]=\"fillMode() !== 'template'\"\n            (click)=\"fillMode.set('template'); autofillForm.patchValue({ fillMode: 'template' })\"\n          >\n            <i class=\"bi bi-code-square me-1\"></i>Template\n          </button>\n          <button\n            type=\"button\"\n            class=\"btn\"\n            [class.btn-primary]=\"fillMode() === 'range'\"\n            [class.btn-outline-secondary]=\"fillMode() !== 'range'\"\n            (click)=\"fillMode.set('range'); autofillForm.patchValue({ fillMode: 'range' })\"\n          >\n            <i class=\"bi bi-123 me-1\"></i>Numeric Range\n          </button>\n        </div>\n      </div>\n\n      @if (fillMode() === 'template') {\n        <div class=\"col-12 mb-3\">\n          <label for=\"template\" class=\"form-label\">\n            Value Template *\n          </label>\n          <input\n            type=\"text\"\n            id=\"template\"\n            class=\"form-control\"\n            formControlName=\"template\"\n            placeholder=\"run {sample_index}\"\n            [class.is-invalid]=\"isFieldInvalid('template')\"\n          />\n          @if (isFieldInvalid('template')) {\n            <div class=\"invalid-feedback\">Template is required</div>\n          }\n          <div class=\"form-text\">\n            <i class=\"bi bi-info-circle me-1\"></i>\n            Use <code>{{ '{' }}sample_index{{ '}' }}</code>, <code>{{ '{' }}index{{ '}' }}</code>, or <code>{{ '{' }}n{{ '}' }}</code> as placeholder for sample number.\n          </div>\n        </div>\n\n        <div class=\"col-12 mb-3\">\n          <label class=\"form-label\">Quick Templates</label>\n          <div class=\"d-flex flex-wrap gap-2\">\n            <button\n              type=\"button\"\n              class=\"btn btn-sm btn-outline-secondary\"\n              (click)=\"useTemplate('run {sample_index}')\"\n            >\n              <i class=\"bi bi-lightning me-1\"></i>run {{ '{' }}n{{ '}' }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn btn-sm btn-outline-secondary\"\n              (click)=\"useTemplate('sample_{sample_index}')\"\n            >\n              <i class=\"bi bi-lightning me-1\"></i>sample_{{ '{' }}n{{ '}' }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn btn-sm btn-outline-secondary\"\n              (click)=\"useTemplate('assay {sample_index}')\"\n            >\n              <i class=\"bi bi-lightning me-1\"></i>assay {{ '{' }}n{{ '}' }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn btn-sm btn-outline-secondary\"\n              (click)=\"useTemplate('replicate_{sample_index}')\"\n            >\n              <i class=\"bi bi-lightning me-1\"></i>replicate_{{ '{' }}n{{ '}' }}\n            </button>\n          </div>\n        </div>\n      }\n\n      @if (fillMode() === 'range') {\n        <div class=\"col-12 mb-3\">\n          <div class=\"row\">\n            <div class=\"col-6\">\n              <label for=\"rangeStart\" class=\"form-label\">\n                Start Value *\n              </label>\n              <input\n                type=\"number\"\n                id=\"rangeStart\"\n                class=\"form-control\"\n                formControlName=\"rangeStart\"\n                placeholder=\"1\"\n                [class.is-invalid]=\"isFieldInvalid('rangeStart')\"\n              />\n              @if (isFieldInvalid('rangeStart')) {\n                <div class=\"invalid-feedback\">Start value is required</div>\n              }\n              <div class=\"form-text\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                First value in the sequence\n              </div>\n            </div>\n            <div class=\"col-6\">\n              <label for=\"rangeIncrement\" class=\"form-label\">\n                Increment *\n              </label>\n              <input\n                type=\"number\"\n                id=\"rangeIncrement\"\n                class=\"form-control\"\n                formControlName=\"rangeIncrement\"\n                placeholder=\"1\"\n                [class.is-invalid]=\"isFieldInvalid('rangeIncrement')\"\n              />\n              @if (isFieldInvalid('rangeIncrement')) {\n                <div class=\"invalid-feedback\">Increment is required</div>\n              }\n              <div class=\"form-text\">\n                <i class=\"bi bi-info-circle me-1\"></i>\n                Step between values\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <div class=\"col-12 mb-3\">\n        <div class=\"d-flex justify-content-between align-items-center mb-2\">\n          <label class=\"form-label mb-0\">\n            Apply to Samples <span class=\"text-muted\">({{ sampleIndices().length }} of {{ config.sampleCount }} selected)</span>\n          </label>\n          <div class=\"btn-group btn-group-sm\">\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-primary\"\n              (click)=\"selectAllSamples()\"\n            >\n              <i class=\"bi bi-check-all me-1\"></i>Select All\n            </button>\n            <button\n              type=\"button\"\n              class=\"btn btn-outline-secondary\"\n              (click)=\"clearSelection()\"\n            >\n              <i class=\"bi bi-x me-1\"></i>Clear\n            </button>\n          </div>\n        </div>\n\n        <div class=\"sample-grid\">\n          @for (i of allSampleNumbers(); track i) {\n            <button\n              type=\"button\"\n              class=\"btn btn-sm sample-button\"\n              [class.btn-primary]=\"isSampleSelected(i)\"\n              [class.btn-outline-secondary]=\"!isSampleSelected(i)\"\n              (click)=\"toggleSample(i)\"\n            >\n              {{ i }}\n            </button>\n          }\n        </div>\n        <div class=\"form-text\">\n          <i class=\"bi bi-info-circle me-1\"></i>\n          Click sample numbers to select/deselect. Auto-fill will only apply to selected samples.\n        </div>\n      </div>\n\n      <div class=\"col-12\">\n        <label class=\"form-label\">\n          Preview\n          @if (previewValues().length > 0) {\n            <span class=\"text-muted\">(Showing {{ Math.min(10, previewValues().length) }} of {{ previewValues().length }})</span>\n          }\n        </label>\n\n        @if (previewValues().length === 0) {\n          <div class=\"alert alert-warning\">\n            <i class=\"bi bi-exclamation-triangle me-2\"></i>\n            No samples selected. Please select at least one sample.\n          </div>\n        } @else {\n          <div class=\"preview-list\">\n            @for (item of previewValues().slice(0, 10); track item.index) {\n              <div class=\"preview-item\">\n                <span class=\"badge bg-secondary me-2\">Sample {{ item.index }}</span>\n                <span class=\"preview-value\">{{ item.value }}</span>\n              </div>\n            }\n            @if (previewValues().length > 10) {\n              <div class=\"preview-item text-muted\">\n                <i class=\"bi bi-three-dots\"></i>\n                and {{ previewValues().length - 10 }} more...\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class=\"modal-footer\">\n  <button\n    type=\"button\"\n    class=\"btn btn-outline-secondary\"\n    (click)=\"close()\"\n    [disabled]=\"isSubmitting()\"\n  >\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]=\"autofillForm.invalid || sampleIndices().length === 0 || isSubmitting()\"\n  >\n    @if (isSubmitting()) {\n      <span class=\"spinner-border spinner-border-sm me-2\"></span>\n    }\n    <i class=\"bi bi-magic me-1\"></i>\n    Apply Auto-fill\n  </button>\n</div>\n", styles: [".sample-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(45px,1fr));gap:.5rem;max-height:280px;overflow-y:auto;padding:.75rem;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);background-color:var(--bs-light)}.sample-button{min-width:45px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem}.preview-list{max-height:250px;overflow-y:auto;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);padding:.75rem;background-color:var(--bs-light)}.preview-item{padding:.5rem .75rem;margin-bottom:.5rem;background-color:#fff;border-radius:var(--bs-border-radius);display:flex;align-items:center;border:1px solid var(--bs-border-color-translucent)}.preview-item:last-child{margin-bottom:0}.preview-value{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-weight:500;color:var(--bs-body-color)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.NgbActiveModal }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
 class CupcakeVanilla {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CupcakeVanilla, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: CupcakeVanilla, isStandalone: true, selector: "ccv-cupcake-vanilla", ngImport: i0, template: `
@@ -9161,5 +9471,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AdminWebSocketService, AsyncExportService, AsyncImportService, AsyncTaskService, AsyncTaskUIService, AsyncValidationService, COLUMN_TYPE_CONFIGS, ChunkedImportService, ChunkedUploadService, ColumnEditModal, ColumnTemplateEditModal, ColumnTemplates, ColumnType, CupcakeVanilla, ElectronService, ExcelExportModalComponent, FavoriteManagement, FavouriteMetadataOptionService, MSTermType, MetadataColumnService, MetadataColumnTemplateService, MetadataColumnTemplateShareService, MetadataManagementService, MetadataTableDetails, MetadataTableEditModal, MetadataTableService, MetadataTableTemplateEditModal, MetadataTableTemplateService, MetadataTableTemplates, MetadataValidationModal, MetadataValueEditModal, NotificationService, NotificationType, OFFICIAL_SDRF_COLUMNS, ONTOLOGY_TYPE_CONFIGS, OntologySearchService, OntologyType, OntologyTypeLabels, OntologyUtils, SDRFDefaultsService, SamplePoolCreateModal, SamplePoolDetailsModal, SamplePoolEditModal, SamplePoolService, SchemaSelectionModal, SchemaService, SdrfAgeInput, SdrfCleavageInput, SdrfColumnCategory, SdrfModificationInput, SdrfSpikedCompoundInput, SdrfSyntaxService, SearchReplaceModal, TASK_STATUS_COLORS, TASK_STATUS_LABELS, TASK_TYPE_LABELS, TableCreationModalComponent, TemplatePermissionLabels, TemplatePermissionLevel, TemplateSchemaSelectionModal, ValidationResultsModal, Websocket, getRequiredSdrfColumns, getSdrfColumnByName, getSdrfColumnsByCategory, isSdrfColumnRequired, isUnimodFullData };
+export { AdminWebSocketService, AsyncExportService, AsyncImportService, AsyncTaskService, AsyncTaskUIService, AsyncValidationService, COLUMN_TYPE_CONFIGS, ChunkedImportService, ChunkedUploadService, ColumnEditModal, ColumnTemplateEditModal, ColumnTemplates, ColumnType, CupcakeVanilla, ElectronService, ExcelExportModalComponent, FavoriteManagement, FavouriteMetadataOptionService, MSTermType, MetadataColumnAutofillModal, MetadataColumnService, MetadataColumnTemplateService, MetadataColumnTemplateShareService, MetadataManagementService, MetadataTableDetails, MetadataTableEditModal, MetadataTableService, MetadataTableTemplateEditModal, MetadataTableTemplateService, MetadataTableTemplates, MetadataValidationModal, MetadataValueEditModal, NotificationService, NotificationType, OFFICIAL_SDRF_COLUMNS, ONTOLOGY_TYPE_CONFIGS, OntologySearchService, OntologyType, OntologyTypeLabels, OntologyUtils, SDRFDefaultsService, SamplePoolCreateModal, SamplePoolDetailsModal, SamplePoolEditModal, SamplePoolService, SchemaSelectionModal, SchemaService, SdrfAgeInput, SdrfCleavageInput, SdrfColumnCategory, SdrfModificationInput, SdrfSpikedCompoundInput, SdrfSyntaxService, SearchReplaceModal, TASK_STATUS_COLORS, TASK_STATUS_LABELS, TASK_TYPE_LABELS, TableCreationModalComponent, TemplatePermissionLabels, TemplatePermissionLevel, TemplateSchemaSelectionModal, ValidationResultsModal, Websocket, getRequiredSdrfColumns, getSdrfColumnByName, getSdrfColumnsByCategory, isSdrfColumnRequired, isUnimodFullData };
 //# sourceMappingURL=noatgnu-cupcake-vanilla.mjs.map