npm - @memberjunction/ng-core-entity-forms - Versions diffs - 5.0.0 → 5.1.0 - Mend

@memberjunction/ng-core-entity-forms 5.0.0 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2433) hide show

package/dist/lib/custom/Entities/entity-form.component.js CHANGED Viewed

@@ -3225,5 +3225,5 @@ export { EntityFormComponentExtended };
         type: Component,
         args: [{ standalone: false, selector: 'mj-entity-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!isExplorerLoading && entity) {\n  <div class=\"entity-explorer\">\n    <!-- ============================================================ -->\n    <!-- HEADER BAR -->\n    <!-- ============================================================ -->\n    <header class=\"explorer-header\">\n      <div class=\"entity-identity\">\n        <div class=\"entity-icon\" [style.background-color]=\"'#3b82f6'\">\n          <i [class]=\"entityIcon\"></i>\n        </div>\n        <div class=\"entity-info\">\n          <div class=\"entity-title-row\">\n            <h1 class=\"entity-name\">{{ entityDisplayName }}</h1>\n            <span class=\"status-badge\" [ngClass]=\"statusClass\">\n              {{ entity.Status }}\n            </span>\n            @if (IsVirtualEntity) {\n              <span class=\"status-badge isa-badge virtual\">\n                <i class=\"fa-solid fa-eye\"></i> Virtual\n              </span>\n            }\n            @if (IsChildType) {\n              <span class=\"status-badge isa-badge child-type\" (click)=\"NavigateToEntity(ParentChain[0])\" title=\"Click to navigate to parent entity\">\n                <i class=\"fa-solid fa-arrow-up\"></i> IS-A {{ ParentChain[0]?.Name }}\n              </span>\n            }\n            @if (IsParentType) {\n              <span class=\"status-badge isa-badge parent-type\">\n                <i class=\"fa-solid fa-sitemap\"></i> {{ ChildEntities.length }} child type{{ ChildEntities.length !== 1 ? 's' : '' }}\n              </span>\n              @if (HasOverlappingSubtypes) {\n                <span class=\"status-badge isa-badge overlapping\" title=\"Multiple child types can coexist for a single parent record\">\n                  <i class=\"fa-solid fa-clone\"></i> Overlapping Subtypes\n                </span>\n              }\n            }\n          </div>\n          @if (IsChildType) {\n            <div class=\"isa-breadcrumb\">\n              <i class=\"fa-solid fa-layer-group\"></i>\n              {{ IsaBreadcrumb }}\n            </div>\n          }\n          <div class=\"entity-subtitle\">\n            <span class=\"schema-table\">{{ entity.SchemaName }}.{{ entity.BaseTable }}</span>\n            <span class=\"separator\">|</span>\n            @if (entity.Description) {\n              <span class=\"entity-description\" [title]=\"entity.Description\">\n                {{ entity.Description | slice:0:80 }}{{ entity.Description.length > 80 ? '...' : '' }}\n              </span>\n            }\n          </div>\n        </div>\n      </div>\n      <div class=\"header-stats\">\n        <div class=\"stat-item\" (click)=\"setActiveSection('fields')\">\n          <i class=\"fa-solid fa-table-columns\"></i>\n          <span class=\"stat-value\">{{ stats.fieldCount }}</span>\n          <span class=\"stat-label\">Fields</span>\n        </div>\n        <div class=\"stat-item\" (click)=\"setActiveSection('relationships')\">\n          <i class=\"fa-solid fa-link\"></i>\n          <span class=\"stat-value\">{{ stats.relationshipCount }}</span>\n          <span class=\"stat-label\">Relations</span>\n        </div>\n        <div class=\"stat-item\" (click)=\"setActiveSection('permissions')\">\n          <i class=\"fa-solid fa-shield-halved\"></i>\n          <span class=\"stat-value\">{{ stats.permissionCount }}</span>\n          <span class=\"stat-label\">Roles</span>\n        </div>\n        <div class=\"stat-item\">\n          <i class=\"fa-solid fa-database\"></i>\n          @if (!isRowCountLoading) {\n            <span class=\"stat-value\">{{ formattedRowCount }}</span>\n          }\n          @if (isRowCountLoading) {\n            <span class=\"stat-value loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            </span>\n          }\n          <span class=\"stat-label\">Rows</span>\n        </div>\n      </div>\n    </header>\n    <!-- ============================================================ -->\n    <!-- MAIN CONTENT AREA -->\n    <!-- ============================================================ -->\n    <div class=\"explorer-body\">\n      <!-- Navigation Rail -->\n      <nav class=\"nav-rail\">\n        @for (item of navItems; track item) {\n          <button\n            class=\"nav-item\"\n            [class.active]=\"activeSection === item.id\"\n            (click)=\"setActiveSection(item.id)\"\n            [title]=\"item.label\">\n            <i [class]=\"item.icon\"></i>\n            <span class=\"nav-label\">{{ item.label }}</span>\n            @if (item.badge) {\n              <span class=\"nav-badge\">{{ item.badge }}</span>\n            }\n          </button>\n        }\n      </nav>\n      <!-- Main Canvas -->\n      <main class=\"main-canvas\" [class.panel-open]=\"detailPanelOpen\">\n        <!-- ============================================================ -->\n        <!-- OVERVIEW SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'overview') {\n          <section class=\"section overview-section\">\n            <div class=\"section-content\">\n              <!-- Stats Cards Row - Clickable to navigate to sections -->\n              <div class=\"stats-cards\">\n                <div class=\"stat-card clickable\" (click)=\"setActiveSection('fields')\" title=\"View all fields\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-table-cells\"></i>\n                    <span>Fields</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ stats.fieldCount }}</div>\n                    <div class=\"stat-details\">\n                      <span>{{ stats.primaryKeyCount }} PKs</span>\n                      <span>{{ stats.foreignKeyCount }} FKs</span>\n                      @if (stats.encryptedFieldCount) {\n                        <span>{{ stats.encryptedFieldCount }} Encrypted</span>\n                      }\n                    </div>\n                  </div>\n                  <div class=\"stat-card-action\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                </div>\n                <div class=\"stat-card clickable\" (click)=\"setActiveSection('relationships')\" title=\"View relationships\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-diagram-project\"></i>\n                    <span>Relationships</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ stats.relationshipCount }}</div>\n                    <div class=\"stat-details\">\n                      <span>{{ groupedOutgoingRelationships.length }} Out</span>\n                      <span>{{ groupedIncomingRelationships.length }} In</span>\n                    </div>\n                  </div>\n                  <div class=\"stat-card-action\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                </div>\n                <div class=\"stat-card clickable\" (click)=\"setActiveSection('permissions')\" title=\"View security settings\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-lock\"></i>\n                    <span>Security</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ stats.permissionCount }}</div>\n                    <div class=\"stat-details\">\n                      <span>Roles configured</span>\n                    </div>\n                  </div>\n                  <div class=\"stat-card-action\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                </div>\n                <div class=\"stat-card\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-database\"></i>\n                    <span>Data</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ formattedRowCount }}</div>\n                    <div class=\"stat-details\">\n                      @if (entity.RowCountRunAt) {\n                        <span>Updated {{ entity.RowCountRunAt | date:'short' }}</span>\n                      }\n                      @if (!entity.RowCountRunAt) {\n                        <span>Row count</span>\n                      }\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <!-- Capabilities -->\n              <div class=\"info-panel capabilities-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-bolt\"></i>\n                  Capabilities\n                </h3>\n                <div class=\"capability-tags\">\n                  @for (cap of capabilitySummary; track cap) {\n                    <span class=\"capability-tag\">\n                      <i class=\"fa-solid fa-check\"></i>\n                      {{ cap }}\n                    </span>\n                  }\n                  @if (!entity.IncludeInAPI) {\n                    <span class=\"capability-tag disabled\">\n                      <i class=\"fa-solid fa-xmark\"></i>\n                      No API\n                    </span>\n                  }\n                </div>\n              </div>\n              <!-- IS-A Type Hierarchy -->\n              @if (HasISARelationship || IsVirtualEntity) {\n                <div class=\"info-panel isa-panel\">\n                  <h3 class=\"panel-title\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                    Type Hierarchy\n                  </h3>\n                  @if (IsVirtualEntity) {\n                    <div class=\"isa-info-row virtual-info\">\n                      <i class=\"fa-solid fa-eye\"></i>\n                      <span>Virtual Entity \u2014 read-only view backed by <span class=\"code\">{{ entity.BaseView }}</span></span>\n                    </div>\n                  }\n                  @if (IsChildType) {\n                    <div class=\"isa-chain\">\n                      <div class=\"isa-chain-label\">Inheritance Chain</div>\n                      <div class=\"isa-chain-nodes\">\n                        <span class=\"isa-node current\">{{ entity.Name }}</span>\n                        @for (parent of ParentChain; track parent.ID) {\n                          <i class=\"fa-solid fa-arrow-right isa-arrow\"></i>\n                          <span class=\"isa-node parent clickable\" (click)=\"NavigateToEntity(parent)\" [title]=\"'Navigate to ' + parent.Name\">\n                            {{ parent.Name }}\n                          </span>\n                        }\n                      </div>\n                      <div class=\"isa-inherited-fields\">\n                        <i class=\"fa-solid fa-table-cells\"></i>\n                        <span>{{ InheritedFieldCount }} field{{ InheritedFieldCount !== 1 ? 's' : '' }} inherited from parent{{ ParentChain.length > 1 ? 's' : '' }}</span>\n                      </div>\n                    </div>\n                    <!-- IS-A Field Inspector: shows fields grouped by source entity -->\n                    @if (isaFieldGroups.length > 1) {\n                      <div class=\"isa-field-inspector\">\n                        <div class=\"isa-chain-label clickable\" (click)=\"isaFieldInspectorExpanded = !isaFieldInspectorExpanded\">\n                          <i class=\"fa-solid\" [ngClass]=\"isaFieldInspectorExpanded ? 'fa-chevron-down' : 'fa-chevron-right'\"></i>\n                          Field Source Inspector\n                        </div>\n                        @if (isaFieldInspectorExpanded) {\n                          <div class=\"isa-inspector-groups\">\n                            @for (group of isaFieldGroups; track group.EntityName) {\n                              <div class=\"isa-inspector-group\" [class.own]=\"group.Level === 0\" [class.inherited]=\"group.Level > 0\">\n                                <div class=\"isa-inspector-header\">\n                                  <span class=\"isa-inspector-entity\">\n                                    @if (group.Level === 0) {\n                                      <i class=\"fa-solid fa-circle\" style=\"color: #3b82f6; font-size: 8px;\"></i>\n                                    } @else {\n                                      <i class=\"fa-solid fa-arrow-up\" style=\"color: #6366f1; font-size: 10px;\"></i>\n                                    }\n                                    {{ group.Label }}\n                                  </span>\n                                  <span class=\"isa-inspector-count\">{{ group.Fields.length }} field{{ group.Fields.length !== 1 ? 's' : '' }}</span>\n                                </div>\n                                <div class=\"isa-inspector-fields\">\n                                  @for (field of group.Fields; track field.ID) {\n                                    <span class=\"isa-inspector-field\" [title]=\"field.Description || field.Name\">\n                                      {{ field.DisplayName || field.Name }}\n                                      <span class=\"isa-inspector-type\">{{ field.Type }}</span>\n                                    </span>\n                                  }\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                    <!-- Sibling Types -->\n                    @if (SiblingEntities.length > 0) {\n                      <div class=\"isa-siblings\">\n                        <div class=\"isa-chain-label\">Sibling Types ({{ ParentChain[0]?.AllowMultipleSubtypes ? 'overlapping' : 'disjoint' }} under {{ ParentChain[0]?.Name }})</div>\n                        <div class=\"isa-child-list\">\n                          @for (sibling of SiblingEntities; track sibling.ID) {\n                            <span class=\"isa-sibling-chip clickable\" (click)=\"NavigateToEntity(sibling)\" [title]=\"'Navigate to ' + sibling.Name\">\n                              <i class=\"fa-solid fa-arrows-left-right\"></i>\n                              {{ sibling.Name }}\n                            </span>\n                          }\n                        </div>\n                      </div>\n                    }\n                  }\n                  @if (IsParentType) {\n                    <div class=\"isa-children\">\n                      <div class=\"isa-chain-label\">Child Types</div>\n                      <div class=\"isa-child-list\">\n                        @for (childCount of childEntityCounts; track childCount.EntityName) {\n                          <span class=\"isa-child-chip clickable\" (click)=\"NavigateToEntity(childCount.EntityInfo)\" [title]=\"'Navigate to ' + childCount.EntityName\">\n                            <i class=\"fa-solid fa-arrow-down\"></i>\n                            {{ childCount.EntityName }}\n                            <span class=\"isa-child-count\">\n                              @if (childCount.IsLoading) {\n                                <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                              } @else {\n                                {{ childCount.RecordCount | number }}\n                              }\n                            </span>\n                          </span>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n              <!-- Database Info -->\n              <div class=\"info-panel database-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-server\"></i>\n                  Database\n                </h3>\n                <div class=\"info-grid\">\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Schema</span>\n                    <span class=\"info-value\">{{ entity.SchemaName }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Table</span>\n                    <span class=\"info-value\">{{ entity.BaseTable }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">View</span>\n                    <span class=\"info-value\">{{ entity.BaseView }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Delete Type</span>\n                    <span class=\"info-value\">{{ entity.DeleteType }}</span>\n                  </div>\n                  @if (entity.spCreate) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">SP Create</span>\n                      <span class=\"info-value code\">{{ entity.spCreate }}</span>\n                    </div>\n                  }\n                  @if (entity.spUpdate) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">SP Update</span>\n                      <span class=\"info-value code\">{{ entity.spUpdate }}</span>\n                    </div>\n                  }\n                  @if (entity.spDelete) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">SP Delete</span>\n                      <span class=\"info-value code\">{{ entity.spDelete }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n              <!-- Code Gen Info -->\n              <div class=\"info-panel codegen-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-code\"></i>\n                  Code Generation\n                </h3>\n                <div class=\"info-grid\">\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Class Name</span>\n                    <span class=\"info-value code\">{{ entity.ClassName }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Code Name</span>\n                    <span class=\"info-value code\">{{ entity.CodeName }}</span>\n                  </div>\n                  @if (entity.EntityObjectSubclassName) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">Subclass</span>\n                      <span class=\"info-value code\">{{ entity.EntityObjectSubclassName }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- FIELDS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'fields') {\n          <section class=\"section fields-section\">\n            <div class=\"section-header\">\n              <div class=\"search-box\">\n                <i class=\"fa-solid fa-search\"></i>\n                <input\n                  type=\"text\"\n                  placeholder=\"Search fields...\"\n                  [ngModel]=\"fieldSearchTerm\"\n                  (ngModelChange)=\"onFieldSearch($event)\">\n              </div>\n              <div class=\"header-controls\">\n                <!-- View mode toggle -->\n                <div class=\"view-mode-toggle\">\n                  <button\n                    class=\"toggle-btn\"\n                    [class.active]=\"fieldViewMode === 'grouped'\"\n                    (click)=\"fieldViewMode = 'grouped'\"\n                    title=\"Group by category\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                  </button>\n                  <button\n                    class=\"toggle-btn\"\n                    [class.active]=\"fieldViewMode === 'list'\"\n                    (click)=\"fieldViewMode = 'list'\"\n                    title=\"List view\">\n                    <i class=\"fa-solid fa-list\"></i>\n                  </button>\n                </div>\n                <!-- Expand/Collapse controls (only in grouped mode) -->\n                @if (fieldViewMode === 'grouped') {\n                  <div class=\"expand-collapse-controls\">\n                    <button\n                      class=\"control-btn\"\n                      (click)=\"expandAllFieldGroups()\"\n                      [disabled]=\"allFieldGroupsExpanded\"\n                      title=\"Expand all\">\n                      <i class=\"fa-solid fa-angles-down\"></i>\n                    </button>\n                    <button\n                      class=\"control-btn\"\n                      (click)=\"collapseAllFieldGroups()\"\n                      [disabled]=\"allFieldGroupsCollapsed\"\n                      title=\"Collapse all\">\n                      <i class=\"fa-solid fa-angles-up\"></i>\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n            <div class=\"section-content fields-content\">\n              <!-- Grouped View -->\n              @if (fieldViewMode === 'grouped') {\n                <div class=\"field-groups\">\n                  @for (group of getFilteredFieldGroups(); track group) {\n                    <div\n                      class=\"field-group\"\n                      [class.expanded]=\"isFieldGroupExpanded(group.id)\">\n                      <div class=\"group-header\" (click)=\"toggleFieldGroup(group.id)\">\n                        <i class=\"expand-icon fa-solid\" [ngClass]=\"isFieldGroupExpanded(group.id) ? 'fa-chevron-down' : 'fa-chevron-right'\"></i>\n                        <i [class]=\"group.icon\" class=\"group-icon\"></i>\n                        <span class=\"group-label\">{{ group.label }}</span>\n                        <span class=\"group-count\">{{ group.fields.length }}</span>\n                      </div>\n                      @if (isFieldGroupExpanded(group.id)) {\n                        <div class=\"group-content\">\n                          @for (field of group.fields; track field) {\n                            <div\n                              class=\"field-item\"\n                              (click)=\"selectField(field)\"\n                              [class.selected]=\"selectedField?.ID === field.ID\">\n                              <div class=\"field-icon\">\n                                <i [class]=\"getFieldTypeIcon(field)\"></i>\n                              </div>\n                              <div class=\"field-info\">\n                                <div class=\"field-name\">{{ field.DisplayName || field.Name }}</div>\n                                <div class=\"field-meta\">\n                                  <span class=\"field-type\">{{ formatFieldType(field) }}</span>\n                                  @if (!field.AllowsNull) {\n                                    <span class=\"field-nullable\">Required</span>\n                                  }\n                                  @if (field.RelatedEntityID) {\n                                    <span class=\"field-related\" (click)=\"navigateToRelatedEntity(field); $event.stopPropagation()\">\n                                      <i class=\"fa-solid fa-arrow-right\"></i>\n                                      {{ getRelatedEntityName(field) }}\n                                    </span>\n                                  }\n                                </div>\n                              </div>\n                              <div class=\"field-badges\">\n                                @if (field.IsPrimaryKey) {\n                                  <span class=\"badge pk\" title=\"Primary Key\">PK</span>\n                                }\n                                @if (field.RelatedEntityID && !field.IsPrimaryKey) {\n                                  <span class=\"badge fk\" title=\"Foreign Key\">FK</span>\n                                }\n                                @if (field.Encrypt) {\n                                  <span class=\"badge encrypted\" title=\"Encrypted\">\n                                    <i class=\"fa-solid fa-lock\"></i>\n                                  </span>\n                                }\n                                @if (IsInheritedField(field)) {\n                                  <span class=\"badge inherited\" [title]=\"'Inherited from ' + GetISAFieldSource(field)\">\n                                    <i class=\"fa-solid fa-arrow-up\"></i> {{ GetISAFieldSource(field) }}\n                                  </span>\n                                }\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n              <!-- List View - Modern Card-style Table -->\n              @if (fieldViewMode === 'list') {\n                <div class=\"fields-list-view\">\n                  <!-- Table Header -->\n                  <div class=\"list-header\">\n                    <div class=\"list-col col-seq sortable\" (click)=\"sortFieldList('Sequence')\" [class.sorted]=\"fieldListSortColumn === 'Sequence'\">\n                      #\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Sequence' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-name sortable\" (click)=\"sortFieldList('Name')\" [class.sorted]=\"fieldListSortColumn === 'Name'\">\n                      Field Name\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Name' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-type sortable\" (click)=\"sortFieldList('Type')\" [class.sorted]=\"fieldListSortColumn === 'Type'\">\n                      Type\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Type' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-length sortable\" (click)=\"sortFieldList('Length')\" [class.sorted]=\"fieldListSortColumn === 'Length'\">\n                      Length\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Length' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-nullable sortable\" (click)=\"sortFieldList('AllowsNull')\" [class.sorted]=\"fieldListSortColumn === 'AllowsNull'\">\n                      Required\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'AllowsNull' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-flags\">Flags</div>\n                    <div class=\"list-col col-desc sortable\" (click)=\"sortFieldList('Description')\" [class.sorted]=\"fieldListSortColumn === 'Description'\">\n                      Description\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Description' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                  </div>\n                  <!-- Table Body -->\n                  <div class=\"list-body\">\n                    @for (field of getFilteredFieldsList(); track field; let i = $index) {\n                      <div\n                        class=\"list-row\"\n                        [class.selected]=\"selectedField?.ID === field.ID\"\n                        (click)=\"selectField(field)\">\n                        <div class=\"list-col col-seq\">\n                          <span class=\"seq-num\">{{ field.Sequence }}</span>\n                        </div>\n                        <div class=\"list-col col-name\">\n                          <i [class]=\"getFieldTypeIcon(field)\" class=\"field-type-icon\"></i>\n                          <span class=\"field-name-text\">{{ field.DisplayName || field.Name }}</span>\n                        </div>\n                        <div class=\"list-col col-type\">\n                          <span class=\"type-tag\">{{ field.Type }}</span>\n                        </div>\n                        <div class=\"list-col col-length\">\n                          @if (field.Length > 0) {\n                            <span class=\"length-value\">{{ field.Length }}</span>\n                          }\n                          @if (field.Length <= 0) {\n                            <span class=\"length-value muted\">\u2014</span>\n                          }\n                        </div>\n                        <div class=\"list-col col-nullable\">\n                          <span class=\"required-indicator\" [class.required]=\"!field.AllowsNull\" [class.optional]=\"field.AllowsNull\">\n                            <i [class]=\"field.AllowsNull ? 'fa-solid fa-circle-minus' : 'fa-solid fa-circle-check'\"></i>\n                            {{ field.AllowsNull ? 'Optional' : 'Required' }}\n                          </span>\n                        </div>\n                        <div class=\"list-col col-flags\">\n                          <div class=\"flag-badges\">\n                            @if (field.IsPrimaryKey) {\n                              <span class=\"flag-badge pk\" title=\"Primary Key\">\n                                <i class=\"fa-solid fa-key\"></i> PK\n                              </span>\n                            }\n                            @if (field.RelatedEntityID && !field.IsPrimaryKey) {\n                              <span class=\"flag-badge fk\" title=\"Foreign Key\">\n                                <i class=\"fa-solid fa-link\"></i> FK\n                              </span>\n                            }\n                            @if (field.Encrypt) {\n                              <span class=\"flag-badge encrypted\" title=\"Encrypted\">\n                                <i class=\"fa-solid fa-lock\"></i>\n                              </span>\n                            }\n                            @if (IsInheritedField(field)) {\n                              <span class=\"flag-badge inherited\" [title]=\"'Inherited from ' + GetISAFieldSource(field)\">\n                                <i class=\"fa-solid fa-arrow-up\"></i> {{ GetISAFieldSource(field) }}\n                              </span>\n                            }\n                          </div>\n                        </div>\n                        <div class=\"list-col col-desc\">\n                          <span class=\"desc-text\" [title]=\"field.Description || ''\">{{ field.Description || '\u2014' }}</span>\n                        </div>\n                      </div>\n                    }\n                  </div>\n                  <!-- Empty state -->\n                  @if (getFilteredFieldsList().length === 0) {\n                    <div class=\"list-empty\">\n                      <i class=\"fa-solid fa-search\"></i>\n                      <span>No fields match your search</span>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- RELATIONSHIPS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'relationships') {\n          <section class=\"section relationships-section\">\n            <div class=\"section-header\">\n              <div class=\"view-toggle\">\n                <button\n                  class=\"toggle-btn\"\n                  [class.active]=\"relationshipViewMode === 'diagram'\"\n                  (click)=\"relationshipViewMode = 'diagram'\">\n                  <i class=\"fa-solid fa-diagram-project\"></i>\n                  Diagram\n                </button>\n                <button\n                  class=\"toggle-btn\"\n                  [class.active]=\"relationshipViewMode === 'list'\"\n                  (click)=\"relationshipViewMode = 'list'\">\n                  <i class=\"fa-solid fa-list\"></i>\n                  List\n                </button>\n              </div>\n              <!-- Depth selector (only in diagram mode) -->\n              @if (relationshipViewMode === 'diagram') {\n                <div class=\"depth-selector\">\n                  <span class=\"depth-label\">Depth:</span>\n                  <div class=\"depth-buttons\">\n                    @for (d of [1, 2, 3, 4, 5]; track d) {\n                      <button\n                        class=\"depth-btn\"\n                        [class.active]=\"erdDepth === d\"\n                        (click)=\"setErdDepth(d)\"\n                        [title]=\"'Show ' + d + ' level(s) of relationships'\">\n                        {{ d }}\n                      </button>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n            <div class=\"section-content\">\n              <!-- Diagram View using the ERD composite component -->\n              @if (relationshipViewMode === 'diagram') {\n                <div class=\"relationships-graph\">\n                  <mj-erd-composite\n                    [focusEntities]=\"entity ? [entity] : []\"\n                    [showFilterPanel]=\"false\"\n                    [showHeader]=\"false\"\n                    [depth]=\"erdDepth\"\n                    (stateChange)=\"onERDStateChange($event)\"\n                    (openRecord)=\"onERDOpenRecord($event)\">\n                  </mj-erd-composite>\n                </div>\n              }\n              <!-- List View -->\n              @if (relationshipViewMode === 'list') {\n                <div class=\"relationships-list\">\n                  <!-- Outgoing Relationships (FK fields on this entity) - Grouped by target entity -->\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-from-bracket\"></i>\n                      Outgoing (References to other entities)\n                      <span class=\"group-count\">{{ groupedOutgoingRelationships.length }}</span>\n                    </h3>\n                    <div class=\"relationship-items grouped\">\n                      @for (group of groupedOutgoingRelationships; track group) {\n                        <div\n                          class=\"relationship-item-grouped\"\n                          >\n                          <div class=\"rel-header\">\n                            <div class=\"rel-icon outgoing\">\n                              <i class=\"fa-solid fa-arrow-right\"></i>\n                            </div>\n                            <div class=\"rel-entity-name\">{{ group.entityName }}</div>\n                          </div>\n                          <div class=\"rel-fields-chips\">\n                            @for (field of group.fields; track field) {\n                              <span\n                                class=\"field-chip outgoing\"\n                                [title]=\"field.Description || field.Name\"\n                                (click)=\"selectField(field)\">\n                                <i class=\"fa-solid fa-link\"></i>\n                                {{ field.Name }}\n                              </span>\n                            }\n                          </div>\n                        </div>\n                      }\n                      @if (groupedOutgoingRelationships.length === 0) {\n                        <div class=\"empty-state\">\n                          <p>No outgoing relationships</p>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                  <!-- Incoming Relationships - Grouped by source entity -->\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-to-bracket\"></i>\n                      Incoming (Entities that reference this one)\n                      <span class=\"group-count\">{{ groupedIncomingRelationships.length }}</span>\n                    </h3>\n                    <div class=\"relationship-items grouped\">\n                      @for (group of groupedIncomingRelationships; track group) {\n                        <div\n                          class=\"relationship-item-grouped\"\n                          >\n                          <div class=\"rel-header\">\n                            <div class=\"rel-icon incoming\">\n                              <i class=\"fa-solid fa-arrow-left\"></i>\n                            </div>\n                            <div class=\"rel-entity-name\">{{ group.entityName }}</div>\n                          </div>\n                          <div class=\"rel-fields-chips\">\n                            @for (field of group.fields; track field) {\n                              <span\n                                class=\"field-chip incoming\"\n                                [title]=\"'Type: ' + field.type\">\n                                <i class=\"fa-solid fa-link\"></i>\n                                {{ field.fieldName }}\n                                @if (field.bundleInAPI) {\n                                  <i class=\"fa-solid fa-box bundle-icon\" title=\"Bundled in API\"></i>\n                                }\n                              </span>\n                            }\n                          </div>\n                        </div>\n                      }\n                      @if (groupedIncomingRelationships.length === 0) {\n                        <div class=\"empty-state\">\n                          <p>No incoming relationships</p>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- PERMISSIONS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'permissions') {\n          <section class=\"section permissions-section\">\n            <div class=\"section-content\">\n              <div class=\"permissions-matrix\">\n                <table class=\"matrix-table\">\n                  <thead>\n                    <tr>\n                      <th>Role</th>\n                      <th class=\"center\">Create</th>\n                      <th class=\"center\">Read</th>\n                      <th class=\"center\">Update</th>\n                      <th class=\"center\">Delete</th>\n                      <th>RLS</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (perm of entity.Permissions; track perm) {\n                      <tr>\n                        <td class=\"role-name\">{{ getRoleName(perm) }}</td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanCreate ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanRead ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanUpdate ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanDelete ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"rls-info\">\n                          @if (perm.ReadRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Read RLS\">R</span>\n                          }\n                          @if (perm.CreateRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Create RLS\">C</span>\n                          }\n                          @if (perm.UpdateRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Update RLS\">U</span>\n                          }\n                          @if (perm.DeleteRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Delete RLS\">D</span>\n                          }\n                          @if (!perm.ReadRLSFilterID && !perm.CreateRLSFilterID && !perm.UpdateRLSFilterID && !perm.DeleteRLSFilterID) {\n                            <span class=\"no-rls\">None</span>\n                          }\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n                @if (entity.Permissions.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-shield-halved\"></i>\n                    <p>No permissions configured</p>\n                  </div>\n                }\n              </div>\n              <div class=\"api-capabilities\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-plug\"></i>\n                  API Capabilities\n                </h3>\n                <div class=\"capability-grid\">\n                  <div class=\"capability-item\" [class.enabled]=\"entity.IncludeInAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.IncludeInAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Include in API</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowAllRowsAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowAllRowsAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow All Rows</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowCreateAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowCreateAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow Create</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowUpdateAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowUpdateAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow Update</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowDeleteAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowDeleteAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow Delete</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowUserSearchAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowUserSearchAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>User Search</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.CustomResolverAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.CustomResolverAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Custom Resolver</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- LINEAGE SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'lineage') {\n          <section class=\"section lineage-section\">\n            <div class=\"section-content\">\n              <div class=\"lineage-diagram\">\n                <div class=\"lineage-stage sources\">\n                  <h4>Data Sources</h4>\n                  <div class=\"lineage-items\">\n                    <div class=\"lineage-item\">\n                      <i class=\"fa-solid fa-keyboard\"></i>\n                      <span>Manual Entry</span>\n                    </div>\n                    @if (entity.IncludeInAPI) {\n                      <div class=\"lineage-item\">\n                        <i class=\"fa-solid fa-plug\"></i>\n                        <span>API Create</span>\n                      </div>\n                    }\n                  </div>\n                </div>\n                <div class=\"lineage-arrow\">\n                  <i class=\"fa-solid fa-arrow-right\"></i>\n                </div>\n                <div class=\"lineage-stage entity-node\">\n                  <div class=\"entity-box\">\n                    <i [class]=\"entityIcon\"></i>\n                    <span>{{ entity.Name }}</span>\n                  </div>\n                </div>\n                <div class=\"lineage-arrow\">\n                  <i class=\"fa-solid fa-arrow-right\"></i>\n                </div>\n                <div class=\"lineage-stage sinks\">\n                  <h4>Data Sinks</h4>\n                  <div class=\"lineage-items\">\n                    @if (entity.TrackRecordChanges) {\n                      <div class=\"lineage-item\">\n                        <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                        <span>Record Changes</span>\n                      </div>\n                    }\n                    @if (entity.AuditRecordAccess) {\n                      <div class=\"lineage-item\">\n                        <i class=\"fa-solid fa-eye\"></i>\n                        <span>Access Audit</span>\n                      </div>\n                    }\n                    <div class=\"lineage-item\">\n                      <i class=\"fa-solid fa-link\"></i>\n                      <span>Related Entities ({{ stats.relationshipCount }})</span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"tracking-config\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                  Tracking Configuration\n                </h3>\n                <div class=\"config-grid\">\n                  <div class=\"config-item\" [class.enabled]=\"entity.TrackRecordChanges\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.TrackRecordChanges ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Track Record Changes</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.AuditRecordAccess\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AuditRecordAccess ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Audit Record Access</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.AuditViewRuns\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AuditViewRuns ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Audit View Runs</span>\n                  </div>\n                  <div class=\"config-item\">\n                    <span class=\"config-label\">Delete Type:</span>\n                    <span class=\"config-value\">{{ entity.DeleteType }}</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.CascadeDeletes\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.CascadeDeletes ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Cascade Deletes</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- HISTORY SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'history') {\n          <section class=\"section history-section\">\n            <div class=\"section-content\">\n              <div class=\"history-config\">\n                <div class=\"config-status\" [class.enabled]=\"entity.TrackRecordChanges\">\n                  <i class=\"fa-solid\" [ngClass]=\"entity.TrackRecordChanges ? 'fa-circle-check' : 'fa-circle-xmark'\"></i>\n                  <div class=\"config-text\">\n                    <strong>Record Change Tracking</strong>\n                    <span>{{ entity.TrackRecordChanges ? 'Enabled - All changes are recorded' : 'Disabled - Changes are not tracked' }}</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"history-info\">\n                <div class=\"info-card\">\n                  <h4>\n                    <i class=\"fa-solid fa-info-circle\"></i>\n                    About Change Tracking\n                  </h4>\n                  @if (entity.TrackRecordChanges) {\n                    <p>\n                      This entity has change tracking enabled. All modifications to records are stored in the\n                      <code>RecordChange</code> table, including the user who made the change, timestamp, and\n                      the before/after values.\n                    </p>\n                  }\n                  @if (!entity.TrackRecordChanges) {\n                    <p>\n                      This entity does not have change tracking enabled. To enable it, set\n                      <code>TrackRecordChanges</code> to <code>true</code> in the entity metadata.\n                    </p>\n                  }\n                </div>\n                @if (entity.TrackRecordChanges) {\n                  <div class=\"info-card\">\n                    <h4>\n                      <i class=\"fa-solid fa-database\"></i>\n                      Audit Fields\n                    </h4>\n                    <ul class=\"audit-fields-list\">\n                      <li>\n                        <code>__mj_CreatedAt</code> - Record creation timestamp\n                      </li>\n                      <li>\n                        <code>__mj_UpdatedAt</code> - Last modification timestamp\n                      </li>\n                      @if (entity.DeleteType === 'Soft') {\n                        <li>\n                          <code>__mj_DeletedAt</code> - Soft delete timestamp (when applicable)\n                        </li>\n                      }\n                    </ul>\n                  </div>\n                }\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- SETTINGS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'settings') {\n          <section class=\"section settings-section\">\n            <div class=\"section-content\">\n              <!-- IS-A Type Relationship Configuration -->\n              @if (HasISARelationship || IsVirtualEntity) {\n                <div class=\"settings-panel isa-settings-panel\">\n                  <h3 class=\"panel-title\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                    Type Relationship (IS-A)\n                  </h3>\n                  <div class=\"config-grid\">\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Virtual Entity</span>\n                      <span class=\"config-value\">\n                        @if (IsVirtualEntity) {\n                          <i class=\"fa-solid fa-circle-check\" style=\"color: #7c3aed;\"></i> Yes \u2014 read-only view\n                        } @else {\n                          <i class=\"fa-solid fa-circle-minus\" style=\"color: #94a3b8;\"></i> No\n                        }\n                      </span>\n                    </div>\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Parent Entity</span>\n                      <span class=\"config-value\">\n                        @if (IsChildType) {\n                          <span class=\"link\" (click)=\"NavigateToEntity(ParentChain[0])\" title=\"Navigate to parent entity\">\n                            {{ ParentChain[0]?.Name }}\n                            <i class=\"fa-solid fa-arrow-right\"></i>\n                          </span>\n                        } @else {\n                          <span class=\"muted\">None</span>\n                        }\n                      </span>\n                    </div>\n                    @if (IsChildType) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Full Inheritance Chain</span>\n                        <span class=\"config-value\">{{ IsaBreadcrumb }}</span>\n                      </div>\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Inherited Fields</span>\n                        <span class=\"config-value\">{{ InheritedFieldCount }} field{{ InheritedFieldCount !== 1 ? 's' : '' }}</span>\n                      </div>\n                    }\n                    @if (IsParentType) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Child Types</span>\n                        <span class=\"config-value\">\n                          @for (child of ChildEntities; track child.ID; let last = $last) {\n                            <span class=\"link\" (click)=\"NavigateToEntity(child)\">{{ child.Name }}</span>{{ last ? '' : ', ' }}\n                          }\n                        </span>\n                      </div>\n                    }\n                    @if (SiblingEntities.length > 0) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Sibling Types</span>\n                        <span class=\"config-value\">\n                          @for (sibling of SiblingEntities; track sibling.ID; let last = $last) {\n                            <span class=\"link\" (click)=\"NavigateToEntity(sibling)\">{{ sibling.Name }}</span>{{ last ? '' : ', ' }}\n                          }\n                        </span>\n                      </div>\n                    }\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Disjoint Subtypes</span>\n                      <span class=\"config-value\">\n                        @if (IsParentType || IsChildType) {\n                          <i class=\"fa-solid fa-circle-check\" style=\"color: #059669;\"></i> Enforced \u2014 a parent record can only be one child type\n                        } @else {\n                          <span class=\"muted\">N/A</span>\n                        }\n                      </span>\n                    </div>\n                  </div>\n                </div>\n              }\n              <!-- Entity Settings -->\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-sliders\"></i>\n                  Entity Settings\n                </h3>\n                @if (entity.Settings.length > 0) {\n                  <div class=\"settings-list\">\n                    @for (setting of entity.Settings; track setting) {\n                      <div class=\"setting-item\">\n                        <div class=\"setting-name\">{{ setting.Name }}</div>\n                        @if (isJsonValue(setting.Value)) {\n                          <div class=\"setting-value-json\">\n                            <mj-code-editor\n                              [value]=\"formatJsonValue(setting.Value)\"\n                              language=\"json\"\n                              [readonly]=\"true\"\n                              [lineWrapping]=\"true\"\n                              setup=\"minimal\">\n                            </mj-code-editor>\n                          </div>\n                        } @else {\n                          <div class=\"setting-value\">{{ setting.Value }}</div>\n                        }\n                        @if (setting.Comments) {\n                          <div class=\"setting-comment\">{{ setting.Comments }}</div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (entity.Settings.length === 0) {\n                  <div class=\"empty-state\">\n                    <p>No custom settings configured</p>\n                  </div>\n                }\n              </div>\n              <!-- Full Text Search -->\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-magnifying-glass\"></i>\n                  Full-Text Search\n                </h3>\n                @if (entity.FullTextSearchEnabled) {\n                  <div class=\"fts-config\">\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Status</span>\n                      <span class=\"config-value enabled\">\n                        <i class=\"fa-solid fa-circle-check\"></i>\n                        Enabled\n                      </span>\n                    </div>\n                    @if (entity.FullTextCatalog) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Catalog</span>\n                        <span class=\"config-value code\">{{ entity.FullTextCatalog }}</span>\n                      </div>\n                    }\n                    @if (entity.FullTextIndex) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Index</span>\n                        <span class=\"config-value code\">{{ entity.FullTextIndex }}</span>\n                      </div>\n                    }\n                    @if (entity.FullTextSearchFunction) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Function</span>\n                        <span class=\"config-value code\">{{ entity.FullTextSearchFunction }}</span>\n                      </div>\n                    }\n                  </div>\n                }\n                @if (!entity.FullTextSearchEnabled) {\n                  <div class=\"empty-state\">\n                    <p>Full-text search is not enabled for this entity</p>\n                  </div>\n                }\n              </div>\n              <!-- Row Packaging -->\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-box\"></i>\n                  Schema Packaging\n                </h3>\n                <div class=\"config-grid\">\n                  <div class=\"config-row\">\n                    <span class=\"config-label\">Rows to Pack</span>\n                    <span class=\"config-value\">{{ entity.RowsToPackWithSchema || 'None' }}</span>\n                  </div>\n                  @if (entity.RowsToPackSampleCount) {\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Sample Count</span>\n                      <span class=\"config-value\">{{ entity.RowsToPackSampleCount }}</span>\n                    </div>\n                  }\n                  @if (entity.RowsToPackSampleMethod) {\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Sample Method</span>\n                      <span class=\"config-value\">{{ entity.RowsToPackSampleMethod }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n      </main>\n      <!-- ============================================================ -->\n      <!-- DETAIL PANEL (Slides in from right) -->\n      <!-- ============================================================ -->\n      <aside class=\"detail-panel\" [class.open]=\"detailPanelOpen\">\n        <div class=\"panel-header\">\n          @if (selectedField) {\n            <h3>Field Details</h3>\n          }\n          @if (selectedRelationship) {\n            <h3>Relationship Details</h3>\n          }\n          <button class=\"close-btn\" (click)=\"closeDetailPanel()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <!-- Field Details -->\n        @if (selectedField) {\n          <div class=\"panel-content\">\n            <div class=\"detail-section\">\n              <h4>{{ selectedField.DisplayName || selectedField.Name }}</h4>\n              @if (selectedField.Description) {\n                <p class=\"field-description\">{{ selectedField.Description }}</p>\n              }\n            </div>\n            <div class=\"detail-section\">\n              <h5>Type Information</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">SQL Type</span>\n                  <span class=\"value code\">{{ formatFieldType(selectedField) }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">TypeScript Type</span>\n                  <span class=\"value code\">{{ selectedField.TSType }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Nullable</span>\n                  <span class=\"value\">{{ selectedField.AllowsNull ? 'Yes' : 'No' }}</span>\n                </div>\n                @if (selectedField.DefaultValue) {\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Default</span>\n                    <span class=\"value code\">{{ selectedField.DefaultValue }}</span>\n                  </div>\n                }\n              </div>\n            </div>\n            @if (IsInheritedField(selectedField)) {\n              <div class=\"detail-section isa-source-section\">\n                <h5>\n                  <i class=\"fa-solid fa-arrow-up\"></i>\n                  IS-A Inherited Field\n                </h5>\n                <div class=\"detail-grid\">\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Source Entity</span>\n                    <span class=\"value link\" (click)=\"NavigateToEntity(ParentChain[0])\" title=\"Navigate to source entity\">\n                      {{ GetISAFieldSource(selectedField) }}\n                      <i class=\"fa-solid fa-arrow-right\"></i>\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Routing</span>\n                    <span class=\"value\">ORM routes Set/Get to parent</span>\n                  </div>\n                </div>\n              </div>\n            }\n            @if (selectedField.RelatedEntityID) {\n              <div class=\"detail-section\">\n                <h5>Relationship</h5>\n                <div class=\"detail-grid\">\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Related Entity</span>\n                    <span class=\"value link\" (click)=\"navigateToRelatedEntity(selectedField)\">\n                      {{ getRelatedEntityName(selectedField) }}\n                      <i class=\"fa-solid fa-arrow-right\"></i>\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Display Type</span>\n                    <span class=\"value\">{{ selectedField.RelatedEntityDisplayType }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n            @if (selectedField.Encrypt) {\n              <div class=\"detail-section\">\n                <h5>Encryption</h5>\n                <div class=\"detail-grid\">\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Encrypted</span>\n                    <span class=\"value\">Yes</span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Decrypt in API</span>\n                    <span class=\"value\">{{ selectedField.AllowDecryptInAPI ? 'Yes' : 'No' }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n            <div class=\"detail-section\">\n              <h5>API Settings</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">Allow Update</span>\n                  <span class=\"value\">{{ selectedField.AllowUpdateAPI ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Include in Search</span>\n                  <span class=\"value\">{{ selectedField.IncludeInUserSearchAPI ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Full-Text Search</span>\n                  <span class=\"value\">{{ selectedField.FullTextSearchEnabled ? 'Yes' : 'No' }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"detail-section\">\n              <h5>Form Settings</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">Include in Form</span>\n                  <span class=\"value\">{{ selectedField.IncludeInGeneratedForm ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Section</span>\n                  <span class=\"value\">{{ selectedField.GeneratedFormSection }}</span>\n                </div>\n                @if (selectedField.Category) {\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Category</span>\n                    <span class=\"value\">{{ selectedField.Category }}</span>\n                  </div>\n                }\n                <div class=\"detail-item\">\n                  <span class=\"label\">Sequence</span>\n                  <span class=\"value\">{{ selectedField.Sequence }}</span>\n                </div>\n              </div>\n            </div>\n            @if (selectedField.EntityFieldValues.length > 0) {\n              <div class=\"detail-section\">\n                <h5>Allowed Values</h5>\n                <div class=\"value-list\">\n                  @for (val of selectedField.EntityFieldValues; track val) {\n                    <div class=\"value-item\">\n                      @if (val.Code !== val.Value) {\n                        <span class=\"value-code\">{{ val.Code }}</span>\n                      }\n                      <span class=\"value-display\">{{ val.Value }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n        <!-- Relationship Details -->\n        @if (selectedRelationship) {\n          <div class=\"panel-content\">\n            <div class=\"detail-section\">\n              <h4>{{ selectedRelationship.DisplayName || selectedRelationship.Entity }}</h4>\n            </div>\n            <div class=\"detail-section\">\n              <h5>Connection</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">From Entity</span>\n                  <span class=\"value\">{{ selectedRelationship.Entity }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Join Field</span>\n                  <span class=\"value code\">{{ selectedRelationship.RelatedEntityJoinField }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Type</span>\n                  <span class=\"value\">{{ selectedRelationship.Type }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"detail-section\">\n              <h5>Display Settings</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">Display in Form</span>\n                  <span class=\"value\">{{ selectedRelationship.DisplayInForm ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Location</span>\n                  <span class=\"value\">{{ selectedRelationship.DisplayLocation }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Bundle in API</span>\n                  <span class=\"value\">{{ selectedRelationship.BundleInAPI ? 'Yes' : 'No' }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      </aside>\n    </div>\n  </div>\n} @else {\n  @if (isExplorerLoading) {\n    <div class=\"explorer-loading\">\n      <mj-loading text=\"Loading entity...\"></mj-loading>\n    </div>\n  }\n  @if (!isExplorerLoading && explorerError) {\n    <div class=\"explorer-error\">\n      <i class=\"fa-solid fa-exclamation-triangle\"></i>\n      <p>{{ explorerError }}</p>\n    </div>\n  }\n  @if (!isExplorerLoading && !explorerError && !entity) {\n    <div class=\"explorer-empty\">\n      <i class=\"fa-solid fa-database\"></i>\n      <p>Entity metadata not available</p>\n    </div>\n  }\n}\n\n<!-- Loading / Error State -->\n", styles: ["/* ============================================================\n   ENTITY EXPLORER FORM - MAIN STYLES\n   A world-class exploration-focused entity intelligence hub\n   ============================================================ */\n\n/* CSS Variables */\n:host {\n    --nav-rail-width: 64px;\n    --header-height: 80px;\n    --detail-panel-width: 400px;\n\n    --bg-primary: #ffffff;\n    --bg-secondary: #f8fafc;\n    --bg-tertiary: #f1f5f9;\n\n    --text-primary: #1e293b;\n    --text-secondary: #64748b;\n    --text-muted: #94a3b8;\n\n    --border-color: #e2e8f0;\n    --border-light: #f1f5f9;\n\n    --accent-color: #3b82f6;\n    --accent-light: #eff6ff;\n    --accent-dark: #1d4ed8;\n\n    --success-color: #10b981;\n    --warning-color: #f59e0b;\n    --danger-color: #ef4444;\n\n    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n\n    --radius-sm: 4px;\n    --radius-md: 8px;\n    --radius-lg: 12px;\n\n    --transition-fast: 150ms ease;\n    --transition-normal: 250ms ease;\n\n    display: block;\n    height: 100%;\n    width: 100%;\n}\n\n.entity-explorer {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-secondary);\n    overflow: hidden;\n}\n\n/* ============================================================\n   HEADER BAR\n   ============================================================ */\n\n.explorer-header {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    padding: 16px 24px;\n    background: var(--bg-primary);\n    border-bottom: 1px solid var(--border-color);\n    min-height: var(--header-height);\n}\n\n.entity-identity {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.entity-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: var(--radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 20px;\n    flex-shrink: 0;\n}\n\n.entity-info {\n    min-width: 0;\n    flex: 1;\n}\n\n.entity-title-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.entity-name {\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.status-badge {\n    padding: 2px 8px;\n    border-radius: 9999px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.status-badge.status-active {\n    background: #dcfce7;\n    color: #166534;\n}\n\n.status-badge.status-deprecated {\n    background: #fef3c7;\n    color: #92400e;\n}\n\n.status-badge.status-disabled {\n    background: #fee2e2;\n    color: #991b1b;\n}\n\n.entity-subtitle {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 4px;\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.schema-table {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.separator {\n    color: var(--border-color);\n}\n\n.entity-description {\n    color: var(--text-secondary);\n}\n\n/* Header Stats */\n.header-stats {\n    display: flex;\n    gap: 4px;\n}\n\n.stat-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 8px 16px;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n}\n\n.stat-item:hover {\n    background: var(--bg-tertiary);\n}\n\n.stat-item i {\n    font-size: 16px;\n    color: var(--text-muted);\n    margin-bottom: 4px;\n}\n\n.stat-value {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.stat-label {\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* ============================================================\n   MAIN BODY (NAV RAIL + CANVAS)\n   ============================================================ */\n\n.explorer-body {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n/* Navigation Rail - Minimalist Icon-First Design */\n.nav-rail {\n    width: var(--nav-rail-width);\n    background: var(--bg-primary);\n    border-right: 1px solid var(--border-color);\n    display: flex;\n    flex-direction: column;\n    padding: 8px 0;\n    flex-shrink: 0;\n    gap: 2px;\n}\n\n.nav-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 12px 4px 8px 4px;\n    margin: 0 8px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    position: relative;\n    color: var(--text-muted);\n    min-height: 54px;\n}\n\n.nav-item i {\n    font-size: 18px;\n    margin-bottom: 4px;\n    transition: transform var(--transition-fast);\n}\n\n.nav-label {\n    font-size: 9px;\n    font-weight: 500;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    text-align: center;\n    line-height: 1;\n    opacity: 0.9;\n}\n\n.nav-badge {\n    position: absolute;\n    top: 4px;\n    right: 4px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--accent-color);\n    color: white;\n    font-size: 10px;\n    font-weight: 600;\n    border-radius: 9999px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.nav-item:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.nav-item:hover i {\n    transform: scale(1.1);\n}\n\n.nav-item.active {\n    background: var(--accent-light);\n    color: var(--accent-color);\n}\n\n.nav-item.active i {\n    transform: scale(1.05);\n}\n\n.nav-item.active::before {\n    content: '';\n    position: absolute;\n    left: -8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 28px;\n    background: var(--accent-color);\n    border-radius: 0 3px 3px 0;\n}\n\n/* ============================================================\n   MAIN CANVAS\n   ============================================================ */\n\n.main-canvas {\n    flex: 1;\n    overflow: auto;\n    transition: margin-right var(--transition-normal);\n}\n\n.main-canvas.panel-open {\n    margin-right: var(--detail-panel-width);\n}\n\n/* Sections */\n.section {\n    padding: 24px;\n}\n\n.section-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 20px;\n}\n\n.section-content {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n/* Search Box */\n.search-box {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 16px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    width: 300px;\n}\n\n.search-box i {\n    color: var(--text-muted);\n}\n\n.search-box input {\n    flex: 1;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    outline: none;\n    color: var(--text-primary);\n}\n\n.search-box input::placeholder {\n    color: var(--text-muted);\n}\n\n/* View Toggle */\n.view-toggle {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.toggle-btn {\n    padding: 8px 16px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    transition: all var(--transition-fast);\n}\n\n.toggle-btn:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.toggle-btn:hover {\n    background: var(--bg-tertiary);\n}\n\n.toggle-btn.active {\n    background: var(--accent-color);\n    color: white;\n}\n\n/* Depth Selector */\n.depth-selector {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-left: auto;\n}\n\n.depth-label {\n    font-size: 13px;\n    color: var(--text-secondary);\n    font-weight: 500;\n}\n\n.depth-buttons {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.depth-btn {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 500;\n    transition: all var(--transition-fast);\n}\n\n.depth-btn:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.depth-btn:hover {\n    background: var(--bg-tertiary);\n}\n\n.depth-btn.active {\n    background: var(--accent-color);\n    color: white;\n}\n\n/* Header Controls (view mode + expand/collapse) */\n.header-controls {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.view-mode-toggle {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.expand-collapse-controls {\n    display: flex;\n    gap: 4px;\n}\n\n.control-btn {\n    padding: 6px 10px;\n    border: 1px solid var(--border-color);\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    border-radius: var(--radius-sm);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    transition: all var(--transition-fast);\n}\n\n.control-btn:hover:not(:disabled) {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.control-btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n/* Fields List View - Modern Design */\n.fields-list-view {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-primary);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.list-header {\n    display: grid;\n    grid-template-columns: 50px 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 12px 20px;\n    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);\n    border-bottom: 2px solid var(--border-color);\n    position: sticky;\n    top: 0;\n    z-index: 10;\n}\n\n.list-header .list-col {\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--text-secondary);\n}\n\n.list-header .list-col.sortable {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: color var(--transition-fast);\n    user-select: none;\n}\n\n.list-header .list-col.sortable:hover {\n    color: var(--accent-color);\n}\n\n.list-header .list-col.sortable.sorted {\n    color: var(--accent-color);\n}\n\n.sort-icon {\n    font-size: 10px;\n    opacity: 0.4;\n    transition: opacity var(--transition-fast);\n}\n\n.list-col.sortable:hover .sort-icon {\n    opacity: 0.7;\n}\n\n.list-col.sortable.sorted .sort-icon {\n    opacity: 1;\n}\n\n.list-body {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.list-row {\n    display: grid;\n    grid-template-columns: 50px 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--border-light);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    align-items: center;\n}\n\n.list-row:hover {\n    background: var(--bg-secondary);\n}\n\n.list-row.selected {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 17px;\n}\n\n.list-row:last-child {\n    border-bottom: none;\n}\n\n/* Column-specific styling */\n.col-seq {\n    text-align: center;\n}\n\n.seq-num {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--bg-tertiary);\n    border-radius: 50%;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--text-secondary);\n}\n\n.list-row:hover .seq-num,\n.list-row.selected .seq-num {\n    background: var(--accent-color);\n    color: white;\n}\n\n.col-name {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    min-width: 0;\n}\n\n.field-type-icon {\n    color: var(--accent-color);\n    font-size: 16px;\n    width: 20px;\n    flex-shrink: 0;\n}\n\n.field-name-text {\n    font-weight: 500;\n    color: var(--text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.type-tag {\n    display: inline-block;\n    padding: 4px 10px;\n    background: var(--bg-tertiary);\n    border-radius: 20px;\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    font-family: 'SF Mono', 'Consolas', monospace;\n}\n\n.length-value {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-primary);\n}\n\n.length-value.muted {\n    color: var(--text-muted);\n}\n\n.required-indicator {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    padding: 4px 8px;\n    border-radius: 4px;\n}\n\n.required-indicator.required {\n    color: var(--danger-color);\n    background: rgba(239, 68, 68, 0.1);\n}\n\n.required-indicator.required i {\n    color: var(--danger-color);\n}\n\n.required-indicator.optional {\n    color: var(--text-muted);\n    background: transparent;\n}\n\n.flag-badges {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.flag-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.flag-badge.pk {\n    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n    color: #78350f;\n}\n\n.flag-badge.fk {\n    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);\n    color: white;\n}\n\n.flag-badge.encrypted {\n    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);\n    color: white;\n}\n\n.col-desc {\n    min-width: 0;\n}\n\n.desc-text {\n    font-size: 13px;\n    color: var(--text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n}\n\n.list-empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    color: var(--text-muted);\n    gap: 12px;\n}\n\n.list-empty i {\n    font-size: 32px;\n    opacity: 0.5;\n}\n\n.list-empty span {\n    font-size: 14px;\n}\n\n/* ============================================================\n   OVERVIEW SECTION\n   ============================================================ */\n\n.stats-cards {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 16px;\n}\n\n.stat-card {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 16px;\n    position: relative;\n    transition: all var(--transition-fast);\n}\n\n.stat-card.clickable {\n    cursor: pointer;\n}\n\n.stat-card.clickable:hover {\n    border-color: var(--accent-color);\n    box-shadow: var(--shadow-md);\n    transform: translateY(-2px);\n}\n\n.stat-card.clickable:hover .stat-card-action {\n    opacity: 1;\n    transform: translateX(0);\n}\n\n.stat-card-action {\n    position: absolute;\n    right: 16px;\n    top: 50%;\n    transform: translateY(-50%) translateX(-4px);\n    color: var(--accent-color);\n    opacity: 0;\n    transition: all var(--transition-fast);\n}\n\n.stat-card-action i {\n    font-size: 14px;\n}\n\n.stat-card-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--text-secondary);\n    font-size: 13px;\n    margin-bottom: 12px;\n}\n\n.stat-card-header i {\n    font-size: 14px;\n}\n\n.stat-card-body .stat-main {\n    font-size: 32px;\n    font-weight: 700;\n    color: var(--text-primary);\n    line-height: 1;\n    margin-bottom: 8px;\n}\n\n.stat-card-body .stat-details {\n    display: flex;\n    gap: 12px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n/* Info Panels */\n.info-panel {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 16px 0;\n}\n\n.panel-title i {\n    color: var(--accent-color);\n}\n\n/* Capability Tags */\n.capability-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.capability-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: #dcfce7;\n    color: #166534;\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 500;\n}\n\n.capability-tag i {\n    font-size: 10px;\n}\n\n.capability-tag.disabled {\n    background: #fee2e2;\n    color: #991b1b;\n}\n\n/* Info Grid */\n.info-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.info-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.info-label {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.info-value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.info-value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 13px;\n    color: var(--accent-dark);\n}\n\n/* ============================================================\n   FIELDS SECTION\n   ============================================================ */\n\n.fields-content {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.field-groups {\n    display: flex;\n    flex-direction: column;\n}\n\n.field-group {\n    border-bottom: 1px solid var(--border-light);\n}\n\n.field-group:last-child {\n    border-bottom: none;\n}\n\n.group-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 20px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    user-select: none;\n    background: linear-gradient(to right, var(--bg-secondary), transparent);\n    border-left: 3px solid var(--accent-color);\n}\n\n.group-header:hover {\n    background: linear-gradient(to right, var(--bg-tertiary), var(--bg-secondary));\n}\n\n.expand-icon {\n    font-size: 10px;\n    color: var(--text-muted);\n    width: 16px;\n    transition: transform var(--transition-fast);\n}\n\n.group-icon {\n    font-size: 16px;\n    color: var(--accent-color);\n    width: 20px;\n    text-align: center;\n}\n\n.group-label {\n    flex: 1;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n    letter-spacing: 0.01em;\n    text-transform: uppercase;\n}\n\n.group-count {\n    padding: 3px 10px;\n    background: var(--accent-light);\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--accent-color);\n}\n\n.group-content {\n    border-top: 1px solid var(--border-light);\n    background: var(--bg-secondary);\n}\n\n.field-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px 12px 48px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.field-item:last-child {\n    border-bottom: none;\n}\n\n.field-item:hover {\n    background: var(--accent-light);\n}\n\n.field-item.selected {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 45px;\n}\n\n.field-icon {\n    width: 28px;\n    height: 28px;\n    border-radius: var(--radius-sm);\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    color: var(--text-muted);\n    flex-shrink: 0;\n}\n\n.field-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.field-name {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.field-meta {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 2px;\n    font-size: 12px;\n}\n\n.field-type {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-muted);\n}\n\n.field-nullable {\n    color: var(--danger-color);\n}\n\n.field-related {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.field-related:hover {\n    text-decoration: underline;\n}\n\n.field-badges {\n    display: flex;\n    gap: 4px;\n}\n\n.badge {\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-size: 10px;\n    font-weight: 600;\n}\n\n.badge.pk {\n    background: #fef3c7;\n    color: #92400e;\n}\n\n.badge.fk {\n    background: #dbeafe;\n    color: #1e40af;\n}\n\n.badge.encrypted {\n    background: #fce7f3;\n    color: #9d174d;\n}\n\n/* ============================================================\n   RELATIONSHIPS SECTION\n   ============================================================ */\n\n.relationships-graph {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    min-height: 600px;\n    height: calc(100vh - 280px);\n    max-height: 800px;\n    display: flex;\n    align-items: stretch;\n    justify-content: stretch;\n    overflow: hidden;\n}\n\n.relationships-graph mj-entity-erd,\n.relationships-graph mj-erd-composite {\n    width: 100%;\n    height: 100%;\n    flex: 1;\n}\n\n/* ERD Splitter for details panel */\n.relationships-graph .erd-splitter {\n    width: 100%;\n    height: 100%;\n}\n\n.relationships-graph kendo-splitter-pane {\n    display: flex;\n    flex-direction: column;\n}\n\n.relationships-graph mj-entity-details {\n    height: 100%;\n    overflow: auto;\n}\n\n.graph-placeholder {\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.graph-placeholder i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.graph-placeholder p {\n    margin: 0;\n}\n\n.graph-placeholder .hint {\n    font-size: 12px;\n    margin-top: 8px;\n}\n\n.relationships-list {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n.relationship-group {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.relationship-group-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 14px 20px;\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    background: var(--bg-tertiary);\n    border-bottom: 1px solid var(--border-color);\n}\n\n.relationship-group-title i {\n    color: var(--accent-color);\n}\n\n.relationship-items {\n    display: flex;\n    flex-direction: column;\n}\n\n.relationship-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item:last-child {\n    border-bottom: none;\n}\n\n.relationship-item:hover {\n    background: var(--accent-light);\n}\n\n.relationship-item.hidden {\n    display: none;\n}\n\n.rel-icon {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    background: var(--accent-light);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--accent-color);\n    font-size: 12px;\n}\n\n.rel-info {\n    flex: 1;\n}\n\n.rel-entity {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.rel-entity:hover {\n    text-decoration: underline;\n}\n\n.rel-field {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.rel-meta {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.rel-type,\n.rel-display-type {\n    padding: 2px 8px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-sm);\n    font-size: 11px;\n    color: var(--text-muted);\n}\n\n.rel-bundle {\n    color: var(--success-color);\n}\n\n/* Grouped relationship styles */\n.relationship-group-title .group-count {\n    margin-left: auto;\n    background: var(--accent-light);\n    color: var(--accent-color);\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.relationship-items.grouped {\n    padding: 8px 0;\n}\n\n.relationship-item-grouped {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item-grouped:last-child {\n    border-bottom: none;\n}\n\n.rel-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 10px;\n}\n\n.rel-icon.outgoing {\n    background: var(--info-light, #e3f2fd);\n    color: var(--info-color, #1976d2);\n}\n\n.rel-icon.incoming {\n    background: var(--success-light, #e8f5e9);\n    color: var(--success-color, #388e3c);\n}\n\n.rel-entity-name {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.rel-fields-chips {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    padding-left: 44px; /* Align with entity name (icon width + gap) */\n}\n\n.field-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 5px 12px;\n    border-radius: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all var(--transition-fast);\n}\n\n.field-chip i {\n    font-size: 10px;\n}\n\n.field-chip.outgoing {\n    background: var(--info-light, #e3f2fd);\n    color: var(--info-color, #1976d2);\n    border: 1px solid var(--info-border, #90caf9);\n}\n\n.field-chip.outgoing:hover {\n    background: var(--info-color, #1976d2);\n    color: white;\n}\n\n.field-chip.incoming {\n    background: var(--success-light, #e8f5e9);\n    color: var(--success-color, #388e3c);\n    border: 1px solid var(--success-border, #a5d6a7);\n}\n\n.field-chip.incoming:hover {\n    background: var(--success-color, #388e3c);\n    color: white;\n}\n\n.field-chip .bundle-icon {\n    font-size: 9px;\n    margin-left: 2px;\n    opacity: 0.8;\n}\n\n/* ============================================================\n   PERMISSIONS SECTION\n   ============================================================ */\n\n.permissions-matrix {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.matrix-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.matrix-table th,\n.matrix-table td {\n    padding: 12px 16px;\n    text-align: left;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.matrix-table th {\n    background: var(--bg-tertiary);\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.matrix-table th.center,\n.matrix-table td.center {\n    text-align: center;\n}\n\n.matrix-table tbody tr:hover {\n    background: var(--bg-secondary);\n}\n\n.role-name {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.permission-icon {\n    font-size: 14px;\n}\n\n.permission-icon.granted {\n    color: var(--success-color);\n}\n\n.permission-icon.denied {\n    color: var(--text-muted);\n}\n\n.rls-info {\n    display: flex;\n    gap: 4px;\n}\n\n.rls-badge {\n    width: 20px;\n    height: 20px;\n    border-radius: var(--radius-sm);\n    background: var(--warning-color);\n    color: white;\n    font-size: 10px;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.no-rls {\n    color: var(--text-muted);\n    font-size: 12px;\n}\n\n/* API Capabilities */\n.api-capabilities {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.capability-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    gap: 12px;\n}\n\n.capability-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.capability-item i {\n    font-size: 12px;\n}\n\n.capability-item.enabled {\n    background: #dcfce7;\n    color: #166534;\n}\n\n.capability-item.enabled i {\n    color: var(--success-color);\n}\n\n/* ============================================================\n   LINEAGE SECTION\n   ============================================================ */\n\n.lineage-diagram {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 24px;\n    padding: 40px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n}\n\n.lineage-stage {\n    text-align: center;\n}\n\n.lineage-stage h4 {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.lineage-items {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.lineage-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.lineage-item i {\n    color: var(--accent-color);\n}\n\n.lineage-arrow {\n    font-size: 24px;\n    color: var(--text-muted);\n}\n\n.entity-node .entity-box {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 24px 32px;\n    background: var(--accent-color);\n    color: white;\n    border-radius: var(--radius-lg);\n    font-weight: 600;\n}\n\n.entity-node .entity-box i {\n    font-size: 24px;\n}\n\n.tracking-config {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.config-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.config-item.enabled {\n    background: #dcfce7;\n    color: #166534;\n}\n\n.config-item .config-label {\n    color: var(--text-muted);\n}\n\n.config-item .config-value {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n/* ============================================================\n   HISTORY SECTION\n   ============================================================ */\n\n.history-config {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-status {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n}\n\n.config-status i {\n    font-size: 24px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.config-status.enabled i {\n    color: var(--success-color);\n}\n\n.config-text strong {\n    display: block;\n    font-size: 16px;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.config-text span {\n    font-size: 14px;\n    color: var(--text-secondary);\n}\n\n.history-info {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 16px;\n}\n\n.info-card {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.info-card h4 {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    color: var(--text-primary);\n    margin: 0 0 12px 0;\n}\n\n.info-card h4 i {\n    color: var(--accent-color);\n}\n\n.info-card p {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.6;\n    margin: 0;\n}\n\n.info-card code {\n    background: var(--bg-tertiary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.audit-fields-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.audit-fields-list li {\n    padding: 8px 0;\n    font-size: 14px;\n    color: var(--text-secondary);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.audit-fields-list li:last-child {\n    border-bottom: none;\n}\n\n/* ============================================================\n   SETTINGS SECTION\n   ============================================================ */\n\n.settings-panel {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.settings-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.setting-item {\n    padding: 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n}\n\n.setting-name {\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.setting-value {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n    word-break: break-all;\n}\n\n.setting-value-json {\n    margin-top: 8px;\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    border: 1px solid var(--border-color);\n    background: #fafafa;\n}\n\n.setting-value-json mj-code-editor {\n    display: block;\n    max-height: 300px;\n}\n\n.setting-value-json ::ng-deep .cm-editor {\n    font-size: 12px;\n    background: #fafafa;\n}\n\n.setting-value-json ::ng-deep .cm-gutters {\n    background: #f0f0f0;\n    border-right: 1px solid var(--border-color);\n}\n\n.setting-comment {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n}\n\n.fts-config,\n.settings-section .config-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.config-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.config-row .config-label {\n    width: 100px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.config-row .config-value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.config-row .config-value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.config-row .config-value.enabled {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--success-color);\n}\n\n/* ============================================================\n   DETAIL PANEL (Slide-in from right)\n   ============================================================ */\n\n.detail-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    width: var(--detail-panel-width);\n    height: 100%;\n    background: var(--bg-primary);\n    border-left: 1px solid var(--border-color);\n    box-shadow: var(--shadow-lg);\n    transform: translateX(100%);\n    transition: transform var(--transition-normal);\n    z-index: 100;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.detail-panel.open {\n    transform: translateX(0);\n}\n\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--border-color);\n    flex-shrink: 0;\n}\n\n.panel-header h3 {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.close-btn {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--text-muted);\n    transition: all var(--transition-fast);\n}\n\n.close-btn:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.panel-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n}\n\n.detail-section {\n    margin-bottom: 24px;\n}\n\n.detail-section:last-child {\n    margin-bottom: 0;\n}\n\n.detail-section h4 {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 8px 0;\n}\n\n.detail-section h5 {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.field-description {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.5;\n    margin: 0;\n}\n\n.detail-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.detail-item .label {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.detail-item .value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.detail-item .value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.detail-item .value.link {\n    color: var(--accent-color);\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.detail-item .value.link:hover {\n    text-decoration: underline;\n}\n\n.value-list {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.value-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n}\n\n.value-code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 11px;\n    color: var(--accent-dark);\n    background: var(--bg-primary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n}\n\n.value-display {\n    color: var(--text-primary);\n}\n\n/* ============================================================\n   EMPTY STATES\n   ============================================================ */\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.empty-state i {\n    font-size: 32px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n.empty-state p {\n    margin: 0;\n    font-size: 14px;\n}\n\n/* ============================================================\n   LOADING / ERROR STATES\n   ============================================================ */\n\n.explorer-loading,\n.explorer-error,\n.explorer-empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    padding: 40px;\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.explorer-error i,\n.explorer-empty i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.explorer-error {\n    color: var(--danger-color);\n}\n\n.explorer-error i {\n    opacity: 1;\n}\n\n/* ============================================================\n   IS-A TYPE HIERARCHY & VIRTUAL ENTITY STYLES\n   ============================================================ */\n\n/* Badge variants for header */\n.isa-badge {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    cursor: default;\n    white-space: nowrap;\n}\n\n.isa-badge.virtual {\n    background: rgba(139, 92, 246, 0.12);\n    color: #7c3aed;\n    border: 1px solid rgba(139, 92, 246, 0.25);\n}\n\n.isa-badge.child-type {\n    background: rgba(59, 130, 246, 0.12);\n    color: #2563eb;\n    border: 1px solid rgba(59, 130, 246, 0.25);\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.isa-badge.child-type:hover {\n    background: rgba(59, 130, 246, 0.22);\n}\n\n.isa-badge.parent-type {\n    background: rgba(16, 185, 129, 0.12);\n    color: #059669;\n    border: 1px solid rgba(16, 185, 129, 0.25);\n}\n\n.isa-badge.overlapping {\n    background: rgba(245, 158, 11, 0.12);\n    color: #d97706;\n    border: 1px solid rgba(245, 158, 11, 0.25);\n}\n\n/* Breadcrumb under title */\n.isa-breadcrumb {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6366f1;\n    font-weight: 500;\n    margin-top: 2px;\n    padding: 2px 0;\n}\n\n.isa-breadcrumb i {\n    font-size: 11px;\n    opacity: 0.7;\n}\n\n/* IS-A Panel (overview section) */\n.isa-panel {\n    border-left: 3px solid #6366f1;\n}\n\n.isa-info-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--text-primary, #334155);\n}\n\n.isa-info-row.virtual-info {\n    background: rgba(139, 92, 246, 0.06);\n}\n\n.isa-info-row.virtual-info i {\n    color: #7c3aed;\n    font-size: 14px;\n}\n\n.isa-info-row .code {\n    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;\n    font-size: 12px;\n    background: rgba(0, 0, 0, 0.06);\n    padding: 1px 6px;\n    border-radius: 3px;\n    color: #7c3aed;\n}\n\n/* Inheritance chain */\n.isa-chain {\n    padding: 8px 0;\n}\n\n.isa-chain-label {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted, #94a3b8);\n    margin-bottom: 8px;\n}\n\n.isa-chain-nodes {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-wrap: wrap;\n    padding: 6px 0;\n}\n\n.isa-node {\n    display: inline-flex;\n    align-items: center;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n}\n\n.isa-node.current {\n    background: #3b82f6;\n    color: white;\n}\n\n.isa-node.parent {\n    background: rgba(59, 130, 246, 0.1);\n    color: #2563eb;\n    border: 1px solid rgba(59, 130, 246, 0.2);\n}\n\n.isa-arrow {\n    color: var(--text-muted, #94a3b8);\n    font-size: 11px;\n}\n\n.isa-inherited-fields {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--text-muted, #94a3b8);\n    margin-top: 8px;\n    padding-top: 8px;\n    border-top: 1px solid var(--border-color, #e2e8f0);\n}\n\n.isa-inherited-fields i {\n    font-size: 12px;\n    color: #6366f1;\n}\n\n/* Child types list */\n.isa-children {\n    padding: 8px 0;\n}\n\n.isa-child-list {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    padding: 4px 0;\n}\n\n.isa-child-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    background: rgba(16, 185, 129, 0.1);\n    color: #059669;\n    border: 1px solid rgba(16, 185, 129, 0.2);\n}\n\n/* Clickable elements */\n.clickable {\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.clickable:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.isa-node.parent.clickable:hover {\n    background: rgba(59, 130, 246, 0.2);\n    border-color: rgba(59, 130, 246, 0.35);\n}\n\n.isa-child-chip.clickable:hover {\n    background: rgba(16, 185, 129, 0.2);\n    border-color: rgba(16, 185, 129, 0.35);\n}\n\n/* Field inherited badge (card and list views) */\n.badge.inherited,\n.flag-badge.inherited {\n    background: rgba(99, 102, 241, 0.1);\n    color: #6366f1;\n    border: 1px solid rgba(99, 102, 241, 0.2);\n    font-size: 10px;\n    font-weight: 600;\n    gap: 3px;\n}\n\n.flag-badge.inherited {\n    display: inline-flex;\n    align-items: center;\n    gap: 3px;\n    padding: 1px 6px;\n    border-radius: 4px;\n    font-size: 10px;\n}\n\n.flag-badge.inherited i {\n    font-size: 9px;\n}\n\n/* IS-A source section in field detail panel */\n.isa-source-section {\n    background: rgba(99, 102, 241, 0.04);\n    border-radius: 6px;\n    padding: 12px;\n    margin: -4px -12px 8px;\n}\n\n.isa-source-section h5 {\n    color: #6366f1;\n}\n\n.isa-source-section h5 i {\n    margin-right: 4px;\n}\n\n/* IS-A settings panel */\n.isa-settings-panel {\n    border-left: 3px solid #6366f1;\n}\n\n.isa-settings-panel .link {\n    color: #3b82f6;\n    cursor: pointer;\n    transition: color 0.15s ease;\n}\n\n.isa-settings-panel .link:hover {\n    color: #2563eb;\n    text-decoration: underline;\n}\n\n.isa-settings-panel .muted {\n    color: var(--text-muted, #94a3b8);\n}\n\n/* IS-A Field Inspector */\n.isa-field-inspector {\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px solid var(--border-color, #e2e8f0);\n}\n\n.isa-field-inspector > .isa-chain-label {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.isa-inspector-groups {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    margin-top: 8px;\n}\n\n.isa-inspector-group {\n    border-radius: 6px;\n    padding: 8px 12px;\n    border: 1px solid var(--border-color, #e2e8f0);\n}\n\n.isa-inspector-group.own {\n    background: rgba(59, 130, 246, 0.04);\n    border-color: rgba(59, 130, 246, 0.15);\n}\n\n.isa-inspector-group.inherited {\n    background: rgba(99, 102, 241, 0.04);\n    border-color: rgba(99, 102, 241, 0.15);\n}\n\n.isa-inspector-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 6px;\n}\n\n.isa-inspector-entity {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-primary, #334155);\n}\n\n.isa-inspector-count {\n    font-size: 11px;\n    color: var(--text-muted, #94a3b8);\n    font-weight: 500;\n}\n\n.isa-inspector-fields {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n}\n\n.isa-inspector-field {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    padding: 2px 8px;\n    border-radius: 4px;\n    background: rgba(0, 0, 0, 0.04);\n    color: var(--text-primary, #334155);\n}\n\n.isa-inspector-type {\n    font-size: 10px;\n    color: var(--text-muted, #94a3b8);\n    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;\n}\n\n/* Sibling chips */\n.isa-siblings {\n    padding: 8px 0;\n}\n\n.isa-sibling-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    background: rgba(245, 158, 11, 0.1);\n    color: #d97706;\n    border: 1px solid rgba(245, 158, 11, 0.2);\n}\n\n.isa-sibling-chip.clickable:hover {\n    background: rgba(245, 158, 11, 0.2);\n    border-color: rgba(245, 158, 11, 0.35);\n}\n\n/* Child count badge */\n.isa-child-count {\n    font-size: 11px;\n    background: rgba(0, 0, 0, 0.08);\n    padding: 1px 6px;\n    border-radius: 8px;\n    margin-left: 2px;\n    font-weight: 600;\n}\n\n.isa-child-count i {\n    font-size: 10px;\n}\n", ".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(EntityFormComponentExtended, { className: "EntityFormComponentExtended", filePath: "src/lib/custom/entities/entity-form.component.ts", lineNumber: 130 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityFormComponentExtended, { className: "EntityFormComponentExtended", filePath: "src/lib/custom/Entities/entity-form.component.ts", lineNumber: 130 }); })();
 //# sourceMappingURL=entity-form.component.js.map

package/dist/lib/custom/EntityActions/entityaction.form.component.js CHANGED Viewed

@@ -111,5 +111,5 @@ export { EntityActionExtendedFormComponent };
         type: Component,
         args: [{ standalone: false, selector: 'mj-custom-entity-action-extended-form', template: "<div class=\"record-form-container\">\n  @if (record) {\n    <form class=\"record-form\"  #form=\"ngForm\" >\n      <mj-form-toolbar [Form]=\"this\"></mj-form-toolbar>\n      <div #topArea class=\"record-form-group\">\n      </div>\n      <mj-tabstrip (TabSelected)=\"onTabSelect($event)\"  (ResizeContainer)=\"InvokeManualResize()\">\n        <mj-tab Name=\"Details\">\n          Details\n        </mj-tab>\n        <mj-tab-body>\n          <mj-form-section\n            Entity=\"MJ: Entity Actions\"\n            Section=\"details\"\n            [record]=\"record\"\n            [EditMode]=\"EditMode\">\n          </mj-form-section>\n        </mj-tab-body>\n        <mj-tab Name=\"MJ: Entity Action Params\"\n          [Visible]=\"record.IsSaved\"\n          [Props]=\"{EntityRelationshipID: 247}\">\n          Params\n        </mj-tab>\n        <mj-tab-body>\n          <mj-join-grid\n            [ShowSaveButton]=\"false\"\n            [ShowCancelButton]=\"false\"\n            [EditMode]=\"GridEditMode()\"\n            RowsEntityName=\"MJ: Action Params\"\n                            [RowsExtraFilter]=\"'ActionID=' + record.ActionID\"\n                            RowsEntityDisplayField=\"Name\"\n                            RowsEntityDataSource=\"FullEntity\"\n                            RowsOrderBy=\"ID\"\n                            RowsEntityDisplayName=\"Action Param\"\n                            ColumnsMode=\"Fields\"\n                            JoinEntityName=\"MJ: Entity Action Params\"\n                            JoinEntityRowForeignKey=\"ActionParamID\"\n                            [JoinEntityExtraFilter]=\"'EntityActionID=' + record.ID\"\n                            [JoinEntityDisplayColumns]=\"['ValueType', 'Value','Comments']\"\n            [NewRecordDefaultValues]=\"{EntityActionID: record.ID}\"\n            >\n          </mj-join-grid>\n        </mj-tab-body>\n        <mj-tab Name=\"MJ: Entity Action Invocations\"\n          [Visible]=\"record.IsSaved\"\n          [Props]=\"{EntityRelationshipID: 247}\">\n          Invocations\n        </mj-tab>\n        <mj-tab-body>\n          <mj-join-grid\n            [ShowSaveButton]=\"false\"\n            [ShowCancelButton]=\"false\"\n            [EditMode]=\"GridEditMode()\"\n            RowsEntityName=\"MJ: Entity Action Invocation Types\"\n            RowsEntityDisplayField=\"Name\"\n            RowsEntityDataSource=\"FullEntity\"\n            RowsOrderBy=\"Name\"\n            RowsEntityDisplayName=\"Type\"\n            ColumnsMode=\"Fields\"\n            JoinEntityName=\"MJ: Entity Action Invocations\"\n            JoinEntityRowForeignKey=\"InvocationTypeID\"\n                            [JoinEntityExtraFilter]=\"'EntityActionID=' + record.ID\"\n                            [JoinEntityDisplayColumns]=\"['Status']\"\n            CheckBoxValueMode=\"RecordExists\"\n            [NewRecordDefaultValues]=\"{EntityActionID: record.ID}\"\n            style=\"height: 500px; width: 800px;\"\n            >\n          </mj-join-grid>\n        </mj-tab-body>\n        <mj-tab Name=\"MJ: Entity Action Filters\"\n          [Visible]=\"record.IsSaved\"\n          [Props]=\"{EntityRelationshipID: 248}\">\n          Filters\n        </mj-tab>\n        <mj-tab-body>\n          <mj-explorer-entity-data-grid\n            [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: Entity Action Filters')\"\n            [NewRecordValues]=\"NewRecordValues('MJ: Entity Action Filters')\"\n            [AllowLoad]=\"IsCurrentTab('MJ: Entity Action Filters')\"\n            [ShowToolbar]=\"false\">\n          </mj-explorer-entity-data-grid>\n        </mj-tab-body>\n      </mj-tabstrip>\n    </form>\n  }\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(EntityActionExtendedFormComponent, { className: "EntityActionExtendedFormComponent", filePath: "src/lib/custom/entityactions/entityaction.form.component.ts", lineNumber: 16 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityActionExtendedFormComponent, { className: "EntityActionExtendedFormComponent", filePath: "src/lib/custom/EntityActions/entityaction.form.component.ts", lineNumber: 16 }); })();
 //# sourceMappingURL=entityaction.form.component.js.map

package/dist/lib/custom/Lists/list-form.component.js CHANGED Viewed

@@ -1693,5 +1693,5 @@ export { ListFormComponentExtended };
         type: Component,
         args: [{ standalone: false, selector: 'mj-list-form-extended', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- World-Class List Form -->\n<div class=\"list-form-explorer\">\n  <!-- Header -->\n  <header class=\"list-header\">\n    <div class=\"header-content\">\n      <div class=\"header-icon\" [style.background-color]=\"'#2196F3'\">\n        <i [class]=\"entityIcon\"></i>\n      </div>\n      <div class=\"header-info\">\n        <div class=\"name-row\">\n          @if (!isEditingName) {\n            <h1 class=\"list-name\">{{record.Name || 'Untitled List'}}</h1>\n            @if (isCurrentUserOwner()) {\n              <button\n                class=\"edit-btn\"\n                (click)=\"startEditingName()\"\n                title=\"Edit name\"\n                >\n                <i class=\"fa-solid fa-pen\"></i>\n              </button>\n            }\n          }\n          @if (isEditingName) {\n            <input\n              type=\"text\"\n              class=\"inline-edit-input name-input\"\n              [(ngModel)]=\"editingName\"\n              (keydown.enter)=\"saveNameEdit()\"\n              (keydown.escape)=\"cancelNameEdit()\"\n              #nameInput />\n            <button class=\"save-btn\" (click)=\"saveNameEdit()\">\n              <i class=\"fa-solid fa-check\"></i>\n            </button>\n            <button class=\"cancel-btn\" (click)=\"cancelNameEdit()\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n        <div class=\"entity-badge\">\n          <i [class]=\"entityIcon\"></i>\n          <span>{{entityDisplayName}}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"header-stats\">\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{formattedItemCount}}</span>\n        <span class=\"stat-label\">Items</span>\n      </div>\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{stats.shareCount}}</span>\n        <span class=\"stat-label\">Shares</span>\n      </div>\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{formattedLastUpdated}}</span>\n        <span class=\"stat-label\">Updated</span>\n      </div>\n    </div>\n  </header>\n\n  <!-- Navigation Rail -->\n  <nav class=\"nav-rail\">\n    @for (nav of navItems; track nav) {\n      <button\n        class=\"nav-item\"\n        [class.active]=\"activeSection === nav.id\"\n        [class.disabled]=\"nav.disabled\"\n        (click)=\"setActiveSection(nav.id)\"\n        [title]=\"nav.label\">\n        <i [class]=\"nav.icon\"></i>\n        <span class=\"nav-label\">{{nav.label}}</span>\n        @if (nav.badge && nav.badge > 0) {\n          <span class=\"nav-badge\">{{nav.badge}}</span>\n        }\n      </button>\n    }\n  </nav>\n\n  <!-- Main Content -->\n  <main class=\"main-content\">\n    <!-- Overview Section -->\n    @if (activeSection === 'overview') {\n      <section class=\"section overview-section\">\n        <div class=\"overview-grid\">\n          <!-- Description Card -->\n          <div class=\"overview-card description-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-align-left\"></i> Description</h3>\n              @if (isCurrentUserOwner() && !isEditingDescription) {\n                <button\n                  class=\"edit-btn\"\n                  (click)=\"startEditingDescription()\"\n                  >\n                  <i class=\"fa-solid fa-pen\"></i>\n                </button>\n              }\n            </div>\n            <div class=\"card-body\">\n              @if (!isEditingDescription) {\n                @if (record.Description) {\n                  <p class=\"description-text\">{{record.Description}}</p>\n                }\n                @if (!record.Description) {\n                  <p class=\"description-empty\">No description provided</p>\n                }\n              }\n              @if (isEditingDescription) {\n                <textarea\n                  class=\"inline-edit-input description-input\"\n                  [(ngModel)]=\"editingDescription\"\n                  placeholder=\"Add a description...\"\n                  rows=\"3\"\n                (keydown.escape)=\"cancelDescriptionEdit()\"></textarea>\n                <div class=\"edit-actions\">\n                  <button class=\"btn-primary\" (click)=\"saveDescriptionEdit()\">Save</button>\n                  <button class=\"btn-secondary\" (click)=\"cancelDescriptionEdit()\">Cancel</button>\n                </div>\n              }\n            </div>\n          </div>\n          <!-- Details Card -->\n          <div class=\"overview-card details-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-info-circle\"></i> Details</h3>\n            </div>\n            <div class=\"card-body\">\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Entity</span>\n                <span class=\"detail-value\">\n                  <i [class]=\"entityIcon\" class=\"detail-icon\"></i>\n                  {{entityDisplayName}}\n                </span>\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Category</span>\n                @if (!isCurrentUserOwner()) {\n                  <span class=\"detail-value\">\n                    <i class=\"fa-solid fa-folder detail-icon\"></i>\n                    {{categoryName}}\n                  </span>\n                }\n                @if (isCurrentUserOwner()) {\n                  <select\n                    class=\"category-select\"\n                    [ngModel]=\"record.CategoryID\"\n                    (ngModelChange)=\"onCategoryChange($event)\">\n                    <option [ngValue]=\"null\">Uncategorized</option>\n                    @for (cat of categories; track cat) {\n                      <option [ngValue]=\"cat.ID\">{{cat.Name}}</option>\n                    }\n                  </select>\n                }\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Owner</span>\n                <span class=\"detail-value\">\n                  <i class=\"fa-solid fa-user detail-icon\"></i>\n                  {{getOwnerName()}}\n                  @if (isCurrentUserOwner()) {\n                    <span class=\"owner-badge\">You</span>\n                  }\n                </span>\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Created</span>\n                <span class=\"detail-value\">\n                  <i class=\"fa-solid fa-calendar detail-icon\"></i>\n                  {{record.__mj_CreatedAt | date:'mediumDate'}}\n                </span>\n              </div>\n            </div>\n          </div>\n          <!-- Quick Actions Card -->\n          <div class=\"overview-card actions-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-bolt\"></i> Quick Actions</h3>\n            </div>\n            <div class=\"card-body\">\n              <button class=\"action-btn\" (click)=\"setActiveSection('items')\">\n                <i class=\"fa-solid fa-list\"></i>\n                <span>View Items</span>\n                <span class=\"action-count\">{{stats.itemCount}}</span>\n              </button>\n              @if (isCurrentUserOwner()) {\n                <button class=\"action-btn\" (click)=\"openShareDialog()\">\n                  <i class=\"fa-solid fa-share-nodes\"></i>\n                  <span>Share List</span>\n                  @if (stats.shareCount > 0) {\n                    <span class=\"action-count\">{{stats.shareCount}}</span>\n                  }\n                </button>\n              }\n              @if (!isCurrentUserOwner()) {\n                <button class=\"action-btn\" (click)=\"setActiveSection('sharing')\">\n                  <i class=\"fa-solid fa-share-nodes\"></i>\n                  <span>View Sharing</span>\n                </button>\n              }\n              <button class=\"action-btn\" [disabled]=\"true\" title=\"Coming soon\">\n                <i class=\"fa-solid fa-file-export\"></i>\n                <span>Export Data</span>\n                <span class=\"coming-soon\">Soon</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </section>\n    }\n\n    <!-- Items Section -->\n    @if (activeSection === 'items') {\n      <section class=\"section items-section\">\n        <div class=\"section-header\">\n          <h2>List Items</h2>\n          <div class=\"section-actions\">\n            <div class=\"search-box\">\n              <i class=\"fa-solid fa-search\"></i>\n              <input\n                type=\"text\"\n                placeholder=\"Search items...\"\n                [(ngModel)]=\"itemSearchTerm\" />\n            </div>\n            @if (isCurrentUserOwner()) {\n              <div class=\"add-buttons\">\n                <button class=\"btn-secondary\" (click)=\"openAddRecordsDialog()\" title=\"Add individual records\">\n                  <i class=\"fa-solid fa-plus\"></i> Add Records\n                </button>\n                <button class=\"btn-secondary\" (click)=\"openAddFromViewDialog()\" title=\"Add records from a saved view\">\n                  <i class=\"fa-solid fa-table-list\"></i> Add From View\n                </button>\n              </div>\n            }\n            <button class=\"btn-icon\" (click)=\"refreshItems()\" title=\"Refresh\">\n              <i class=\"fa-solid fa-refresh\"></i>\n            </button>\n          </div>\n        </div>\n        <!-- Loading State -->\n        @if (isLoadingItems) {\n          <div class=\"loading-state\">\n            <mj-loading text=\"Loading items...\" size=\"medium\"></mj-loading>\n          </div>\n        }\n        <!-- Empty State -->\n        @if (!isLoadingItems && listItems.length === 0) {\n          <div class=\"empty-state\">\n            <div class=\"empty-icon\">\n              <i class=\"fa-solid fa-inbox\"></i>\n            </div>\n            <h3>No Items Yet</h3>\n            <p>This list doesn't have any items. Add records from the {{entityDisplayName}} entity.</p>\n          </div>\n        }\n        <!-- Items Table -->\n        @if (!isLoadingItems && listItems.length > 0) {\n          <div class=\"items-table-container\">\n            @if (selectedItems.size > 0) {\n              <div class=\"items-toolbar\">\n                <span class=\"selection-count\">{{selectedItems.size}} selected</span>\n                <button class=\"btn-danger\" (click)=\"removeSelectedItems()\">\n                  <i class=\"fa-solid fa-trash\"></i>\n                  Remove from List\n                </button>\n              </div>\n            }\n            <table class=\"items-table\">\n              <thead>\n                <tr>\n                  <th class=\"col-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isSelectAllChecked\"\n                      (change)=\"toggleSelectAll()\" />\n                  </th>\n                  <th class=\"col-name\">Name</th>\n                  <th class=\"col-id\">Record ID</th>\n                  <th class=\"col-added\">Added</th>\n                  <th class=\"col-actions\"></th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (item of filteredItems; track item) {\n                  <tr\n                    [class.selected]=\"selectedItems.has(item.detail.ID)\">\n                    <td class=\"col-checkbox\">\n                      <input\n                        type=\"checkbox\"\n                        [checked]=\"selectedItems.has(item.detail.ID)\"\n                        (change)=\"toggleItemSelection(item)\" />\n                    </td>\n                    <td class=\"col-name\">\n                      <div class=\"item-name\" [class.loading]=\"item.isLoading\">\n                        <i [class]=\"entityIcon\" class=\"item-icon\"></i>\n                        <span>{{item.recordName}}</span>\n                        @if (item.isLoading) {\n                          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                        }\n                      </div>\n                    </td>\n                    <td class=\"col-id\">\n                      <code class=\"record-id\">{{item.detail.RecordID}}</code>\n                    </td>\n                    <td class=\"col-added\">\n                      {{item.detail.__mj_CreatedAt | date:'shortDate'}}\n                    </td>\n                    <td class=\"col-actions\">\n                      <button\n                        class=\"btn-icon\"\n                        (click)=\"openRecord(item)\"\n                        title=\"Open record\">\n                        <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                      </button>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n            <div class=\"items-footer\">\n              <span class=\"items-count\">\n                Showing {{filteredItems.length}} of {{listItems.length}} items\n              </span>\n            </div>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- Sharing Section -->\n    @if (activeSection === 'sharing') {\n      <section class=\"section sharing-section\">\n        <div class=\"section-header\">\n          <h2>Sharing</h2>\n          @if (isCurrentUserOwner()) {\n            <div class=\"section-actions\">\n              <button class=\"btn-primary\" (click)=\"openShareDialog()\">\n                <i class=\"fa-solid fa-user-plus\"></i> Manage Sharing\n              </button>\n            </div>\n          }\n        </div>\n        <!-- Sharing summary -->\n        @if (stats.shareCount > 0 || stats.invitationCount > 0) {\n          <div class=\"sharing-summary\">\n            <div class=\"summary-card\">\n              <div class=\"summary-icon\">\n                <i class=\"fa-solid fa-users\"></i>\n              </div>\n              <div class=\"summary-content\">\n                <span class=\"summary-value\">{{stats.shareCount}}</span>\n                <span class=\"summary-label\">Active Share{{stats.shareCount !== 1 ? 's' : ''}}</span>\n              </div>\n            </div>\n            @if (stats.invitationCount > 0) {\n              <div class=\"summary-card\">\n                <div class=\"summary-icon pending\">\n                  <i class=\"fa-solid fa-envelope\"></i>\n                </div>\n                <div class=\"summary-content\">\n                  <span class=\"summary-value\">{{stats.invitationCount}}</span>\n                  <span class=\"summary-label\">Pending Invitation{{stats.invitationCount !== 1 ? 's' : ''}}</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n        <!-- Empty state for no shares -->\n        @if (stats.shareCount === 0 && stats.invitationCount === 0) {\n          <div class=\"empty-state\">\n            <div class=\"empty-icon\">\n              <i class=\"fa-solid fa-share-nodes\"></i>\n            </div>\n            <h3>Not Shared Yet</h3>\n            @if (isCurrentUserOwner()) {\n              <p>This list is private. Click \"Manage Sharing\" to share it with other users or roles.</p>\n            }\n            @if (!isCurrentUserOwner()) {\n              <p>This list hasn't been shared with anyone else.</p>\n            }\n            @if (isCurrentUserOwner()) {\n              <button class=\"btn-primary\" (click)=\"openShareDialog()\">\n                <i class=\"fa-solid fa-user-plus\"></i> Share This List\n              </button>\n            }\n          </div>\n        }\n        <!-- Read-only notice for non-owners -->\n        @if (!isCurrentUserOwner() && (stats.shareCount > 0 || stats.invitationCount > 0)) {\n          <div class=\"readonly-notice\">\n            <i class=\"fa-solid fa-info-circle\"></i>\n            <span>Only the list owner can manage sharing settings.</span>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- Activity Section -->\n    @if (activeSection === 'activity') {\n      <section class=\"section activity-section\">\n        <div class=\"section-header\">\n          <h2>Activity</h2>\n        </div>\n        <div class=\"activity-timeline\">\n          <div class=\"timeline-item\">\n            <div class=\"timeline-icon\">\n              <i class=\"fa-solid fa-edit\"></i>\n            </div>\n            <div class=\"timeline-content\">\n              <p class=\"timeline-text\">List updated</p>\n              <span class=\"timeline-date\">{{record.__mj_UpdatedAt | date:'medium'}}</span>\n            </div>\n          </div>\n          <div class=\"timeline-item\">\n            <div class=\"timeline-icon create\">\n              <i class=\"fa-solid fa-plus\"></i>\n            </div>\n            <div class=\"timeline-content\">\n              <p class=\"timeline-text\">List created</p>\n              <span class=\"timeline-date\">{{record.__mj_CreatedAt | date:'medium'}}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"activity-info\">\n          <p>Detailed activity tracking coming soon. You'll be able to see who added items, when shares were created, and more.</p>\n        </div>\n      </section>\n    }\n\n    <!-- Settings Section -->\n    @if (activeSection === 'settings') {\n      <section class=\"section settings-section\">\n        <div class=\"section-header\">\n          <h2>Settings</h2>\n        </div>\n        <div class=\"settings-form\">\n          <mj-collapsible-panel\n            SectionKey=\"listSettings\"\n            SectionName=\"List Settings\"\n            Icon=\"fa fa-cog\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <div class=\"form-body\">\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Name\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Description\"\n                Type=\"textarea\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"CategoryID\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n                LinkType=\"Record\"\n                LinkComponentType=\"Search\">\n              </mj-form-field>\n            </div>\n          </mj-collapsible-panel>\n          <mj-collapsible-panel\n            SectionKey=\"systemInfo\"\n            SectionName=\"System Information\"\n            Icon=\"fa fa-info-circle\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <div class=\"form-body\">\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"EntityID\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"UserID\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"__mj_CreatedAt\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"__mj_UpdatedAt\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n            </div>\n          </mj-collapsible-panel>\n        </div>\n      </section>\n    }\n  </main>\n</div>\n\n<!-- Add Records Dialog -->\n@if (showAddRecordsDialog) {\n  <kendo-dialog\n    [title]=\"'Add ' + entityDisplayName + ' to List'\"\n    (close)=\"closeAddRecordsDialog()\"\n    [minWidth]=\"400\"\n    [width]=\"600\"\n    [height]=\"550\">\n    <div class=\"dialog-content add-records-dialog\">\n      @if (addDialogSaving) {\n        <div class=\"dialog-loading\">\n          <mj-loading [text]=\"'Adding ' + addTotal + ' records to list...'\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (!addDialogSaving) {\n        <!-- Search Input -->\n        <div class=\"search-section\">\n          <kendo-textbox\n            [placeholder]=\"'Search ' + entityDisplayName + '...'\"\n            [clearButton]=\"true\"\n            (valueChange)=\"onAddRecordsSearchChange($event)\"\n            [value]=\"addRecordsSearchFilter\"\n            class=\"search-input\">\n            <ng-template kendoTextBoxPrefixTemplate>\n              <span class=\"fa-solid fa-search search-icon\"></span>\n            </ng-template>\n          </kendo-textbox>\n          <span class=\"search-hint\">Type at least 2 characters to search</span>\n        </div>\n        <!-- Records List -->\n        <div class=\"records-list\">\n          @if (addDialogLoading) {\n            <div class=\"list-loading\">\n              <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n            </div>\n          }\n          @if (!addDialogLoading && addableRecords.length === 0 && addRecordsSearchFilter.length >= 2) {\n            <div class=\"empty-results\">\n              <span class=\"fa-solid fa-search empty-icon\"></span>\n              <p>No records found matching \"{{ addRecordsSearchFilter }}\"</p>\n            </div>\n          }\n          @if (!addDialogLoading && addableRecords.length === 0 && addRecordsSearchFilter.length < 2) {\n            <div class=\"empty-results\">\n              <span class=\"fa-solid fa-list empty-icon\"></span>\n              <p>Search for records to add to this list</p>\n            </div>\n          }\n          @if (!addDialogLoading && addableRecords.length > 0) {\n            <!-- Selection controls -->\n            <div class=\"selection-controls\">\n              <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"selectAllAddable()\">Select All</button>\n              <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"deselectAllAddable()\">Deselect All</button>\n              <span class=\"selection-info\">{{ selectedAddableRecords.length }} selected</span>\n            </div>\n            <!-- Records -->\n            <div class=\"records-scroll\">\n              @for (record of addableRecords; track record) {\n                <div class=\"record-item\"\n                  [class.in-list]=\"record.isInList\"\n                  [class.selected]=\"record.isSelected\"\n                  (click)=\"toggleRecordSelection(record)\">\n                  <div class=\"record-checkbox\">\n                    @if (record.isInList) {\n                      <span class=\"fa-solid fa-check in-list-icon\" title=\"Already in list\"></span>\n                    }\n                    @if (!record.isInList) {\n                      <input type=\"checkbox\"\n                        [checked]=\"record.isSelected\"\n                        (click)=\"$event.stopPropagation()\"\n                        (change)=\"toggleRecordSelection(record)\">\n                    }\n                  </div>\n                  <div class=\"record-name\">{{ record.Name }}</div>\n                  @if (record.isInList) {\n                    <span class=\"in-list-badge\">In List</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <kendo-dialog-actions>\n      <button kendoButton\n        (click)=\"confirmAddRecords()\"\n        [disabled]=\"addDialogSaving || selectedAddableRecords.length === 0\"\n        themeColor=\"primary\">\n        Add {{ selectedAddableRecords.length > 0 ? selectedAddableRecords.length : '' }} Record{{ selectedAddableRecords.length !== 1 ? 's' : '' }}\n      </button>\n      <button kendoButton\n        (click)=\"closeAddRecordsDialog()\"\n        [disabled]=\"addDialogSaving\"\n        fillMode=\"outline\">\n        Cancel\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n}\n\n<!-- Add From View Dialog -->\n@if (showAddFromViewDialog) {\n  <kendo-dialog\n    title=\"Add Records from Views\"\n    (close)=\"closeAddFromViewDialog()\"\n    [minWidth]=\"400\"\n    [width]=\"600\"\n    [height]=\"500\">\n    <div class=\"dialog-content\">\n      @if (showAddFromViewLoader && fetchingRecordsToSave) {\n        <div class=\"dialog-loading\">\n          <mj-loading text=\"Loading records from views...\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (showAddFromViewLoader && addFromViewTotal > 0 && !fetchingRecordsToSave) {\n        <div class=\"dialog-loading\">\n          <mj-loading [text]=\"'Adding ' + addFromViewTotal + ' records to list...'\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (showAddFromViewLoader && !fetchingRecordsToSave && addFromViewTotal === 0) {\n        <div class=\"dialog-loading\">\n          <mj-loading text=\"Loading views...\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (!showAddFromViewLoader) {\n        <p class=\"dialog-instruction\">Select views to add their records to this list:</p>\n        <div class=\"views-list\">\n          @if (!userViews || userViews.length === 0) {\n            <div class=\"empty-results\">\n              <span class=\"fa-solid fa-folder-open empty-icon\"></span>\n              <p>No saved views found for this entity</p>\n            </div>\n          }\n          @if (userViews && userViews.length > 0) {\n            @for (view of userViews; track view) {\n              <div class=\"view-item\"\n                [class.selected]=\"isViewSelected(view)\"\n                (click)=\"toggleViewSelection(view)\">\n                <input type=\"checkbox\"\n                  [checked]=\"isViewSelected(view)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleViewSelection(view)\">\n                <span class=\"fa-solid fa-table-list view-icon\"></span>\n                <span class=\"view-name\">{{ view.Name }}</span>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n    <kendo-dialog-actions>\n      <button kendoButton\n        (click)=\"confirmAddFromView()\"\n        [disabled]=\"showAddFromViewLoader || userViewsToAdd.length === 0\"\n        themeColor=\"primary\">\n        Add from {{ userViewsToAdd.length }} View{{ userViewsToAdd.length !== 1 ? 's' : '' }}\n      </button>\n      <button kendoButton\n        (click)=\"closeAddFromViewDialog()\"\n        [disabled]=\"showAddFromViewLoader\"\n        fillMode=\"outline\">\n        Cancel\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n}\n\n<!-- Share Dialog -->\n@if (showShareDialog && shareDialogConfig) {\n  <mj-list-share-dialog\n    [config]=\"shareDialogConfig\"\n    [visible]=\"showShareDialog\"\n    (complete)=\"onShareDialogComplete($event)\"\n    (cancel)=\"onShareDialogCancel()\">\n  </mj-list-share-dialog>\n}\n", styles: ["/* ============================================\n   WORLD-CLASS LIST FORM STYLES\n   ============================================ */\n\n/* Layout */\n.list-form-explorer {\n    display: grid;\n    grid-template-areas:\n        \"header header\"\n        \"nav main\";\n    grid-template-columns: 64px 1fr;\n    grid-template-rows: auto 1fr;\n    height: 100%;\n    min-height: 100vh;\n    background: #f5f7fa;\n}\n\n/* Header */\n.list-header {\n    grid-area: header;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 24px;\n    background: white;\n    border-bottom: 1px solid #e0e0e0;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.header-content {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.header-icon {\n    width: 56px;\n    height: 56px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 24px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n.header-info {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.name-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.list-name {\n    margin: 0;\n    font-size: 24px;\n    font-weight: 600;\n    color: #1a1a2e;\n}\n\n.edit-btn {\n    background: none;\n    border: none;\n    padding: 6px 8px;\n    color: #999;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.edit-btn:hover {\n    background: #f0f0f0;\n    color: #666;\n}\n\n.inline-edit-input {\n    padding: 8px 12px;\n    border: 2px solid #2196F3;\n    border-radius: 6px;\n    font-size: inherit;\n    background: white;\n    outline: none;\n}\n\n.name-input {\n    font-size: 24px;\n    font-weight: 600;\n    min-width: 300px;\n}\n\n.save-btn, .cancel-btn {\n    background: none;\n    border: none;\n    padding: 8px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.save-btn {\n    color: #4CAF50;\n}\n\n.save-btn:hover {\n    background: #e8f5e9;\n}\n\n.cancel-btn {\n    color: #f44336;\n}\n\n.cancel-btn:hover {\n    background: #ffebee;\n}\n\n.entity-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    background: #e3f2fd;\n    border-radius: 16px;\n    font-size: 13px;\n    color: #1976D2;\n    font-weight: 500;\n}\n\n.entity-badge i {\n    font-size: 12px;\n}\n\n.header-stats {\n    display: flex;\n    gap: 32px;\n}\n\n.stat-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 80px;\n}\n\n.stat-value {\n    font-size: 24px;\n    font-weight: 600;\n    color: #333;\n}\n\n.stat-label {\n    font-size: 12px;\n    color: #999;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* Navigation Rail */\n.nav-rail {\n    grid-area: nav;\n    display: flex;\n    flex-direction: column;\n    padding: 16px 8px;\n    background: #1a1a2e;\n    gap: 4px;\n}\n\n.nav-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 12px 8px;\n    background: none;\n    border: none;\n    color: rgba(255, 255, 255, 0.6);\n    cursor: pointer;\n    border-radius: 8px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.nav-item:hover:not(.disabled) {\n    background: rgba(255, 255, 255, 0.1);\n    color: white;\n}\n\n.nav-item.active {\n    background: rgba(33, 150, 243, 0.2);\n    color: #64b5f6;\n}\n\n.nav-item.active::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 24px;\n    background: #2196F3;\n    border-radius: 0 3px 3px 0;\n}\n\n.nav-item.disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.nav-item i {\n    font-size: 18px;\n}\n\n.nav-label {\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.nav-badge {\n    position: absolute;\n    top: 6px;\n    right: 6px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: #2196F3;\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n/* Main Content */\n.main-content {\n    grid-area: main;\n    padding: 24px;\n    overflow-y: auto;\n}\n\n.section {\n    animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n}\n\n.section-header h2 {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: #333;\n}\n\n.section-actions {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n}\n\n/* Search Box */\n.search-box {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.search-box i {\n    position: absolute;\n    left: 12px;\n    color: #999;\n}\n\n.search-box input {\n    padding: 10px 12px 10px 36px;\n    border: 1px solid #ddd;\n    border-radius: 8px;\n    font-size: 14px;\n    width: 250px;\n    transition: all 0.2s;\n}\n\n.search-box input:focus {\n    outline: none;\n    border-color: #2196F3;\n    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\n\n/* Overview Section */\n.overview-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n    gap: 20px;\n}\n\n.overview-card {\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n}\n\n.card-header h3 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #666;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.card-header h3 i {\n    color: #999;\n}\n\n.card-body {\n    padding: 20px;\n}\n\n.description-text {\n    margin: 0;\n    color: #333;\n    line-height: 1.6;\n}\n\n.description-empty {\n    margin: 0;\n    color: #999;\n    font-style: italic;\n}\n\n.description-input {\n    width: 100%;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.edit-actions {\n    display: flex;\n    gap: 8px;\n    margin-top: 12px;\n}\n\n.btn-primary {\n    padding: 8px 16px;\n    background: #2196F3;\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.btn-primary:hover {\n    background: #1976D2;\n}\n\n.btn-secondary {\n    padding: 8px 16px;\n    background: white;\n    color: #666;\n    border: 1px solid #ddd;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-secondary:hover {\n    background: #f5f5f5;\n}\n\n.btn-icon {\n    background: none;\n    border: 1px solid #ddd;\n    padding: 8px 12px;\n    border-radius: 6px;\n    color: #666;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-icon:hover {\n    background: #f5f5f5;\n    border-color: #ccc;\n}\n\n.btn-danger {\n    padding: 8px 16px;\n    background: #f44336;\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: background 0.2s;\n}\n\n.btn-danger:hover {\n    background: #d32f2f;\n}\n\n/* Details Card */\n.detail-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-bottom: 1px solid #f5f5f5;\n}\n\n.detail-row:last-child {\n    border-bottom: none;\n}\n\n.detail-label {\n    font-size: 13px;\n    color: #999;\n}\n\n.detail-value {\n    font-size: 14px;\n    color: #333;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.detail-icon {\n    color: #999;\n    font-size: 12px;\n}\n\n.owner-badge {\n    padding: 2px 8px;\n    background: #e8f5e9;\n    color: #388E3C;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.category-select {\n    padding: 6px 12px;\n    border: 1px solid #ddd;\n    border-radius: 6px;\n    font-size: 14px;\n    background: white;\n    cursor: pointer;\n}\n\n.category-select:focus {\n    outline: none;\n    border-color: #2196F3;\n}\n\n/* Actions Card */\n.action-btn {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n    padding: 14px 16px;\n    background: #f9fafb;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s;\n    margin-bottom: 8px;\n    text-align: left;\n}\n\n.action-btn:last-child {\n    margin-bottom: 0;\n}\n\n.action-btn:hover:not(:disabled) {\n    background: #f3f4f6;\n    border-color: #d1d5db;\n}\n\n.action-btn:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.action-btn i {\n    font-size: 18px;\n    color: #2196F3;\n    width: 24px;\n    text-align: center;\n}\n\n.action-btn span:first-of-type {\n    flex: 1;\n    font-size: 14px;\n    color: #333;\n}\n\n.action-count {\n    padding: 2px 8px;\n    background: #e3f2fd;\n    color: #1976D2;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.coming-soon {\n    padding: 2px 8px;\n    background: #fff3e0;\n    color: #f57c00;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n/* Items Section */\n.loading-state {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n}\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n}\n\n.empty-icon {\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 20px;\n}\n\n.empty-icon i {\n    font-size: 36px;\n    color: #7c4dff;\n}\n\n.empty-state h3 {\n    margin: 0 0 12px;\n    font-size: 20px;\n    color: #333;\n}\n\n.empty-state p {\n    margin: 0;\n    color: #666;\n    max-width: 400px;\n}\n\n.items-table-container {\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.items-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 12px 16px;\n    background: #e3f2fd;\n    border-bottom: 1px solid #bbdefb;\n}\n\n.selection-count {\n    font-size: 14px;\n    color: #1976D2;\n    font-weight: 500;\n}\n\n.items-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.items-table th {\n    text-align: left;\n    padding: 12px 16px;\n    font-size: 12px;\n    font-weight: 600;\n    color: #666;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: #fafafa;\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.items-table td {\n    padding: 14px 16px;\n    border-bottom: 1px solid #f0f0f0;\n    font-size: 14px;\n    color: #333;\n}\n\n.items-table tr:last-child td {\n    border-bottom: none;\n}\n\n.items-table tr.selected {\n    background: #e3f2fd;\n}\n\n.items-table tr:hover:not(.selected) {\n    background: #fafafa;\n}\n\n.col-checkbox {\n    width: 40px;\n}\n\n.col-name {\n    width: 35%;\n}\n\n.col-id {\n    width: 25%;\n}\n\n.col-added {\n    width: 20%;\n}\n\n.col-actions {\n    width: 60px;\n    text-align: right;\n}\n\n.item-name {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.item-name.loading {\n    color: #999;\n}\n\n.item-icon {\n    color: #999;\n}\n\n.record-id {\n    font-family: 'SF Mono', Monaco, monospace;\n    font-size: 12px;\n    background: #f5f5f5;\n    padding: 4px 8px;\n    border-radius: 4px;\n    color: #666;\n}\n\n.items-footer {\n    padding: 12px 16px;\n    background: #fafafa;\n    border-top: 1px solid #f0f0f0;\n}\n\n.items-count {\n    font-size: 13px;\n    color: #666;\n}\n\n/* Sharing Section */\n.coming-soon-banner {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    padding: 24px;\n    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);\n    border-radius: 12px;\n    margin-bottom: 24px;\n}\n\n.coming-soon-banner > i {\n    font-size: 48px;\n    color: #7c4dff;\n}\n\n.banner-content h3 {\n    margin: 0 0 8px;\n    color: #333;\n}\n\n.banner-content p {\n    margin: 0;\n    color: #666;\n}\n\n.shares-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n/* Activity Section */\n.activity-timeline {\n    background: white;\n    border-radius: 12px;\n    padding: 20px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    margin-bottom: 20px;\n}\n\n.timeline-item {\n    display: flex;\n    gap: 16px;\n    padding: 16px 0;\n    border-bottom: 1px solid #f0f0f0;\n}\n\n.timeline-item:last-child {\n    border-bottom: none;\n}\n\n.timeline-icon {\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: #e3f2fd;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #2196F3;\n    flex-shrink: 0;\n}\n\n.timeline-icon.create {\n    background: #e8f5e9;\n    color: #4CAF50;\n}\n\n.timeline-content {\n    flex: 1;\n}\n\n.timeline-text {\n    margin: 0 0 4px;\n    color: #333;\n}\n\n.timeline-date {\n    font-size: 13px;\n    color: #999;\n}\n\n.activity-info {\n    background: #fff8e1;\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.activity-info p {\n    margin: 0;\n    color: #f57c00;\n    font-size: 14px;\n}\n\n/* Settings Section */\n.settings-form {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n/* Add Buttons in Items Section */\n.add-buttons {\n    display: flex;\n    gap: 8px;\n}\n\n.add-buttons .btn-secondary {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n/* Sharing Summary */\n.sharing-summary {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.summary-card {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px 24px;\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    flex: 1;\n    max-width: 280px;\n}\n\n.summary-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    background: #e3f2fd;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #2196F3;\n    font-size: 20px;\n}\n\n.summary-icon.pending {\n    background: #fff3e0;\n    color: #f57c00;\n}\n\n.summary-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.summary-value {\n    font-size: 28px;\n    font-weight: 600;\n    color: #333;\n    line-height: 1;\n}\n\n.summary-label {\n    font-size: 13px;\n    color: #666;\n    margin-top: 4px;\n}\n\n.readonly-notice {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: #f5f5f5;\n    border-radius: 8px;\n    color: #666;\n    font-size: 14px;\n}\n\n.readonly-notice i {\n    color: #999;\n}\n\n/* Dialog Styles */\n.dialog-content {\n    padding: 16px 0;\n}\n\n.dialog-loading {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    min-height: 200px;\n    gap: 16px;\n}\n\n.dialog-instruction {\n    margin: 0 0 16px;\n    color: #666;\n}\n\n/* Add Records Dialog */\n.add-records-dialog .search-section {\n    margin-bottom: 16px;\n}\n\n.add-records-dialog .search-input {\n    width: 100%;\n}\n\n.add-records-dialog .search-hint {\n    display: block;\n    font-size: 12px;\n    color: #999;\n    margin-top: 4px;\n}\n\n.add-records-dialog .records-list {\n    min-height: 280px;\n    max-height: 320px;\n    overflow-y: auto;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n}\n\n.add-records-dialog .list-loading {\n    display: flex;\n    justify-content: center;\n    padding: 40px;\n}\n\n.add-records-dialog .empty-results {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: #666;\n}\n\n.add-records-dialog .empty-results .empty-icon {\n    width: 48px;\n    height: 48px;\n    font-size: 24px;\n    margin-bottom: 12px;\n    background: #f5f5f5;\n}\n\n.add-records-dialog .selection-controls {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: #f5f5f5;\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.add-records-dialog .selection-info {\n    margin-left: auto;\n    font-size: 12px;\n    color: #666;\n}\n\n.add-records-dialog .records-scroll {\n    max-height: 260px;\n    overflow-y: auto;\n}\n\n.add-records-dialog .record-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid #f0f0f0;\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.add-records-dialog .record-item:hover {\n    background: #f9f9f9;\n}\n\n.add-records-dialog .record-item.selected {\n    background: #e3f2fd;\n}\n\n.add-records-dialog .record-item.in-list {\n    background: #f5f5f5;\n    cursor: default;\n}\n\n.add-records-dialog .record-checkbox {\n    width: 20px;\n    display: flex;\n    justify-content: center;\n}\n\n.add-records-dialog .in-list-icon {\n    color: #4CAF50;\n}\n\n.add-records-dialog .record-name {\n    flex: 1;\n    font-size: 14px;\n}\n\n.add-records-dialog .in-list-badge {\n    padding: 2px 8px;\n    background: #e8f5e9;\n    color: #388E3C;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n/* Add From View Dialog */\n.views-list {\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.views-list .empty-results {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: #666;\n}\n\n.views-list .empty-results .empty-icon {\n    font-size: 36px;\n    color: #ccc;\n    margin-bottom: 12px;\n}\n\n.view-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 16px;\n    border-bottom: 1px solid #f0f0f0;\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.view-item:last-child {\n    border-bottom: none;\n}\n\n.view-item:hover {\n    background: #f9f9f9;\n}\n\n.view-item.selected {\n    background: #e3f2fd;\n}\n\n.view-item .view-icon {\n    color: #2196F3;\n}\n\n.view-item .view-name {\n    flex: 1;\n    font-size: 14px;\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n    .list-form-explorer {\n        grid-template-columns: 1fr;\n        grid-template-areas:\n            \"header\"\n            \"nav\"\n            \"main\";\n    }\n\n    .nav-rail {\n        flex-direction: row;\n        padding: 8px 16px;\n        overflow-x: auto;\n    }\n\n    .nav-item {\n        flex-direction: row;\n        padding: 10px 16px;\n        gap: 8px;\n    }\n\n    .nav-item::before {\n        display: none;\n    }\n\n    .header-stats {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    .list-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .overview-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .search-box input {\n        width: 100%;\n    }\n\n    .section-actions {\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n    }\n}\n", ".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(ListFormComponentExtended, { className: "ListFormComponentExtended", filePath: "src/lib/custom/lists/list-form.component.ts", lineNumber: 55 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListFormComponentExtended, { className: "ListFormComponentExtended", filePath: "src/lib/custom/Lists/list-form.component.ts", lineNumber: 55 }); })();
 //# sourceMappingURL=list-form.component.js.map

package/dist/lib/custom/Queries/query-category-dialog.component.js CHANGED Viewed

@@ -236,5 +236,5 @@ export class QueryCategoryDialogComponent {
         }], onCategoryCreated: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryCategoryDialogComponent, { className: "QueryCategoryDialogComponent", filePath: "src/lib/custom/queries/query-category-dialog.component.ts", lineNumber: 20 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryCategoryDialogComponent, { className: "QueryCategoryDialogComponent", filePath: "src/lib/custom/Queries/query-category-dialog.component.ts", lineNumber: 20 }); })();
 //# sourceMappingURL=query-category-dialog.component.js.map

package/dist/lib/custom/Queries/query-form.component.js CHANGED Viewed

@@ -1559,5 +1559,5 @@ export { QueryFormExtendedComponent };
             type: ViewChild,
             args: ['sqlEditor']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryFormExtendedComponent, { className: "QueryFormExtendedComponent", filePath: "src/lib/custom/queries/query-form.component.ts", lineNumber: 24 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryFormExtendedComponent, { className: "QueryFormExtendedComponent", filePath: "src/lib/custom/Queries/query-form.component.ts", lineNumber: 24 }); })();
 //# sourceMappingURL=query-form.component.js.map

package/dist/lib/custom/Queries/query-run-dialog.component.js CHANGED Viewed

@@ -785,5 +785,5 @@ export class QueryRunDialogComponent {
         }], onClose: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryRunDialogComponent, { className: "QueryRunDialogComponent", filePath: "src/lib/custom/queries/query-run-dialog.component.ts", lineNumber: 34 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryRunDialogComponent, { className: "QueryRunDialogComponent", filePath: "src/lib/custom/Queries/query-run-dialog.component.ts", lineNumber: 34 }); })();
 //# sourceMappingURL=query-run-dialog.component.js.map

package/dist/lib/custom/Templates/template-param-dialog.component.js CHANGED Viewed

@@ -666,5 +666,5 @@ export class TemplateParamDialogComponent {
         }], onClose: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TemplateParamDialogComponent, { className: "TemplateParamDialogComponent", filePath: "src/lib/custom/templates/template-param-dialog.component.ts", lineNumber: 29 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TemplateParamDialogComponent, { className: "TemplateParamDialogComponent", filePath: "src/lib/custom/Templates/template-param-dialog.component.ts", lineNumber: 29 }); })();
 //# sourceMappingURL=template-param-dialog.component.js.map

package/dist/lib/custom/Templates/template-params-grid.component.js CHANGED Viewed

@@ -537,5 +537,5 @@ export class TemplateParamsGridComponent {
             type: ViewChild,
             args: [GridComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TemplateParamsGridComponent, { className: "TemplateParamsGridComponent", filePath: "src/lib/custom/templates/template-params-grid.component.ts", lineNumber: 14 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TemplateParamsGridComponent, { className: "TemplateParamsGridComponent", filePath: "src/lib/custom/Templates/template-params-grid.component.ts", lineNumber: 14 }); })();
 //# sourceMappingURL=template-params-grid.component.js.map

package/dist/lib/custom/Templates/templates-form.component.js CHANGED Viewed

@@ -806,5 +806,5 @@ export { TemplatesFormExtendedComponent };
             type: ViewChild,
             args: ['codeEditor']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TemplatesFormExtendedComponent, { className: "TemplatesFormExtendedComponent", filePath: "src/lib/custom/templates/templates-form.component.ts", lineNumber: 23 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TemplatesFormExtendedComponent, { className: "TemplatesFormExtendedComponent", filePath: "src/lib/custom/Templates/templates-form.component.ts", lineNumber: 23 }); })();
 //# sourceMappingURL=templates-form.component.js.map

package/dist/lib/custom/Tests/entity-link-pill.component.js CHANGED Viewed

@@ -118,5 +118,5 @@ export class EntityLinkPillComponent {
         }], recordName: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityLinkPillComponent, { className: "EntityLinkPillComponent", filePath: "src/lib/custom/tests/entity-link-pill.component.ts", lineNumber: 79 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityLinkPillComponent, { className: "EntityLinkPillComponent", filePath: "src/lib/custom/Tests/entity-link-pill.component.ts", lineNumber: 79 }); })();
 //# sourceMappingURL=entity-link-pill.component.js.map