@memberjunction/ng-core-entity-forms 2.115.0 → 2.116.0

package/dist/lib/generated/Entities/CompanyIntegrationRunDetail/companyintegrationrundetail.form.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"companyintegrationrundetail.form.component.js","sourceRoot":"","sources":["../../../../../src/lib/generated/Entities/CompanyIntegrationRunDetail/companyintegrationrundetail.form.component.ts","../../../../../src/lib/generated/Entities/CompanyIntegrationRunDetail/companyintegrationrundetail.form.component.html"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,+CAA+C,EAAE,MAAM,8BAA8B,CAAA;;;;;;;;;;ICH1F,kCAA0D;IACtD,qCAAiD;IAEzC,sCAA2F;IAAzC,AAArC,4NAAe,0BAAmB,KAAC,iNAAqB,2BAAoB,KAAC;IAEtF,iCAAuB;IACnB,yBACJ;IAAA,iBAAS;IACT,mCAAa;IACT,qCAKkB;IACtB,iBAAc;IAEd,iCAAqD;IACjD,4BACJ;IAAA,iBAAS;IACT,oCAAa;IACT,wCAMoB;IAGxC,AADY,AADI,iBAAc,EACJ,EACnB;;;IA7Bc,eAAa;IAAb,6BAAa;IAWV,eAAiB;IACjB,AADA,sCAAiB,6BACS;IAIR,cAA0B;IAA1B,+CAA0B;IAK5C,eAAgG;IAGhG,AADA,AADA,AADA,sHAAgG,yDAC/C,gDACT,mCACb;;ADbhD,IAAM,wCAAwC,GAA9C,MAAM,wCAAyC,SAAQ,iBAAiB;oUAAlE,wCAAwC,SAAxC,wCAAwC;oEAAxC,wCAAwC;YCbrD,8BAAqC;YACjC,4FAA0D;YA+B9D,iBAAM;;YA/BK,cAAY;YAAZ,iCAAY;;;ADYV,wCAAwC;IANpD,aAAa,CAAC,iBAAiB,EAAE,iCAAiC,CAAC,CAAC,uCAAuC;GAM/F,wCAAwC,CAEpD;;iFAFY,wCAAwC;cALpD,SAAS;2BACI,sCAAsC;;kFAIvC,wCAAwC;AAIrD,MAAM,UAAU,4CAA4C;IACxD,+CAA+C,EAAE,CAAC;AACtD,CAAC"}
+{"version":3,"file":"companyintegrationrundetail.form.component.js","sourceRoot":"","sources":["../../../../../src/lib/generated/Entities/CompanyIntegrationRunDetail/companyintegrationrundetail.form.component.ts","../../../../../src/lib/generated/Entities/CompanyIntegrationRunDetail/companyintegrationrundetail.form.component.html"],"names":[],"mappings":"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"}

package/dist/lib/generated/Entities/Component/component.form.component.d.ts

@@ -3,6 +3,24 @@ import { BaseFormComponent } from '@memberjunction/ng-base-forms';
 import * as i0 from "@angular/core";
 export declare class ComponentFormComponent extends BaseFormComponent {
     record: ComponentEntity;
+    sectionsExpanded: {
+        identificationVersioning: boolean;
+        specificationDesign: boolean;
+        developerOwnership: boolean;
+        registrySynchronization: boolean;
+        systemMetadata: boolean;
+        mJComponentDependencies: boolean;
+        mJComponentLibraryLinks: boolean;
+        mJComponentDependencies1: boolean;
+    };
+    sectionRowCounts: {
+        [key: string]: number;
+    };
+    toggleSection(section: keyof typeof this.sectionsExpanded): void;
+    expandAllSections(): void;
+    collapseAllSections(): void;
+    getExpandedCount(): number;
+    filterSections(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComponentFormComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ComponentFormComponent, "gen-component-form", never, {}, {}, never, never, false, never>;
 }

package/dist/lib/generated/Entities/Component/component.form.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.form.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/generated/Entities/Component/component.form.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;;AAIlE,qBAMa,sBAAuB,SAAQ,iBAAiB;IAClD,MAAM,EAAG,eAAe,CAAC;yCADvB,sBAAsB;2CAAtB,sBAAsB;CAElC;AAED,wBAAgB,0BAA0B,SAEzC"}
+{"version":3,"file":"component.form.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/generated/Entities/Component/component.form.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;;AAGlE,qBAMa,sBAAuB,SAAQ,iBAAiB;IAClD,MAAM,EAAG,eAAe,CAAC;IAGzB,gBAAgB;;;;;;;;;MASrB;IAGK,gBAAgB,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAM;IAEjD,aAAa,CAAC,OAAO,EAAE,MAAM,OAAO,IAAI,CAAC,gBAAgB,GAAG,IAAI;IAIhE,iBAAiB,IAAI,IAAI;IAMzB,mBAAmB,IAAI,IAAI;IAM3B,gBAAgB,IAAI,MAAM;IAI1B,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;yCAtChC,sBAAsB;2CAAtB,sBAAsB;CA4ElC;AAED,wBAAgB,0BAA0B,SAEzC"}

package/dist/lib/generated/Entities/Component/component.form.component.js

@@ -7,73 +7,383 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Component } from '@angular/core';
 import { RegisterClass } from '@memberjunction/global';
 import { BaseFormComponent } from '@memberjunction/ng-base-forms';
-import { LoadComponentDetailsComponent } from "./sections/details.component";
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
 import * as i3 from "@memberjunction/ng-user-view-grid";
 import * as i4 from "@memberjunction/ng-base-forms";
 import * as i5 from "@memberjunction/ng-form-toolbar";
-import * as i6 from "@memberjunction/ng-tabstrip";
+function ComponentFormComponent_form_1_span_110_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 68);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("zero-rows", ctx_r1.sectionRowCounts["mJComponentDependencies"] === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.sectionRowCounts["mJComponentDependencies"], " ");
+} }
+function ComponentFormComponent_form_1_div_113_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23)(2, "mj-user-view-grid", 69);
+    i0.ɵɵlistener("dataLoaded", function ComponentFormComponent_form_1_div_113_Template_mj_user_view_grid_dataLoaded_2_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r1.sectionRowCounts["mJComponentDependencies"] = $event.totalRowCount)); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("collapsed", !ctx_r1.sectionsExpanded.mJComponentDependencies);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: Component Dependencies", "DependencyComponentID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: Component Dependencies"))("AllowLoad", ctx_r1.IsCurrentSection("mJComponentDependencies"))("EditMode", ctx_r1.GridEditMode());
+} }
+function ComponentFormComponent_form_1_span_121_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 68);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("zero-rows", ctx_r1.sectionRowCounts["mJComponentLibraryLinks"] === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.sectionRowCounts["mJComponentLibraryLinks"], " ");
+} }
+function ComponentFormComponent_form_1_div_124_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23)(2, "mj-user-view-grid", 69);
+    i0.ɵɵlistener("dataLoaded", function ComponentFormComponent_form_1_div_124_Template_mj_user_view_grid_dataLoaded_2_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r1.sectionRowCounts["mJComponentLibraryLinks"] = $event.totalRowCount)); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("collapsed", !ctx_r1.sectionsExpanded.mJComponentLibraryLinks);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: Component Library Links", "ComponentID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: Component Library Links"))("AllowLoad", ctx_r1.IsCurrentSection("mJComponentLibraryLinks"))("EditMode", ctx_r1.GridEditMode());
+} }
+function ComponentFormComponent_form_1_span_132_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 68);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("zero-rows", ctx_r1.sectionRowCounts["mJComponentDependencies"] === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.sectionRowCounts["mJComponentDependencies"], " ");
+} }
+function ComponentFormComponent_form_1_div_135_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23)(2, "mj-user-view-grid", 69);
+    i0.ɵɵlistener("dataLoaded", function ComponentFormComponent_form_1_div_135_Template_mj_user_view_grid_dataLoaded_2_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView((ctx_r1.sectionRowCounts["mJComponentDependencies"] = $event.totalRowCount)); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("collapsed", !ctx_r1.sectionsExpanded.mJComponentDependencies);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: Component Dependencies", "ComponentID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: Component Dependencies"))("AllowLoad", ctx_r1.IsCurrentSection("mJComponentDependencies"))("EditMode", ctx_r1.GridEditMode());
+} }
 function ComponentFormComponent_form_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "form", 3, 0);
-    i0.ɵɵelement(2, "mj-form-toolbar", 4);
-    i0.ɵɵelementStart(3, "mj-tabstrip", 5);
-    i0.ɵɵlistener("TabSelected", function ComponentFormComponent_form_1_Template_mj_tabstrip_TabSelected_3_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTabSelect($event)); })("ResizeContainer", function ComponentFormComponent_form_1_Template_mj_tabstrip_ResizeContainer_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.InvokeManualResize()); });
-    i0.ɵɵelementStart(4, "mj-tab", 6);
-    i0.ɵɵtext(5, " Details ");
+    i0.ɵɵelementStart(0, "form", 4, 0);
+    i0.ɵɵelement(2, "mj-form-toolbar", 5);
+    i0.ɵɵelementStart(3, "div", 6)(4, "div", 7)(5, "button", 8);
+    i0.ɵɵlistener("click", function ComponentFormComponent_form_1_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.expandAllSections()); });
+    i0.ɵɵelement(6, "i", 9);
+    i0.ɵɵtext(7, "Expand All ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "mj-tab-body");
-    i0.ɵɵelement(7, "mj-form-section", 7);
+    i0.ɵɵelementStart(8, "button", 10);
+    i0.ɵɵlistener("click", function ComponentFormComponent_form_1_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.collapseAllSections()); });
+    i0.ɵɵelement(9, "i", 11);
+    i0.ɵɵtext(10, "Collapse All ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "input", 12, 1);
+    i0.ɵɵlistener("input", function ComponentFormComponent_form_1_Template_input_input_11_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.filterSections($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "mj-tab", 8);
-    i0.ɵɵtext(9, " MJ: Component Dependencies ");
+    i0.ɵɵelementStart(13, "span", 13)(14, "span", 14);
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(16, " of 8 expanded ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "div", 15)(18, "div", 16)(19, "div", 17);
+    i0.ɵɵlistener("click", function ComponentFormComponent_form_1_Template_div_click_19_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSection("identificationVersioning")); });
+    i0.ɵɵelementStart(20, "div", 18);
+    i0.ɵɵelement(21, "i", 19);
+    i0.ɵɵelementStart(22, "h3")(23, "span", 20);
+    i0.ɵɵtext(24, "Identification & Versioning");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(25, "div", 21);
+    i0.ɵɵelement(26, "i");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(27, "div", 22)(28, "div", 23);
+    i0.ɵɵelement(29, "mj-form-field", 24)(30, "mj-form-field", 25)(31, "mj-form-field", 26)(32, "mj-form-field", 27)(33, "mj-form-field", 28)(34, "mj-form-field", 29)(35, "mj-form-field", 30);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(36, "div", 31)(37, "div", 17);
+    i0.ɵɵlistener("click", function ComponentFormComponent_form_1_Template_div_click_37_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSection("specificationDesign")); });
+    i0.ɵɵelementStart(38, "div", 18);
+    i0.ɵɵelement(39, "i", 32);
+    i0.ɵɵelementStart(40, "h3")(41, "span", 20);
+    i0.ɵɵtext(42, "Specification & Design");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(43, "div", 21);
+    i0.ɵɵelement(44, "i");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(45, "div", 22)(46, "div", 23);
+    i0.ɵɵelement(47, "mj-form-field", 33)(48, "mj-form-field", 34)(49, "mj-form-field", 35)(50, "mj-form-field", 36)(51, "mj-form-field", 37)(52, "mj-form-field", 38)(53, "mj-form-field", 39)(54, "mj-form-field", 40)(55, "mj-form-field", 41)(56, "mj-form-field", 42)(57, "mj-form-field", 43)(58, "mj-form-field", 44)(59, "mj-form-field", 45);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(60, "div", 46)(61, "div", 17);
+    i0.ɵɵlistener("click", function ComponentFormComponent_form_1_Template_div_click_61_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSection("developerOwnership")); });
+    i0.ɵɵelementStart(62, "div", 18);
+    i0.ɵɵelement(63, "i", 47);
+    i0.ɵɵelementStart(64, "h3")(65, "span", 20);
+    i0.ɵɵtext(66, "Developer & Ownership");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(67, "div", 21);
+    i0.ɵɵelement(68, "i");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(69, "div", 22)(70, "div", 23);
+    i0.ɵɵelement(71, "mj-form-field", 48)(72, "mj-form-field", 49)(73, "mj-form-field", 50);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(74, "div", 51)(75, "div", 17);
+    i0.ɵɵlistener("click", function ComponentFormComponent_form_1_Template_div_click_75_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSection("registrySynchronization")); });
+    i0.ɵɵelementStart(76, "div", 18);
+    i0.ɵɵelement(77, "i", 52);
+    i0.ɵɵelementStart(78, "h3")(79, "span", 20);
+    i0.ɵɵtext(80, "Registry & Synchronization");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(81, "div", 21);
+    i0.ɵɵelement(82, "i");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(83, "div", 22)(84, "div", 23);
+    i0.ɵɵelement(85, "mj-form-field", 53)(86, "mj-form-field", 54)(87, "mj-form-field", 55)(88, "mj-form-field", 56);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(89, "div", 57)(90, "div", 17);
+    i0.ɵɵlistener("click", function ComponentFormComponent_form_1_Template_div_click_90_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSection("systemMetadata")); });
+    i0.ɵɵelementStart(91, "div", 18);
+    i0.ɵɵelement(92, "i", 58);
+    i0.ɵɵelementStart(93, "h3")(94, "span", 20);
+    i0.ɵɵtext(95, "System Metadata");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(96, "div", 21);
+    i0.ɵɵelement(97, "i");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(98, "div", 22)(99, "div", 23);
+    i0.ɵɵelement(100, "mj-form-field", 59)(101, "mj-form-field", 60);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(102, "div", 61)(103, "div", 62)(104, "div", 17);
+    i0.ɵɵlistener("click", function ComponentFormComponent_form_1_Template_div_click_104_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSection("mJComponentDependencies")); });
+    i0.ɵɵelementStart(105, "div", 18);
+    i0.ɵɵelement(106, "i", 63);
+    i0.ɵɵelementStart(107, "h3")(108, "span", 20);
+    i0.ɵɵtext(109, "MJ: Component Dependencies");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "mj-tab-body");
-    i0.ɵɵelement(11, "mj-user-view-grid", 9);
+    i0.ɵɵtemplate(110, ComponentFormComponent_form_1_span_110_Template, 2, 3, "span", 64);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(111, "div", 21);
+    i0.ɵɵelement(112, "i");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(113, ComponentFormComponent_form_1_div_113_Template, 3, 6, "div", 65);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "mj-tab", 10);
-    i0.ɵɵtext(13, " MJ: Component Library Links ");
+    i0.ɵɵelementStart(114, "div", 66)(115, "div", 17);
+    i0.ɵɵlistener("click", function ComponentFormComponent_form_1_Template_div_click_115_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSection("mJComponentLibraryLinks")); });
+    i0.ɵɵelementStart(116, "div", 18);
+    i0.ɵɵelement(117, "i", 67);
+    i0.ɵɵelementStart(118, "h3")(119, "span", 20);
+    i0.ɵɵtext(120, "MJ: Component Library Links");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "mj-tab-body");
-    i0.ɵɵelement(15, "mj-user-view-grid", 9);
+    i0.ɵɵtemplate(121, ComponentFormComponent_form_1_span_121_Template, 2, 3, "span", 64);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(122, "div", 21);
+    i0.ɵɵelement(123, "i");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(124, ComponentFormComponent_form_1_div_124_Template, 3, 6, "div", 65);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "mj-tab", 8);
-    i0.ɵɵtext(17, " MJ: Component Dependencies ");
+    i0.ɵɵelementStart(125, "div", 62)(126, "div", 17);
+    i0.ɵɵlistener("click", function ComponentFormComponent_form_1_Template_div_click_126_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSection("mJComponentDependencies")); });
+    i0.ɵɵelementStart(127, "div", 18);
+    i0.ɵɵelement(128, "i", 63);
+    i0.ɵɵelementStart(129, "h3")(130, "span", 20);
+    i0.ɵɵtext(131, "MJ: Component Dependencies");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "mj-tab-body");
-    i0.ɵɵelement(19, "mj-user-view-grid", 9);
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(132, ComponentFormComponent_form_1_span_132_Template, 2, 3, "span", 64);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(133, "div", 21);
+    i0.ɵɵelement(134, "i");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(135, ComponentFormComponent_form_1_div_135_Template, 3, 6, "div", 65);
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("form", ctx_r1);
-    i0.ɵɵadvance(5);
-    i0.ɵɵproperty("record", ctx_r1.record)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance(13);
+    i0.ɵɵtextInterpolate(ctx_r1.getExpandedCount());
+    i0.ɵɵadvance(11);
+    i0.ɵɵclassMap(ctx_r1.sectionsExpanded.identificationVersioning ? "fa fa-chevron-up" : "fa fa-chevron-down");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Visible", ctx_r1.record.IsSaved);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: Component Dependencies", "DependencyComponentID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: Component Dependencies"))("AllowLoad", ctx_r1.IsCurrentTab("MJ: Component Dependencies"))("EditMode", ctx_r1.GridEditMode());
+    i0.ɵɵclassProp("collapsed", !ctx_r1.sectionsExpanded.identificationVersioning);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Visible", ctx_r1.record.IsSaved);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: Component Library Links", "ComponentID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: Component Library Links"))("AllowLoad", ctx_r1.IsCurrentTab("MJ: Component Library Links"))("EditMode", ctx_r1.GridEditMode());
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance(9);
+    i0.ɵɵclassMap(ctx_r1.sectionsExpanded.specificationDesign ? "fa fa-chevron-up" : "fa fa-chevron-down");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("collapsed", !ctx_r1.sectionsExpanded.specificationDesign);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance(9);
+    i0.ɵɵclassMap(ctx_r1.sectionsExpanded.developerOwnership ? "fa fa-chevron-up" : "fa fa-chevron-down");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("collapsed", !ctx_r1.sectionsExpanded.developerOwnership);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance(9);
+    i0.ɵɵclassMap(ctx_r1.sectionsExpanded.registrySynchronization ? "fa fa-chevron-up" : "fa fa-chevron-down");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("collapsed", !ctx_r1.sectionsExpanded.registrySynchronization);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance(9);
+    i0.ɵɵclassMap(ctx_r1.sectionsExpanded.systemMetadata ? "fa fa-chevron-up" : "fa fa-chevron-down");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("collapsed", !ctx_r1.sectionsExpanded.systemMetadata);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", ctx_r1.EditMode);
+    i0.ɵɵadvance(9);
+    i0.ɵɵproperty("ngIf", (ctx_r1.sectionRowCounts == null ? null : ctx_r1.sectionRowCounts["mJComponentDependencies"]) !== undefined);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.sectionsExpanded.mJComponentDependencies ? "fa fa-chevron-up" : "fa fa-chevron-down");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.record.IsSaved);
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("ngIf", (ctx_r1.sectionRowCounts == null ? null : ctx_r1.sectionRowCounts["mJComponentLibraryLinks"]) !== undefined);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.sectionsExpanded.mJComponentLibraryLinks ? "fa fa-chevron-up" : "fa fa-chevron-down");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.record.IsSaved);
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("ngIf", (ctx_r1.sectionRowCounts == null ? null : ctx_r1.sectionRowCounts["mJComponentDependencies"]) !== undefined);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.sectionsExpanded.mJComponentDependencies ? "fa fa-chevron-up" : "fa fa-chevron-down");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Visible", ctx_r1.record.IsSaved);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: Component Dependencies", "ComponentID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: Component Dependencies"))("AllowLoad", ctx_r1.IsCurrentTab("MJ: Component Dependencies"))("EditMode", ctx_r1.GridEditMode());
+    i0.ɵɵproperty("ngIf", ctx_r1.record.IsSaved);
 } }
 let ComponentFormComponent = class ComponentFormComponent extends BaseFormComponent {
+    constructor() {
+        super(...arguments);
+        // Collapsible section state
+        this.sectionsExpanded = {
+            identificationVersioning: true,
+            specificationDesign: true,
+            developerOwnership: false,
+            registrySynchronization: false,
+            systemMetadata: false,
+            mJComponentDependencies: false,
+            mJComponentLibraryLinks: false,
+            mJComponentDependencies1: false
+        };
+        // Row counts for related entity sections (populated after grids load)
+        this.sectionRowCounts = {};
+    }
+    toggleSection(section) {
+        this.sectionsExpanded[section] = !this.sectionsExpanded[section];
+    }
+    expandAllSections() {
+        Object.keys(this.sectionsExpanded).forEach(key => {
+            this.sectionsExpanded[key] = true;
+        });
+    }
+    collapseAllSections() {
+        Object.keys(this.sectionsExpanded).forEach(key => {
+            this.sectionsExpanded[key] = false;
+        });
+    }
+    getExpandedCount() {
+        return Object.values(this.sectionsExpanded).filter(v => v === true).length;
+    }
+    filterSections(event) {
+        const searchTerm = event.target.value.toLowerCase();
+        const panels = document.querySelectorAll('.form-card.collapsible-card');
+        panels.forEach((panel) => {
+            const sectionName = panel.getAttribute('data-section-name') || '';
+            const fieldNames = panel.getAttribute('data-field-names') || '';
+            // Show section if search term matches section name OR any field name
+            const matches = sectionName.includes(searchTerm) || fieldNames.includes(searchTerm);
+            if (matches) {
+                panel.classList.remove('search-hidden');
+                // Add highlighting to matched text in section name
+                if (searchTerm && sectionName.includes(searchTerm)) {
+                    const h3 = panel.querySelector('.collapsible-title h3 .section-name');
+                    if (h3) {
+                        const originalText = h3.textContent || '';
+                        const regex = new RegExp(`(${searchTerm})`, 'gi');
+                        h3.innerHTML = originalText.replace(regex, '<span class="search-highlight">$1</span>');
+                    }
+                }
+            }
+            else {
+                panel.classList.add('search-hidden');
+            }
+        });
+        // Clear highlighting when search is empty
+        if (!searchTerm) {
+            panels.forEach((panel) => {
+                const h3 = panel.querySelector('.collapsible-title h3 .section-name');
+                if (h3) {
+                    h3.innerHTML = h3.textContent || '';
+                }
+            });
+        }
+    }
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵComponentFormComponent_BaseFactory; return function ComponentFormComponent_Factory(t) { return (ɵComponentFormComponent_BaseFactory || (ɵComponentFormComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ComponentFormComponent)))(t || ComponentFormComponent); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentFormComponent, selectors: [["gen-component-form"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [["form", "ngForm"], [1, "record-form-container"], ["class", "record-form", 4, "ngIf"], [1, "record-form"], [3, "form"], [3, "TabSelected", "ResizeContainer"], ["Name", "Details"], ["Entity", "MJ: Components", "Section", "details", 3, "record", "EditMode"], ["Name", "MJ: Component Dependencies", 3, "Visible"], [3, "Params", "NewRecordValues", "AllowLoad", "EditMode"], ["Name", "MJ: Component Library Links", 3, "Visible"]], template: function ComponentFormComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵtemplate(1, ComponentFormComponent_form_1_Template, 20, 18, "form", 2);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentFormComponent, selectors: [["gen-component-form"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [["form", "ngForm"], ["sectionSearch", ""], [1, "record-form-container"], ["class", "record-form", 4, "ngIf"], [1, "record-form"], [3, "form"], [1, "form-section-controls"], [1, "control-group"], ["title", "Expand all sections", 3, "click"], [1, "fa", "fa-expand-alt"], ["title", "Collapse all sections", 3, "click"], [1, "fa", "fa-compress-alt"], ["type", "text", "placeholder", "Search sections...", 1, "section-search", 3, "input"], [1, "section-count"], [1, "section-count-badge"], [1, "form-panels-container"], ["data-section-name", "identification & versioning", "data-field-names", "namespace name version versionsequence version sequence title type status", 1, "form-card", "collapsible-card"], ["role", "button", "tabindex", "0", 1, "collapsible-header", 3, "click"], [1, "collapsible-title"], [1, "fa", "fa-tag"], [1, "section-name"], [1, "collapse-icon"], [1, "collapsible-body"], [1, "form-body"], ["FieldName", "Namespace", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "Name", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "Version", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "VersionSequence", "Type", "numerictextbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "Title", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "Type", "Type", "dropdownlist", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "Status", "Type", "dropdownlist", 3, "record", "ShowLabel", "EditMode"], ["data-section-name", "specification & design", "data-field-names", "description specification functionalrequirements functional requirements technicaldesign technical design functionalrequirementsvector functional requirements vector technicaldesignvector technical design vector hascustomprops has custom props hascustomevents has custom events requiresdata requires data dependencycount dependency count technicaldesignvectorembeddingmodelid technical design vector embedding model id functionalrequirementsvectorembeddingmodelid functional requirements vector embedding model id hasrequiredcustomprops has required custom props", 1, "form-card", "collapsible-card"], [1, "fa", "fa-file-code"], ["FieldName", "Description", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "Specification", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "FunctionalRequirements", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "TechnicalDesign", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "FunctionalRequirementsVector", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "TechnicalDesignVector", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "HasCustomProps", "Type", "checkbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "HasCustomEvents", "Type", "checkbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "RequiresData", "Type", "checkbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "DependencyCount", "Type", "numerictextbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "TechnicalDesignVectorEmbeddingModelID", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "FunctionalRequirementsVectorEmbeddingModelID", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "HasRequiredCustomProps", "Type", "checkbox", 3, "record", "ShowLabel", "EditMode"], ["data-section-name", "developer & ownership", "data-field-names", "developername developer name developeremail developer email developerorganization developer organization", 1, "form-card", "collapsible-card"], [1, "fa", "fa-user"], ["FieldName", "DeveloperName", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "DeveloperEmail", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "DeveloperOrganization", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["data-section-name", "registry & synchronization", "data-field-names", "sourceregistryid source registry id replicatedat replicated at lastsyncedat last synced at sourceregistry source registry", 1, "form-card", "collapsible-card"], [1, "fa", "fa-sync"], ["FieldName", "SourceRegistryID", "Type", "textbox", "LinkType", "Record", "LinkComponentType", "Search", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "ReplicatedAt", "Type", "datepicker", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "LastSyncedAt", "Type", "datepicker", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "SourceRegistry", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], ["data-section-name", "system metadata", "data-field-names", "__mj_createdat created at __mj_updatedat updated at", 1, "form-card", "collapsible-card"], [1, "fa", "fa-cog"], ["FieldName", "__mj_CreatedAt", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "__mj_UpdatedAt", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], [1, "related-entity-grid"], ["data-section-name", "mj: component dependencies", "data-field-names", "mj: component dependencies", "data-section-key", "mJComponentDependencies", 1, "form-card", "collapsible-card", "related-entity"], [1, "fa", "fa-sitemap"], ["class", "row-count-badge", 3, "zero-rows", 4, "ngIf"], ["class", "collapsible-body", 3, "collapsed", 4, "ngIf"], ["data-section-name", "mj: component library links", "data-field-names", "mj: component library links", "data-section-key", "mJComponentLibraryLinks", 1, "form-card", "collapsible-card", "related-entity"], [1, "fa", "fa-plug"], [1, "row-count-badge"], [3, "dataLoaded", "Params", "NewRecordValues", "AllowLoad", "EditMode"]], template: function ComponentFormComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 2);
+            i0.ɵɵtemplate(1, ComponentFormComponent_form_1_Template, 136, 121, "form", 3);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.record);
-        } }, dependencies: [i1.NgIf, i2.ɵNgNoValidate, i2.NgControlStatusGroup, i2.NgForm, i3.UserViewGridComponent, i4.SectionLoaderComponent, i5.FormToolbarComponent, i6.MJTabStripComponent, i6.MJTabBodyComponent, i6.MJTabComponent], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: #F5F6FA;\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n} \n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 10px;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}"] }); }
+        } }, dependencies: [i1.NgIf, i2.ɵNgNoValidate, i2.NgControlStatusGroup, i2.NgForm, i3.UserViewGridComponent, i4.MJFormField, i5.FormToolbarComponent], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: #F5F6FA;\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n} \n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: #F5F6FA;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: #6b7280;\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  background: white;\n  color: #374151;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6b7280;\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: #667eea;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: #fef08a;\n  color: #854d0e;\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: #10b981;\n  color: white;\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: #9ca3af;\n}"] }); }
 };
 ComponentFormComponent = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: Components') // Tell MemberJunction about this class
@@ -81,10 +391,10 @@ ComponentFormComponent = __decorate([
 export { ComponentFormComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentFormComponent, [{
         type: Component,
-        args: [{ selector: 'gen-component-form', template: "<div class=\"record-form-container\"  >\n    <form *ngIf=\"record\" class=\"record-form\"  #form=\"ngForm\" >\n        <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n                <mj-tabstrip (TabSelected)=\"onTabSelect($event)\"  (ResizeContainer)=\"InvokeManualResize()\">\n                    \n                    <mj-tab Name=\"Details\">\n                        Details\n                    </mj-tab>\n                    <mj-tab-body>\n                        <mj-form-section \n                            Entity=\"MJ: Components\" \n                            Section=\"details\" \n                            [record]=\"record\" \n                            [EditMode]=\"this.EditMode\">\n                        </mj-form-section>\n                    </mj-tab-body>\n                    \n                    <mj-tab Name=\"MJ: Component Dependencies\" [Visible]=\"record.IsSaved\"> \n                        MJ: Component Dependencies\n                    </mj-tab>\n                    <mj-tab-body>\n                        <mj-user-view-grid \n                            [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: Component Dependencies','DependencyComponentID')\"  \n                            [NewRecordValues]=\"NewRecordValues('MJ: Component Dependencies')\"\n                            [AllowLoad]=\"IsCurrentTab('MJ: Component Dependencies')\"  \n                            [EditMode]=\"GridEditMode()\"  \n                            >\n                        </mj-user-view-grid>                    \n                    </mj-tab-body>\n\n                    <mj-tab Name=\"MJ: Component Library Links\" [Visible]=\"record.IsSaved\"> \n                        MJ: Component Library Links\n                    </mj-tab>\n                    <mj-tab-body>\n                        <mj-user-view-grid \n                            [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: Component Library Links','ComponentID')\"  \n                            [NewRecordValues]=\"NewRecordValues('MJ: Component Library Links')\"\n                            [AllowLoad]=\"IsCurrentTab('MJ: Component Library Links')\"  \n                            [EditMode]=\"GridEditMode()\"  \n                            >\n                        </mj-user-view-grid>                    \n                    </mj-tab-body>\n\n                    <mj-tab Name=\"MJ: Component Dependencies\" [Visible]=\"record.IsSaved\"> \n                        MJ: Component Dependencies\n                    </mj-tab>\n                    <mj-tab-body>\n                        <mj-user-view-grid \n                            [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: Component Dependencies','ComponentID')\"  \n                            [NewRecordValues]=\"NewRecordValues('MJ: Component Dependencies')\"\n                            [AllowLoad]=\"IsCurrentTab('MJ: Component Dependencies')\"  \n                            [EditMode]=\"GridEditMode()\"  \n                            >\n                        </mj-user-view-grid>                    \n                    </mj-tab-body>\n                </mj-tabstrip>\n    </form>\n</div>\n        ", styles: [".k-pane {\n  background-color: #F5F6FA;\n}\n\n.content-margin {\n  margin: 10px;\n} \n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 10px;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n/* .record-form .record-form-row:nth-child(odd) {\n  background-color: #f2f2f2; \n} */\n\n/* \n.record-form .record-form-row:nth-child(even) {\n  background-color: #ffffff;  \n} */\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n"] }]
+        args: [{ selector: 'gen-component-form', template: "<div class=\"record-form-container\">\n    <form *ngIf=\"record\" class=\"record-form\" #form=\"ngForm\">\n        <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n        <div class=\"form-section-controls\">\n            <div class=\"control-group\">\n                <button (click)=\"expandAllSections()\" title=\"Expand all sections\">\n                    <i class=\"fa fa-expand-alt\"></i>Expand All\n                </button>\n                <button (click)=\"collapseAllSections()\" title=\"Collapse all sections\">\n                    <i class=\"fa fa-compress-alt\"></i>Collapse All\n                </button>\n            </div>\n            <input type=\"text\"\n                   class=\"section-search\"\n                   placeholder=\"Search sections...\"\n                   (input)=\"filterSections($event)\"\n                   #sectionSearch>\n            <span class=\"section-count\">\n                <span class=\"section-count-badge\">{{getExpandedCount()}}</span> of 8 expanded\n            </span>\n        </div>\n        <div class=\"form-panels-container\">\n<!-- Identification & Versioning Section -->\n        <div class=\"form-card collapsible-card\" data-section-name=\"identification & versioning\" data-field-names=\"namespace name version versionsequence version sequence title type status\">\n            <div class=\"collapsible-header\" (click)=\"toggleSection('identificationVersioning')\" role=\"button\" tabindex=\"0\">\n                <div class=\"collapsible-title\">\n                    <i class=\"fa fa-tag\"></i>\n                    <h3><span class=\"section-name\">Identification & Versioning</span></h3>\n                </div>\n                <div class=\"collapse-icon\">\n                    <i [class]=\"sectionsExpanded.identificationVersioning ? 'fa fa-chevron-up' : 'fa fa-chevron-down'\"></i>\n                </div>\n            </div>\n            <div class=\"collapsible-body\" [class.collapsed]=\"!sectionsExpanded.identificationVersioning\">\n                <div class=\"form-body\">\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"Namespace\"\n            Type=\"textarea\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"Name\"\n            Type=\"textarea\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"Version\"\n            Type=\"textbox\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"VersionSequence\"\n            Type=\"numerictextbox\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"Title\"\n            Type=\"textarea\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"Type\"\n            Type=\"dropdownlist\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"Status\"\n            Type=\"dropdownlist\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n\n                </div>\n            </div>\n        </div>\n\n        <!-- Specification & Design Section -->\n        <div class=\"form-card collapsible-card\" data-section-name=\"specification & design\" data-field-names=\"description specification functionalrequirements functional requirements technicaldesign technical design functionalrequirementsvector functional requirements vector technicaldesignvector technical design vector hascustomprops has custom props hascustomevents has custom events requiresdata requires data dependencycount dependency count technicaldesignvectorembeddingmodelid technical design vector embedding model id functionalrequirementsvectorembeddingmodelid functional requirements vector embedding model id hasrequiredcustomprops has required custom props\">\n            <div class=\"collapsible-header\" (click)=\"toggleSection('specificationDesign')\" role=\"button\" tabindex=\"0\">\n                <div class=\"collapsible-title\">\n                    <i class=\"fa fa-file-code\"></i>\n                    <h3><span class=\"section-name\">Specification & Design</span></h3>\n                </div>\n                <div class=\"collapse-icon\">\n                    <i [class]=\"sectionsExpanded.specificationDesign ? 'fa fa-chevron-up' : 'fa fa-chevron-down'\"></i>\n                </div>\n            </div>\n            <div class=\"collapsible-body\" [class.collapsed]=\"!sectionsExpanded.specificationDesign\">\n                <div class=\"form-body\">\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"Description\"\n            Type=\"textarea\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"Specification\"\n            Type=\"textarea\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"FunctionalRequirements\"\n            Type=\"textarea\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"TechnicalDesign\"\n            Type=\"textarea\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"FunctionalRequirementsVector\"\n            Type=\"textarea\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"TechnicalDesignVector\"\n            Type=\"textarea\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"HasCustomProps\"\n            Type=\"checkbox\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"HasCustomEvents\"\n            Type=\"checkbox\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"RequiresData\"\n            Type=\"checkbox\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"DependencyCount\"\n            Type=\"numerictextbox\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"TechnicalDesignVectorEmbeddingModelID\"\n            Type=\"textarea\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"FunctionalRequirementsVectorEmbeddingModelID\"\n            Type=\"textarea\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"HasRequiredCustomProps\"\n            Type=\"checkbox\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n\n                </div>\n            </div>\n        </div>\n\n        <!-- Developer & Ownership Section -->\n        <div class=\"form-card collapsible-card\" data-section-name=\"developer & ownership\" data-field-names=\"developername developer name developeremail developer email developerorganization developer organization\">\n            <div class=\"collapsible-header\" (click)=\"toggleSection('developerOwnership')\" role=\"button\" tabindex=\"0\">\n                <div class=\"collapsible-title\">\n                    <i class=\"fa fa-user\"></i>\n                    <h3><span class=\"section-name\">Developer & Ownership</span></h3>\n                </div>\n                <div class=\"collapse-icon\">\n                    <i [class]=\"sectionsExpanded.developerOwnership ? 'fa fa-chevron-up' : 'fa fa-chevron-down'\"></i>\n                </div>\n            </div>\n            <div class=\"collapsible-body\" [class.collapsed]=\"!sectionsExpanded.developerOwnership\">\n                <div class=\"form-body\">\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"DeveloperName\"\n            Type=\"textarea\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"DeveloperEmail\"\n            Type=\"textarea\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"DeveloperOrganization\"\n            Type=\"textarea\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n\n                </div>\n            </div>\n        </div>\n\n        <!-- Registry & Synchronization Section -->\n        <div class=\"form-card collapsible-card\" data-section-name=\"registry & synchronization\" data-field-names=\"sourceregistryid source registry id replicatedat replicated at lastsyncedat last synced at sourceregistry source registry\">\n            <div class=\"collapsible-header\" (click)=\"toggleSection('registrySynchronization')\" role=\"button\" tabindex=\"0\">\n                <div class=\"collapsible-title\">\n                    <i class=\"fa fa-sync\"></i>\n                    <h3><span class=\"section-name\">Registry & Synchronization</span></h3>\n                </div>\n                <div class=\"collapse-icon\">\n                    <i [class]=\"sectionsExpanded.registrySynchronization ? 'fa fa-chevron-up' : 'fa fa-chevron-down'\"></i>\n                </div>\n            </div>\n            <div class=\"collapsible-body\" [class.collapsed]=\"!sectionsExpanded.registrySynchronization\">\n                <div class=\"form-body\">\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"SourceRegistryID\"\n            Type=\"textbox\"\n            [EditMode]=\"EditMode\"\n            LinkType=\"Record\"\n            LinkComponentType=\"Search\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"ReplicatedAt\"\n            Type=\"datepicker\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"LastSyncedAt\"\n            Type=\"datepicker\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"SourceRegistry\"\n            Type=\"textbox\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n\n                </div>\n            </div>\n        </div>\n\n        <!-- System Metadata Section -->\n        <div class=\"form-card collapsible-card\" data-section-name=\"system metadata\" data-field-names=\"__mj_createdat created at __mj_updatedat updated at\">\n            <div class=\"collapsible-header\" (click)=\"toggleSection('systemMetadata')\" role=\"button\" tabindex=\"0\">\n                <div class=\"collapsible-title\">\n                    <i class=\"fa fa-cog\"></i>\n                    <h3><span class=\"section-name\">System Metadata</span></h3>\n                </div>\n                <div class=\"collapse-icon\">\n                    <i [class]=\"sectionsExpanded.systemMetadata ? 'fa fa-chevron-up' : 'fa fa-chevron-down'\"></i>\n                </div>\n            </div>\n            <div class=\"collapsible-body\" [class.collapsed]=\"!sectionsExpanded.systemMetadata\">\n                <div class=\"form-body\">\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"__mj_CreatedAt\"\n            Type=\"textbox\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n        <mj-form-field \n            [record]=\"record\"\n            [ShowLabel]=\"true\"\n            FieldName=\"__mj_UpdatedAt\"\n            Type=\"textbox\"\n            [EditMode]=\"EditMode\"\n        ></mj-form-field>\n\n                </div>\n            </div>\n        </div>\n        <div class=\"related-entity-grid\">\n\n        <!-- MJ: Component Dependencies Section -->\n        <div class=\"form-card collapsible-card related-entity\" data-section-name=\"mj: component dependencies\" data-field-names=\"mj: component dependencies\" data-section-key=\"mJComponentDependencies\">\n            <div class=\"collapsible-header\" (click)=\"toggleSection('mJComponentDependencies')\" role=\"button\" tabindex=\"0\">\n                <div class=\"collapsible-title\">\n                    <i class=\"fa fa-sitemap\"></i>\n                    <h3>\n                        <span class=\"section-name\">MJ: Component Dependencies</span>\n                        <span class=\"row-count-badge\"\n                              *ngIf=\"sectionRowCounts?.['mJComponentDependencies'] !== undefined\"\n                              [class.zero-rows]=\"sectionRowCounts['mJComponentDependencies'] === 0\">\n                            {{sectionRowCounts['mJComponentDependencies']}}\n                        </span>\n                    </h3>\n                </div>\n                <div class=\"collapse-icon\">\n                    <i [class]=\"sectionsExpanded.mJComponentDependencies ? 'fa fa-chevron-up' : 'fa fa-chevron-down'\"></i>\n                </div>\n            </div>\n            <div class=\"collapsible-body\" [class.collapsed]=\"!sectionsExpanded.mJComponentDependencies\" *ngIf=\"record.IsSaved\">\n                <div class=\"form-body\">\n                    <mj-user-view-grid\n                        [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: Component Dependencies','DependencyComponentID')\"\n                        [NewRecordValues]=\"NewRecordValues('MJ: Component Dependencies')\"\n                        [AllowLoad]=\"IsCurrentSection('mJComponentDependencies')\"\n                        [EditMode]=\"GridEditMode()\"\n                        (dataLoaded)=\"sectionRowCounts['mJComponentDependencies'] = $event.totalRowCount\"\n                        >\n                    </mj-user-view-grid>\n                </div>\n            </div>\n        </div>\n\n        <!-- MJ: Component Library Links Section -->\n        <div class=\"form-card collapsible-card related-entity\" data-section-name=\"mj: component library links\" data-field-names=\"mj: component library links\" data-section-key=\"mJComponentLibraryLinks\">\n            <div class=\"collapsible-header\" (click)=\"toggleSection('mJComponentLibraryLinks')\" role=\"button\" tabindex=\"0\">\n                <div class=\"collapsible-title\">\n                    <i class=\"fa fa-plug\"></i>\n                    <h3>\n                        <span class=\"section-name\">MJ: Component Library Links</span>\n                        <span class=\"row-count-badge\"\n                              *ngIf=\"sectionRowCounts?.['mJComponentLibraryLinks'] !== undefined\"\n                              [class.zero-rows]=\"sectionRowCounts['mJComponentLibraryLinks'] === 0\">\n                            {{sectionRowCounts['mJComponentLibraryLinks']}}\n                        </span>\n                    </h3>\n                </div>\n                <div class=\"collapse-icon\">\n                    <i [class]=\"sectionsExpanded.mJComponentLibraryLinks ? 'fa fa-chevron-up' : 'fa fa-chevron-down'\"></i>\n                </div>\n            </div>\n            <div class=\"collapsible-body\" [class.collapsed]=\"!sectionsExpanded.mJComponentLibraryLinks\" *ngIf=\"record.IsSaved\">\n                <div class=\"form-body\">\n                    <mj-user-view-grid\n                        [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: Component Library Links','ComponentID')\"\n                        [NewRecordValues]=\"NewRecordValues('MJ: Component Library Links')\"\n                        [AllowLoad]=\"IsCurrentSection('mJComponentLibraryLinks')\"\n                        [EditMode]=\"GridEditMode()\"\n                        (dataLoaded)=\"sectionRowCounts['mJComponentLibraryLinks'] = $event.totalRowCount\"\n                        >\n                    </mj-user-view-grid>\n                </div>\n            </div>\n        </div>\n\n        <!-- MJ: Component Dependencies Section -->\n        <div class=\"form-card collapsible-card related-entity\" data-section-name=\"mj: component dependencies\" data-field-names=\"mj: component dependencies\" data-section-key=\"mJComponentDependencies\">\n            <div class=\"collapsible-header\" (click)=\"toggleSection('mJComponentDependencies')\" role=\"button\" tabindex=\"0\">\n                <div class=\"collapsible-title\">\n                    <i class=\"fa fa-sitemap\"></i>\n                    <h3>\n                        <span class=\"section-name\">MJ: Component Dependencies</span>\n                        <span class=\"row-count-badge\"\n                              *ngIf=\"sectionRowCounts?.['mJComponentDependencies'] !== undefined\"\n                              [class.zero-rows]=\"sectionRowCounts['mJComponentDependencies'] === 0\">\n                            {{sectionRowCounts['mJComponentDependencies']}}\n                        </span>\n                    </h3>\n                </div>\n                <div class=\"collapse-icon\">\n                    <i [class]=\"sectionsExpanded.mJComponentDependencies ? 'fa fa-chevron-up' : 'fa fa-chevron-down'\"></i>\n                </div>\n            </div>\n            <div class=\"collapsible-body\" [class.collapsed]=\"!sectionsExpanded.mJComponentDependencies\" *ngIf=\"record.IsSaved\">\n                <div class=\"form-body\">\n                    <mj-user-view-grid\n                        [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: Component Dependencies','ComponentID')\"\n                        [NewRecordValues]=\"NewRecordValues('MJ: Component Dependencies')\"\n                        [AllowLoad]=\"IsCurrentSection('mJComponentDependencies')\"\n                        [EditMode]=\"GridEditMode()\"\n                        (dataLoaded)=\"sectionRowCounts['mJComponentDependencies'] = $event.totalRowCount\"\n                        >\n                    </mj-user-view-grid>\n                </div>\n            </div>\n        </div>\n        </div>\n        </div>\n    </form>\n</div>\n        ", styles: [".k-pane {\n  background-color: #F5F6FA;\n}\n\n.content-margin {\n  margin: 10px;\n} \n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n/* .record-form .record-form-row:nth-child(odd) {\n  background-color: #f2f2f2; \n} */\n\n/* \n.record-form .record-form-row:nth-child(even) {\n  background-color: #ffffff;  \n} */\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: #F5F6FA;\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: #667eea;\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header .collapse-icon {\n  color: #6b7280;\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity .collapsible-header {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: #3b82f6;\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  background: white;\n  color: #374151;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: #6b7280;\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: #667eea;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: #fef08a;\n  color: #854d0e;\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: #10b981;\n  color: white;\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: #9ca3af;\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentFormComponent, { className: "ComponentFormComponent", filePath: "src/lib/generated/Entities/Component/component.form.component.ts", lineNumber: 14 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentFormComponent, { className: "ComponentFormComponent", filePath: "src/lib/generated/Entities/Component/component.form.component.ts", lineNumber: 13 }); })();
 export function LoadComponentFormComponent() {
-    LoadComponentDetailsComponent();
+    // does nothing, but called to prevent tree-shaking from eliminating this component from the build
 }
 //# sourceMappingURL=component.form.component.js.map