@memberjunction/ng-entity-relationship-diagram 5.3.1 → 5.4.1

package/dist/lib/components/entity-filter-panel/entity-filter-panel.component.js

@@ -154,11 +154,11 @@ export class EntityFilterPanelComponent {
             i0.ɵɵtwoWayProperty("ngModel", ctx.filters.entityStatus);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngValue", null);
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.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}"] });
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel], styles: ["\n\n\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n  height: 100%;\n  background: var(--mj-bg-page);\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(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  min-width: 0;\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\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-size: 16px;\n  font-weight: 700;\n  color: var(--mj-brand-primary);\n}\n\n.filter-panel-header[_ngcontent-%COMP%]   .filter-summary-inline[_ngcontent-%COMP%]   .summary-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\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(--mj-text-secondary);\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(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\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-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.filter-group[_ngcontent-%COMP%]   .filter-label[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  color: var(--mj-brand-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-size: 14px;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  border: 1px solid var(--mj-color-neutral-400);\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(--mj-brand-primary);\n  box-shadow: 0 0 0 3px var(--mj-color-accent-300);\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(--mj-text-secondary);\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(--mj-border-default);\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-size: 14px;\n  font-weight: 500;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-color-neutral-400);\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(--mj-bg-surface-active);\n  border-color: var(--mj-color-neutral-400);\n  color: var(--mj-text-primary);\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%]:active {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-actions[_ngcontent-%COMP%]   .reset-btn[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-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}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityFilterPanelComponent, [{
         type: Component,
-        args: [{ standalone: false, 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        @for (schema of distinctSchemas; track schema) {\n          <option [ngValue]=\"schema.value\">\n            {{ schema.text }}\n          </option>\n        }\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"] }]
+        args: [{ standalone: false, 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        @for (schema of distinctSchemas; track schema) {\n          <option [ngValue]=\"schema.value\">\n            {{ schema.text }}\n          </option>\n        }\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 - MJ Design Token Styled\n * MemberJunction design tokens for the entity filter panel\n */\n\n.filter-panel {\n  height: 100%;\n  background: var(--mj-bg-page);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-width: 0;\n}\n\n/* Panel Header */\n.filter-panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  min-width: 0;\n}\n\n.filter-panel-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\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-size: 16px;\n  font-weight: 700;\n  color: var(--mj-brand-primary);\n}\n\n.filter-panel-header .filter-summary-inline .summary-label {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n/* 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(--mj-text-secondary);\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(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\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-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.filter-group .filter-label .fa-solid {\n  color: var(--mj-brand-primary);\n  width: 16px;\n}\n\n/* 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-size: 14px;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  border: 1px solid var(--mj-color-neutral-400);\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(--mj-brand-primary);\n  box-shadow: 0 0 0 3px var(--mj-color-accent-300);\n}\n\n.filter-group .filter-input::placeholder,\n.filter-group .filter-select::placeholder {\n  color: var(--mj-text-secondary);\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(--mj-border-default);\n}\n\n/* 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-size: 14px;\n  font-weight: 500;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-color-neutral-400);\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(--mj-bg-surface-active);\n  border-color: var(--mj-color-neutral-400);\n  color: var(--mj-text-primary);\n}\n\n.filter-actions .reset-btn:active {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-actions .reset-btn:focus-visible {\n  outline: 2px solid var(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n.filter-actions .reset-btn .fa-solid {\n  font-size: 12px;\n}\n"] }]
     }], null, { entities: [{
             type: Input
         }], filteredEntities: [{

package/dist/lib/components/entity-filter-panel/entity-filter-panel.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"entity-filter-panel.component.js","sourceRoot":"","sources":["../../../../src/lib/components/entity-filter-panel/entity-filter-panel.component.ts","../../../../src/lib/components/entity-filter-panel/entity-filter-panel.component.html"],"names":[],"mappings":"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"}
+{"version":3,"file":"entity-filter-panel.component.js","sourceRoot":"","sources":["../../../../src/lib/components/entity-filter-panel/entity-filter-panel.component.ts","../../../../src/lib/components/entity-filter-panel/entity-filter-panel.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';\nimport { EntityInfo } from '@memberjunction/core';\n\n/**\n * Filter configuration for entity filtering.\n */\nexport interface EntityFilter {\n  schemaName: string | null;\n  entityName: string;\n  entityStatus: string | null;\n  baseTable: string;\n}\n\n/**\n * Entity filter panel component that provides filtering controls for entities.\n * Supports filtering by schema, entity name, base table, and status.\n *\n * This component is designed to be used alongside the ERD diagram to filter\n * which entities are displayed.\n */\n@Component({\n  standalone: false,\n  selector: 'mj-entity-filter-panel',\n  templateUrl: './entity-filter-panel.component.html',\n  styleUrls: ['./entity-filter-panel.component.css']\n})\nexport class EntityFilterPanelComponent implements OnInit, OnChanges {\n  /** All entities available for filtering */\n  @Input() entities: EntityInfo[] = [];\n\n  /** Currently filtered entities (for display count) */\n  @Input() filteredEntities: EntityInfo[] = [];\n\n  /** Current filter values */\n  @Input() filters: EntityFilter = {\n    schemaName: null,\n    entityName: '',\n    entityStatus: null,\n    baseTable: '',\n  };\n\n  /** Emitted when any filter value changes */\n  @Output() filtersChange = new EventEmitter<EntityFilter>();\n\n  /** Emitted when filter is applied (for debouncing) */\n  @Output() filterChange = new EventEmitter<void>();\n\n  /** Emitted when reset button is clicked */\n  @Output() resetFilters = new EventEmitter<void>();\n\n  /** Emitted when close button is clicked */\n  @Output() closePanel = new EventEmitter<void>();\n\n  public distinctSchemas: Array<{ text: string; value: string }> = [];\n\n  ngOnInit(): void {\n    this.updateDistinctSchemas();\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['entities']) {\n      this.updateDistinctSchemas();\n    }\n  }\n\n  public onFilterChange(): void {\n    this.filtersChange.emit(this.filters);\n    this.filterChange.emit();\n  }\n\n  public resetAllFilters(): void {\n    this.resetFilters.emit();\n  }\n\n  public toggleFilterPanel(): void {\n    this.closePanel.emit();\n  }\n\n  private updateDistinctSchemas(): void {\n    const schemas = new Set<string>();\n    this.entities.forEach(entity => {\n      if (entity.SchemaName) {\n        schemas.add(entity.SchemaName);\n      }\n    });\n\n    this.distinctSchemas = Array.from(schemas)\n      .sort()\n      .map(schema => ({ text: schema, value: schema }));\n  }\n}\n","<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        @for (schema of distinctSchemas; track schema) {\n          <option [ngValue]=\"schema.value\">\n            {{ schema.text }}\n          </option>\n        }\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"]}

package/dist/lib/components/erd-composite/erd-composite.component.js

@@ -360,11 +360,11 @@ export class ERDCompositeComponent {
             i0.ɵɵproperty("size", ctx.selectedEntity ? "320px" : "0px")("collapsible", false)("resizable", !!ctx.selectedEntity)("scrollable", false)("hidden", !ctx.selectedEntity);
             i0.ɵɵadvance();
             i0.ɵɵproperty("selectedEntity", ctx.selectedEntity)("allEntityFields", ctx.allEntityFields)("fieldsSectionExpanded", ctx.fieldsSectionExpanded)("relationshipsSectionExpanded", ctx.relationshipsSectionExpanded);
-        } }, 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}"] });
+        } }, 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(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 28px;\n  box-shadow: var(--mj-shadow-lg);\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(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\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(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 20px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.back-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-color-neutral-400);\n  color: var(--mj-text-primary);\n}\n\n.back-btn[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-brand-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}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ERDCompositeComponent, [{
         type: Component,
-        args: [{ standalone: false, 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"] }]
+        args: [{ standalone: false, 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 - MJ Design Tokens\n * MJ 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(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 28px;\n  box-shadow: var(--mj-shadow-lg);\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(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\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(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 20px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.back-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-color-neutral-400);\n  color: var(--mj-text-primary);\n}\n\n.back-btn:focus-visible {\n  outline: 2px solid var(--mj-brand-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"] }]
     }], null, { mjEntityErd: [{
             type: ViewChild,
             args: [MJEntityERDComponent]

package/dist/lib/components/erd-composite/erd-composite.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"erd-composite.component.js","sourceRoot":"","sources":["../../../../src/lib/components/erd-composite/erd-composite.component.ts","../../../../src/lib/components/erd-composite/erd-composite.component.html"],"names":[],"mappings":"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"}
+{"version":3,"file":"erd-composite.component.js","sourceRoot":"","sources":["../../../../src/lib/components/erd-composite/erd-composite.component.ts","../../../../src/lib/components/erd-composite/erd-composite.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, ViewChild } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\nimport { EntityInfo, EntityFieldInfo, Metadata } from '@memberjunction/core';\nimport { MJEntityERDComponent } from '../mj-entity-erd.component';\nimport { EntitySelectedEvent, OpenEntityRecordEvent } from '../mj-entity-erd.component';\nimport { ERDConfig, ERDState } from '../../interfaces/erd-types';\nimport { EntityFilter } from '../entity-filter-panel/entity-filter-panel.component';\n\n/**\n * State object for the ERD composite component.\n * Used for state persistence and restoration.\n */\nexport interface ERDCompositeState {\n  filterPanelVisible: boolean;\n  filterPanelWidth: number;\n  filters: EntityFilter;\n  selectedEntityId: string | null;\n  zoomLevel: number;\n  panPosition: { x: number; y: number };\n  fieldsSectionExpanded: boolean;\n  relationshipsSectionExpanded: boolean;\n}\n\n/**\n * ERD Composite component that combines the ERD diagram with filter and details panels.\n *\n * This is a complete, ready-to-use ERD exploration interface that includes:\n * - Left panel: Entity filter controls (schema, name, status, etc.)\n * - Center: Interactive ERD diagram\n * - Right panel: Entity details (shown when an entity is selected)\n *\n * The component handles all internal state but emits events for:\n * - State changes (for parent to persist user preferences)\n * - Open record requests (for parent to handle navigation)\n *\n * ## Usage\n *\n * ```html\n * <mj-erd-composite\n *   (stateChange)=\"onStateChange($event)\"\n *   (userStateChange)=\"saveUserPreferences($event)\"\n *   (openRecord)=\"navigateToRecord($event)\">\n * </mj-erd-composite>\n * ```\n *\n * ## State Persistence\n *\n * The component emits `userStateChange` events (debounced 1s) when user changes\n * any settings. The parent should save this state and restore it using `loadUserState()`:\n *\n * ```typescript\n * @ViewChild(ERDCompositeComponent) erdComposite!: ERDCompositeComponent;\n *\n * ngAfterViewInit() {\n *   const savedState = await this.loadSavedState();\n *   if (savedState) {\n *     this.erdComposite.loadUserState(savedState);\n *   }\n * }\n *\n * onUserStateChange(state: ERDCompositeState) {\n *   await this.saveState(state);\n * }\n * ```\n */\n@Component({\n  standalone: false,\n  selector: 'mj-erd-composite',\n  templateUrl: './erd-composite.component.html',\n  styleUrls: ['./erd-composite.component.css']\n})\nexport class ERDCompositeComponent implements OnInit, OnDestroy {\n  @ViewChild(MJEntityERDComponent) mjEntityErd!: MJEntityERDComponent;\n\n  /** Whether the ERD is in a refreshing state */\n  @Input() isRefreshingERD = false;\n\n  /**\n   * Optional: Focus entities to display in the ERD.\n   * When provided, only these entities will be shown (useful for single-entity views).\n   * When not provided, all entities from metadata are loaded.\n   */\n  @Input() focusEntities: EntityInfo[] | null = null;\n\n  /**\n   * Whether to show the filter panel on the left.\n   * Set to false for focused/single-entity views.\n   */\n  @Input() showFilterPanel = true;\n\n  /**\n   * Depth of relationships to display.\n   * 1 = only direct relationships, 2 = relationships of relationships, etc.\n   */\n  @Input() depth = 1;\n\n  /**\n   * Whether to show the ERD header bar.\n   */\n  @Input() showHeader = true;\n\n  /** All entities loaded from metadata */\n  public entities: EntityInfo[] = [];\n\n  /** All entity fields (flattened from all entities) */\n  public allEntityFields: EntityFieldInfo[] = [];\n\n  /** Emitted on any state change (debounced 50ms) */\n  @Output() stateChange = new EventEmitter<ERDCompositeState>();\n\n  /** Emitted on user-initiated state changes (debounced 1s) for persistence */\n  @Output() userStateChange = new EventEmitter<ERDCompositeState>();\n\n  /** Emitted when an entity is opened (e.g., double-clicked in details panel) */\n  @Output() entityOpened = new EventEmitter<EntityInfo>();\n\n  /** Emitted when requesting to open an entity record (for navigation) */\n  @Output() openRecord = new EventEmitter<{EntityName: string, RecordID: string}>();\n\n  // Panel visibility and configuration\n  public filterPanelVisible = true;\n  public fieldsSectionExpanded = true;\n  public relationshipsSectionExpanded = true;\n\n  /** ERD configuration - skip animation for faster rendering */\n  public erdConfig: ERDConfig = { skipAnimation: true };\n\n  // Entity state\n  public selectedEntity: EntityInfo | null = null;\n  public filteredEntities: EntityInfo[] = [];\n  public isDataLoaded = false;\n\n  // Filters\n  public filters: EntityFilter = {\n    schemaName: null,\n    entityName: '',\n    entityStatus: null,\n    baseTable: '',\n  };\n\n  // State management\n  private stateChangeSubject = new Subject<ERDCompositeState>();\n  private userStateChangeSubject = new Subject<ERDCompositeState>();\n  private filterChangeSubject = new Subject<void>();\n\n  async ngOnInit(): Promise<void> {\n    // Initialize filter panel visibility based on input\n    this.filterPanelVisible = this.showFilterPanel;\n\n    this.setupStateManagement();\n    await this.loadData();\n\n    // Use focusEntities if provided, otherwise use all entities\n    if (this.focusEntities && this.focusEntities.length > 0) {\n      this.filteredEntities = [...this.focusEntities];\n    } else {\n      this.filteredEntities = [...this.entities];\n      this.applyFilters();\n    }\n\n    this.isDataLoaded = true;\n\n    // Notify parent that data is loaded and ready for state loading\n    this.emitStateChange();\n  }\n\n  ngOnDestroy(): void {\n    this.stateChangeSubject.complete();\n    this.userStateChangeSubject.complete();\n    this.filterChangeSubject.complete();\n  }\n\n  private async loadData(): Promise<void> {\n    // Load entities from metadata (always needed for allEntityFields and relationship lookups)\n    const md = new Metadata();\n    this.entities = md.Entities;\n\n    // Load all entity fields from entities\n    this.allEntityFields = this.entities\n      .map((entity) => {\n        return entity.Fields;\n      })\n      .flat();\n  }\n\n  private setupStateManagement(): void {\n    // State change emissions with debouncing\n    this.stateChangeSubject.pipe(\n      debounceTime(50)\n    ).subscribe(state => {\n      this.stateChange.emit(state);\n    });\n\n    this.userStateChangeSubject.pipe(\n      debounceTime(1000)\n    ).subscribe(state => {\n      this.userStateChange.emit(state);\n    });\n\n    // Filter changes with debouncing\n    this.filterChangeSubject.pipe(\n      debounceTime(300)\n    ).subscribe(() => {\n      this.applyFilters();\n      this.emitStateChange();\n      this.emitUserStateChange();\n    });\n  }\n\n  public onFilterChange(): void {\n    this.filterChangeSubject.next();\n  }\n\n  public onFiltersChange(newFilters: EntityFilter): void {\n    this.filters = { ...newFilters };\n    this.onFilterChange();\n  }\n\n  public onResetFilters(): void {\n    this.filters = {\n      schemaName: null,\n      entityName: '',\n      entityStatus: null,\n      baseTable: '',\n    };\n    this.onFilterChange();\n  }\n\n  public onToggleFilterPanel(): void {\n    this.filterPanelVisible = !this.filterPanelVisible;\n\n    // Trigger ERD resize when filter panel is toggled\n    if (this.mjEntityErd) {\n      this.mjEntityErd.triggerResize();\n    }\n\n    this.emitStateChange();\n    this.emitUserStateChange();\n  }\n\n  public onEntityDeselected(): void {\n    this.selectedEntity = null;\n\n    this.emitStateChange();\n    this.emitUserStateChange();\n  }\n\n  public onEntitySelected(entity: EntityInfo): void {\n    this.selectedEntity = entity;\n\n    this.emitStateChange();\n    this.emitUserStateChange();\n  }\n\n  /**\n   * Handle entity selection from the mj-entity-erd wrapper.\n   * Updates internal state.\n   */\n  public onERDEntitySelected(event: EntitySelectedEvent): void {\n    this.selectedEntity = event.entity;\n    this.emitStateChange();\n    this.emitUserStateChange();\n  }\n\n  /**\n   * Handle open record from the mj-entity-erd wrapper (double-click).\n   * Opens the entity record using the entity form.\n   */\n  public onERDOpenRecord(event: OpenEntityRecordEvent): void {\n    this.openRecord.emit({ EntityName: event.EntityName, RecordID: event.RecordID });\n  }\n\n  /**\n   * Handle state changes from the ERD component.\n   */\n  public onERDStateChange(_state: ERDState): void {\n    // State changes are tracked for user preference persistence\n    this.emitUserStateChange();\n  }\n\n  public onEntityOpened(entity: EntityInfo): void {\n    this.entityOpened.emit(entity);\n  }\n\n  public onFieldsSectionToggle(): void {\n    this.fieldsSectionExpanded = !this.fieldsSectionExpanded;\n    this.emitUserStateChange();\n  }\n\n  public onRelationshipsSectionToggle(): void {\n    this.relationshipsSectionExpanded = !this.relationshipsSectionExpanded;\n    this.emitUserStateChange();\n  }\n\n  public onOpenRecord(event: {EntityName: string, RecordID: string}): void {\n    this.openRecord.emit(event);\n  }\n\n  public onSplitterLayoutChange(_event: unknown): void {\n    // Trigger ERD diagram resize when splitter layout changes\n    if (this.mjEntityErd) {\n      this.mjEntityErd.triggerResize();\n    }\n\n    this.emitStateChange();\n    this.emitUserStateChange();\n  }\n\n  private applyFilters(): void {\n    this.filteredEntities = this.entities.filter(entity => {\n      // Schema filter\n      if (this.filters.schemaName && entity.SchemaName !== this.filters.schemaName) {\n        return false;\n      }\n\n      // Entity name filter\n      if (this.filters.entityName) {\n        const searchTerm = this.filters.entityName.toLowerCase();\n        const entityName = (entity.Name || entity.SchemaName || '').toLowerCase();\n        if (!entityName.includes(searchTerm)) {\n          return false;\n        }\n      }\n\n      // Base table filter\n      if (this.filters.baseTable) {\n        const searchTerm = this.filters.baseTable.toLowerCase();\n        const baseTable = (entity.BaseTable || '').toLowerCase();\n        if (!baseTable.includes(searchTerm)) {\n          return false;\n        }\n      }\n\n      // Status filter\n      if (this.filters.entityStatus && entity.Status !== this.filters.entityStatus) {\n        return false;\n      }\n\n      return true;\n    });\n  }\n\n  private emitStateChange(): void {\n    const state = this.buildState();\n    this.stateChangeSubject.next(state);\n  }\n\n  private emitUserStateChange(): void {\n    const state = this.buildState();\n    this.userStateChangeSubject.next(state);\n  }\n\n  private buildState(): ERDCompositeState {\n    return {\n      filterPanelVisible: this.filterPanelVisible,\n      filterPanelWidth: 320,\n      filters: { ...this.filters },\n      selectedEntityId: this.selectedEntity?.ID || null,\n      zoomLevel: 1,\n      panPosition: { x: 0, y: 0 },\n      fieldsSectionExpanded: this.fieldsSectionExpanded,\n      relationshipsSectionExpanded: this.relationshipsSectionExpanded,\n    };\n  }\n\n  // ============================================================================\n  // PUBLIC API\n  // ============================================================================\n\n  /**\n   * Load user state from a previously saved state object.\n   * Call this after the component is initialized to restore user preferences.\n   */\n  public loadUserState(state: Partial<ERDCompositeState>): void {\n    if (state.filterPanelVisible !== undefined) {\n      this.filterPanelVisible = state.filterPanelVisible;\n    }\n    if (state.filters) {\n      this.filters = { ...state.filters };\n    }\n    if (state.fieldsSectionExpanded !== undefined) {\n      this.fieldsSectionExpanded = state.fieldsSectionExpanded;\n    }\n    if (state.relationshipsSectionExpanded !== undefined) {\n      this.relationshipsSectionExpanded = state.relationshipsSectionExpanded;\n    }\n    if (state.selectedEntityId && this.entities.length > 0) {\n      const entity = this.entities.find(e => e.ID === state.selectedEntityId);\n      if (entity) {\n        this.selectedEntity = entity;\n      }\n    } else {\n      this.selectedEntity = null;\n    }\n\n    this.applyFilters();\n  }\n\n  /**\n   * Refresh the ERD diagram.\n   */\n  public refreshERD(): void {\n    if (this.mjEntityErd) {\n      this.mjEntityErd.refresh();\n    }\n  }\n\n  /**\n   * Get the current state for external use.\n   */\n  public getState(): ERDCompositeState {\n    return this.buildState();\n  }\n}\n","<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"]}

package/dist/lib/components/erd-diagram.component.js

@@ -1875,11 +1875,11 @@ export class ERDDiagramComponent {
             i0.ɵɵconditional(ctx.showHeader ? 1 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.isRefreshing ? 4 : -1);
-        } }, 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}\n\n[_nghost-%COMP%]     .erd-container svg .node.selected .entity-rect {\n  stroke: #4CAF50 !important;\n  stroke-width: 4px !important;\n  filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.5));\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.selected .entity-header {\n  fill: #388E3C !important;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.selected .entity-header-bottom {\n  fill: #388E3C !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\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}\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}\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}"] });
+        } }, 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(--mj-bg-page);\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(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  color: var(--mj-text-primary);\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  background: var(--mj-bg-page);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\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(--mj-bg-surface-sunken);\n  border-color: var(--mj-color-neutral-400);\n  color: var(--mj-text-primary);\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(--mj-bg-surface-sunken);\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(--mj-bg-page);\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(--mj-brand-primary);\n  animation-delay: 0s;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n  border-top-color: var(--mj-color-warning-500);\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(--mj-status-success);\n  animation-delay: 0.6s;\n  transform: scale(0.6);\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\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(--mj-status-success) !important;\n  stroke-width: 4px !important;\n  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mj-status-success) 60%, transparent));\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.selected .entity-rect {\n  stroke: #4CAF50 !important;\n  stroke-width: 4px !important;\n  filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.5));\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.selected .entity-header {\n  fill: #388E3C !important;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.selected .entity-header-bottom {\n  fill: #388E3C !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\n\n[_nghost-%COMP%]     .erd-container svg .node.relationship-connected .entity-rect.relationship-highlighted {\n  stroke: var(--mj-status-success) !important;\n  stroke-width: 3px !important;\n  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mj-status-success) 50%, transparent));\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.relationship-connected .entity-header {\n  fill: var(--mj-status-success) !important;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.relationship-connected .entity-header-bottom {\n  fill: var(--mj-status-success) !important;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.entity-connections-highlighted .entity-rect.connection-highlighted {\n  stroke: var(--mj-color-warning-500) !important;\n  stroke-width: 3px !important;\n  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mj-color-warning-500) 50%, transparent));\n  opacity: 0.9;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.entity-connections-highlighted .entity-header {\n  fill: var(--mj-color-warning-500) !important;\n  opacity: 0.8;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.entity-connections-highlighted .entity-header-bottom {\n  fill: var(--mj-color-warning-500) !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(--mj-status-success);\n  opacity: 1;\n}\n\n[_nghost-%COMP%]     .erd-container svg .link-group .link.highlighted {\n  stroke: var(--mj-status-success) !important;\n  stroke-width: 4px !important;\n  opacity: 1 !important;\n  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mj-status-success) 60%, transparent));\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(--mj-status-success);\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(--mj-color-accent-300) !important;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ERDDiagramComponent, [{
         type: Component,
-        args: [{ standalone: false, 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 */\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}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-rect {\n  stroke: #4CAF50 !important;\n  stroke-width: 4px !important;\n  filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.5));\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-header {\n  fill: #388E3C !important;\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-header-bottom {\n  fill: #388E3C !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/* 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}\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}\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"] }]
+        args: [{ standalone: false, 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 - MJ Design Tokens\n * MJ 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(--mj-bg-page);\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(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.section-header h3 {\n  margin: 0;\n  color: var(--mj-text-primary);\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  background: var(--mj-bg-page);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.control-btn:hover:not(:disabled) {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-color-neutral-400);\n  color: var(--mj-text-primary);\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(--mj-bg-surface-sunken);\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(--mj-bg-page);\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(--mj-brand-primary);\n  animation-delay: 0s;\n}\n\n.spinner-ring:nth-child(2) {\n  border-top-color: var(--mj-color-warning-500);\n  animation-delay: 0.3s;\n  transform: scale(0.8);\n}\n\n.spinner-ring:nth-child(3) {\n  border-top-color: var(--mj-status-success);\n  animation-delay: 0.6s;\n  transform: scale(0.6);\n}\n\n.loading-text {\n  color: var(--mj-text-secondary);\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: var(--mj-status-success) !important;\n  stroke-width: 4px !important;\n  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mj-status-success) 60%, transparent));\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-rect {\n  stroke: #4CAF50 !important;\n  stroke-width: 4px !important;\n  filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.5));\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-header {\n  fill: #388E3C !important;\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-header-bottom {\n  fill: #388E3C !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/* Related/connected nodes - using tertiary accent */\n:host ::ng-deep .erd-container svg .node.relationship-connected .entity-rect.relationship-highlighted {\n  stroke: var(--mj-status-success) !important;\n  stroke-width: 3px !important;\n  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mj-status-success) 50%, transparent));\n}\n\n:host ::ng-deep .erd-container svg .node.relationship-connected .entity-header {\n  fill: var(--mj-status-success) !important;\n}\n\n:host ::ng-deep .erd-container svg .node.relationship-connected .entity-header-bottom {\n  fill: var(--mj-status-success) !important;\n}\n\n:host ::ng-deep .erd-container svg .node.entity-connections-highlighted .entity-rect.connection-highlighted {\n  stroke: var(--mj-color-warning-500) !important;\n  stroke-width: 3px !important;\n  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mj-color-warning-500) 50%, transparent));\n  opacity: 0.9;\n}\n\n:host ::ng-deep .erd-container svg .node.entity-connections-highlighted .entity-header {\n  fill: var(--mj-color-warning-500) !important;\n  opacity: 0.8;\n}\n\n:host ::ng-deep .erd-container svg .node.entity-connections-highlighted .entity-header-bottom {\n  fill: var(--mj-color-warning-500) !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(--mj-status-success);\n  opacity: 1;\n}\n\n:host ::ng-deep .erd-container svg .link-group .link.highlighted {\n  stroke: var(--mj-status-success) !important;\n  stroke-width: 4px !important;\n  opacity: 1 !important;\n  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mj-status-success) 60%, transparent));\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(--mj-status-success);\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(--mj-color-accent-300) !important;\n}\n\n"] }]
     }], null, { erdContainer: [{
             type: ViewChild,
             args: ['erdContainer', { static: false }]