@memberjunction/ng-entity-relationship-diagram 3.1.1 → 3.3.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 (5) hide show
  1. package/dist/lib/components/entity-details/entity-details.component.js +2 -2
  2. package/dist/lib/components/entity-filter-panel/entity-filter-panel.component.js +2 -2
  3. package/dist/lib/components/erd-composite/erd-composite.component.js +2 -2
  4. package/dist/lib/components/erd-diagram.component.js +2 -2
  5. package/package.json +2 -2
package/dist/lib/components/entity-details/entity-details.component.js CHANGED
@@ -658,11 +658,11 @@ export class EntityDetailsComponent {
658
658
  i0.ɵɵtextInterpolate1("Related Entities (", ctx.selectedEntity ? ctx.getRelatedEntities(ctx.selectedEntity.ID).length : 0, ")");
659
659
  i0.ɵɵadvance();
660
660
  i0.ɵɵconditional(ctx.relationshipsSectionExpanded ? 38 : -1);
661
- } }, styles: [".details-panel[_ngcontent-%COMP%] {\n height: 100%;\n background: white;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.details-panel[_ngcontent-%COMP%] .panel-header[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.details-panel[_ngcontent-%COMP%] .entity-info[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.details-panel[_ngcontent-%COMP%] .fields-section[_ngcontent-%COMP%], \n.details-panel[_ngcontent-%COMP%] .relationships-section[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n min-height: 0;\n transition: flex 0.3s ease;\n}\n.details-panel[_ngcontent-%COMP%] .fields-section.section-expanded[_ngcontent-%COMP%], \n.details-panel[_ngcontent-%COMP%] .relationships-section.section-expanded[_ngcontent-%COMP%] {\n flex: 1;\n}\n.details-panel[_ngcontent-%COMP%] .fields-section.section-collapsed[_ngcontent-%COMP%], \n.details-panel[_ngcontent-%COMP%] .relationships-section.section-collapsed[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n}\n.details-panel[_ngcontent-%COMP%] .fields-section[_ngcontent-%COMP%]:last-child, \n.details-panel[_ngcontent-%COMP%] .relationships-section[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background-color: #f5f5f5;\n border-bottom: 1px solid #e0e0e0;\n}\n.panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.panel-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.open-btn[_ngcontent-%COMP%] {\n padding: 4px 8px;\n border: 1px solid #4caf50;\n border-radius: 4px;\n background: #4caf50;\n color: white;\n cursor: pointer;\n font-size: 10px;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.open-btn[_ngcontent-%COMP%]:hover {\n background-color: #45a049;\n border-color: #45a049;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n padding: 4px;\n border: none;\n background: none;\n cursor: pointer;\n color: #666;\n}\n.close-btn[_ngcontent-%COMP%]:hover {\n color: #333;\n}\n\n.entity-info[_ngcontent-%COMP%] {\n padding: 16px;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.info-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n font-size: 12px;\n}\n.info-row[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n.info-row[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #666;\n min-width: 60px;\n}\n.info-row[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n color: #333;\n flex: 1;\n text-align: right;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n}\n.status-badge.status-active[_ngcontent-%COMP%] {\n background-color: #e8f5e8;\n color: #2e7d32;\n}\n.status-badge.status-deprecated[_ngcontent-%COMP%] {\n background-color: #fff3e0;\n color: #f57c00;\n}\n.status-badge.status-disabled[_ngcontent-%COMP%] {\n background-color: #ffebee;\n color: #c62828;\n}\n\n.extra-padding[_ngcontent-%COMP%] {\n padding: 4px;\n}\n\n.fields-section[_ngcontent-%COMP%], .relationships-section[_ngcontent-%COMP%] {\n border-bottom: 1px solid #d0d0d0;\n}\n.fields-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%], .relationships-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] {\n flex-shrink: 0;\n padding: 16px 16px 12px 16px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #f8f9fa;\n border: none;\n border-bottom: 1px solid #e9ecef;\n}\n.fields-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] .section-title-group[_ngcontent-%COMP%], .relationships-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] .section-title-group[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.fields-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%], .relationships-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 12px;\n font-weight: 600;\n color: #333;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n padding: 4px;\n border: none;\n background: none;\n cursor: pointer;\n color: #666;\n border-radius: 3px;\n transition: all 0.2s ease;\n}\n.expand-btn[_ngcontent-%COMP%]:hover {\n background-color: #f0f0f0;\n color: #333;\n}\n.expand-btn[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n font-size: 10px;\n transition: transform 0.2s ease;\n}\n.expand-btn.expanded[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n transform: rotate(90deg);\n}\n\n.section-title-group[_ngcontent-%COMP%] {\n cursor: pointer;\n user-select: none;\n}\n.section-title-group[_ngcontent-%COMP%]:hover {\n opacity: 0.8;\n}\n\n.field-filters[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.filter-btn[_ngcontent-%COMP%] {\n padding: 4px 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n background: white;\n cursor: pointer;\n font-size: 10px;\n color: #666;\n transition: all 0.2s;\n}\n.filter-btn[_ngcontent-%COMP%]:hover {\n background-color: #f0f0f0;\n}\n.filter-btn.active[_ngcontent-%COMP%] {\n background-color: #2196f3;\n border-color: #2196f3;\n color: white;\n}\n\n.fields-list[_ngcontent-%COMP%], .related-entities-list[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n overflow-y: auto;\n padding: 6px 16px 16px 16px;\n min-height: 0;\n}\n.fields-list[_ngcontent-%COMP%]::-webkit-scrollbar, .related-entities-list[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 6px;\n}\n.fields-list[_ngcontent-%COMP%]::-webkit-scrollbar-track, .related-entities-list[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 3px;\n}\n.fields-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, .related-entities-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: #c1c1c1;\n border-radius: 3px;\n}\n.fields-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, .related-entities-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: #a1a1a1;\n}\n\n.field-item[_ngcontent-%COMP%] {\n padding: 8px;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n font-size: 11px;\n cursor: pointer;\n user-select: none;\n transition: all 0.2s ease;\n}\n.field-item[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n.field-item.field-expanded[_ngcontent-%COMP%] {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n transform: scale(1.02);\n}\n.field-item.primary-key-field[_ngcontent-%COMP%] {\n border-color: #ff9800;\n background-color: #fff8e1;\n border-left: 4px solid #ff9800;\n}\n.field-item.primary-key-field.field-expanded[_ngcontent-%COMP%] {\n box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);\n}\n.field-item.foreign-key-field[_ngcontent-%COMP%] {\n border-color: #2196f3;\n background-color: #f3f9ff;\n border-left: 4px solid #2196f3;\n}\n.field-item.foreign-key-field.field-expanded[_ngcontent-%COMP%] {\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n}\n.field-item.regular-field[_ngcontent-%COMP%] {\n border-color: #e0e0e0;\n background-color: #fafafa;\n}\n.field-item.regular-field.field-expanded[_ngcontent-%COMP%] {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.field-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 4px;\n}\n\n.field-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.field-name[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #333;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.field-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n.field-icon.fa-key[_ngcontent-%COMP%] {\n color: #ff9800;\n}\n.field-icon.fa-link[_ngcontent-%COMP%] {\n color: #2196f3;\n}\n\n.field-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.field-badge[_ngcontent-%COMP%] {\n padding: 1px 4px;\n border-radius: 2px;\n font-size: 8px;\n font-weight: 700;\n text-transform: uppercase;\n}\n.field-badge.primary-key[_ngcontent-%COMP%] {\n background-color: #ff9800;\n color: white;\n}\n.field-badge.foreign-key[_ngcontent-%COMP%] {\n background-color: #2196f3;\n color: white;\n}\n\n.field-type[_ngcontent-%COMP%] {\n color: #666;\n font-size: 10px;\n}\n\n.field-relation[_ngcontent-%COMP%] {\n color: #2196f3;\n font-size: 10px;\n margin-top: 4px;\n}\n.field-relation[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n margin-right: 4px;\n}\n\n.field-info-btn[_ngcontent-%COMP%], \n.field-values-btn[_ngcontent-%COMP%] {\n padding: 2px 4px;\n border: none;\n background: none;\n cursor: pointer;\n color: #999;\n border-radius: 3px;\n transition: all 0.2s ease;\n}\n.field-info-btn[_ngcontent-%COMP%]:hover, \n.field-values-btn[_ngcontent-%COMP%]:hover {\n background-color: #e3f2fd;\n color: #2196f3;\n}\n.field-info-btn.expanded[_ngcontent-%COMP%], \n.field-values-btn.expanded[_ngcontent-%COMP%] {\n color: #2196f3;\n background-color: #e3f2fd;\n}\n.field-info-btn[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%], \n.field-values-btn[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n.field-description[_ngcontent-%COMP%] {\n margin-top: 8px;\n padding: 8px;\n background-color: #f8f9fa;\n border-left: 3px solid #2196f3;\n border-radius: 0 4px 4px 0;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in-out;\n}\n.field-description[_ngcontent-%COMP%] .description-text[_ngcontent-%COMP%] {\n font-size: 10px;\n color: #555;\n line-height: 1.4;\n font-style: italic;\n}\n\n.field-details[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n transform: translateY(-5px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.field-values[_ngcontent-%COMP%] {\n margin-top: 8px;\n padding: 8px;\n background-color: #f8f4ff;\n border-left: 3px solid #9c27b0;\n border-radius: 0 4px 4px 0;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in-out;\n}\n.field-values[_ngcontent-%COMP%] .values-header[_ngcontent-%COMP%] {\n font-size: 10px;\n color: #9c27b0;\n font-weight: 600;\n margin-bottom: 6px;\n}\n.field-values[_ngcontent-%COMP%] .values-list[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n}\n.field-values[_ngcontent-%COMP%] .value-tag[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 2px 6px;\n background-color: #e1bee7;\n color: #4a148c;\n font-size: 9px;\n border-radius: 10px;\n font-weight: 500;\n white-space: nowrap;\n max-width: 80px;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.field-values[_ngcontent-%COMP%] .value-tag[_ngcontent-%COMP%]:hover {\n background-color: #ce93d8;\n color: #2e003e;\n cursor: default;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] {\n margin-top: 12px;\n padding: 12px;\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n border: 1px solid #dee2e6;\n border-radius: 6px;\n animation: _ngcontent-%COMP%_slideDown 0.3s ease-out;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .details-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 10px;\n padding-bottom: 6px;\n border-bottom: 1px solid #dee2e6;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .details-header[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n color: #6c757d;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .details-grid[_ngcontent-%COMP%] {\n display: grid;\n gap: 6px;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-row[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 100px 1fr;\n gap: 8px;\n font-size: 10px;\n align-items: center;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-label[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #6c757d;\n text-align: right;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value[_ngcontent-%COMP%] {\n color: #495057;\n font-family: \"Courier New\", monospace;\n background-color: #fff;\n padding: 2px 6px;\n border-radius: 3px;\n border: 1px solid #dee2e6;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.nullable-yes[_ngcontent-%COMP%], .field-comprehensive-details[_ngcontent-%COMP%] .detail-value.nullable-no[_ngcontent-%COMP%] {\n color: #495057;\n background-color: #fff;\n border-color: #dee2e6;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.virtual-yes[_ngcontent-%COMP%] {\n color: #6f42c1;\n background-color: #e2d9f3;\n border-color: #d1c4e9;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.virtual-no[_ngcontent-%COMP%] {\n color: #6c757d;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.default-value[_ngcontent-%COMP%] {\n color: #856404;\n background-color: #fff3cd;\n border-color: #ffeaa7;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.related-entity[_ngcontent-%COMP%] {\n color: #0066cc;\n background-color: #cce5ff;\n border-color: #99d6ff;\n cursor: pointer;\n user-select: none;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.related-entity[_ngcontent-%COMP%]:hover {\n text-decoration: underline;\n background-color: #b3d9ff;\n border-color: #66c2ff;\n transform: translateX(2px);\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.related-entity[_ngcontent-%COMP%] .fa-external-link-alt[_ngcontent-%COMP%] {\n font-size: 8px;\n opacity: 0.7;\n transition: opacity 0.2s ease;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.related-entity[_ngcontent-%COMP%]:hover .fa-external-link-alt[_ngcontent-%COMP%] {\n opacity: 1;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.auto-increment[_ngcontent-%COMP%] {\n color: #20c997;\n background-color: #d1ecf1;\n border-color: #bee5eb;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .comprehensive-description-top[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n padding-bottom: 10px;\n border-bottom: 1px solid #dee2e6;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .comprehensive-description-top[_ngcontent-%COMP%] .description-content[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #495057;\n line-height: 1.4;\n font-style: italic;\n background: linear-gradient(135deg, #e3f2fd 0%, #f8f9fa 100%);\n padding: 10px;\n border-radius: 6px;\n border: 1px solid #bee5eb;\n border-left: 4px solid #17a2b8;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n padding: 12px;\n background: linear-gradient(135deg, #f3e5f5 0%, #fce4ec 100%);\n border: 1px solid #e1bee7;\n border-radius: 6px;\n border-left: 4px solid #9c27b0;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .values-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n font-weight: 600;\n color: #6a1b9a;\n margin-bottom: 10px;\n padding-bottom: 6px;\n border-bottom: 1px solid #e1bee7;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .values-header[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n color: #9c27b0;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .values-grid[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n max-height: 200px;\n overflow-y: auto;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .values-grid[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 4px;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .values-grid[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: #f3e5f5;\n border-radius: 2px;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .values-grid[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: #ce93d8;\n border-radius: 2px;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .values-grid[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: #ba68c8;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .value-item[_ngcontent-%COMP%] {\n padding: 8px;\n background: white;\n border: 1px solid #e1bee7;\n border-radius: 4px;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .value-item[_ngcontent-%COMP%] .value-main[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-bottom: 2px;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .value-item[_ngcontent-%COMP%] .value-main[_ngcontent-%COMP%] .value-text[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 600;\n color: #4a148c;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .value-item[_ngcontent-%COMP%] .value-main[_ngcontent-%COMP%] .value-code[_ngcontent-%COMP%] {\n font-size: 9px;\n color: #7b1fa2;\n background: #f3e5f5;\n padding: 1px 4px;\n border-radius: 3px;\n border: 1px solid #e1bee7;\n font-family: \"Courier New\", monospace;\n}\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .value-item[_ngcontent-%COMP%] .value-description[_ngcontent-%COMP%] {\n font-size: 9px;\n color: #666;\n line-height: 1.3;\n font-style: italic;\n margin-top: 2px;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n max-height: 0;\n }\n to {\n opacity: 1;\n transform: translateY(0);\n max-height: 500px;\n }\n}\n.related-entity-item[_ngcontent-%COMP%] {\n padding: 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n cursor: pointer;\n font-size: 12px;\n color: #333;\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: all 0.3s ease;\n position: relative;\n max-width: calc(100% - 4px);\n min-width: 0;\n flex-shrink: 1;\n}\n.related-entity-item[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);\n border-color: #2196f3;\n transform: translateX(4px);\n box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);\n}\n.related-entity-item[_ngcontent-%COMP%]:hover .zoom-indicator[_ngcontent-%COMP%] {\n opacity: 1;\n transform: scale(1.1);\n}\n.related-entity-item[_ngcontent-%COMP%]:hover .fa-database[_ngcontent-%COMP%] {\n color: #2196f3;\n transform: scale(1.1);\n}\n.related-entity-item[_ngcontent-%COMP%]:hover::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(to bottom, #2196f3, #9c27b0);\n border-radius: 0 3px 3px 0;\n}\n.related-entity-item[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n margin-right: 10px;\n color: #666;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n.related-entity-item[_ngcontent-%COMP%] .fa-database[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n.related-entity-item[_ngcontent-%COMP%] .entity-name[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n.related-entity-item[_ngcontent-%COMP%] .zoom-indicator[_ngcontent-%COMP%] {\n opacity: 0.4;\n color: #2196f3;\n font-size: 11px;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}"] });
661
+ } }, styles: ["\n\n\n\n\n\n.details-panel[_ngcontent-%COMP%] {\n height: 100%;\n background: var(--mat-sys-surface);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.details-panel[_ngcontent-%COMP%] .panel-header[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n\n.details-panel[_ngcontent-%COMP%] .entity-info[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n\n.details-panel[_ngcontent-%COMP%] .fields-section[_ngcontent-%COMP%], \n.details-panel[_ngcontent-%COMP%] .relationships-section[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n min-height: 0;\n transition: flex 0.3s ease;\n}\n\n.details-panel[_ngcontent-%COMP%] .fields-section.section-expanded[_ngcontent-%COMP%], \n.details-panel[_ngcontent-%COMP%] .relationships-section.section-expanded[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.details-panel[_ngcontent-%COMP%] .fields-section.section-collapsed[_ngcontent-%COMP%], \n.details-panel[_ngcontent-%COMP%] .relationships-section.section-collapsed[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n}\n\n.details-panel[_ngcontent-%COMP%] .fields-section[_ngcontent-%COMP%]:last-child, \n.details-panel[_ngcontent-%COMP%] .relationships-section[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--mat-sys-surface-container);\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font: var(--mat-sys-title-medium);\n color: var(--mat-sys-on-surface);\n}\n\n.panel-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n\n\n.open-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 6px 12px;\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n border: none;\n border-radius: 20px;\n font: var(--mat-sys-label-small);\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n.open-btn[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n\n\n.close-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n border: none;\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mat-sys-surface-container-highest);\n color: var(--mat-sys-on-surface);\n}\n\n\n\n.entity-info[_ngcontent-%COMP%] {\n padding: 16px;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.info-row[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n font: var(--mat-sys-body-small);\n}\n\n.info-row[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.info-row[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mat-sys-on-surface-variant);\n min-width: 60px;\n}\n\n.info-row[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface);\n flex: 1;\n text-align: right;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n border-radius: 8px;\n font: var(--mat-sys-label-small);\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n background: var(--mat-sys-tertiary-container);\n color: var(--mat-sys-on-tertiary-container);\n}\n\n.status-badge.status-deprecated[_ngcontent-%COMP%] {\n background: var(--mat-sys-secondary-container);\n color: var(--mat-sys-on-secondary-container);\n}\n\n.status-badge.status-disabled[_ngcontent-%COMP%] {\n background: var(--mat-sys-error-container);\n color: var(--mat-sys-on-error-container);\n}\n\n.extra-padding[_ngcontent-%COMP%] {\n padding: 4px;\n}\n\n\n\n.fields-section[_ngcontent-%COMP%], \n.relationships-section[_ngcontent-%COMP%] {\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.fields-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%], \n.relationships-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] {\n flex-shrink: 0;\n padding: 16px 16px 12px 16px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--mat-sys-surface-container-low);\n border: none;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.fields-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] .section-title-group[_ngcontent-%COMP%], \n.relationships-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] .section-title-group[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.fields-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%], \n.relationships-section[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font: var(--mat-sys-title-small);\n color: var(--mat-sys-on-surface);\n}\n\n\n\n.expand-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n border: none;\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n background: var(--mat-sys-surface-container-highest);\n color: var(--mat-sys-on-surface);\n}\n\n.expand-btn[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n font-size: 10px;\n transition: transform 0.2s ease;\n}\n\n.expand-btn.expanded[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n transform: rotate(90deg);\n}\n\n.section-title-group[_ngcontent-%COMP%] {\n cursor: pointer;\n user-select: none;\n}\n\n.section-title-group[_ngcontent-%COMP%]:hover {\n opacity: 0.8;\n}\n\n\n\n.field-filters[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.filter-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font: var(--mat-sys-label-small);\n background: var(--mat-sys-surface);\n color: var(--mat-sys-on-surface-variant);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 16px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.filter-btn[_ngcontent-%COMP%]:hover {\n background: var(--mat-sys-surface-container);\n}\n\n.filter-btn.active[_ngcontent-%COMP%] {\n background: var(--mat-sys-primary);\n border-color: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n\n\n.fields-list[_ngcontent-%COMP%], \n.related-entities-list[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n overflow-y: auto;\n padding: 6px 16px 16px 16px;\n min-height: 0;\n}\n\n.fields-list[_ngcontent-%COMP%]::-webkit-scrollbar, \n.related-entities-list[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 6px;\n}\n\n.fields-list[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.related-entities-list[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: var(--mat-sys-surface-container);\n border-radius: 3px;\n}\n\n.fields-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.related-entities-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: var(--mat-sys-outline);\n border-radius: 3px;\n}\n\n.fields-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.related-entities-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: var(--mat-sys-on-surface-variant);\n}\n\n\n\n.field-item[_ngcontent-%COMP%] {\n padding: 10px;\n background: var(--mat-sys-surface);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 12px;\n font: var(--mat-sys-body-small);\n cursor: pointer;\n user-select: none;\n transition: all 0.2s ease;\n}\n\n.field-item[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n.field-item.field-expanded[_ngcontent-%COMP%] {\n box-shadow: var(--mat-sys-elevation-3);\n transform: scale(1.01);\n}\n\n\n\n.field-item.primary-key-field[_ngcontent-%COMP%] {\n border-color: var(--mat-sys-tertiary);\n background: var(--mat-sys-tertiary-container);\n border-left: 4px solid var(--mat-sys-tertiary);\n}\n\n.field-item.primary-key-field.field-expanded[_ngcontent-%COMP%] {\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mat-sys-tertiary) 20%, transparent);\n}\n\n\n\n.field-item.foreign-key-field[_ngcontent-%COMP%] {\n border-color: var(--mat-sys-primary);\n background: var(--mat-sys-primary-container);\n border-left: 4px solid var(--mat-sys-primary);\n}\n\n.field-item.foreign-key-field.field-expanded[_ngcontent-%COMP%] {\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mat-sys-primary) 20%, transparent);\n}\n\n\n\n.field-item.regular-field[_ngcontent-%COMP%] {\n border-color: var(--mat-sys-outline-variant);\n background: var(--mat-sys-surface-container-low);\n}\n\n.field-item.regular-field.field-expanded[_ngcontent-%COMP%] {\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n.field-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 4px;\n}\n\n.field-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.field-name[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.field-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n.field-icon.fa-key[_ngcontent-%COMP%] {\n color: var(--mat-sys-tertiary);\n}\n\n.field-icon.fa-link[_ngcontent-%COMP%] {\n color: var(--mat-sys-primary);\n}\n\n\n\n.field-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.field-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 1px 6px;\n border-radius: 4px;\n font: var(--mat-sys-label-small);\n font-size: 9px;\n font-weight: 700;\n text-transform: uppercase;\n}\n\n.field-badge.primary-key[_ngcontent-%COMP%] {\n background: var(--mat-sys-tertiary);\n color: var(--mat-sys-on-tertiary);\n}\n\n.field-badge.foreign-key[_ngcontent-%COMP%] {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.field-type[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface-variant);\n font: var(--mat-sys-label-small);\n}\n\n.field-relation[_ngcontent-%COMP%] {\n color: var(--mat-sys-primary);\n font: var(--mat-sys-label-small);\n margin-top: 4px;\n}\n\n.field-relation[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n margin-right: 4px;\n}\n\n\n\n.field-info-btn[_ngcontent-%COMP%], \n.field-values-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n border: none;\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.field-info-btn[_ngcontent-%COMP%]:hover, \n.field-values-btn[_ngcontent-%COMP%]:hover {\n background: var(--mat-sys-primary-container);\n color: var(--mat-sys-primary);\n}\n\n.field-info-btn.expanded[_ngcontent-%COMP%], \n.field-values-btn.expanded[_ngcontent-%COMP%] {\n background: var(--mat-sys-primary-container);\n color: var(--mat-sys-primary);\n}\n\n.field-info-btn[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%], \n.field-values-btn[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n\n\n.field-description[_ngcontent-%COMP%] {\n margin-top: 8px;\n padding: 8px;\n background: var(--mat-sys-surface-container-low);\n border-left: 3px solid var(--mat-sys-primary);\n border-radius: 0 8px 8px 0;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in-out;\n}\n\n.field-description[_ngcontent-%COMP%] .description-text[_ngcontent-%COMP%] {\n font: var(--mat-sys-body-small);\n color: var(--mat-sys-on-surface-variant);\n line-height: 1.4;\n font-style: italic;\n}\n\n.field-details[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n transform: translateY(-5px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\n\n.field-values[_ngcontent-%COMP%] {\n margin-top: 8px;\n padding: 8px;\n background: var(--mat-sys-secondary-container);\n border-left: 3px solid var(--mat-sys-secondary);\n border-radius: 0 8px 8px 0;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in-out;\n}\n\n.field-values[_ngcontent-%COMP%] .values-header[_ngcontent-%COMP%] {\n font: var(--mat-sys-label-small);\n color: var(--mat-sys-on-secondary-container);\n font-weight: 600;\n margin-bottom: 6px;\n}\n\n.field-values[_ngcontent-%COMP%] .values-list[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n}\n\n.field-values[_ngcontent-%COMP%] .value-tag[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 2px 8px;\n background: var(--mat-sys-surface);\n color: var(--mat-sys-on-surface);\n font: var(--mat-sys-label-small);\n font-size: 9px;\n border-radius: 12px;\n font-weight: 500;\n white-space: nowrap;\n max-width: 80px;\n overflow: hidden;\n text-overflow: ellipsis;\n border: 1px solid var(--mat-sys-outline-variant);\n}\n\n.field-values[_ngcontent-%COMP%] .value-tag[_ngcontent-%COMP%]:hover {\n background: var(--mat-sys-surface-container-highest);\n cursor: default;\n}\n\n\n\n.field-comprehensive-details[_ngcontent-%COMP%] {\n margin-top: 12px;\n padding: 12px;\n background: var(--mat-sys-surface-container);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 12px;\n animation: _ngcontent-%COMP%_slideDown 0.3s ease-out;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .details-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font: var(--mat-sys-label-medium);\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin-bottom: 10px;\n padding-bottom: 6px;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .details-header[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface-variant);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .details-grid[_ngcontent-%COMP%] {\n display: grid;\n gap: 6px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-row[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 100px 1fr;\n gap: 8px;\n font: var(--mat-sys-body-small);\n align-items: center;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-label[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mat-sys-on-surface-variant);\n text-align: right;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface);\n font-family: \"Courier New\", monospace;\n background: var(--mat-sys-surface);\n padding: 2px 6px;\n border-radius: 4px;\n border: 1px solid var(--mat-sys-outline-variant);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.nullable-yes[_ngcontent-%COMP%], \n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.nullable-no[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface);\n background: var(--mat-sys-surface);\n border-color: var(--mat-sys-outline-variant);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.virtual-yes[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-secondary-container);\n background: var(--mat-sys-secondary-container);\n border-color: var(--mat-sys-secondary);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.virtual-no[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface-variant);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.default-value[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-tertiary-container);\n background: var(--mat-sys-tertiary-container);\n border-color: var(--mat-sys-tertiary);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.related-entity[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-primary-container);\n background: var(--mat-sys-primary-container);\n border-color: var(--mat-sys-primary);\n cursor: pointer;\n user-select: none;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.related-entity[_ngcontent-%COMP%]:hover {\n text-decoration: underline;\n background: color-mix(in srgb, var(--mat-sys-primary-container) 80%, var(--mat-sys-primary) 20%);\n transform: translateX(2px);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.related-entity[_ngcontent-%COMP%] .fa-external-link-alt[_ngcontent-%COMP%] {\n font-size: 8px;\n opacity: 0.7;\n transition: opacity 0.2s ease;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.related-entity[_ngcontent-%COMP%]:hover .fa-external-link-alt[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .detail-value.auto-increment[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-tertiary-container);\n background: var(--mat-sys-tertiary-container);\n border-color: var(--mat-sys-tertiary);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .comprehensive-description-top[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n padding-bottom: 10px;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .comprehensive-description-top[_ngcontent-%COMP%] .description-content[_ngcontent-%COMP%] {\n font: var(--mat-sys-body-small);\n color: var(--mat-sys-on-surface);\n line-height: 1.4;\n font-style: italic;\n background: var(--mat-sys-primary-container);\n padding: 10px;\n border-radius: 8px;\n border: 1px solid var(--mat-sys-primary);\n border-left: 4px solid var(--mat-sys-primary);\n}\n\n\n\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n padding: 12px;\n background: var(--mat-sys-secondary-container);\n border: 1px solid var(--mat-sys-secondary);\n border-radius: 8px;\n border-left: 4px solid var(--mat-sys-secondary);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .values-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font: var(--mat-sys-label-medium);\n font-weight: 600;\n color: var(--mat-sys-on-secondary-container);\n margin-bottom: 10px;\n padding-bottom: 6px;\n border-bottom: 1px solid color-mix(in srgb, var(--mat-sys-secondary) 30%, transparent);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .values-header[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n color: var(--mat-sys-secondary);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .values-grid[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n max-height: 200px;\n overflow-y: auto;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .values-grid[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 4px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .values-grid[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: var(--mat-sys-secondary-container);\n border-radius: 2px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .values-grid[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: var(--mat-sys-secondary);\n border-radius: 2px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .values-grid[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: var(--mat-sys-on-secondary-container);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .value-item[_ngcontent-%COMP%] {\n padding: 8px;\n background: var(--mat-sys-surface);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 8px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .value-item[_ngcontent-%COMP%] .value-main[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-bottom: 2px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .value-item[_ngcontent-%COMP%] .value-main[_ngcontent-%COMP%] .value-text[_ngcontent-%COMP%] {\n font: var(--mat-sys-label-small);\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .value-item[_ngcontent-%COMP%] .value-main[_ngcontent-%COMP%] .value-code[_ngcontent-%COMP%] {\n font: var(--mat-sys-label-small);\n font-size: 9px;\n color: var(--mat-sys-on-secondary-container);\n background: var(--mat-sys-secondary-container);\n padding: 1px 4px;\n border-radius: 4px;\n border: 1px solid var(--mat-sys-secondary);\n font-family: \"Courier New\", monospace;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] .field-values-comprehensive[_ngcontent-%COMP%] .value-item[_ngcontent-%COMP%] .value-description[_ngcontent-%COMP%] {\n font: var(--mat-sys-body-small);\n font-size: 9px;\n color: var(--mat-sys-on-surface-variant);\n line-height: 1.3;\n font-style: italic;\n margin-top: 2px;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n max-height: 0;\n }\n to {\n opacity: 1;\n transform: translateY(0);\n max-height: 500px;\n }\n}\n\n\n\n.related-entity-item[_ngcontent-%COMP%] {\n padding: 12px 14px;\n background: var(--mat-sys-surface);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 12px;\n cursor: pointer;\n font: var(--mat-sys-body-medium);\n color: var(--mat-sys-on-surface);\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: all 0.3s ease;\n position: relative;\n max-width: calc(100% - 4px);\n min-width: 0;\n flex-shrink: 1;\n}\n\n.related-entity-item[_ngcontent-%COMP%]:hover {\n background: var(--mat-sys-primary-container);\n border-color: var(--mat-sys-primary);\n transform: translateX(4px);\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n.related-entity-item[_ngcontent-%COMP%]:hover .zoom-indicator[_ngcontent-%COMP%] {\n opacity: 1;\n transform: scale(1.1);\n}\n\n.related-entity-item[_ngcontent-%COMP%]:hover .fa-database[_ngcontent-%COMP%] {\n color: var(--mat-sys-primary);\n transform: scale(1.1);\n}\n\n.related-entity-item[_ngcontent-%COMP%]:hover::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(to bottom, var(--mat-sys-primary), var(--mat-sys-secondary));\n border-radius: 0 3px 3px 0;\n}\n\n.related-entity-item[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n margin-right: 10px;\n color: var(--mat-sys-on-surface-variant);\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.related-entity-item[_ngcontent-%COMP%] .fa-database[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.related-entity-item[_ngcontent-%COMP%] .entity-name[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n\n.related-entity-item[_ngcontent-%COMP%] .zoom-indicator[_ngcontent-%COMP%] {\n opacity: 0.4;\n color: var(--mat-sys-primary);\n font-size: 11px;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}"] });
662
662
  }
663
663
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityDetailsComponent, [{
664
664
  type: Component,
665
- args: [{ selector: 'mj-entity-details', template: "<div class=\"details-panel\">\n <div class=\"panel-header\">\n <h3>{{ selectedEntity?.Name || selectedEntity?.SchemaName }}</h3>\n <div class=\"panel-actions\">\n <button class=\"open-btn\" (click)=\"onOpenEntity()\" title=\"Open Entity Record\">\n <span class=\"fa-solid fa-external-link-alt\"></span>\n Open\n </button>\n <button class=\"close-btn\" (click)=\"onClosePanel()\">\n <span class=\"fa-solid fa-times\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"entity-info\">\n <div class=\"info-row\">\n <label>Schema:</label>\n <span>{{ selectedEntity?.SchemaName }}</span>\n </div>\n <div class=\"info-row\">\n <label>Table:</label>\n <span>{{ selectedEntity?.BaseTable }}</span>\n </div>\n @if (selectedEntity?.Description) {\n <div class=\"info-row\">\n <label>Description:</label>\n <span>{{ selectedEntity?.Description }}</span>\n </div>\n }\n </div>\n\n <div class=\"fields-section\" [class.section-expanded]=\"fieldsSectionExpanded\" [class.section-collapsed]=\"!fieldsSectionExpanded\">\n <div class=\"section-header extra-padding\">\n <div class=\"section-title-group\" (click)=\"toggleFieldsSection()\">\n <button\n class=\"expand-btn\"\n [class.expanded]=\"fieldsSectionExpanded\"\n title=\"Toggle fields section\">\n <span class=\"fa-solid fa-chevron-right\"></span>\n </button>\n <h4>Fields ({{ selectedEntity ? getEntityFields(selectedEntity.ID).length : 0 }})</h4>\n </div>\n @if (fieldsSectionExpanded) {\n <div class=\"field-filters\">\n <button\n class=\"filter-btn\"\n [class.active]=\"fieldFilter === 'all'\"\n (click)=\"setFieldFilter('all')\"\n title=\"Show all fields\">\n All\n </button>\n <button\n class=\"filter-btn\"\n [class.active]=\"fieldFilter === 'keys'\"\n (click)=\"setFieldFilter('keys')\"\n title=\"Show primary keys and ID fields\">\n Keys\n </button>\n <button\n class=\"filter-btn\"\n [class.active]=\"fieldFilter === 'foreign_keys'\"\n (click)=\"setFieldFilter('foreign_keys')\"\n title=\"Show foreign key fields only\">\n FKs\n </button>\n <button\n class=\"filter-btn\"\n [class.active]=\"fieldFilter === 'regular'\"\n (click)=\"setFieldFilter('regular')\"\n title=\"Show regular data fields\">\n Regular\n </button>\n </div>\n }\n </div>\n @if (fieldsSectionExpanded) {\n <div class=\"fields-list\" #fieldsListContainer>\n @for (field of getEntityFields(selectedEntity?.ID || ''); track field.ID) {\n <div class=\"field-item\"\n [class]=\"{\n 'primary-key-field': field.IsPrimaryKey,\n 'foreign-key-field': field.RelatedEntityID && !field.IsPrimaryKey,\n 'regular-field': !field.IsPrimaryKey && !field.RelatedEntityID,\n 'field-expanded': isFieldDetailsExpanded(field.ID)\n }\"\n (click)=\"onFieldClick(field)\"\n [title]=\"'Click to see more details about ' + field.Name\">\n <div class=\"field-header\">\n <div class=\"field-name\">\n @if (field.IsPrimaryKey) {\n <span class=\"field-icon fa-solid fa-key\" title=\"Primary Key\"></span>\n } @else if (field.RelatedEntityID) {\n <span class=\"field-icon fa-solid fa-link\" title=\"Foreign Key\"></span>\n }\n {{ field.Name }}\n </div>\n <div class=\"field-actions\">\n @if (hasFieldPossibleValues(field)) {\n <button\n class=\"field-values-btn\"\n (click)=\"toggleFieldValues(field.ID)\"\n [class.expanded]=\"isFieldValuesExpanded(field.ID)\"\n title=\"Toggle possible values\">\n <span class=\"fa-solid fa-list\"></span>\n </button>\n }\n @if (field.Description) {\n <button\n class=\"field-info-btn\"\n (click)=\"toggleFieldDescription(field.ID)\"\n [class.expanded]=\"isFieldDescriptionExpanded(field.ID)\"\n title=\"Toggle field description\">\n <span class=\"fa-solid fa-info-circle\"></span>\n </button>\n }\n <div class=\"field-badges\">\n @if (field.IsPrimaryKey) {\n <span class=\"field-badge primary-key\">PK</span>\n }\n @if (field.RelatedEntityID && !field.IsPrimaryKey) {\n <span class=\"field-badge foreign-key\">FK</span>\n }\n </div>\n </div>\n </div>\n <div class=\"field-details\">\n <div class=\"field-type\">{{ field.Type }}</div>\n @if (field.RelatedEntityID) {\n <div class=\"field-relation\">\n <span class=\"fa-solid fa-arrow-right\"></span>\n Related Entity\n </div>\n }\n </div>\n @if (field.Description && isFieldDescriptionExpanded(field.ID)) {\n <div class=\"field-description\">\n <div class=\"description-text\">{{ field.Description }}</div>\n </div>\n }\n @if (hasFieldPossibleValues(field) && isFieldValuesExpanded(field.ID)) {\n <div class=\"field-values\">\n <div class=\"values-header\">Possible Values:</div>\n <div class=\"values-list\">\n @for (value of getFieldPossibleValues(field); track value; let i = $index) {\n <span class=\"value-tag\">{{ value }}</span>\n }\n </div>\n </div>\n }\n @if (isFieldDetailsExpanded(field.ID)) {\n <div class=\"field-comprehensive-details\">\n @if (field.Description) {\n <div class=\"comprehensive-description-top\">\n <div class=\"description-content\">{{ field.Description }}</div>\n </div>\n }\n @if (field.EntityFieldValues && field.EntityFieldValues.length > 0) {\n <div class=\"field-values-comprehensive\">\n <div class=\"values-header\">\n <span class=\"fa-solid fa-list\"></span>\n Possible Values ({{ field.EntityFieldValues.length }})\n </div>\n <div class=\"values-grid\">\n @for (fieldValue of getSortedEntityFieldValues(field); track fieldValue.ID) {\n <div class=\"value-item\">\n <div class=\"value-main\">\n <span class=\"value-text\">{{ fieldValue.Value }}</span>\n @if (fieldValue.Code && fieldValue.Code !== fieldValue.Value) {\n <span class=\"value-code\">[{{ fieldValue.Code }}]</span>\n }\n </div>\n @if (fieldValue.Description && fieldValue.Description !== fieldValue.Value) {\n <div class=\"value-description\">{{ fieldValue.Description }}</div>\n }\n </div>\n }\n </div>\n </div>\n }\n <div class=\"details-grid\">\n <div class=\"detail-row\">\n <span class=\"detail-label\">Data Type:</span>\n <span class=\"detail-value\">{{ field.Type }}</span>\n </div>\n <div class=\"detail-row\">\n <span class=\"detail-label\">Nullable:</span>\n <span class=\"detail-value\" [class]=\"field.AllowsNull ? 'nullable-yes' : 'nullable-no'\">\n {{ field.AllowsNull ? 'Yes' : 'No' }}\n </span>\n </div>\n @if (field.Length && field.Length > 0) {\n <div class=\"detail-row\">\n <span class=\"detail-label\">Max Length:</span>\n <span class=\"detail-value\">{{ field.Length }}</span>\n </div>\n }\n @if (field.Precision && field.Precision > 0) {\n <div class=\"detail-row\">\n <span class=\"detail-label\">Precision:</span>\n <span class=\"detail-value\">{{ field.Precision }}</span>\n </div>\n }\n @if (field.Scale && field.Scale > 0) {\n <div class=\"detail-row\">\n <span class=\"detail-label\">Scale:</span>\n <span class=\"detail-value\">{{ field.Scale }}</span>\n </div>\n }\n <div class=\"detail-row\">\n <span class=\"detail-label\">Virtual Field:</span>\n <span class=\"detail-value\" [class]=\"field.IsVirtual ? 'virtual-yes' : 'virtual-no'\">\n {{ field.IsVirtual ? 'Yes' : 'No' }}\n </span>\n </div>\n @if (field.DefaultValue) {\n <div class=\"detail-row\">\n <span class=\"detail-label\">Default Value:</span>\n <span class=\"detail-value default-value\">{{ field.DefaultValue }}</span>\n </div>\n }\n @if (field.RelatedEntityID) {\n <div class=\"detail-row\">\n <span class=\"detail-label\">Related Entity:</span>\n <span class=\"detail-value related-entity\"\n (click)=\"onRelatedEntityClick($event, field)\"\n title=\"Click to select {{ field.RelatedEntity }} in ERD\">\n {{ field.RelatedEntity }}\n <span class=\"fa-solid fa-arrow-right\"></span>\n </span>\n </div>\n }\n @if (field.AutoIncrement) {\n <div class=\"detail-row\">\n <span class=\"detail-label\">Auto Increment:</span>\n <span class=\"detail-value auto-increment\">Yes</span>\n </div>\n }\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n\n <div class=\"relationships-section\" [class.section-expanded]=\"relationshipsSectionExpanded\" [class.section-collapsed]=\"!relationshipsSectionExpanded\">\n <div class=\"section-header extra-padding\">\n <div class=\"section-title-group\" (click)=\"toggleRelationshipsSection()\">\n <button\n class=\"expand-btn\"\n [class.expanded]=\"relationshipsSectionExpanded\"\n title=\"Toggle relationships section\">\n <span class=\"fa-solid fa-chevron-right\"></span>\n </button>\n <h4>Related Entities ({{ selectedEntity ? getRelatedEntities(selectedEntity.ID).length : 0 }})</h4>\n </div>\n </div>\n @if (relationshipsSectionExpanded) {\n <div class=\"related-entities-list\" #relationshipsListContainer>\n @for (relatedEntity of getRelatedEntities(selectedEntity?.ID || ''); track relatedEntity.ID) {\n <div class=\"related-entity-item\" (click)=\"selectEntity(relatedEntity, true)\">\n <span class=\"fa-solid fa-database\"></span>\n <span class=\"entity-name\">{{ relatedEntity.Name || relatedEntity.SchemaName }}</span>\n <span class=\"zoom-indicator fa-solid fa-search-plus\" title=\"Click to zoom to entity\"></span>\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".details-panel {\n height: 100%;\n background: white;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.details-panel .panel-header {\n flex-shrink: 0;\n}\n.details-panel .entity-info {\n flex-shrink: 0;\n}\n.details-panel .fields-section,\n.details-panel .relationships-section {\n display: flex;\n flex-direction: column;\n min-height: 0;\n transition: flex 0.3s ease;\n}\n.details-panel .fields-section.section-expanded,\n.details-panel .relationships-section.section-expanded {\n flex: 1;\n}\n.details-panel .fields-section.section-collapsed,\n.details-panel .relationships-section.section-collapsed {\n flex: 0 0 auto;\n}\n.details-panel .fields-section:last-child,\n.details-panel .relationships-section:last-child {\n border-bottom: none;\n}\n\n.panel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background-color: #f5f5f5;\n border-bottom: 1px solid #e0e0e0;\n}\n.panel-header h3 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.panel-actions {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.open-btn {\n padding: 4px 8px;\n border: 1px solid #4caf50;\n border-radius: 4px;\n background: #4caf50;\n color: white;\n cursor: pointer;\n font-size: 10px;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.open-btn:hover {\n background-color: #45a049;\n border-color: #45a049;\n}\n\n.close-btn {\n padding: 4px;\n border: none;\n background: none;\n cursor: pointer;\n color: #666;\n}\n.close-btn:hover {\n color: #333;\n}\n\n.entity-info {\n padding: 16px;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.info-row {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n font-size: 12px;\n}\n.info-row:last-child {\n margin-bottom: 0;\n}\n.info-row label {\n font-weight: 600;\n color: #666;\n min-width: 60px;\n}\n.info-row span {\n color: #333;\n flex: 1;\n text-align: right;\n}\n\n.status-badge {\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n}\n.status-badge.status-active {\n background-color: #e8f5e8;\n color: #2e7d32;\n}\n.status-badge.status-deprecated {\n background-color: #fff3e0;\n color: #f57c00;\n}\n.status-badge.status-disabled {\n background-color: #ffebee;\n color: #c62828;\n}\n\n.extra-padding {\n padding: 4px;\n}\n\n.fields-section, .relationships-section {\n border-bottom: 1px solid #d0d0d0;\n}\n.fields-section .section-header, .relationships-section .section-header {\n flex-shrink: 0;\n padding: 16px 16px 12px 16px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #f8f9fa;\n border: none;\n border-bottom: 1px solid #e9ecef;\n}\n.fields-section .section-header .section-title-group, .relationships-section .section-header .section-title-group {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.fields-section h4, .relationships-section h4 {\n margin: 0;\n font-size: 12px;\n font-weight: 600;\n color: #333;\n}\n\n.expand-btn {\n padding: 4px;\n border: none;\n background: none;\n cursor: pointer;\n color: #666;\n border-radius: 3px;\n transition: all 0.2s ease;\n}\n.expand-btn:hover {\n background-color: #f0f0f0;\n color: #333;\n}\n.expand-btn .fa-solid {\n font-size: 10px;\n transition: transform 0.2s ease;\n}\n.expand-btn.expanded .fa-solid {\n transform: rotate(90deg);\n}\n\n.section-title-group {\n cursor: pointer;\n user-select: none;\n}\n.section-title-group:hover {\n opacity: 0.8;\n}\n\n.field-filters {\n display: flex;\n gap: 4px;\n}\n\n.filter-btn {\n padding: 4px 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n background: white;\n cursor: pointer;\n font-size: 10px;\n color: #666;\n transition: all 0.2s;\n}\n.filter-btn:hover {\n background-color: #f0f0f0;\n}\n.filter-btn.active {\n background-color: #2196f3;\n border-color: #2196f3;\n color: white;\n}\n\n.fields-list, .related-entities-list {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n overflow-y: auto;\n padding: 6px 16px 16px 16px;\n min-height: 0;\n}\n.fields-list::-webkit-scrollbar, .related-entities-list::-webkit-scrollbar {\n width: 6px;\n}\n.fields-list::-webkit-scrollbar-track, .related-entities-list::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 3px;\n}\n.fields-list::-webkit-scrollbar-thumb, .related-entities-list::-webkit-scrollbar-thumb {\n background: #c1c1c1;\n border-radius: 3px;\n}\n.fields-list::-webkit-scrollbar-thumb:hover, .related-entities-list::-webkit-scrollbar-thumb:hover {\n background: #a1a1a1;\n}\n\n.field-item {\n padding: 8px;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n font-size: 11px;\n cursor: pointer;\n user-select: none;\n transition: all 0.2s ease;\n}\n.field-item:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n.field-item.field-expanded {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n transform: scale(1.02);\n}\n.field-item.primary-key-field {\n border-color: #ff9800;\n background-color: #fff8e1;\n border-left: 4px solid #ff9800;\n}\n.field-item.primary-key-field.field-expanded {\n box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);\n}\n.field-item.foreign-key-field {\n border-color: #2196f3;\n background-color: #f3f9ff;\n border-left: 4px solid #2196f3;\n}\n.field-item.foreign-key-field.field-expanded {\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n}\n.field-item.regular-field {\n border-color: #e0e0e0;\n background-color: #fafafa;\n}\n.field-item.regular-field.field-expanded {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.field-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 4px;\n}\n\n.field-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.field-name {\n font-weight: 600;\n color: #333;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.field-icon {\n font-size: 10px;\n}\n.field-icon.fa-key {\n color: #ff9800;\n}\n.field-icon.fa-link {\n color: #2196f3;\n}\n\n.field-badges {\n display: flex;\n gap: 4px;\n}\n\n.field-badge {\n padding: 1px 4px;\n border-radius: 2px;\n font-size: 8px;\n font-weight: 700;\n text-transform: uppercase;\n}\n.field-badge.primary-key {\n background-color: #ff9800;\n color: white;\n}\n.field-badge.foreign-key {\n background-color: #2196f3;\n color: white;\n}\n\n.field-type {\n color: #666;\n font-size: 10px;\n}\n\n.field-relation {\n color: #2196f3;\n font-size: 10px;\n margin-top: 4px;\n}\n.field-relation .fa-solid {\n margin-right: 4px;\n}\n\n.field-info-btn,\n.field-values-btn {\n padding: 2px 4px;\n border: none;\n background: none;\n cursor: pointer;\n color: #999;\n border-radius: 3px;\n transition: all 0.2s ease;\n}\n.field-info-btn:hover,\n.field-values-btn:hover {\n background-color: #e3f2fd;\n color: #2196f3;\n}\n.field-info-btn.expanded,\n.field-values-btn.expanded {\n color: #2196f3;\n background-color: #e3f2fd;\n}\n.field-info-btn .fa-solid,\n.field-values-btn .fa-solid {\n font-size: 10px;\n}\n\n.field-description {\n margin-top: 8px;\n padding: 8px;\n background-color: #f8f9fa;\n border-left: 3px solid #2196f3;\n border-radius: 0 4px 4px 0;\n animation: fadeIn 0.3s ease-in-out;\n}\n.field-description .description-text {\n font-size: 10px;\n color: #555;\n line-height: 1.4;\n font-style: italic;\n}\n\n.field-details {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(-5px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.field-values {\n margin-top: 8px;\n padding: 8px;\n background-color: #f8f4ff;\n border-left: 3px solid #9c27b0;\n border-radius: 0 4px 4px 0;\n animation: fadeIn 0.3s ease-in-out;\n}\n.field-values .values-header {\n font-size: 10px;\n color: #9c27b0;\n font-weight: 600;\n margin-bottom: 6px;\n}\n.field-values .values-list {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n}\n.field-values .value-tag {\n display: inline-block;\n padding: 2px 6px;\n background-color: #e1bee7;\n color: #4a148c;\n font-size: 9px;\n border-radius: 10px;\n font-weight: 500;\n white-space: nowrap;\n max-width: 80px;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.field-values .value-tag:hover {\n background-color: #ce93d8;\n color: #2e003e;\n cursor: default;\n}\n\n.field-comprehensive-details {\n margin-top: 12px;\n padding: 12px;\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n border: 1px solid #dee2e6;\n border-radius: 6px;\n animation: slideDown 0.3s ease-out;\n}\n.field-comprehensive-details .details-header {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n font-weight: 600;\n color: #495057;\n margin-bottom: 10px;\n padding-bottom: 6px;\n border-bottom: 1px solid #dee2e6;\n}\n.field-comprehensive-details .details-header .fa-solid {\n color: #6c757d;\n}\n.field-comprehensive-details .details-grid {\n display: grid;\n gap: 6px;\n}\n.field-comprehensive-details .detail-row {\n display: grid;\n grid-template-columns: 100px 1fr;\n gap: 8px;\n font-size: 10px;\n align-items: center;\n}\n.field-comprehensive-details .detail-label {\n font-weight: 600;\n color: #6c757d;\n text-align: right;\n}\n.field-comprehensive-details .detail-value {\n color: #495057;\n font-family: \"Courier New\", monospace;\n background-color: #fff;\n padding: 2px 6px;\n border-radius: 3px;\n border: 1px solid #dee2e6;\n}\n.field-comprehensive-details .detail-value.nullable-yes, .field-comprehensive-details .detail-value.nullable-no {\n color: #495057;\n background-color: #fff;\n border-color: #dee2e6;\n}\n.field-comprehensive-details .detail-value.virtual-yes {\n color: #6f42c1;\n background-color: #e2d9f3;\n border-color: #d1c4e9;\n}\n.field-comprehensive-details .detail-value.virtual-no {\n color: #6c757d;\n}\n.field-comprehensive-details .detail-value.default-value {\n color: #856404;\n background-color: #fff3cd;\n border-color: #ffeaa7;\n}\n.field-comprehensive-details .detail-value.related-entity {\n color: #0066cc;\n background-color: #cce5ff;\n border-color: #99d6ff;\n cursor: pointer;\n user-select: none;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.field-comprehensive-details .detail-value.related-entity:hover {\n text-decoration: underline;\n background-color: #b3d9ff;\n border-color: #66c2ff;\n transform: translateX(2px);\n}\n.field-comprehensive-details .detail-value.related-entity .fa-external-link-alt {\n font-size: 8px;\n opacity: 0.7;\n transition: opacity 0.2s ease;\n}\n.field-comprehensive-details .detail-value.related-entity:hover .fa-external-link-alt {\n opacity: 1;\n}\n.field-comprehensive-details .detail-value.auto-increment {\n color: #20c997;\n background-color: #d1ecf1;\n border-color: #bee5eb;\n}\n.field-comprehensive-details .comprehensive-description-top {\n margin-bottom: 12px;\n padding-bottom: 10px;\n border-bottom: 1px solid #dee2e6;\n}\n.field-comprehensive-details .comprehensive-description-top .description-content {\n font-size: 11px;\n color: #495057;\n line-height: 1.4;\n font-style: italic;\n background: linear-gradient(135deg, #e3f2fd 0%, #f8f9fa 100%);\n padding: 10px;\n border-radius: 6px;\n border: 1px solid #bee5eb;\n border-left: 4px solid #17a2b8;\n}\n.field-comprehensive-details .field-values-comprehensive {\n margin-bottom: 12px;\n padding: 12px;\n background: linear-gradient(135deg, #f3e5f5 0%, #fce4ec 100%);\n border: 1px solid #e1bee7;\n border-radius: 6px;\n border-left: 4px solid #9c27b0;\n}\n.field-comprehensive-details .field-values-comprehensive .values-header {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n font-weight: 600;\n color: #6a1b9a;\n margin-bottom: 10px;\n padding-bottom: 6px;\n border-bottom: 1px solid #e1bee7;\n}\n.field-comprehensive-details .field-values-comprehensive .values-header .fa-solid {\n color: #9c27b0;\n}\n.field-comprehensive-details .field-values-comprehensive .values-grid {\n display: flex;\n flex-direction: column;\n gap: 6px;\n max-height: 200px;\n overflow-y: auto;\n}\n.field-comprehensive-details .field-values-comprehensive .values-grid::-webkit-scrollbar {\n width: 4px;\n}\n.field-comprehensive-details .field-values-comprehensive .values-grid::-webkit-scrollbar-track {\n background: #f3e5f5;\n border-radius: 2px;\n}\n.field-comprehensive-details .field-values-comprehensive .values-grid::-webkit-scrollbar-thumb {\n background: #ce93d8;\n border-radius: 2px;\n}\n.field-comprehensive-details .field-values-comprehensive .values-grid::-webkit-scrollbar-thumb:hover {\n background: #ba68c8;\n}\n.field-comprehensive-details .field-values-comprehensive .value-item {\n padding: 8px;\n background: white;\n border: 1px solid #e1bee7;\n border-radius: 4px;\n}\n.field-comprehensive-details .field-values-comprehensive .value-item .value-main {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-bottom: 2px;\n}\n.field-comprehensive-details .field-values-comprehensive .value-item .value-main .value-text {\n font-size: 10px;\n font-weight: 600;\n color: #4a148c;\n}\n.field-comprehensive-details .field-values-comprehensive .value-item .value-main .value-code {\n font-size: 9px;\n color: #7b1fa2;\n background: #f3e5f5;\n padding: 1px 4px;\n border-radius: 3px;\n border: 1px solid #e1bee7;\n font-family: \"Courier New\", monospace;\n}\n.field-comprehensive-details .field-values-comprehensive .value-item .value-description {\n font-size: 9px;\n color: #666;\n line-height: 1.3;\n font-style: italic;\n margin-top: 2px;\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n max-height: 0;\n }\n to {\n opacity: 1;\n transform: translateY(0);\n max-height: 500px;\n }\n}\n.related-entity-item {\n padding: 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n cursor: pointer;\n font-size: 12px;\n color: #333;\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: all 0.3s ease;\n position: relative;\n max-width: calc(100% - 4px);\n min-width: 0;\n flex-shrink: 1;\n}\n.related-entity-item:hover {\n background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);\n border-color: #2196f3;\n transform: translateX(4px);\n box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);\n}\n.related-entity-item:hover .zoom-indicator {\n opacity: 1;\n transform: scale(1.1);\n}\n.related-entity-item:hover .fa-database {\n color: #2196f3;\n transform: scale(1.1);\n}\n.related-entity-item:hover::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(to bottom, #2196f3, #9c27b0);\n border-radius: 0 3px 3px 0;\n}\n.related-entity-item .fa-solid {\n margin-right: 10px;\n color: #666;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n.related-entity-item .fa-database {\n font-size: 14px;\n}\n.related-entity-item .entity-name {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n.related-entity-item .zoom-indicator {\n opacity: 0.4;\n color: #2196f3;\n font-size: 11px;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n"] }]
665
+ args: [{ selector: 'mj-entity-details', template: "<div class=\"details-panel\">\n <div class=\"panel-header\">\n <h3>{{ selectedEntity?.Name || selectedEntity?.SchemaName }}</h3>\n <div class=\"panel-actions\">\n <button class=\"open-btn\" (click)=\"onOpenEntity()\" title=\"Open Entity Record\">\n <span class=\"fa-solid fa-external-link-alt\"></span>\n Open\n </button>\n <button class=\"close-btn\" (click)=\"onClosePanel()\">\n <span class=\"fa-solid fa-times\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"entity-info\">\n <div class=\"info-row\">\n <label>Schema:</label>\n <span>{{ selectedEntity?.SchemaName }}</span>\n </div>\n <div class=\"info-row\">\n <label>Table:</label>\n <span>{{ selectedEntity?.BaseTable }}</span>\n </div>\n @if (selectedEntity?.Description) {\n <div class=\"info-row\">\n <label>Description:</label>\n <span>{{ selectedEntity?.Description }}</span>\n </div>\n }\n </div>\n\n <div class=\"fields-section\" [class.section-expanded]=\"fieldsSectionExpanded\" [class.section-collapsed]=\"!fieldsSectionExpanded\">\n <div class=\"section-header extra-padding\">\n <div class=\"section-title-group\" (click)=\"toggleFieldsSection()\">\n <button\n class=\"expand-btn\"\n [class.expanded]=\"fieldsSectionExpanded\"\n title=\"Toggle fields section\">\n <span class=\"fa-solid fa-chevron-right\"></span>\n </button>\n <h4>Fields ({{ selectedEntity ? getEntityFields(selectedEntity.ID).length : 0 }})</h4>\n </div>\n @if (fieldsSectionExpanded) {\n <div class=\"field-filters\">\n <button\n class=\"filter-btn\"\n [class.active]=\"fieldFilter === 'all'\"\n (click)=\"setFieldFilter('all')\"\n title=\"Show all fields\">\n All\n </button>\n <button\n class=\"filter-btn\"\n [class.active]=\"fieldFilter === 'keys'\"\n (click)=\"setFieldFilter('keys')\"\n title=\"Show primary keys and ID fields\">\n Keys\n </button>\n <button\n class=\"filter-btn\"\n [class.active]=\"fieldFilter === 'foreign_keys'\"\n (click)=\"setFieldFilter('foreign_keys')\"\n title=\"Show foreign key fields only\">\n FKs\n </button>\n <button\n class=\"filter-btn\"\n [class.active]=\"fieldFilter === 'regular'\"\n (click)=\"setFieldFilter('regular')\"\n title=\"Show regular data fields\">\n Regular\n </button>\n </div>\n }\n </div>\n @if (fieldsSectionExpanded) {\n <div class=\"fields-list\" #fieldsListContainer>\n @for (field of getEntityFields(selectedEntity?.ID || ''); track field.ID) {\n <div class=\"field-item\"\n [class]=\"{\n 'primary-key-field': field.IsPrimaryKey,\n 'foreign-key-field': field.RelatedEntityID && !field.IsPrimaryKey,\n 'regular-field': !field.IsPrimaryKey && !field.RelatedEntityID,\n 'field-expanded': isFieldDetailsExpanded(field.ID)\n }\"\n (click)=\"onFieldClick(field)\"\n [title]=\"'Click to see more details about ' + field.Name\">\n <div class=\"field-header\">\n <div class=\"field-name\">\n @if (field.IsPrimaryKey) {\n <span class=\"field-icon fa-solid fa-key\" title=\"Primary Key\"></span>\n } @else if (field.RelatedEntityID) {\n <span class=\"field-icon fa-solid fa-link\" title=\"Foreign Key\"></span>\n }\n {{ field.Name }}\n </div>\n <div class=\"field-actions\">\n @if (hasFieldPossibleValues(field)) {\n <button\n class=\"field-values-btn\"\n (click)=\"toggleFieldValues(field.ID)\"\n [class.expanded]=\"isFieldValuesExpanded(field.ID)\"\n title=\"Toggle possible values\">\n <span class=\"fa-solid fa-list\"></span>\n </button>\n }\n @if (field.Description) {\n <button\n class=\"field-info-btn\"\n (click)=\"toggleFieldDescription(field.ID)\"\n [class.expanded]=\"isFieldDescriptionExpanded(field.ID)\"\n title=\"Toggle field description\">\n <span class=\"fa-solid fa-info-circle\"></span>\n </button>\n }\n <div class=\"field-badges\">\n @if (field.IsPrimaryKey) {\n <span class=\"field-badge primary-key\">PK</span>\n }\n @if (field.RelatedEntityID && !field.IsPrimaryKey) {\n <span class=\"field-badge foreign-key\">FK</span>\n }\n </div>\n </div>\n </div>\n <div class=\"field-details\">\n <div class=\"field-type\">{{ field.Type }}</div>\n @if (field.RelatedEntityID) {\n <div class=\"field-relation\">\n <span class=\"fa-solid fa-arrow-right\"></span>\n Related Entity\n </div>\n }\n </div>\n @if (field.Description && isFieldDescriptionExpanded(field.ID)) {\n <div class=\"field-description\">\n <div class=\"description-text\">{{ field.Description }}</div>\n </div>\n }\n @if (hasFieldPossibleValues(field) && isFieldValuesExpanded(field.ID)) {\n <div class=\"field-values\">\n <div class=\"values-header\">Possible Values:</div>\n <div class=\"values-list\">\n @for (value of getFieldPossibleValues(field); track value; let i = $index) {\n <span class=\"value-tag\">{{ value }}</span>\n }\n </div>\n </div>\n }\n @if (isFieldDetailsExpanded(field.ID)) {\n <div class=\"field-comprehensive-details\">\n @if (field.Description) {\n <div class=\"comprehensive-description-top\">\n <div class=\"description-content\">{{ field.Description }}</div>\n </div>\n }\n @if (field.EntityFieldValues && field.EntityFieldValues.length > 0) {\n <div class=\"field-values-comprehensive\">\n <div class=\"values-header\">\n <span class=\"fa-solid fa-list\"></span>\n Possible Values ({{ field.EntityFieldValues.length }})\n </div>\n <div class=\"values-grid\">\n @for (fieldValue of getSortedEntityFieldValues(field); track fieldValue.ID) {\n <div class=\"value-item\">\n <div class=\"value-main\">\n <span class=\"value-text\">{{ fieldValue.Value }}</span>\n @if (fieldValue.Code && fieldValue.Code !== fieldValue.Value) {\n <span class=\"value-code\">[{{ fieldValue.Code }}]</span>\n }\n </div>\n @if (fieldValue.Description && fieldValue.Description !== fieldValue.Value) {\n <div class=\"value-description\">{{ fieldValue.Description }}</div>\n }\n </div>\n }\n </div>\n </div>\n }\n <div class=\"details-grid\">\n <div class=\"detail-row\">\n <span class=\"detail-label\">Data Type:</span>\n <span class=\"detail-value\">{{ field.Type }}</span>\n </div>\n <div class=\"detail-row\">\n <span class=\"detail-label\">Nullable:</span>\n <span class=\"detail-value\" [class]=\"field.AllowsNull ? 'nullable-yes' : 'nullable-no'\">\n {{ field.AllowsNull ? 'Yes' : 'No' }}\n </span>\n </div>\n @if (field.Length && field.Length > 0) {\n <div class=\"detail-row\">\n <span class=\"detail-label\">Max Length:</span>\n <span class=\"detail-value\">{{ field.Length }}</span>\n </div>\n }\n @if (field.Precision && field.Precision > 0) {\n <div class=\"detail-row\">\n <span class=\"detail-label\">Precision:</span>\n <span class=\"detail-value\">{{ field.Precision }}</span>\n </div>\n }\n @if (field.Scale && field.Scale > 0) {\n <div class=\"detail-row\">\n <span class=\"detail-label\">Scale:</span>\n <span class=\"detail-value\">{{ field.Scale }}</span>\n </div>\n }\n <div class=\"detail-row\">\n <span class=\"detail-label\">Virtual Field:</span>\n <span class=\"detail-value\" [class]=\"field.IsVirtual ? 'virtual-yes' : 'virtual-no'\">\n {{ field.IsVirtual ? 'Yes' : 'No' }}\n </span>\n </div>\n @if (field.DefaultValue) {\n <div class=\"detail-row\">\n <span class=\"detail-label\">Default Value:</span>\n <span class=\"detail-value default-value\">{{ field.DefaultValue }}</span>\n </div>\n }\n @if (field.RelatedEntityID) {\n <div class=\"detail-row\">\n <span class=\"detail-label\">Related Entity:</span>\n <span class=\"detail-value related-entity\"\n (click)=\"onRelatedEntityClick($event, field)\"\n title=\"Click to select {{ field.RelatedEntity }} in ERD\">\n {{ field.RelatedEntity }}\n <span class=\"fa-solid fa-arrow-right\"></span>\n </span>\n </div>\n }\n @if (field.AutoIncrement) {\n <div class=\"detail-row\">\n <span class=\"detail-label\">Auto Increment:</span>\n <span class=\"detail-value auto-increment\">Yes</span>\n </div>\n }\n </div>\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n\n <div class=\"relationships-section\" [class.section-expanded]=\"relationshipsSectionExpanded\" [class.section-collapsed]=\"!relationshipsSectionExpanded\">\n <div class=\"section-header extra-padding\">\n <div class=\"section-title-group\" (click)=\"toggleRelationshipsSection()\">\n <button\n class=\"expand-btn\"\n [class.expanded]=\"relationshipsSectionExpanded\"\n title=\"Toggle relationships section\">\n <span class=\"fa-solid fa-chevron-right\"></span>\n </button>\n <h4>Related Entities ({{ selectedEntity ? getRelatedEntities(selectedEntity.ID).length : 0 }})</h4>\n </div>\n </div>\n @if (relationshipsSectionExpanded) {\n <div class=\"related-entities-list\" #relationshipsListContainer>\n @for (relatedEntity of getRelatedEntities(selectedEntity?.ID || ''); track relatedEntity.ID) {\n <div class=\"related-entity-item\" (click)=\"selectEntity(relatedEntity, true)\">\n <span class=\"fa-solid fa-database\"></span>\n <span class=\"entity-name\">{{ relatedEntity.Name || relatedEntity.SchemaName }}</span>\n <span class=\"zoom-indicator fa-solid fa-search-plus\" title=\"Click to zoom to entity\"></span>\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: ["/**\n * Entity Details Component - MD3 Styled\n * Material Design 3 theming for the entity details panel\n */\n\n.details-panel {\n height: 100%;\n background: var(--mat-sys-surface);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.details-panel .panel-header {\n flex-shrink: 0;\n}\n\n.details-panel .entity-info {\n flex-shrink: 0;\n}\n\n.details-panel .fields-section,\n.details-panel .relationships-section {\n display: flex;\n flex-direction: column;\n min-height: 0;\n transition: flex 0.3s ease;\n}\n\n.details-panel .fields-section.section-expanded,\n.details-panel .relationships-section.section-expanded {\n flex: 1;\n}\n\n.details-panel .fields-section.section-collapsed,\n.details-panel .relationships-section.section-collapsed {\n flex: 0 0 auto;\n}\n\n.details-panel .fields-section:last-child,\n.details-panel .relationships-section:last-child {\n border-bottom: none;\n}\n\n/* Panel Header - MD3 Surface Container */\n.panel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--mat-sys-surface-container);\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.panel-header h3 {\n margin: 0;\n font: var(--mat-sys-title-medium);\n color: var(--mat-sys-on-surface);\n}\n\n.panel-actions {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n/* MD3 Filled Button for Open */\n.open-btn {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 6px 12px;\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n border: none;\n border-radius: 20px;\n font: var(--mat-sys-label-small);\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n.open-btn:hover {\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n/* MD3 Icon Button for Close */\n.close-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n border: none;\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.close-btn:hover {\n background: var(--mat-sys-surface-container-highest);\n color: var(--mat-sys-on-surface);\n}\n\n/* Entity Info Section */\n.entity-info {\n padding: 16px;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.info-row {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n font: var(--mat-sys-body-small);\n}\n\n.info-row:last-child {\n margin-bottom: 0;\n}\n\n.info-row label {\n font-weight: 600;\n color: var(--mat-sys-on-surface-variant);\n min-width: 60px;\n}\n\n.info-row span {\n color: var(--mat-sys-on-surface);\n flex: 1;\n text-align: right;\n}\n\n/* MD3 Status Badges */\n.status-badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n border-radius: 8px;\n font: var(--mat-sys-label-small);\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-badge.status-active {\n background: var(--mat-sys-tertiary-container);\n color: var(--mat-sys-on-tertiary-container);\n}\n\n.status-badge.status-deprecated {\n background: var(--mat-sys-secondary-container);\n color: var(--mat-sys-on-secondary-container);\n}\n\n.status-badge.status-disabled {\n background: var(--mat-sys-error-container);\n color: var(--mat-sys-on-error-container);\n}\n\n.extra-padding {\n padding: 4px;\n}\n\n/* Fields and Relationships Sections */\n.fields-section,\n.relationships-section {\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.fields-section .section-header,\n.relationships-section .section-header {\n flex-shrink: 0;\n padding: 16px 16px 12px 16px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--mat-sys-surface-container-low);\n border: none;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.fields-section .section-header .section-title-group,\n.relationships-section .section-header .section-title-group {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.fields-section h4,\n.relationships-section h4 {\n margin: 0;\n font: var(--mat-sys-title-small);\n color: var(--mat-sys-on-surface);\n}\n\n/* MD3 Expand Button */\n.expand-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n border: none;\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.expand-btn:hover {\n background: var(--mat-sys-surface-container-highest);\n color: var(--mat-sys-on-surface);\n}\n\n.expand-btn .fa-solid {\n font-size: 10px;\n transition: transform 0.2s ease;\n}\n\n.expand-btn.expanded .fa-solid {\n transform: rotate(90deg);\n}\n\n.section-title-group {\n cursor: pointer;\n user-select: none;\n}\n\n.section-title-group:hover {\n opacity: 0.8;\n}\n\n/* Field Filter Buttons */\n.field-filters {\n display: flex;\n gap: 4px;\n}\n\n.filter-btn {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font: var(--mat-sys-label-small);\n background: var(--mat-sys-surface);\n color: var(--mat-sys-on-surface-variant);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 16px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.filter-btn:hover {\n background: var(--mat-sys-surface-container);\n}\n\n.filter-btn.active {\n background: var(--mat-sys-primary);\n border-color: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n/* Fields and Related Entities Lists */\n.fields-list,\n.related-entities-list {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n overflow-y: auto;\n padding: 6px 16px 16px 16px;\n min-height: 0;\n}\n\n.fields-list::-webkit-scrollbar,\n.related-entities-list::-webkit-scrollbar {\n width: 6px;\n}\n\n.fields-list::-webkit-scrollbar-track,\n.related-entities-list::-webkit-scrollbar-track {\n background: var(--mat-sys-surface-container);\n border-radius: 3px;\n}\n\n.fields-list::-webkit-scrollbar-thumb,\n.related-entities-list::-webkit-scrollbar-thumb {\n background: var(--mat-sys-outline);\n border-radius: 3px;\n}\n\n.fields-list::-webkit-scrollbar-thumb:hover,\n.related-entities-list::-webkit-scrollbar-thumb:hover {\n background: var(--mat-sys-on-surface-variant);\n}\n\n/* Field Items - MD3 Card Style */\n.field-item {\n padding: 10px;\n background: var(--mat-sys-surface);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 12px;\n font: var(--mat-sys-body-small);\n cursor: pointer;\n user-select: none;\n transition: all 0.2s ease;\n}\n\n.field-item:hover {\n transform: translateY(-1px);\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n.field-item.field-expanded {\n box-shadow: var(--mat-sys-elevation-3);\n transform: scale(1.01);\n}\n\n/* Primary Key Field - Tertiary Accent */\n.field-item.primary-key-field {\n border-color: var(--mat-sys-tertiary);\n background: var(--mat-sys-tertiary-container);\n border-left: 4px solid var(--mat-sys-tertiary);\n}\n\n.field-item.primary-key-field.field-expanded {\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mat-sys-tertiary) 20%, transparent);\n}\n\n/* Foreign Key Field - Primary Accent */\n.field-item.foreign-key-field {\n border-color: var(--mat-sys-primary);\n background: var(--mat-sys-primary-container);\n border-left: 4px solid var(--mat-sys-primary);\n}\n\n.field-item.foreign-key-field.field-expanded {\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mat-sys-primary) 20%, transparent);\n}\n\n/* Regular Field */\n.field-item.regular-field {\n border-color: var(--mat-sys-outline-variant);\n background: var(--mat-sys-surface-container-low);\n}\n\n.field-item.regular-field.field-expanded {\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n.field-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 4px;\n}\n\n.field-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.field-name {\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.field-icon {\n font-size: 10px;\n}\n\n.field-icon.fa-key {\n color: var(--mat-sys-tertiary);\n}\n\n.field-icon.fa-link {\n color: var(--mat-sys-primary);\n}\n\n/* MD3 Field Badges */\n.field-badges {\n display: flex;\n gap: 4px;\n}\n\n.field-badge {\n display: inline-flex;\n align-items: center;\n padding: 1px 6px;\n border-radius: 4px;\n font: var(--mat-sys-label-small);\n font-size: 9px;\n font-weight: 700;\n text-transform: uppercase;\n}\n\n.field-badge.primary-key {\n background: var(--mat-sys-tertiary);\n color: var(--mat-sys-on-tertiary);\n}\n\n.field-badge.foreign-key {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.field-type {\n color: var(--mat-sys-on-surface-variant);\n font: var(--mat-sys-label-small);\n}\n\n.field-relation {\n color: var(--mat-sys-primary);\n font: var(--mat-sys-label-small);\n margin-top: 4px;\n}\n\n.field-relation .fa-solid {\n margin-right: 4px;\n}\n\n/* Field Info and Values Buttons */\n.field-info-btn,\n.field-values-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n border: none;\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.field-info-btn:hover,\n.field-values-btn:hover {\n background: var(--mat-sys-primary-container);\n color: var(--mat-sys-primary);\n}\n\n.field-info-btn.expanded,\n.field-values-btn.expanded {\n background: var(--mat-sys-primary-container);\n color: var(--mat-sys-primary);\n}\n\n.field-info-btn .fa-solid,\n.field-values-btn .fa-solid {\n font-size: 10px;\n}\n\n/* Field Description */\n.field-description {\n margin-top: 8px;\n padding: 8px;\n background: var(--mat-sys-surface-container-low);\n border-left: 3px solid var(--mat-sys-primary);\n border-radius: 0 8px 8px 0;\n animation: fadeIn 0.3s ease-in-out;\n}\n\n.field-description .description-text {\n font: var(--mat-sys-body-small);\n color: var(--mat-sys-on-surface-variant);\n line-height: 1.4;\n font-style: italic;\n}\n\n.field-details {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(-5px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Field Values - Secondary Accent */\n.field-values {\n margin-top: 8px;\n padding: 8px;\n background: var(--mat-sys-secondary-container);\n border-left: 3px solid var(--mat-sys-secondary);\n border-radius: 0 8px 8px 0;\n animation: fadeIn 0.3s ease-in-out;\n}\n\n.field-values .values-header {\n font: var(--mat-sys-label-small);\n color: var(--mat-sys-on-secondary-container);\n font-weight: 600;\n margin-bottom: 6px;\n}\n\n.field-values .values-list {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n}\n\n.field-values .value-tag {\n display: inline-block;\n padding: 2px 8px;\n background: var(--mat-sys-surface);\n color: var(--mat-sys-on-surface);\n font: var(--mat-sys-label-small);\n font-size: 9px;\n border-radius: 12px;\n font-weight: 500;\n white-space: nowrap;\n max-width: 80px;\n overflow: hidden;\n text-overflow: ellipsis;\n border: 1px solid var(--mat-sys-outline-variant);\n}\n\n.field-values .value-tag:hover {\n background: var(--mat-sys-surface-container-highest);\n cursor: default;\n}\n\n/* Field Comprehensive Details */\n.field-comprehensive-details {\n margin-top: 12px;\n padding: 12px;\n background: var(--mat-sys-surface-container);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 12px;\n animation: slideDown 0.3s ease-out;\n}\n\n.field-comprehensive-details .details-header {\n display: flex;\n align-items: center;\n gap: 6px;\n font: var(--mat-sys-label-medium);\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin-bottom: 10px;\n padding-bottom: 6px;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.field-comprehensive-details .details-header .fa-solid {\n color: var(--mat-sys-on-surface-variant);\n}\n\n.field-comprehensive-details .details-grid {\n display: grid;\n gap: 6px;\n}\n\n.field-comprehensive-details .detail-row {\n display: grid;\n grid-template-columns: 100px 1fr;\n gap: 8px;\n font: var(--mat-sys-body-small);\n align-items: center;\n}\n\n.field-comprehensive-details .detail-label {\n font-weight: 600;\n color: var(--mat-sys-on-surface-variant);\n text-align: right;\n}\n\n.field-comprehensive-details .detail-value {\n color: var(--mat-sys-on-surface);\n font-family: \"Courier New\", monospace;\n background: var(--mat-sys-surface);\n padding: 2px 6px;\n border-radius: 4px;\n border: 1px solid var(--mat-sys-outline-variant);\n}\n\n.field-comprehensive-details .detail-value.nullable-yes,\n.field-comprehensive-details .detail-value.nullable-no {\n color: var(--mat-sys-on-surface);\n background: var(--mat-sys-surface);\n border-color: var(--mat-sys-outline-variant);\n}\n\n.field-comprehensive-details .detail-value.virtual-yes {\n color: var(--mat-sys-on-secondary-container);\n background: var(--mat-sys-secondary-container);\n border-color: var(--mat-sys-secondary);\n}\n\n.field-comprehensive-details .detail-value.virtual-no {\n color: var(--mat-sys-on-surface-variant);\n}\n\n.field-comprehensive-details .detail-value.default-value {\n color: var(--mat-sys-on-tertiary-container);\n background: var(--mat-sys-tertiary-container);\n border-color: var(--mat-sys-tertiary);\n}\n\n.field-comprehensive-details .detail-value.related-entity {\n color: var(--mat-sys-on-primary-container);\n background: var(--mat-sys-primary-container);\n border-color: var(--mat-sys-primary);\n cursor: pointer;\n user-select: none;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.field-comprehensive-details .detail-value.related-entity:hover {\n text-decoration: underline;\n background: color-mix(in srgb, var(--mat-sys-primary-container) 80%, var(--mat-sys-primary) 20%);\n transform: translateX(2px);\n}\n\n.field-comprehensive-details .detail-value.related-entity .fa-external-link-alt {\n font-size: 8px;\n opacity: 0.7;\n transition: opacity 0.2s ease;\n}\n\n.field-comprehensive-details .detail-value.related-entity:hover .fa-external-link-alt {\n opacity: 1;\n}\n\n.field-comprehensive-details .detail-value.auto-increment {\n color: var(--mat-sys-on-tertiary-container);\n background: var(--mat-sys-tertiary-container);\n border-color: var(--mat-sys-tertiary);\n}\n\n.field-comprehensive-details .comprehensive-description-top {\n margin-bottom: 12px;\n padding-bottom: 10px;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n}\n\n.field-comprehensive-details .comprehensive-description-top .description-content {\n font: var(--mat-sys-body-small);\n color: var(--mat-sys-on-surface);\n line-height: 1.4;\n font-style: italic;\n background: var(--mat-sys-primary-container);\n padding: 10px;\n border-radius: 8px;\n border: 1px solid var(--mat-sys-primary);\n border-left: 4px solid var(--mat-sys-primary);\n}\n\n/* Field Values in Comprehensive Details */\n.field-comprehensive-details .field-values-comprehensive {\n margin-bottom: 12px;\n padding: 12px;\n background: var(--mat-sys-secondary-container);\n border: 1px solid var(--mat-sys-secondary);\n border-radius: 8px;\n border-left: 4px solid var(--mat-sys-secondary);\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-header {\n display: flex;\n align-items: center;\n gap: 6px;\n font: var(--mat-sys-label-medium);\n font-weight: 600;\n color: var(--mat-sys-on-secondary-container);\n margin-bottom: 10px;\n padding-bottom: 6px;\n border-bottom: 1px solid color-mix(in srgb, var(--mat-sys-secondary) 30%, transparent);\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-header .fa-solid {\n color: var(--mat-sys-secondary);\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-grid {\n display: flex;\n flex-direction: column;\n gap: 6px;\n max-height: 200px;\n overflow-y: auto;\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-grid::-webkit-scrollbar {\n width: 4px;\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-grid::-webkit-scrollbar-track {\n background: var(--mat-sys-secondary-container);\n border-radius: 2px;\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-grid::-webkit-scrollbar-thumb {\n background: var(--mat-sys-secondary);\n border-radius: 2px;\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-grid::-webkit-scrollbar-thumb:hover {\n background: var(--mat-sys-on-secondary-container);\n}\n\n.field-comprehensive-details .field-values-comprehensive .value-item {\n padding: 8px;\n background: var(--mat-sys-surface);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 8px;\n}\n\n.field-comprehensive-details .field-values-comprehensive .value-item .value-main {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-bottom: 2px;\n}\n\n.field-comprehensive-details .field-values-comprehensive .value-item .value-main .value-text {\n font: var(--mat-sys-label-small);\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n}\n\n.field-comprehensive-details .field-values-comprehensive .value-item .value-main .value-code {\n font: var(--mat-sys-label-small);\n font-size: 9px;\n color: var(--mat-sys-on-secondary-container);\n background: var(--mat-sys-secondary-container);\n padding: 1px 4px;\n border-radius: 4px;\n border: 1px solid var(--mat-sys-secondary);\n font-family: \"Courier New\", monospace;\n}\n\n.field-comprehensive-details .field-values-comprehensive .value-item .value-description {\n font: var(--mat-sys-body-small);\n font-size: 9px;\n color: var(--mat-sys-on-surface-variant);\n line-height: 1.3;\n font-style: italic;\n margin-top: 2px;\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n max-height: 0;\n }\n to {\n opacity: 1;\n transform: translateY(0);\n max-height: 500px;\n }\n}\n\n/* Related Entity Items - MD3 List Item Style */\n.related-entity-item {\n padding: 12px 14px;\n background: var(--mat-sys-surface);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 12px;\n cursor: pointer;\n font: var(--mat-sys-body-medium);\n color: var(--mat-sys-on-surface);\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: all 0.3s ease;\n position: relative;\n max-width: calc(100% - 4px);\n min-width: 0;\n flex-shrink: 1;\n}\n\n.related-entity-item:hover {\n background: var(--mat-sys-primary-container);\n border-color: var(--mat-sys-primary);\n transform: translateX(4px);\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n.related-entity-item:hover .zoom-indicator {\n opacity: 1;\n transform: scale(1.1);\n}\n\n.related-entity-item:hover .fa-database {\n color: var(--mat-sys-primary);\n transform: scale(1.1);\n}\n\n.related-entity-item:hover::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(to bottom, var(--mat-sys-primary), var(--mat-sys-secondary));\n border-radius: 0 3px 3px 0;\n}\n\n.related-entity-item .fa-solid {\n margin-right: 10px;\n color: var(--mat-sys-on-surface-variant);\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.related-entity-item .fa-database {\n font-size: 14px;\n}\n\n.related-entity-item .entity-name {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n\n.related-entity-item .zoom-indicator {\n opacity: 0.4;\n color: var(--mat-sys-primary);\n font-size: 11px;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n"] }]
666
666
  }], null, { fieldsListContainer: [{
667
667
  type: ViewChild,
668
668
  args: ['fieldsListContainer', { static: false }]
package/dist/lib/components/entity-filter-panel/entity-filter-panel.component.js CHANGED
@@ -155,11 +155,11 @@ export class EntityFilterPanelComponent {
155
155
  i0.ɵɵtwoWayProperty("ngModel", ctx.filters.entityStatus);
156
156
  i0.ɵɵadvance();
157
157
  i0.ɵɵproperty("ngValue", null);
158
- } }, dependencies: [i1.NgForOf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel], styles: [".filter-panel[_ngcontent-%COMP%] {\n height: 100%;\n background: white;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-width: 0;\n}\n\n.filter-panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px;\n background-color: #f5f5f5;\n border-bottom: 1px solid #e0e0e0;\n min-width: 0;\n}\n.filter-panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n.filter-panel-header[_ngcontent-%COMP%] .filter-summary-inline[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.filter-panel-header[_ngcontent-%COMP%] .filter-summary-inline[_ngcontent-%COMP%] .summary-value[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 700;\n color: #2196f3;\n}\n.filter-panel-header[_ngcontent-%COMP%] .filter-summary-inline[_ngcontent-%COMP%] .summary-label[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #666;\n}\n.filter-panel-header[_ngcontent-%COMP%] .close-btn[_ngcontent-%COMP%] {\n padding: 4px;\n border: none;\n background: none;\n cursor: pointer;\n color: #666;\n}\n.filter-panel-header[_ngcontent-%COMP%] .close-btn[_ngcontent-%COMP%]:hover {\n color: #333;\n}\n\n.filter-content[_ngcontent-%COMP%] {\n padding: 12px;\n overflow-y: auto;\n overflow-x: hidden;\n flex: 1;\n}\n\n.filter-group[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n.filter-group[_ngcontent-%COMP%] .filter-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 8px;\n font-size: 13px;\n font-weight: 600;\n color: #2c3e50;\n}\n.filter-group[_ngcontent-%COMP%] .filter-label[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n color: #3498db;\n width: 16px;\n}\n.filter-group[_ngcontent-%COMP%] .filter-input[_ngcontent-%COMP%], \n.filter-group[_ngcontent-%COMP%] .filter-select[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 100%;\n padding: 8px 10px;\n border: 2px solid #e9ecef;\n border-radius: 6px;\n font-size: 13px;\n background: white;\n transition: all 0.2s ease;\n box-sizing: border-box;\n}\n.filter-group[_ngcontent-%COMP%] .filter-input[_ngcontent-%COMP%]:focus, \n.filter-group[_ngcontent-%COMP%] .filter-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #3498db;\n box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);\n}\n.filter-group[_ngcontent-%COMP%] .filter-input[_ngcontent-%COMP%]::placeholder, \n.filter-group[_ngcontent-%COMP%] .filter-select[_ngcontent-%COMP%]::placeholder {\n color: #95a5a6;\n font-style: italic;\n}\n.filter-group[_ngcontent-%COMP%] .filter-select[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n.filter-group[_ngcontent-%COMP%] .filter-select[_ngcontent-%COMP%] option[_ngcontent-%COMP%] {\n padding: 8px;\n}\n\n.filter-actions[_ngcontent-%COMP%] {\n margin-top: 20px;\n padding-top: 12px;\n border-top: 1px solid #e9ecef;\n}\n.filter-actions[_ngcontent-%COMP%] .reset-btn[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 100%;\n padding: 8px 12px;\n border: 2px solid #6c757d;\n border-radius: 6px;\n background: white;\n color: #6c757d;\n cursor: pointer;\n font-size: 13px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n transition: all 0.2s ease;\n box-sizing: border-box;\n}\n.filter-actions[_ngcontent-%COMP%] .reset-btn[_ngcontent-%COMP%]:hover {\n background-color: #6c757d;\n color: white;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);\n}\n.filter-actions[_ngcontent-%COMP%] .reset-btn[_ngcontent-%COMP%]:active {\n transform: translateY(0);\n box-shadow: 0 1px 4px rgba(108, 117, 125, 0.3);\n}\n.filter-actions[_ngcontent-%COMP%] .reset-btn[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n font-size: 12px;\n}"] });
158
+ } }, dependencies: [i1.NgForOf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["\n\n\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n height: 100%;\n background: var(--mat-sys-surface);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-width: 0;\n}\n\n\n\n.filter-panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--mat-sys-surface-container);\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n min-width: 0;\n}\n\n.filter-panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font: var(--mat-sys-title-medium);\n color: var(--mat-sys-on-surface);\n}\n\n.filter-panel-header[_ngcontent-%COMP%] .filter-summary-inline[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.filter-panel-header[_ngcontent-%COMP%] .filter-summary-inline[_ngcontent-%COMP%] .summary-value[_ngcontent-%COMP%] {\n font: var(--mat-sys-title-medium);\n font-weight: 700;\n color: var(--mat-sys-primary);\n}\n\n.filter-panel-header[_ngcontent-%COMP%] .filter-summary-inline[_ngcontent-%COMP%] .summary-label[_ngcontent-%COMP%] {\n font: var(--mat-sys-body-small);\n color: var(--mat-sys-on-surface-variant);\n}\n\n\n\n.filter-panel-header[_ngcontent-%COMP%] .close-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n border: none;\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.filter-panel-header[_ngcontent-%COMP%] .close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mat-sys-surface-container-highest);\n color: var(--mat-sys-on-surface);\n}\n\n\n\n.filter-content[_ngcontent-%COMP%] {\n padding: 16px;\n overflow-y: auto;\n overflow-x: hidden;\n flex: 1;\n}\n\n\n\n.filter-group[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.filter-group[_ngcontent-%COMP%] .filter-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 8px;\n font: var(--mat-sys-label-large);\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n}\n\n.filter-group[_ngcontent-%COMP%] .filter-label[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n color: var(--mat-sys-primary);\n width: 16px;\n}\n\n\n\n.filter-group[_ngcontent-%COMP%] .filter-input[_ngcontent-%COMP%], \n.filter-group[_ngcontent-%COMP%] .filter-select[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 100%;\n padding: 12px 16px;\n font: var(--mat-sys-body-large);\n background: var(--mat-sys-surface);\n color: var(--mat-sys-on-surface);\n border: 1px solid var(--mat-sys-outline);\n border-radius: 4px;\n transition: all 0.2s ease;\n box-sizing: border-box;\n}\n\n.filter-group[_ngcontent-%COMP%] .filter-input[_ngcontent-%COMP%]:focus, \n.filter-group[_ngcontent-%COMP%] .filter-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mat-sys-primary);\n box-shadow: 0 0 0 3px var(--mat-sys-primary-container);\n}\n\n.filter-group[_ngcontent-%COMP%] .filter-input[_ngcontent-%COMP%]::placeholder, \n.filter-group[_ngcontent-%COMP%] .filter-select[_ngcontent-%COMP%]::placeholder {\n color: var(--mat-sys-on-surface-variant);\n opacity: 0.6;\n font-style: italic;\n}\n\n.filter-group[_ngcontent-%COMP%] .filter-select[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.filter-group[_ngcontent-%COMP%] .filter-select[_ngcontent-%COMP%] option[_ngcontent-%COMP%] {\n padding: 8px;\n}\n\n\n\n.filter-actions[_ngcontent-%COMP%] {\n margin-top: 24px;\n padding-top: 16px;\n border-top: 1px solid var(--mat-sys-outline-variant);\n}\n\n\n\n.filter-actions[_ngcontent-%COMP%] .reset-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n max-width: 100%;\n padding: 10px 24px;\n font: var(--mat-sys-label-large);\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n border: 1px solid var(--mat-sys-outline);\n border-radius: 20px;\n cursor: pointer;\n transition: all 0.2s ease;\n box-sizing: border-box;\n}\n\n.filter-actions[_ngcontent-%COMP%] .reset-btn[_ngcontent-%COMP%]:hover {\n background: var(--mat-sys-surface-container-highest);\n border-color: var(--mat-sys-outline);\n color: var(--mat-sys-on-surface);\n}\n\n.filter-actions[_ngcontent-%COMP%] .reset-btn[_ngcontent-%COMP%]:active {\n background: var(--mat-sys-surface-container);\n}\n\n.filter-actions[_ngcontent-%COMP%] .reset-btn[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--mat-sys-primary);\n outline-offset: 2px;\n}\n\n.filter-actions[_ngcontent-%COMP%] .reset-btn[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n font-size: 12px;\n}"] });
159
159
  }
160
160
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityFilterPanelComponent, [{
161
161
  type: Component,
162
- args: [{ selector: 'mj-entity-filter-panel', template: "<div class=\"filter-panel\">\n <div class=\"filter-panel-header\">\n <h3>Entity Filters</h3>\n <div class=\"filter-summary-inline\">\n <span class=\"summary-value\">{{ filteredEntities.length }}</span>\n <span class=\"summary-label\">of {{ entities.length }}</span>\n </div>\n <button class=\"close-btn\" (click)=\"toggleFilterPanel()\">\n <span class=\"fa-solid fa-times\"></span>\n </button>\n </div>\n\n <div class=\"filter-content\">\n <!-- Schema Filter -->\n <div class=\"filter-group\">\n <label class=\"filter-label\">\n <span class=\"fa-solid fa-database\"></span>\n Schema\n </label>\n <select\n class=\"filter-select\"\n [(ngModel)]=\"filters.schemaName\"\n (ngModelChange)=\"onFilterChange()\">\n <option [ngValue]=\"null\">All Schemas</option>\n <option *ngFor=\"let schema of distinctSchemas\" [ngValue]=\"schema.value\">\n {{ schema.text }}\n </option>\n </select>\n </div>\n\n <!-- Entity Name Filter -->\n <div class=\"filter-group\">\n <label class=\"filter-label\">\n <span class=\"fa-solid fa-search\"></span>\n Entity Name\n </label>\n <input\n type=\"text\"\n class=\"filter-input\"\n [(ngModel)]=\"filters.entityName\"\n (ngModelChange)=\"onFilterChange()\"\n (input)=\"onFilterChange()\"\n placeholder=\"Search entities...\">\n </div>\n\n <!-- Base Table Filter -->\n <div class=\"filter-group\">\n <label class=\"filter-label\">\n <span class=\"fa-solid fa-table\"></span>\n Base Table\n </label>\n <input\n type=\"text\"\n class=\"filter-input\"\n [(ngModel)]=\"filters.baseTable\"\n (ngModelChange)=\"onFilterChange()\"\n (input)=\"onFilterChange()\"\n placeholder=\"Search tables...\">\n </div>\n\n <!-- Entity Status Filter -->\n <div class=\"filter-group\">\n <label class=\"filter-label\">\n <span class=\"fa-solid fa-check-circle\"></span>\n Status\n </label>\n <select\n class=\"filter-select\"\n [(ngModel)]=\"filters.entityStatus\"\n (ngModelChange)=\"onFilterChange()\">\n <option [ngValue]=\"null\">All Statuses</option>\n <option value=\"Active\">Active</option>\n <option value=\"Deprecated\">Deprecated</option>\n <option value=\"Disabled\">Disabled</option>\n </select>\n </div>\n\n <!-- Reset Button -->\n <div class=\"filter-actions\">\n <button class=\"reset-btn\" (click)=\"resetAllFilters()\" title=\"Reset all filters\">\n <span class=\"fa-solid fa-undo\"></span>\n Reset Filters\n </button>\n </div>\n </div>\n</div>\n", styles: [".filter-panel {\n height: 100%;\n background: white;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-width: 0;\n}\n\n.filter-panel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px;\n background-color: #f5f5f5;\n border-bottom: 1px solid #e0e0e0;\n min-width: 0;\n}\n.filter-panel-header h3 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n.filter-panel-header .filter-summary-inline {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.filter-panel-header .filter-summary-inline .summary-value {\n font-size: 14px;\n font-weight: 700;\n color: #2196f3;\n}\n.filter-panel-header .filter-summary-inline .summary-label {\n font-size: 11px;\n color: #666;\n}\n.filter-panel-header .close-btn {\n padding: 4px;\n border: none;\n background: none;\n cursor: pointer;\n color: #666;\n}\n.filter-panel-header .close-btn:hover {\n color: #333;\n}\n\n.filter-content {\n padding: 12px;\n overflow-y: auto;\n overflow-x: hidden;\n flex: 1;\n}\n\n.filter-group {\n margin-bottom: 20px;\n}\n.filter-group .filter-label {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 8px;\n font-size: 13px;\n font-weight: 600;\n color: #2c3e50;\n}\n.filter-group .filter-label .fa-solid {\n color: #3498db;\n width: 16px;\n}\n.filter-group .filter-input,\n.filter-group .filter-select {\n width: 100%;\n max-width: 100%;\n padding: 8px 10px;\n border: 2px solid #e9ecef;\n border-radius: 6px;\n font-size: 13px;\n background: white;\n transition: all 0.2s ease;\n box-sizing: border-box;\n}\n.filter-group .filter-input:focus,\n.filter-group .filter-select:focus {\n outline: none;\n border-color: #3498db;\n box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);\n}\n.filter-group .filter-input::placeholder,\n.filter-group .filter-select::placeholder {\n color: #95a5a6;\n font-style: italic;\n}\n.filter-group .filter-select {\n cursor: pointer;\n}\n.filter-group .filter-select option {\n padding: 8px;\n}\n\n.filter-actions {\n margin-top: 20px;\n padding-top: 12px;\n border-top: 1px solid #e9ecef;\n}\n.filter-actions .reset-btn {\n width: 100%;\n max-width: 100%;\n padding: 8px 12px;\n border: 2px solid #6c757d;\n border-radius: 6px;\n background: white;\n color: #6c757d;\n cursor: pointer;\n font-size: 13px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n transition: all 0.2s ease;\n box-sizing: border-box;\n}\n.filter-actions .reset-btn:hover {\n background-color: #6c757d;\n color: white;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);\n}\n.filter-actions .reset-btn:active {\n transform: translateY(0);\n box-shadow: 0 1px 4px rgba(108, 117, 125, 0.3);\n}\n.filter-actions .reset-btn .fa-solid {\n font-size: 12px;\n}\n"] }]
162
+ args: [{ selector: 'mj-entity-filter-panel', template: "<div class=\"filter-panel\">\n <div class=\"filter-panel-header\">\n <h3>Entity Filters</h3>\n <div class=\"filter-summary-inline\">\n <span class=\"summary-value\">{{ filteredEntities.length }}</span>\n <span class=\"summary-label\">of {{ entities.length }}</span>\n </div>\n <button class=\"close-btn\" (click)=\"toggleFilterPanel()\">\n <span class=\"fa-solid fa-times\"></span>\n </button>\n </div>\n\n <div class=\"filter-content\">\n <!-- Schema Filter -->\n <div class=\"filter-group\">\n <label class=\"filter-label\">\n <span class=\"fa-solid fa-database\"></span>\n Schema\n </label>\n <select\n class=\"filter-select\"\n [(ngModel)]=\"filters.schemaName\"\n (ngModelChange)=\"onFilterChange()\">\n <option [ngValue]=\"null\">All Schemas</option>\n <option *ngFor=\"let schema of distinctSchemas\" [ngValue]=\"schema.value\">\n {{ schema.text }}\n </option>\n </select>\n </div>\n\n <!-- Entity Name Filter -->\n <div class=\"filter-group\">\n <label class=\"filter-label\">\n <span class=\"fa-solid fa-search\"></span>\n Entity Name\n </label>\n <input\n type=\"text\"\n class=\"filter-input\"\n [(ngModel)]=\"filters.entityName\"\n (ngModelChange)=\"onFilterChange()\"\n (input)=\"onFilterChange()\"\n placeholder=\"Search entities...\">\n </div>\n\n <!-- Base Table Filter -->\n <div class=\"filter-group\">\n <label class=\"filter-label\">\n <span class=\"fa-solid fa-table\"></span>\n Base Table\n </label>\n <input\n type=\"text\"\n class=\"filter-input\"\n [(ngModel)]=\"filters.baseTable\"\n (ngModelChange)=\"onFilterChange()\"\n (input)=\"onFilterChange()\"\n placeholder=\"Search tables...\">\n </div>\n\n <!-- Entity Status Filter -->\n <div class=\"filter-group\">\n <label class=\"filter-label\">\n <span class=\"fa-solid fa-check-circle\"></span>\n Status\n </label>\n <select\n class=\"filter-select\"\n [(ngModel)]=\"filters.entityStatus\"\n (ngModelChange)=\"onFilterChange()\">\n <option [ngValue]=\"null\">All Statuses</option>\n <option value=\"Active\">Active</option>\n <option value=\"Deprecated\">Deprecated</option>\n <option value=\"Disabled\">Disabled</option>\n </select>\n </div>\n\n <!-- Reset Button -->\n <div class=\"filter-actions\">\n <button class=\"reset-btn\" (click)=\"resetAllFilters()\" title=\"Reset all filters\">\n <span class=\"fa-solid fa-undo\"></span>\n Reset Filters\n </button>\n </div>\n </div>\n</div>\n", styles: ["/**\n * Entity Filter Panel Component - MD3 Styled\n * Material Design 3 theming for the entity filter panel\n */\n\n.filter-panel {\n height: 100%;\n background: var(--mat-sys-surface);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-width: 0;\n}\n\n/* Panel Header - MD3 Surface Container */\n.filter-panel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--mat-sys-surface-container);\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n min-width: 0;\n}\n\n.filter-panel-header h3 {\n margin: 0;\n font: var(--mat-sys-title-medium);\n color: var(--mat-sys-on-surface);\n}\n\n.filter-panel-header .filter-summary-inline {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.filter-panel-header .filter-summary-inline .summary-value {\n font: var(--mat-sys-title-medium);\n font-weight: 700;\n color: var(--mat-sys-primary);\n}\n\n.filter-panel-header .filter-summary-inline .summary-label {\n font: var(--mat-sys-body-small);\n color: var(--mat-sys-on-surface-variant);\n}\n\n/* MD3 Icon Button for Close */\n.filter-panel-header .close-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n border: none;\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.filter-panel-header .close-btn:hover {\n background: var(--mat-sys-surface-container-highest);\n color: var(--mat-sys-on-surface);\n}\n\n/* Filter Content */\n.filter-content {\n padding: 16px;\n overflow-y: auto;\n overflow-x: hidden;\n flex: 1;\n}\n\n/* Filter Groups */\n.filter-group {\n margin-bottom: 24px;\n}\n\n.filter-group .filter-label {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 8px;\n font: var(--mat-sys-label-large);\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n}\n\n.filter-group .filter-label .fa-solid {\n color: var(--mat-sys-primary);\n width: 16px;\n}\n\n/* MD3 Input Styling */\n.filter-group .filter-input,\n.filter-group .filter-select {\n width: 100%;\n max-width: 100%;\n padding: 12px 16px;\n font: var(--mat-sys-body-large);\n background: var(--mat-sys-surface);\n color: var(--mat-sys-on-surface);\n border: 1px solid var(--mat-sys-outline);\n border-radius: 4px;\n transition: all 0.2s ease;\n box-sizing: border-box;\n}\n\n.filter-group .filter-input:focus,\n.filter-group .filter-select:focus {\n outline: none;\n border-color: var(--mat-sys-primary);\n box-shadow: 0 0 0 3px var(--mat-sys-primary-container);\n}\n\n.filter-group .filter-input::placeholder,\n.filter-group .filter-select::placeholder {\n color: var(--mat-sys-on-surface-variant);\n opacity: 0.6;\n font-style: italic;\n}\n\n.filter-group .filter-select {\n cursor: pointer;\n}\n\n.filter-group .filter-select option {\n padding: 8px;\n}\n\n/* Filter Actions */\n.filter-actions {\n margin-top: 24px;\n padding-top: 16px;\n border-top: 1px solid var(--mat-sys-outline-variant);\n}\n\n/* MD3 Outlined Button for Reset */\n.filter-actions .reset-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n max-width: 100%;\n padding: 10px 24px;\n font: var(--mat-sys-label-large);\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n border: 1px solid var(--mat-sys-outline);\n border-radius: 20px;\n cursor: pointer;\n transition: all 0.2s ease;\n box-sizing: border-box;\n}\n\n.filter-actions .reset-btn:hover {\n background: var(--mat-sys-surface-container-highest);\n border-color: var(--mat-sys-outline);\n color: var(--mat-sys-on-surface);\n}\n\n.filter-actions .reset-btn:active {\n background: var(--mat-sys-surface-container);\n}\n\n.filter-actions .reset-btn:focus-visible {\n outline: 2px solid var(--mat-sys-primary);\n outline-offset: 2px;\n}\n\n.filter-actions .reset-btn .fa-solid {\n font-size: 12px;\n}\n"] }]
163
163
  }], null, { entities: [{
164
164
  type: Input
165
165
  }], filteredEntities: [{
package/dist/lib/components/erd-composite/erd-composite.component.js CHANGED
@@ -360,11 +360,11 @@ export class ERDCompositeComponent {
360
360
  i0.ɵɵproperty("size", ctx.selectedEntity ? "320px" : "0px")("collapsible", false)("resizable", !!ctx.selectedEntity)("scrollable", false)("hidden", !ctx.selectedEntity);
361
361
  i0.ɵɵadvance();
362
362
  i0.ɵɵproperty("selectedEntity", ctx.selectedEntity)("allEntityFields", ctx.allEntityFields)("fieldsSectionExpanded", ctx.fieldsSectionExpanded)("relationshipsSectionExpanded", ctx.relationshipsSectionExpanded);
363
- } }, dependencies: [i1.SplitterComponent, i1.SplitterPaneComponent, i2.MJEntityERDComponent, i3.EntityDetailsComponent, i4.EntityFilterPanelComponent], styles: ["[_nghost-%COMP%] {\n display: block;\n height: 100%;\n width: 100%;\n}\n\n.erd-composite[_ngcontent-%COMP%] {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n}\n\n.main-splitter[_ngcontent-%COMP%] {\n height: 100%;\n width: 100%;\n}\n.main-splitter[_ngcontent-%COMP%] .k-pane[_ngcontent-%COMP%] {\n overflow: hidden;\n}\n\n.erd-pane-container[_ngcontent-%COMP%] {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.floating-details-panel[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n right: 20px;\n width: 380px;\n max-height: calc(100% - 40px);\n background: white;\n border: 1px solid #ddd;\n border-radius: 8px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n z-index: 1000;\n overflow: hidden;\n transform: translateY(-50%);\n animation: _ngcontent-%COMP%_slideInFromRight 0.3s ease-out;\n}\n@media (max-width: 768px) {\n .floating-details-panel[_ngcontent-%COMP%] {\n right: 10px;\n left: 10px;\n width: auto;\n max-width: none;\n }\n}\n@media (max-height: 600px) {\n .floating-details-panel[_ngcontent-%COMP%] {\n top: 20px;\n transform: none;\n max-height: calc(100vh - 40px);\n }\n}\n\n@keyframes _ngcontent-%COMP%_slideInFromRight {\n from {\n transform: translateY(-50%) translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateY(-50%) translateX(0);\n opacity: 1;\n }\n}\n\n\n\n.explorer-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.explorer-header-bar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 8px 16px;\n background: #f8fafc;\n border-bottom: 1px solid #e2e8f0;\n flex-shrink: 0;\n}\n\n.back-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n color: #64748b;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.back-btn[_ngcontent-%COMP%]:hover {\n background: #f1f5f9;\n border-color: #cbd5e1;\n color: #1e293b;\n}\n\n.back-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.explorer-container[_ngcontent-%COMP%] mj-entity-explorer[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n}"] });
363
+ } }, dependencies: [i1.SplitterComponent, i1.SplitterPaneComponent, i2.MJEntityERDComponent, i3.EntityDetailsComponent, i4.EntityFilterPanelComponent], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n display: block;\n height: 100%;\n width: 100%;\n}\n\n.erd-composite[_ngcontent-%COMP%] {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n}\n\n.main-splitter[_ngcontent-%COMP%] {\n height: 100%;\n width: 100%;\n}\n\n.main-splitter[_ngcontent-%COMP%] .k-pane[_ngcontent-%COMP%] {\n overflow: hidden;\n}\n\n.erd-pane-container[_ngcontent-%COMP%] {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n\n\n.floating-details-panel[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n right: 20px;\n width: 380px;\n max-height: calc(100% - 40px);\n background: var(--mat-sys-surface-container-highest);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 28px;\n box-shadow: var(--mat-sys-elevation-3);\n z-index: 1000;\n overflow: hidden;\n transform: translateY(-50%);\n animation: _ngcontent-%COMP%_slideInFromRight 0.3s ease-out;\n}\n\n@media (max-width: 768px) {\n .floating-details-panel[_ngcontent-%COMP%] {\n right: 10px;\n left: 10px;\n width: auto;\n max-width: none;\n border-radius: 20px;\n }\n}\n\n@media (max-height: 600px) {\n .floating-details-panel[_ngcontent-%COMP%] {\n top: 20px;\n transform: none;\n max-height: calc(100vh - 40px);\n }\n}\n\n@keyframes _ngcontent-%COMP%_slideInFromRight {\n from {\n transform: translateY(-50%) translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateY(-50%) translateX(0);\n opacity: 1;\n }\n}\n\n\n\n.explorer-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.explorer-header-bar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 8px 16px;\n background: var(--mat-sys-surface-container);\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n flex-shrink: 0;\n}\n\n\n\n.back-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--mat-sys-surface);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 20px;\n color: var(--mat-sys-on-surface-variant);\n font: var(--mat-sys-label-large);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.back-btn[_ngcontent-%COMP%]:hover {\n background: var(--mat-sys-surface-container-highest);\n border-color: var(--mat-sys-outline);\n color: var(--mat-sys-on-surface);\n}\n\n.back-btn[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--mat-sys-primary);\n outline-offset: 2px;\n}\n\n.back-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.explorer-container[_ngcontent-%COMP%] mj-entity-explorer[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n}"] });
364
364
  }
365
365
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ERDCompositeComponent, [{
366
366
  type: Component,
367
- args: [{ selector: 'mj-erd-composite', template: "<div class=\"erd-composite\">\n <kendo-splitter\n class=\"main-splitter\"\n orientation=\"horizontal\"\n (layoutChange)=\"onSplitterLayoutChange($event)\">\n\n <!-- Filter Panel (Left) -->\n <kendo-splitter-pane\n [size]=\"filterPanelVisible ? '320px' : '0px'\"\n [collapsible]=\"false\"\n [resizable]=\"filterPanelVisible\"\n [scrollable]=\"false\"\n [hidden]=\"!filterPanelVisible\">\n <mj-entity-filter-panel\n [entities]=\"entities\"\n [filteredEntities]=\"filteredEntities\"\n [filters]=\"filters\"\n (filtersChange)=\"onFiltersChange($event)\"\n (filterChange)=\"onFilterChange()\"\n (resetFilters)=\"onResetFilters()\"\n (closePanel)=\"onToggleFilterPanel()\">\n </mj-entity-filter-panel>\n </kendo-splitter-pane>\n\n <!-- ERD Diagram (Center) -->\n <kendo-splitter-pane\n [resizable]=\"true\"\n [scrollable]=\"false\">\n <div class=\"erd-pane-container\">\n <mj-entity-erd\n [entities]=\"filteredEntities\"\n [allEntities]=\"entities\"\n [selectedEntityId]=\"selectedEntity?.ID || null\"\n [isRefreshing]=\"isRefreshingERD\"\n [depth]=\"depth\"\n [includeIncoming]=\"true\"\n [includeOutgoing]=\"true\"\n [showHeader]=\"showHeader\"\n [config]=\"erdConfig\"\n headerTitle=\"Entity Relationship Diagram\"\n (entitySelected)=\"onERDEntitySelected($event)\"\n (entityDeselected)=\"onEntityDeselected()\"\n (openRecord)=\"onERDOpenRecord($event)\"\n (stateChange)=\"onERDStateChange($event)\">\n </mj-entity-erd>\n </div>\n </kendo-splitter-pane>\n\n <!-- Entity Details Panel (Right) -->\n <kendo-splitter-pane\n [size]=\"selectedEntity ? '320px' : '0px'\"\n [collapsible]=\"false\"\n [resizable]=\"!!selectedEntity\"\n [scrollable]=\"false\"\n [hidden]=\"!selectedEntity\">\n <mj-entity-details\n [selectedEntity]=\"selectedEntity\"\n [allEntityFields]=\"allEntityFields\"\n [fieldsSectionExpanded]=\"fieldsSectionExpanded\"\n [relationshipsSectionExpanded]=\"relationshipsSectionExpanded\"\n (openEntity)=\"onEntityOpened($event)\"\n (closePanel)=\"onEntityDeselected()\"\n (fieldsSectionToggle)=\"onFieldsSectionToggle()\"\n (relationshipsSectionToggle)=\"onRelationshipsSectionToggle()\"\n (entitySelected)=\"onEntitySelected($event)\"\n (openRecord)=\"onOpenRecord($event)\">\n </mj-entity-details>\n </kendo-splitter-pane>\n </kendo-splitter>\n</div>\n", styles: [":host {\n display: block;\n height: 100%;\n width: 100%;\n}\n\n.erd-composite {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n}\n\n.main-splitter {\n height: 100%;\n width: 100%;\n}\n.main-splitter .k-pane {\n overflow: hidden;\n}\n\n.erd-pane-container {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.floating-details-panel {\n position: absolute;\n top: 50%;\n right: 20px;\n width: 380px;\n max-height: calc(100% - 40px);\n background: white;\n border: 1px solid #ddd;\n border-radius: 8px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n z-index: 1000;\n overflow: hidden;\n transform: translateY(-50%);\n animation: slideInFromRight 0.3s ease-out;\n}\n@media (max-width: 768px) {\n .floating-details-panel {\n right: 10px;\n left: 10px;\n width: auto;\n max-width: none;\n }\n}\n@media (max-height: 600px) {\n .floating-details-panel {\n top: 20px;\n transform: none;\n max-height: calc(100vh - 40px);\n }\n}\n\n@keyframes slideInFromRight {\n from {\n transform: translateY(-50%) translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateY(-50%) translateX(0);\n opacity: 1;\n }\n}\n\n/* Entity Explorer Container */\n.explorer-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.explorer-header-bar {\n display: flex;\n align-items: center;\n padding: 8px 16px;\n background: #f8fafc;\n border-bottom: 1px solid #e2e8f0;\n flex-shrink: 0;\n}\n\n.back-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 6px;\n color: #64748b;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.back-btn:hover {\n background: #f1f5f9;\n border-color: #cbd5e1;\n color: #1e293b;\n}\n\n.back-btn i {\n font-size: 12px;\n}\n\n.explorer-container mj-entity-explorer {\n flex: 1;\n overflow: hidden;\n}\n"] }]
367
+ args: [{ selector: 'mj-erd-composite', template: "<div class=\"erd-composite\">\n <kendo-splitter\n class=\"main-splitter\"\n orientation=\"horizontal\"\n (layoutChange)=\"onSplitterLayoutChange($event)\">\n\n <!-- Filter Panel (Left) -->\n <kendo-splitter-pane\n [size]=\"filterPanelVisible ? '320px' : '0px'\"\n [collapsible]=\"false\"\n [resizable]=\"filterPanelVisible\"\n [scrollable]=\"false\"\n [hidden]=\"!filterPanelVisible\">\n <mj-entity-filter-panel\n [entities]=\"entities\"\n [filteredEntities]=\"filteredEntities\"\n [filters]=\"filters\"\n (filtersChange)=\"onFiltersChange($event)\"\n (filterChange)=\"onFilterChange()\"\n (resetFilters)=\"onResetFilters()\"\n (closePanel)=\"onToggleFilterPanel()\">\n </mj-entity-filter-panel>\n </kendo-splitter-pane>\n\n <!-- ERD Diagram (Center) -->\n <kendo-splitter-pane\n [resizable]=\"true\"\n [scrollable]=\"false\">\n <div class=\"erd-pane-container\">\n <mj-entity-erd\n [entities]=\"filteredEntities\"\n [allEntities]=\"entities\"\n [selectedEntityId]=\"selectedEntity?.ID || null\"\n [isRefreshing]=\"isRefreshingERD\"\n [depth]=\"depth\"\n [includeIncoming]=\"true\"\n [includeOutgoing]=\"true\"\n [showHeader]=\"showHeader\"\n [config]=\"erdConfig\"\n headerTitle=\"Entity Relationship Diagram\"\n (entitySelected)=\"onERDEntitySelected($event)\"\n (entityDeselected)=\"onEntityDeselected()\"\n (openRecord)=\"onERDOpenRecord($event)\"\n (stateChange)=\"onERDStateChange($event)\">\n </mj-entity-erd>\n </div>\n </kendo-splitter-pane>\n\n <!-- Entity Details Panel (Right) -->\n <kendo-splitter-pane\n [size]=\"selectedEntity ? '320px' : '0px'\"\n [collapsible]=\"false\"\n [resizable]=\"!!selectedEntity\"\n [scrollable]=\"false\"\n [hidden]=\"!selectedEntity\">\n <mj-entity-details\n [selectedEntity]=\"selectedEntity\"\n [allEntityFields]=\"allEntityFields\"\n [fieldsSectionExpanded]=\"fieldsSectionExpanded\"\n [relationshipsSectionExpanded]=\"relationshipsSectionExpanded\"\n (openEntity)=\"onEntityOpened($event)\"\n (closePanel)=\"onEntityDeselected()\"\n (fieldsSectionToggle)=\"onFieldsSectionToggle()\"\n (relationshipsSectionToggle)=\"onRelationshipsSectionToggle()\"\n (entitySelected)=\"onEntitySelected($event)\"\n (openRecord)=\"onOpenRecord($event)\">\n </mj-entity-details>\n </kendo-splitter-pane>\n </kendo-splitter>\n</div>\n", styles: ["/**\n * ERD Composite Component - MD3 Styled\n * Material Design 3 theming for the ERD composite wrapper\n */\n\n:host {\n display: block;\n height: 100%;\n width: 100%;\n}\n\n.erd-composite {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n}\n\n.main-splitter {\n height: 100%;\n width: 100%;\n}\n\n.main-splitter .k-pane {\n overflow: hidden;\n}\n\n.erd-pane-container {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n/* Floating Details Panel - MD3 Styled */\n.floating-details-panel {\n position: absolute;\n top: 50%;\n right: 20px;\n width: 380px;\n max-height: calc(100% - 40px);\n background: var(--mat-sys-surface-container-highest);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 28px;\n box-shadow: var(--mat-sys-elevation-3);\n z-index: 1000;\n overflow: hidden;\n transform: translateY(-50%);\n animation: slideInFromRight 0.3s ease-out;\n}\n\n@media (max-width: 768px) {\n .floating-details-panel {\n right: 10px;\n left: 10px;\n width: auto;\n max-width: none;\n border-radius: 20px;\n }\n}\n\n@media (max-height: 600px) {\n .floating-details-panel {\n top: 20px;\n transform: none;\n max-height: calc(100vh - 40px);\n }\n}\n\n@keyframes slideInFromRight {\n from {\n transform: translateY(-50%) translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateY(-50%) translateX(0);\n opacity: 1;\n }\n}\n\n/* Entity Explorer Container - MD3 Styled */\n.explorer-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.explorer-header-bar {\n display: flex;\n align-items: center;\n padding: 8px 16px;\n background: var(--mat-sys-surface-container);\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n flex-shrink: 0;\n}\n\n/* MD3 Outlined Back Button */\n.back-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--mat-sys-surface);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 20px;\n color: var(--mat-sys-on-surface-variant);\n font: var(--mat-sys-label-large);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.back-btn:hover {\n background: var(--mat-sys-surface-container-highest);\n border-color: var(--mat-sys-outline);\n color: var(--mat-sys-on-surface);\n}\n\n.back-btn:focus-visible {\n outline: 2px solid var(--mat-sys-primary);\n outline-offset: 2px;\n}\n\n.back-btn i {\n font-size: 12px;\n}\n\n.explorer-container mj-entity-explorer {\n flex: 1;\n overflow: hidden;\n}\n"] }]
368
368
  }], null, { mjEntityErd: [{
369
369
  type: ViewChild,
370
370
  args: [MJEntityERDComponent]
package/dist/lib/components/erd-diagram.component.js CHANGED
@@ -1867,11 +1867,11 @@ export class ERDDiagramComponent {
1867
1867
  i0.ɵɵconditional(ctx.showHeader ? 1 : -1);
1868
1868
  i0.ɵɵadvance(3);
1869
1869
  i0.ɵɵconditional(ctx.isRefreshing ? 4 : -1);
1870
- } }, styles: ["[_nghost-%COMP%] {\n display: block;\n height: 100%;\n width: 100%;\n}\n\n.erd-section[_ngcontent-%COMP%] {\n background: white;\n overflow: hidden;\n height: 100%;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background-color: #f5f5f5;\n border-bottom: 1px solid #e0e0e0;\n flex-shrink: 0;\n}\n\n.section-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.erd-controls[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%] {\n padding: 4px 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n background: white;\n cursor: pointer;\n font-size: 12px;\n transition: background-color 0.2s ease;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n background-color: #f0f0f0;\n}\n\n.control-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.erd-container[_ngcontent-%COMP%] {\n flex: 1;\n position: relative;\n background-color: #fafafa;\n overflow: hidden;\n width: 100%;\n min-height: 400px;\n box-sizing: border-box;\n}\n\n.erd-container[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n width: 100% !important;\n height: 100% !important;\n box-sizing: border-box;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(250, 250, 250, 0.95);\n backdrop-filter: blur(2px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in-out;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n position: relative;\n width: 60px;\n height: 60px;\n}\n\n.spinner-ring[_ngcontent-%COMP%] {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-radius: 50%;\n animation: _ngcontent-%COMP%_spin 1.5s linear infinite;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(1) {\n border-top-color: #2196f3;\n animation-delay: 0s;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n border-top-color: #9c27b0;\n animation-delay: 0.3s;\n transform: scale(0.8);\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n border-top-color: #ff6b35;\n animation-delay: 0.6s;\n transform: scale(0.6);\n}\n\n.loading-text[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #666;\n font-weight: 500;\n text-align: center;\n}\n\n\n\n@keyframes _ngcontent-%COMP%_spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n\n\n[_nghost-%COMP%] .erd-container svg .node .entity-rect.highlighted {\n stroke: #ff9800 !important;\n stroke-width: 4px !important;\n filter: drop-shadow(0 0 8px rgba(255, 152, 0, 0.6));\n animation: _ngcontent-%COMP%_pulse 1s ease-in-out infinite alternate;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.selected .entity-rect {\n stroke: #2196f3 !important;\n stroke-width: 4px !important;\n filter: drop-shadow(0 0 12px rgba(33, 150, 243, 0.8));\n fill: #f3f8ff !important;\n animation: _ngcontent-%COMP%_selectedPulse 2s ease-in-out infinite alternate;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.selected .entity-header {\n fill: #2196f3 !important;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.selected .entity-header-bottom {\n fill: #2196f3 !important;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.selected .entity-name {\n fill: white !important;\n font-weight: bold !important;\n}\n\n@keyframes _ngcontent-%COMP%_selectedPulse {\n 0% {\n stroke-width: 4px;\n filter: drop-shadow(0 0 12px rgba(33, 150, 243, 0.8));\n }\n 100% {\n stroke-width: 5px;\n filter: drop-shadow(0 0 16px rgb(33, 150, 243));\n }\n}\n\n\n\n[_nghost-%COMP%] .erd-container svg .node.relationship-connected .entity-rect.relationship-highlighted {\n stroke: #ff6b35 !important;\n stroke-width: 3px !important;\n filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.5));\n animation: _ngcontent-%COMP%_entityPulse 1.5s ease-in-out infinite alternate;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.relationship-connected .entity-header {\n fill: #ff6b35 !important;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.relationship-connected .entity-header-bottom {\n fill: #ff6b35 !important;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.entity-connections-highlighted .entity-rect.connection-highlighted {\n stroke: #9b59b6 !important;\n stroke-width: 3px !important;\n filter: drop-shadow(0 0 6px rgba(155, 89, 182, 0.5));\n opacity: 0.9;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.entity-connections-highlighted .entity-header {\n fill: #9b59b6 !important;\n opacity: 0.8;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.entity-connections-highlighted .entity-header-bottom {\n fill: #9b59b6 !important;\n opacity: 0.8;\n}\n\n\n\n[_nghost-%COMP%] .erd-container svg .link-group .link {\n stroke-width: 2px;\n transition: all 0.2s ease;\n cursor: pointer;\n}\n\n[_nghost-%COMP%] .erd-container svg .link-group .link:hover {\n stroke-width: 3px;\n stroke: #ff6b35;\n opacity: 1;\n}\n\n[_nghost-%COMP%] .erd-container svg .link-group .link.highlighted {\n stroke: #ff6b35 !important;\n stroke-width: 4px !important;\n opacity: 1 !important;\n filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.6));\n animation: _ngcontent-%COMP%_linkPulse 1.5s ease-in-out infinite alternate;\n}\n\n[_nghost-%COMP%] .erd-container svg .link-group .link-label {\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n opacity: 0.8;\n pointer-events: none;\n transition: opacity 0.2s ease;\n}\n\n[_nghost-%COMP%] .erd-container svg .link-group .link-label.highlighted {\n opacity: 1;\n font-weight: bold;\n fill: #ff6b35;\n}\n\n[_nghost-%COMP%] .erd-container svg .link-group.highlighted {\n z-index: 10;\n}\n\n\n\n[_nghost-%COMP%] .erd-container svg .field-group .field-bg {\n transition: fill 0.2s;\n}\n\n[_nghost-%COMP%] .erd-container svg .field-group:hover .field-bg {\n fill: #e3f2fd !important;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n 0% {\n stroke-width: 4px;\n }\n 100% {\n stroke-width: 6px;\n }\n}\n\n@keyframes _ngcontent-%COMP%_linkPulse {\n 0% {\n stroke-width: 4px;\n filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.6));\n }\n 100% {\n stroke-width: 5px;\n filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.8));\n }\n}\n\n@keyframes _ngcontent-%COMP%_entityPulse {\n 0% {\n stroke-width: 3px;\n filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.5));\n }\n 100% {\n stroke-width: 4px;\n filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.7));\n }\n}"] });
1870
+ } }, styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n display: block;\n height: 100%;\n width: 100%;\n}\n\n.erd-section[_ngcontent-%COMP%] {\n background: var(--mat-sys-surface);\n overflow: hidden;\n height: 100%;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--mat-sys-surface-container);\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n flex-shrink: 0;\n}\n\n.section-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font: var(--mat-sys-title-medium);\n color: var(--mat-sys-on-surface);\n}\n\n.erd-controls[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font: var(--mat-sys-label-medium);\n background: var(--mat-sys-surface);\n color: var(--mat-sys-on-surface-variant);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mat-sys-surface-container);\n border-color: var(--mat-sys-outline);\n color: var(--mat-sys-on-surface);\n}\n\n.control-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.38;\n cursor: not-allowed;\n}\n\n.erd-container[_ngcontent-%COMP%] {\n flex: 1;\n position: relative;\n background: var(--mat-sys-surface-container-low);\n overflow: hidden;\n width: 100%;\n min-height: 400px;\n box-sizing: border-box;\n}\n\n.erd-container[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n width: 100% !important;\n height: 100% !important;\n box-sizing: border-box;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mat-sys-surface);\n opacity: 0.95;\n backdrop-filter: blur(2px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in-out;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n position: relative;\n width: 60px;\n height: 60px;\n}\n\n.spinner-ring[_ngcontent-%COMP%] {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-radius: 50%;\n animation: _ngcontent-%COMP%_spin 1.5s linear infinite;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(1) {\n border-top-color: var(--mat-sys-primary);\n animation-delay: 0s;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n border-top-color: var(--mat-sys-secondary);\n animation-delay: 0.3s;\n transform: scale(0.8);\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n border-top-color: var(--mat-sys-tertiary);\n animation-delay: 0.6s;\n transform: scale(0.6);\n}\n\n.loading-text[_ngcontent-%COMP%] {\n font: var(--mat-sys-body-medium);\n color: var(--mat-sys-on-surface-variant);\n font-weight: 500;\n text-align: center;\n}\n\n\n\n@keyframes _ngcontent-%COMP%_spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n\n\n[_nghost-%COMP%] .erd-container svg .node .entity-rect.highlighted {\n stroke: var(--mat-sys-tertiary) !important;\n stroke-width: 4px !important;\n filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mat-sys-tertiary) 60%, transparent));\n animation: _ngcontent-%COMP%_pulse 1s ease-in-out infinite alternate;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.selected .entity-rect {\n stroke: var(--mat-sys-primary) !important;\n stroke-width: 4px !important;\n filter: drop-shadow(0 0 12px color-mix(in srgb, var(--mat-sys-primary) 80%, transparent));\n fill: var(--mat-sys-primary-container) !important;\n animation: _ngcontent-%COMP%_selectedPulse 2s ease-in-out infinite alternate;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.selected .entity-header {\n fill: var(--mat-sys-primary) !important;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.selected .entity-header-bottom {\n fill: var(--mat-sys-primary) !important;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.selected .entity-name {\n fill: var(--mat-sys-on-primary) !important;\n font-weight: bold !important;\n}\n\n@keyframes _ngcontent-%COMP%_selectedPulse {\n 0% {\n stroke-width: 4px;\n filter: drop-shadow(0 0 12px color-mix(in srgb, var(--mat-sys-primary) 80%, transparent));\n }\n 100% {\n stroke-width: 5px;\n filter: drop-shadow(0 0 16px var(--mat-sys-primary));\n }\n}\n\n\n\n[_nghost-%COMP%] .erd-container svg .node.relationship-connected .entity-rect.relationship-highlighted {\n stroke: var(--mat-sys-tertiary) !important;\n stroke-width: 3px !important;\n filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mat-sys-tertiary) 50%, transparent));\n animation: _ngcontent-%COMP%_entityPulse 1.5s ease-in-out infinite alternate;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.relationship-connected .entity-header {\n fill: var(--mat-sys-tertiary) !important;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.relationship-connected .entity-header-bottom {\n fill: var(--mat-sys-tertiary) !important;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.entity-connections-highlighted .entity-rect.connection-highlighted {\n stroke: var(--mat-sys-secondary) !important;\n stroke-width: 3px !important;\n filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mat-sys-secondary) 50%, transparent));\n opacity: 0.9;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.entity-connections-highlighted .entity-header {\n fill: var(--mat-sys-secondary) !important;\n opacity: 0.8;\n}\n\n[_nghost-%COMP%] .erd-container svg .node.entity-connections-highlighted .entity-header-bottom {\n fill: var(--mat-sys-secondary) !important;\n opacity: 0.8;\n}\n\n\n\n[_nghost-%COMP%] .erd-container svg .link-group .link {\n stroke-width: 2px;\n transition: all 0.2s ease;\n cursor: pointer;\n}\n\n[_nghost-%COMP%] .erd-container svg .link-group .link:hover {\n stroke-width: 3px;\n stroke: var(--mat-sys-tertiary);\n opacity: 1;\n}\n\n[_nghost-%COMP%] .erd-container svg .link-group .link.highlighted {\n stroke: var(--mat-sys-tertiary) !important;\n stroke-width: 4px !important;\n opacity: 1 !important;\n filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mat-sys-tertiary) 60%, transparent));\n animation: _ngcontent-%COMP%_linkPulse 1.5s ease-in-out infinite alternate;\n}\n\n[_nghost-%COMP%] .erd-container svg .link-group .link-label {\n font-family: Roboto, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n opacity: 0.8;\n pointer-events: none;\n transition: opacity 0.2s ease;\n}\n\n[_nghost-%COMP%] .erd-container svg .link-group .link-label.highlighted {\n opacity: 1;\n font-weight: bold;\n fill: var(--mat-sys-tertiary);\n}\n\n[_nghost-%COMP%] .erd-container svg .link-group.highlighted {\n z-index: 10;\n}\n\n\n\n[_nghost-%COMP%] .erd-container svg .field-group .field-bg {\n transition: fill 0.2s;\n}\n\n[_nghost-%COMP%] .erd-container svg .field-group:hover .field-bg {\n fill: var(--mat-sys-primary-container) !important;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n 0% {\n stroke-width: 4px;\n }\n 100% {\n stroke-width: 6px;\n }\n}\n\n@keyframes _ngcontent-%COMP%_linkPulse {\n 0% {\n stroke-width: 4px;\n filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mat-sys-tertiary) 60%, transparent));\n }\n 100% {\n stroke-width: 5px;\n filter: drop-shadow(0 0 10px color-mix(in srgb, var(--mat-sys-tertiary) 80%, transparent));\n }\n}\n\n@keyframes _ngcontent-%COMP%_entityPulse {\n 0% {\n stroke-width: 3px;\n filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mat-sys-tertiary) 50%, transparent));\n }\n 100% {\n stroke-width: 4px;\n filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mat-sys-tertiary) 70%, transparent));\n }\n}"] });
1871
1871
  }
1872
1872
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ERDDiagramComponent, [{
1873
1873
  type: Component,
1874
- args: [{ selector: 'mj-erd-diagram', template: "<div class=\"erd-section\">\n @if (showHeader) {\n <div class=\"section-header\">\n <h3>{{ headerTitle }}</h3>\n <div class=\"erd-controls\">\n <button class=\"control-btn\" (click)=\"zoomIn()\" title=\"Zoom In\">\n <span class=\"fa-solid fa-search-plus\"></span>\n </button>\n <button class=\"control-btn\" (click)=\"zoomOut()\" title=\"Zoom Out\">\n <span class=\"fa-solid fa-search-minus\"></span>\n </button>\n <button class=\"control-btn\" (click)=\"resetZoom()\" title=\"Reset Zoom\">\n <span class=\"fa-solid fa-expand\"></span>\n </button>\n <button class=\"control-btn\" (click)=\"refresh(); refreshRequested.emit()\" title=\"Refresh Diagram\">\n <span class=\"fa-solid fa-refresh\"></span>\n </button>\n </div>\n </div>\n }\n <div class=\"erd-container\" #erdContainer>\n @if (isRefreshing) {\n <div class=\"loading-overlay\">\n <div class=\"loading-content\">\n <div class=\"loading-spinner\">\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n </div>\n <div class=\"loading-text\">Loading diagram...</div>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: [":host {\n display: block;\n height: 100%;\n width: 100%;\n}\n\n.erd-section {\n background: white;\n overflow: hidden;\n height: 100%;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background-color: #f5f5f5;\n border-bottom: 1px solid #e0e0e0;\n flex-shrink: 0;\n}\n\n.section-header h3 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.erd-controls {\n display: flex;\n gap: 8px;\n}\n\n.control-btn {\n padding: 4px 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n background: white;\n cursor: pointer;\n font-size: 12px;\n transition: background-color 0.2s ease;\n}\n\n.control-btn:hover {\n background-color: #f0f0f0;\n}\n\n.control-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.erd-container {\n flex: 1;\n position: relative;\n background-color: #fafafa;\n overflow: hidden;\n width: 100%;\n min-height: 400px;\n box-sizing: border-box;\n}\n\n.erd-container svg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100% !important;\n height: 100% !important;\n box-sizing: border-box;\n}\n\n/* Loading overlay */\n.loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(250, 250, 250, 0.95);\n backdrop-filter: blur(2px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: fadeIn 0.3s ease-in-out;\n}\n\n.loading-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n}\n\n.loading-spinner {\n position: relative;\n width: 60px;\n height: 60px;\n}\n\n.spinner-ring {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-radius: 50%;\n animation: spin 1.5s linear infinite;\n}\n\n.spinner-ring:nth-child(1) {\n border-top-color: #2196f3;\n animation-delay: 0s;\n}\n\n.spinner-ring:nth-child(2) {\n border-top-color: #9c27b0;\n animation-delay: 0.3s;\n transform: scale(0.8);\n}\n\n.spinner-ring:nth-child(3) {\n border-top-color: #ff6b35;\n animation-delay: 0.6s;\n transform: scale(0.6);\n}\n\n.loading-text {\n font-size: 14px;\n color: #666;\n font-weight: 500;\n text-align: center;\n}\n\n/* Animations */\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Node highlighting styles */\n:host ::ng-deep .erd-container svg .node .entity-rect.highlighted {\n stroke: #ff9800 !important;\n stroke-width: 4px !important;\n filter: drop-shadow(0 0 8px rgba(255, 152, 0, 0.6));\n animation: pulse 1s ease-in-out infinite alternate;\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-rect {\n stroke: #2196f3 !important;\n stroke-width: 4px !important;\n filter: drop-shadow(0 0 12px rgba(33, 150, 243, 0.8));\n fill: #f3f8ff !important;\n animation: selectedPulse 2s ease-in-out infinite alternate;\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-header {\n fill: #2196f3 !important;\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-header-bottom {\n fill: #2196f3 !important;\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-name {\n fill: white !important;\n font-weight: bold !important;\n}\n\n@keyframes selectedPulse {\n 0% {\n stroke-width: 4px;\n filter: drop-shadow(0 0 12px rgba(33, 150, 243, 0.8));\n }\n 100% {\n stroke-width: 5px;\n filter: drop-shadow(0 0 16px rgb(33, 150, 243));\n }\n}\n\n/* Related/connected nodes */\n:host ::ng-deep .erd-container svg .node.relationship-connected .entity-rect.relationship-highlighted {\n stroke: #ff6b35 !important;\n stroke-width: 3px !important;\n filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.5));\n animation: entityPulse 1.5s ease-in-out infinite alternate;\n}\n\n:host ::ng-deep .erd-container svg .node.relationship-connected .entity-header {\n fill: #ff6b35 !important;\n}\n\n:host ::ng-deep .erd-container svg .node.relationship-connected .entity-header-bottom {\n fill: #ff6b35 !important;\n}\n\n:host ::ng-deep .erd-container svg .node.entity-connections-highlighted .entity-rect.connection-highlighted {\n stroke: #9b59b6 !important;\n stroke-width: 3px !important;\n filter: drop-shadow(0 0 6px rgba(155, 89, 182, 0.5));\n opacity: 0.9;\n}\n\n:host ::ng-deep .erd-container svg .node.entity-connections-highlighted .entity-header {\n fill: #9b59b6 !important;\n opacity: 0.8;\n}\n\n:host ::ng-deep .erd-container svg .node.entity-connections-highlighted .entity-header-bottom {\n fill: #9b59b6 !important;\n opacity: 0.8;\n}\n\n/* Link styles */\n:host ::ng-deep .erd-container svg .link-group .link {\n stroke-width: 2px;\n transition: all 0.2s ease;\n cursor: pointer;\n}\n\n:host ::ng-deep .erd-container svg .link-group .link:hover {\n stroke-width: 3px;\n stroke: #ff6b35;\n opacity: 1;\n}\n\n:host ::ng-deep .erd-container svg .link-group .link.highlighted {\n stroke: #ff6b35 !important;\n stroke-width: 4px !important;\n opacity: 1 !important;\n filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.6));\n animation: linkPulse 1.5s ease-in-out infinite alternate;\n}\n\n:host ::ng-deep .erd-container svg .link-group .link-label {\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n opacity: 0.8;\n pointer-events: none;\n transition: opacity 0.2s ease;\n}\n\n:host ::ng-deep .erd-container svg .link-group .link-label.highlighted {\n opacity: 1;\n font-weight: bold;\n fill: #ff6b35;\n}\n\n:host ::ng-deep .erd-container svg .link-group.highlighted {\n z-index: 10;\n}\n\n/* Field hover */\n:host ::ng-deep .erd-container svg .field-group .field-bg {\n transition: fill 0.2s;\n}\n\n:host ::ng-deep .erd-container svg .field-group:hover .field-bg {\n fill: #e3f2fd !important;\n}\n\n@keyframes pulse {\n 0% {\n stroke-width: 4px;\n }\n 100% {\n stroke-width: 6px;\n }\n}\n\n@keyframes linkPulse {\n 0% {\n stroke-width: 4px;\n filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.6));\n }\n 100% {\n stroke-width: 5px;\n filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.8));\n }\n}\n\n@keyframes entityPulse {\n 0% {\n stroke-width: 3px;\n filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.5));\n }\n 100% {\n stroke-width: 4px;\n filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.7));\n }\n}\n"] }]
1874
+ args: [{ selector: 'mj-erd-diagram', template: "<div class=\"erd-section\">\n @if (showHeader) {\n <div class=\"section-header\">\n <h3>{{ headerTitle }}</h3>\n <div class=\"erd-controls\">\n <button class=\"control-btn\" (click)=\"zoomIn()\" title=\"Zoom In\">\n <span class=\"fa-solid fa-search-plus\"></span>\n </button>\n <button class=\"control-btn\" (click)=\"zoomOut()\" title=\"Zoom Out\">\n <span class=\"fa-solid fa-search-minus\"></span>\n </button>\n <button class=\"control-btn\" (click)=\"resetZoom()\" title=\"Reset Zoom\">\n <span class=\"fa-solid fa-expand\"></span>\n </button>\n <button class=\"control-btn\" (click)=\"refresh(); refreshRequested.emit()\" title=\"Refresh Diagram\">\n <span class=\"fa-solid fa-refresh\"></span>\n </button>\n </div>\n </div>\n }\n <div class=\"erd-container\" #erdContainer>\n @if (isRefreshing) {\n <div class=\"loading-overlay\">\n <div class=\"loading-content\">\n <div class=\"loading-spinner\">\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n </div>\n <div class=\"loading-text\">Loading diagram...</div>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["/**\n * ERD Diagram Component - MD3 Styled\n * Material Design 3 theming for the Entity Relationship Diagram visualization\n */\n\n:host {\n display: block;\n height: 100%;\n width: 100%;\n}\n\n.erd-section {\n background: var(--mat-sys-surface);\n overflow: hidden;\n height: 100%;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--mat-sys-surface-container);\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n flex-shrink: 0;\n}\n\n.section-header h3 {\n margin: 0;\n font: var(--mat-sys-title-medium);\n color: var(--mat-sys-on-surface);\n}\n\n.erd-controls {\n display: flex;\n gap: 8px;\n}\n\n.control-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font: var(--mat-sys-label-medium);\n background: var(--mat-sys-surface);\n color: var(--mat-sys-on-surface-variant);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.control-btn:hover:not(:disabled) {\n background: var(--mat-sys-surface-container);\n border-color: var(--mat-sys-outline);\n color: var(--mat-sys-on-surface);\n}\n\n.control-btn:disabled {\n opacity: 0.38;\n cursor: not-allowed;\n}\n\n.erd-container {\n flex: 1;\n position: relative;\n background: var(--mat-sys-surface-container-low);\n overflow: hidden;\n width: 100%;\n min-height: 400px;\n box-sizing: border-box;\n}\n\n.erd-container svg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100% !important;\n height: 100% !important;\n box-sizing: border-box;\n}\n\n/* Loading overlay - using mj-loading component styling */\n.loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mat-sys-surface);\n opacity: 0.95;\n backdrop-filter: blur(2px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: fadeIn 0.3s ease-in-out;\n}\n\n.loading-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n}\n\n.loading-spinner {\n position: relative;\n width: 60px;\n height: 60px;\n}\n\n.spinner-ring {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-radius: 50%;\n animation: spin 1.5s linear infinite;\n}\n\n.spinner-ring:nth-child(1) {\n border-top-color: var(--mat-sys-primary);\n animation-delay: 0s;\n}\n\n.spinner-ring:nth-child(2) {\n border-top-color: var(--mat-sys-secondary);\n animation-delay: 0.3s;\n transform: scale(0.8);\n}\n\n.spinner-ring:nth-child(3) {\n border-top-color: var(--mat-sys-tertiary);\n animation-delay: 0.6s;\n transform: scale(0.6);\n}\n\n.loading-text {\n font: var(--mat-sys-body-medium);\n color: var(--mat-sys-on-surface-variant);\n font-weight: 500;\n text-align: center;\n}\n\n/* Animations */\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Node highlighting styles - using MD3 color tokens */\n:host ::ng-deep .erd-container svg .node .entity-rect.highlighted {\n stroke: var(--mat-sys-tertiary) !important;\n stroke-width: 4px !important;\n filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mat-sys-tertiary) 60%, transparent));\n animation: pulse 1s ease-in-out infinite alternate;\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-rect {\n stroke: var(--mat-sys-primary) !important;\n stroke-width: 4px !important;\n filter: drop-shadow(0 0 12px color-mix(in srgb, var(--mat-sys-primary) 80%, transparent));\n fill: var(--mat-sys-primary-container) !important;\n animation: selectedPulse 2s ease-in-out infinite alternate;\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-header {\n fill: var(--mat-sys-primary) !important;\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-header-bottom {\n fill: var(--mat-sys-primary) !important;\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-name {\n fill: var(--mat-sys-on-primary) !important;\n font-weight: bold !important;\n}\n\n@keyframes selectedPulse {\n 0% {\n stroke-width: 4px;\n filter: drop-shadow(0 0 12px color-mix(in srgb, var(--mat-sys-primary) 80%, transparent));\n }\n 100% {\n stroke-width: 5px;\n filter: drop-shadow(0 0 16px var(--mat-sys-primary));\n }\n}\n\n/* Related/connected nodes - using tertiary accent */\n:host ::ng-deep .erd-container svg .node.relationship-connected .entity-rect.relationship-highlighted {\n stroke: var(--mat-sys-tertiary) !important;\n stroke-width: 3px !important;\n filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mat-sys-tertiary) 50%, transparent));\n animation: entityPulse 1.5s ease-in-out infinite alternate;\n}\n\n:host ::ng-deep .erd-container svg .node.relationship-connected .entity-header {\n fill: var(--mat-sys-tertiary) !important;\n}\n\n:host ::ng-deep .erd-container svg .node.relationship-connected .entity-header-bottom {\n fill: var(--mat-sys-tertiary) !important;\n}\n\n:host ::ng-deep .erd-container svg .node.entity-connections-highlighted .entity-rect.connection-highlighted {\n stroke: var(--mat-sys-secondary) !important;\n stroke-width: 3px !important;\n filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mat-sys-secondary) 50%, transparent));\n opacity: 0.9;\n}\n\n:host ::ng-deep .erd-container svg .node.entity-connections-highlighted .entity-header {\n fill: var(--mat-sys-secondary) !important;\n opacity: 0.8;\n}\n\n:host ::ng-deep .erd-container svg .node.entity-connections-highlighted .entity-header-bottom {\n fill: var(--mat-sys-secondary) !important;\n opacity: 0.8;\n}\n\n/* Link styles */\n:host ::ng-deep .erd-container svg .link-group .link {\n stroke-width: 2px;\n transition: all 0.2s ease;\n cursor: pointer;\n}\n\n:host ::ng-deep .erd-container svg .link-group .link:hover {\n stroke-width: 3px;\n stroke: var(--mat-sys-tertiary);\n opacity: 1;\n}\n\n:host ::ng-deep .erd-container svg .link-group .link.highlighted {\n stroke: var(--mat-sys-tertiary) !important;\n stroke-width: 4px !important;\n opacity: 1 !important;\n filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mat-sys-tertiary) 60%, transparent));\n animation: linkPulse 1.5s ease-in-out infinite alternate;\n}\n\n:host ::ng-deep .erd-container svg .link-group .link-label {\n font-family: Roboto, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n opacity: 0.8;\n pointer-events: none;\n transition: opacity 0.2s ease;\n}\n\n:host ::ng-deep .erd-container svg .link-group .link-label.highlighted {\n opacity: 1;\n font-weight: bold;\n fill: var(--mat-sys-tertiary);\n}\n\n:host ::ng-deep .erd-container svg .link-group.highlighted {\n z-index: 10;\n}\n\n/* Field hover */\n:host ::ng-deep .erd-container svg .field-group .field-bg {\n transition: fill 0.2s;\n}\n\n:host ::ng-deep .erd-container svg .field-group:hover .field-bg {\n fill: var(--mat-sys-primary-container) !important;\n}\n\n@keyframes pulse {\n 0% {\n stroke-width: 4px;\n }\n 100% {\n stroke-width: 6px;\n }\n}\n\n@keyframes linkPulse {\n 0% {\n stroke-width: 4px;\n filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mat-sys-tertiary) 60%, transparent));\n }\n 100% {\n stroke-width: 5px;\n filter: drop-shadow(0 0 10px color-mix(in srgb, var(--mat-sys-tertiary) 80%, transparent));\n }\n}\n\n@keyframes entityPulse {\n 0% {\n stroke-width: 3px;\n filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mat-sys-tertiary) 50%, transparent));\n }\n 100% {\n stroke-width: 4px;\n filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mat-sys-tertiary) 70%, transparent));\n }\n}\n"] }]
1875
1875
  }], null, { erdContainer: [{
1876
1876
  type: ViewChild,
1877
1877
  args: ['erdContainer', { static: false }]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@memberjunction/ng-entity-relationship-diagram",
3
- "version": "3.1.1",
3
+ "version": "3.3.0",
4
4
  "description": "MemberJunction: Entity Relationship Diagram (ERD) component for visualizing entity relationships using D3.js force-directed graphs",
5
5
  "main": "./dist/public-api.js",
6
6
  "typings": "./dist/public-api.d.ts",
@@ -34,7 +34,7 @@
34
34
  "dependencies": {
35
35
  "@angular/forms": "18.2.14",
36
36
  "@dagrejs/dagre": "^1.1.8",
37
- "@memberjunction/core": "3.1.1",
37
+ "@memberjunction/core": "3.3.0",
38
38
  "@progress/kendo-angular-layout": "^16.2.0",
39
39
  "@types/d3": "^7.4.3",
40
40
  "d3": "^7.9.0",