@memberjunction/ng-entity-relationship-diagram 3.4.0 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +229 -532
- package/dist/lib/components/entity-details/entity-details.component.d.ts.map +1 -1
- package/dist/lib/components/entity-details/entity-details.component.js +29 -21
- package/dist/lib/components/entity-details/entity-details.component.js.map +1 -1
- package/dist/lib/components/entity-filter-panel/entity-filter-panel.component.d.ts.map +1 -1
- package/dist/lib/components/entity-filter-panel/entity-filter-panel.component.js +40 -41
- package/dist/lib/components/entity-filter-panel/entity-filter-panel.component.js.map +1 -1
- package/dist/lib/components/erd-composite/erd-composite.component.d.ts.map +1 -1
- package/dist/lib/components/erd-composite/erd-composite.component.js +3 -3
- package/dist/lib/components/erd-composite/erd-composite.component.js.map +1 -1
- package/dist/lib/components/erd-diagram.component.d.ts.map +1 -1
- package/dist/lib/components/erd-diagram.component.js +15 -7
- package/dist/lib/components/erd-diagram.component.js.map +1 -1
- package/dist/lib/components/mj-entity-erd.component.d.ts.map +1 -1
- package/dist/lib/components/mj-entity-erd.component.js +3 -2
- package/dist/lib/components/mj-entity-erd.component.js.map +1 -1
- package/package.json +12 -12
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
|
-
import * as i1 from "@angular/
|
|
4
|
-
|
|
5
|
-
function EntityFilterPanelComponent_option_19_Template(rf, ctx) { if (rf & 1) {
|
|
3
|
+
import * as i1 from "@angular/forms";
|
|
4
|
+
function EntityFilterPanelComponent_For_20_Template(rf, ctx) { if (rf & 1) {
|
|
6
5
|
i0.ɵɵelementStart(0, "option", 12);
|
|
7
6
|
i0.ɵɵtext(1);
|
|
8
7
|
i0.ɵɵelementEnd();
|
|
@@ -70,7 +69,7 @@ export class EntityFilterPanelComponent {
|
|
|
70
69
|
.map(schema => ({ text: schema, value: schema }));
|
|
71
70
|
}
|
|
72
71
|
static ɵfac = function EntityFilterPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EntityFilterPanelComponent)(); };
|
|
73
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityFilterPanelComponent, selectors: [["mj-entity-filter-panel"]], inputs: { entities: "entities", filteredEntities: "filteredEntities", filters: "filters" }, outputs: { filtersChange: "filtersChange", filterChange: "filterChange", resetFilters: "resetFilters", closePanel: "closePanel" }, features: [i0.ɵɵNgOnChangesFeature], decls:
|
|
72
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityFilterPanelComponent, selectors: [["mj-entity-filter-panel"]], inputs: { entities: "entities", filteredEntities: "filteredEntities", filters: "filters" }, outputs: { filtersChange: "filtersChange", filterChange: "filterChange", resetFilters: "resetFilters", closePanel: "closePanel" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 48, vars: 8, consts: [[1, "filter-panel"], [1, "filter-panel-header"], [1, "filter-summary-inline"], [1, "summary-value"], [1, "summary-label"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "filter-content"], [1, "filter-group"], [1, "filter-label"], [1, "fa-solid", "fa-database"], [1, "filter-select", 3, "ngModelChange", "ngModel"], [3, "ngValue"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search entities...", 1, "filter-input", 3, "ngModelChange", "input", "ngModel"], [1, "fa-solid", "fa-table"], ["type", "text", "placeholder", "Search tables...", 1, "filter-input", 3, "ngModelChange", "input", "ngModel"], [1, "fa-solid", "fa-check-circle"], ["value", "Active"], ["value", "Deprecated"], ["value", "Disabled"], [1, "filter-actions"], ["title", "Reset all filters", 1, "reset-btn", 3, "click"], [1, "fa-solid", "fa-undo"]], template: function EntityFilterPanelComponent_Template(rf, ctx) { if (rf & 1) {
|
|
74
73
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h3");
|
|
75
74
|
i0.ɵɵtext(3, "Entity Filters");
|
|
76
75
|
i0.ɵɵelementEnd();
|
|
@@ -94,60 +93,60 @@ export class EntityFilterPanelComponent {
|
|
|
94
93
|
i0.ɵɵelementStart(17, "option", 12);
|
|
95
94
|
i0.ɵɵtext(18, "All Schemas");
|
|
96
95
|
i0.ɵɵelementEnd();
|
|
97
|
-
i0.ɵɵ
|
|
96
|
+
i0.ɵɵrepeaterCreate(19, EntityFilterPanelComponent_For_20_Template, 2, 2, "option", 12, i0.ɵɵrepeaterTrackByIdentity);
|
|
98
97
|
i0.ɵɵelementEnd()();
|
|
99
|
-
i0.ɵɵelementStart(
|
|
100
|
-
i0.ɵɵelement(
|
|
101
|
-
i0.ɵɵtext(
|
|
98
|
+
i0.ɵɵelementStart(21, "div", 8)(22, "label", 9);
|
|
99
|
+
i0.ɵɵelement(23, "span", 13);
|
|
100
|
+
i0.ɵɵtext(24, " Entity Name ");
|
|
102
101
|
i0.ɵɵelementEnd();
|
|
103
|
-
i0.ɵɵelementStart(
|
|
104
|
-
i0.ɵɵtwoWayListener("ngModelChange", function
|
|
105
|
-
i0.ɵɵlistener("ngModelChange", function
|
|
102
|
+
i0.ɵɵelementStart(25, "input", 14);
|
|
103
|
+
i0.ɵɵtwoWayListener("ngModelChange", function EntityFilterPanelComponent_Template_input_ngModelChange_25_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.entityName, $event) || (ctx.filters.entityName = $event); return $event; });
|
|
104
|
+
i0.ɵɵlistener("ngModelChange", function EntityFilterPanelComponent_Template_input_ngModelChange_25_listener() { return ctx.onFilterChange(); })("input", function EntityFilterPanelComponent_Template_input_input_25_listener() { return ctx.onFilterChange(); });
|
|
106
105
|
i0.ɵɵelementEnd()();
|
|
107
|
-
i0.ɵɵelementStart(
|
|
108
|
-
i0.ɵɵelement(
|
|
109
|
-
i0.ɵɵtext(
|
|
106
|
+
i0.ɵɵelementStart(26, "div", 8)(27, "label", 9);
|
|
107
|
+
i0.ɵɵelement(28, "span", 15);
|
|
108
|
+
i0.ɵɵtext(29, " Base Table ");
|
|
110
109
|
i0.ɵɵelementEnd();
|
|
111
|
-
i0.ɵɵelementStart(
|
|
112
|
-
i0.ɵɵtwoWayListener("ngModelChange", function
|
|
113
|
-
i0.ɵɵlistener("ngModelChange", function
|
|
110
|
+
i0.ɵɵelementStart(30, "input", 16);
|
|
111
|
+
i0.ɵɵtwoWayListener("ngModelChange", function EntityFilterPanelComponent_Template_input_ngModelChange_30_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.baseTable, $event) || (ctx.filters.baseTable = $event); return $event; });
|
|
112
|
+
i0.ɵɵlistener("ngModelChange", function EntityFilterPanelComponent_Template_input_ngModelChange_30_listener() { return ctx.onFilterChange(); })("input", function EntityFilterPanelComponent_Template_input_input_30_listener() { return ctx.onFilterChange(); });
|
|
114
113
|
i0.ɵɵelementEnd()();
|
|
115
|
-
i0.ɵɵelementStart(
|
|
116
|
-
i0.ɵɵelement(
|
|
117
|
-
i0.ɵɵtext(
|
|
114
|
+
i0.ɵɵelementStart(31, "div", 8)(32, "label", 9);
|
|
115
|
+
i0.ɵɵelement(33, "span", 17);
|
|
116
|
+
i0.ɵɵtext(34, " Status ");
|
|
118
117
|
i0.ɵɵelementEnd();
|
|
119
|
-
i0.ɵɵelementStart(
|
|
120
|
-
i0.ɵɵtwoWayListener("ngModelChange", function
|
|
121
|
-
i0.ɵɵlistener("ngModelChange", function
|
|
122
|
-
i0.ɵɵelementStart(
|
|
123
|
-
i0.ɵɵtext(
|
|
118
|
+
i0.ɵɵelementStart(35, "select", 11);
|
|
119
|
+
i0.ɵɵtwoWayListener("ngModelChange", function EntityFilterPanelComponent_Template_select_ngModelChange_35_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.entityStatus, $event) || (ctx.filters.entityStatus = $event); return $event; });
|
|
120
|
+
i0.ɵɵlistener("ngModelChange", function EntityFilterPanelComponent_Template_select_ngModelChange_35_listener() { return ctx.onFilterChange(); });
|
|
121
|
+
i0.ɵɵelementStart(36, "option", 12);
|
|
122
|
+
i0.ɵɵtext(37, "All Statuses");
|
|
124
123
|
i0.ɵɵelementEnd();
|
|
125
|
-
i0.ɵɵelementStart(
|
|
126
|
-
i0.ɵɵtext(
|
|
124
|
+
i0.ɵɵelementStart(38, "option", 18);
|
|
125
|
+
i0.ɵɵtext(39, "Active");
|
|
127
126
|
i0.ɵɵelementEnd();
|
|
128
|
-
i0.ɵɵelementStart(
|
|
129
|
-
i0.ɵɵtext(
|
|
127
|
+
i0.ɵɵelementStart(40, "option", 19);
|
|
128
|
+
i0.ɵɵtext(41, "Deprecated");
|
|
130
129
|
i0.ɵɵelementEnd();
|
|
131
|
-
i0.ɵɵelementStart(
|
|
132
|
-
i0.ɵɵtext(
|
|
130
|
+
i0.ɵɵelementStart(42, "option", 20);
|
|
131
|
+
i0.ɵɵtext(43, "Disabled");
|
|
133
132
|
i0.ɵɵelementEnd()()();
|
|
134
|
-
i0.ɵɵelementStart(
|
|
135
|
-
i0.ɵɵlistener("click", function
|
|
136
|
-
i0.ɵɵelement(
|
|
137
|
-
i0.ɵɵtext(
|
|
133
|
+
i0.ɵɵelementStart(44, "div", 21)(45, "button", 22);
|
|
134
|
+
i0.ɵɵlistener("click", function EntityFilterPanelComponent_Template_button_click_45_listener() { return ctx.resetAllFilters(); });
|
|
135
|
+
i0.ɵɵelement(46, "span", 23);
|
|
136
|
+
i0.ɵɵtext(47, " Reset Filters ");
|
|
138
137
|
i0.ɵɵelementEnd()()()();
|
|
139
138
|
} if (rf & 2) {
|
|
140
139
|
i0.ɵɵadvance(6);
|
|
141
140
|
i0.ɵɵtextInterpolate(ctx.filteredEntities.length);
|
|
142
141
|
i0.ɵɵadvance(2);
|
|
143
|
-
i0.ɵɵtextInterpolate1("of ", ctx.entities.length
|
|
142
|
+
i0.ɵɵtextInterpolate1("of ", ctx.entities.length);
|
|
144
143
|
i0.ɵɵadvance(8);
|
|
145
144
|
i0.ɵɵtwoWayProperty("ngModel", ctx.filters.schemaName);
|
|
146
145
|
i0.ɵɵadvance();
|
|
147
146
|
i0.ɵɵproperty("ngValue", null);
|
|
148
147
|
i0.ɵɵadvance(2);
|
|
149
|
-
i0.ɵɵ
|
|
150
|
-
i0.ɵɵadvance(
|
|
148
|
+
i0.ɵɵrepeater(ctx.distinctSchemas);
|
|
149
|
+
i0.ɵɵadvance(6);
|
|
151
150
|
i0.ɵɵtwoWayProperty("ngModel", ctx.filters.entityName);
|
|
152
151
|
i0.ɵɵadvance(5);
|
|
153
152
|
i0.ɵɵtwoWayProperty("ngModel", ctx.filters.baseTable);
|
|
@@ -155,11 +154,11 @@ export class EntityFilterPanelComponent {
|
|
|
155
154
|
i0.ɵɵtwoWayProperty("ngModel", ctx.filters.entityStatus);
|
|
156
155
|
i0.ɵɵadvance();
|
|
157
156
|
i0.ɵɵproperty("ngValue", null);
|
|
158
|
-
} }, dependencies: [i1.
|
|
157
|
+
} }, 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}"] });
|
|
159
158
|
}
|
|
160
159
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityFilterPanelComponent, [{
|
|
161
160
|
type: Component,
|
|
162
|
-
args: [{ selector: 'mj-entity-filter-panel', template: "<div class=\"filter-panel\">\n <div class=\"filter-panel-header\">\n <h3>Entity Filters</h3>\n <div class=\"filter-summary-inline\">\n <span class=\"summary-value\">{{ filteredEntities.length }}</span>\n <span class=\"summary-label\">of {{ entities.length }}</span>\n </div>\n <button class=\"close-btn\" (click)=\"toggleFilterPanel()\">\n <span class=\"fa-solid fa-times\"></span>\n </button>\n </div>\n\n <div class=\"filter-content\">\n <!-- Schema Filter -->\n <div class=\"filter-group\">\n <label class=\"filter-label\">\n <span class=\"fa-solid fa-database\"></span>\n Schema\n </label>\n <select\n class=\"filter-select\"\n [(ngModel)]=\"filters.schemaName\"\n (ngModelChange)=\"onFilterChange()\">\n <option [ngValue]=\"null\">All Schemas</option>\n
|
|
161
|
+
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"] }]
|
|
163
162
|
}], null, { entities: [{
|
|
164
163
|
type: Input
|
|
165
164
|
}], filteredEntities: [{
|
|
@@ -175,5 +174,5 @@ export class EntityFilterPanelComponent {
|
|
|
175
174
|
}], closePanel: [{
|
|
176
175
|
type: Output
|
|
177
176
|
}] }); })();
|
|
178
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityFilterPanelComponent, { className: "EntityFilterPanelComponent", filePath: "src/lib/components/entity-filter-panel/entity-filter-panel.component.ts", lineNumber:
|
|
177
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityFilterPanelComponent, { className: "EntityFilterPanelComponent", filePath: "src/lib/components/entity-filter-panel/entity-filter-panel.component.ts", lineNumber: 27 }); })();
|
|
179
178
|
//# sourceMappingURL=entity-filter-panel.component.js.map
|
|
@@ -1 +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":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAoC,MAAM,eAAe,CAAC
|
|
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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"erd-composite.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/erd-composite/erd-composite.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAa,MAAM,eAAe,CAAC;AAGrG,OAAO,EAAE,UAAU,EAAE,eAAe,EAAY,MAAM,sBAAsB,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACxF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;;AAEpF;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,MAAM,CAAC;IACzB,OAAO,EAAE,YAAY,CAAC;IACtB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,4BAA4B,EAAE,OAAO,CAAC;CACvC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,
|
|
1
|
+
{"version":3,"file":"erd-composite.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/erd-composite/erd-composite.component.ts"],"names":[],"mappings":"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"}
|
|
@@ -335,7 +335,7 @@ export class ERDCompositeComponent {
|
|
|
335
335
|
} if (rf & 2) {
|
|
336
336
|
let _t;
|
|
337
337
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.mjEntityErd = _t.first);
|
|
338
|
-
} }, inputs: { isRefreshingERD: "isRefreshingERD", focusEntities: "focusEntities", showFilterPanel: "showFilterPanel", depth: "depth", showHeader: "showHeader" }, outputs: { stateChange: "stateChange", userStateChange: "userStateChange", entityOpened: "entityOpened", openRecord: "openRecord" }, decls: 9, vars: 28, consts: [[1, "erd-composite"], ["orientation", "horizontal", 1, "main-splitter", 3, "layoutChange"], [3, "size", "collapsible", "resizable", "scrollable", "hidden"], [3, "filtersChange", "filterChange", "resetFilters", "closePanel", "entities", "filteredEntities", "filters"], [3, "resizable", "scrollable"], [1, "erd-pane-container"], ["headerTitle", "Entity Relationship Diagram", 3, "entitySelected", "entityDeselected", "openRecord", "stateChange", "entities", "allEntities", "selectedEntityId", "isRefreshing", "depth", "includeIncoming", "includeOutgoing", "showHeader", "config"], [3, "openEntity", "closePanel", "fieldsSectionToggle", "relationshipsSectionToggle", "entitySelected", "openRecord", "selectedEntity", "allEntityFields", "fieldsSectionExpanded", "relationshipsSectionExpanded"]], template: function ERDCompositeComponent_Template(rf, ctx) { if (rf & 1) {
|
|
338
|
+
} }, inputs: { isRefreshingERD: "isRefreshingERD", focusEntities: "focusEntities", showFilterPanel: "showFilterPanel", depth: "depth", showHeader: "showHeader" }, outputs: { stateChange: "stateChange", userStateChange: "userStateChange", entityOpened: "entityOpened", openRecord: "openRecord" }, standalone: false, decls: 9, vars: 28, consts: [[1, "erd-composite"], ["orientation", "horizontal", 1, "main-splitter", 3, "layoutChange"], [3, "size", "collapsible", "resizable", "scrollable", "hidden"], [3, "filtersChange", "filterChange", "resetFilters", "closePanel", "entities", "filteredEntities", "filters"], [3, "resizable", "scrollable"], [1, "erd-pane-container"], ["headerTitle", "Entity Relationship Diagram", 3, "entitySelected", "entityDeselected", "openRecord", "stateChange", "entities", "allEntities", "selectedEntityId", "isRefreshing", "depth", "includeIncoming", "includeOutgoing", "showHeader", "config"], [3, "openEntity", "closePanel", "fieldsSectionToggle", "relationshipsSectionToggle", "entitySelected", "openRecord", "selectedEntity", "allEntityFields", "fieldsSectionExpanded", "relationshipsSectionExpanded"]], template: function ERDCompositeComponent_Template(rf, ctx) { if (rf & 1) {
|
|
339
339
|
i0.ɵɵelementStart(0, "div", 0)(1, "kendo-splitter", 1);
|
|
340
340
|
i0.ɵɵlistener("layoutChange", function ERDCompositeComponent_Template_kendo_splitter_layoutChange_1_listener($event) { return ctx.onSplitterLayoutChange($event); });
|
|
341
341
|
i0.ɵɵelementStart(2, "kendo-splitter-pane", 2)(3, "mj-entity-filter-panel", 3);
|
|
@@ -364,7 +364,7 @@ export class ERDCompositeComponent {
|
|
|
364
364
|
}
|
|
365
365
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ERDCompositeComponent, [{
|
|
366
366
|
type: Component,
|
|
367
|
-
args: [{ selector: 'mj-erd-composite', template: "<div class=\"erd-composite\">\n <kendo-splitter\n class=\"main-splitter\"\n orientation=\"horizontal\"\n (layoutChange)=\"onSplitterLayoutChange($event)\">\n\n <!-- Filter Panel (Left) -->\n <kendo-splitter-pane\n [size]=\"filterPanelVisible ? '320px' : '0px'\"\n [collapsible]=\"false\"\n [resizable]=\"filterPanelVisible\"\n [scrollable]=\"false\"\n [hidden]=\"!filterPanelVisible\">\n <mj-entity-filter-panel\n [entities]=\"entities\"\n [filteredEntities]=\"filteredEntities\"\n [filters]=\"filters\"\n (filtersChange)=\"onFiltersChange($event)\"\n (filterChange)=\"onFilterChange()\"\n (resetFilters)=\"onResetFilters()\"\n (closePanel)=\"onToggleFilterPanel()\">\n </mj-entity-filter-panel>\n </kendo-splitter-pane>\n\n <!-- ERD Diagram (Center) -->\n <kendo-splitter-pane\n [resizable]=\"true\"\n [scrollable]=\"false\">\n <div class=\"erd-pane-container\">\n <mj-entity-erd\n [entities]=\"filteredEntities\"\n [allEntities]=\"entities\"\n [selectedEntityId]=\"selectedEntity?.ID || null\"\n [isRefreshing]=\"isRefreshingERD\"\n [depth]=\"depth\"\n [includeIncoming]=\"true\"\n [includeOutgoing]=\"true\"\n [showHeader]=\"showHeader\"\n [config]=\"erdConfig\"\n headerTitle=\"Entity Relationship Diagram\"\n (entitySelected)=\"onERDEntitySelected($event)\"\n (entityDeselected)=\"onEntityDeselected()\"\n (openRecord)=\"onERDOpenRecord($event)\"\n (stateChange)=\"onERDStateChange($event)\">\n </mj-entity-erd>\n </div>\n </kendo-splitter-pane>\n\n <!-- Entity Details Panel (Right) -->\n <kendo-splitter-pane\n [size]=\"selectedEntity ? '320px' : '0px'\"\n [collapsible]=\"false\"\n [resizable]=\"!!selectedEntity\"\n [scrollable]=\"false\"\n [hidden]=\"!selectedEntity\">\n <mj-entity-details\n [selectedEntity]=\"selectedEntity\"\n [allEntityFields]=\"allEntityFields\"\n [fieldsSectionExpanded]=\"fieldsSectionExpanded\"\n [relationshipsSectionExpanded]=\"relationshipsSectionExpanded\"\n (openEntity)=\"onEntityOpened($event)\"\n (closePanel)=\"onEntityDeselected()\"\n (fieldsSectionToggle)=\"onFieldsSectionToggle()\"\n (relationshipsSectionToggle)=\"onRelationshipsSectionToggle()\"\n (entitySelected)=\"onEntitySelected($event)\"\n (openRecord)=\"onOpenRecord($event)\">\n </mj-entity-details>\n </kendo-splitter-pane>\n </kendo-splitter>\n</div>\n", styles: ["/**\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"] }]
|
|
367
|
+
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"] }]
|
|
368
368
|
}], null, { mjEntityErd: [{
|
|
369
369
|
type: ViewChild,
|
|
370
370
|
args: [MJEntityERDComponent]
|
|
@@ -387,5 +387,5 @@ export class ERDCompositeComponent {
|
|
|
387
387
|
}], openRecord: [{
|
|
388
388
|
type: Output
|
|
389
389
|
}] }); })();
|
|
390
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ERDCompositeComponent, { className: "ERDCompositeComponent", filePath: "src/lib/components/erd-composite/erd-composite.component.ts", lineNumber:
|
|
390
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ERDCompositeComponent, { className: "ERDCompositeComponent", filePath: "src/lib/components/erd-composite/erd-composite.component.ts", lineNumber: 73 }); })();
|
|
391
391
|
//# sourceMappingURL=erd-composite.component.js.map
|
|
@@ -1 +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":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAqB,SAAS,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAA+B,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;;;;;;AAoBlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;
|
|
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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"erd-diagram.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/erd-diagram.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EACZ,UAAU,EAEV,aAAa,EACb,SAAS,EACT,SAAS,EACT,aAAa,EACd,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,OAAO,EAEP,OAAO,EACP,SAAS,EACT,iBAAiB,EACjB,uBAAuB,EACvB,iBAAiB,EACjB,YAAY,EAEZ,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,0BAA0B,EAC1B,gBAAgB,EAChB,mBAAmB,EAGpB,MAAM,yBAAyB,CAAC;;AA8FjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,
|
|
1
|
+
{"version":3,"file":"erd-diagram.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/erd-diagram.component.ts"],"names":[],"mappings":"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"}
|
|
@@ -1036,7 +1036,7 @@ export class ERDDiagramComponent {
|
|
|
1036
1036
|
const nodeMap = new Map(this.internalNodes.map(n => [n.id, n]));
|
|
1037
1037
|
this.nodes.forEach(node => {
|
|
1038
1038
|
node.fields.forEach(field => {
|
|
1039
|
-
if (field.relatedNodeId
|
|
1039
|
+
if (field.relatedNodeId) {
|
|
1040
1040
|
const sourceNode = nodeMap.get(node.id);
|
|
1041
1041
|
const targetNode = nodeMap.get(field.relatedNodeId);
|
|
1042
1042
|
if (sourceNode && targetNode) {
|
|
@@ -1679,6 +1679,14 @@ export class ERDDiagramComponent {
|
|
|
1679
1679
|
const fieldY = -sourceNode.height / 2 + 40 + sourceNode.primaryKeys.length * 20 + fkIndex * 20;
|
|
1680
1680
|
connectY = sourceNode.y + fieldY + 10;
|
|
1681
1681
|
}
|
|
1682
|
+
else {
|
|
1683
|
+
// Check if the field is a primary key that also serves as a foreign key (IS-A pattern)
|
|
1684
|
+
const pkIndex = sourceNode.primaryKeys.findIndex((pk) => pk.id === field.id);
|
|
1685
|
+
if (pkIndex >= 0) {
|
|
1686
|
+
const fieldY = -sourceNode.height / 2 + 40 + pkIndex * 20;
|
|
1687
|
+
connectY = sourceNode.y + fieldY + 10;
|
|
1688
|
+
}
|
|
1689
|
+
}
|
|
1682
1690
|
}
|
|
1683
1691
|
return {
|
|
1684
1692
|
x: sourceNode.x + sourceNode.width / 2,
|
|
@@ -1856,22 +1864,22 @@ export class ERDDiagramComponent {
|
|
|
1856
1864
|
} if (rf & 2) {
|
|
1857
1865
|
let _t;
|
|
1858
1866
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.erdContainer = _t.first);
|
|
1859
|
-
} }, inputs: { nodes: "nodes", selectedNodeId: "selectedNodeId", highlightedNodeIds: "highlightedNodeIds", focusNodeId: "focusNodeId", focusDepth: "focusDepth", isRefreshing: "isRefreshing", readOnly: "readOnly", config: "config", showHeader: "showHeader", headerTitle: "headerTitle" }, outputs: { nodeClick: "nodeClick", nodeDoubleClick: "nodeDoubleClick", nodeSelected: "nodeSelected", nodeDeselected: "nodeDeselected", linkClick: "linkClick", nodeHover: "nodeHover", nodeHoverEnd: "nodeHoverEnd", linkHover: "linkHover", linkHoverEnd: "linkHoverEnd", nodeContextMenu: "nodeContextMenu", linkContextMenu: "linkContextMenu", diagramContextMenu: "diagramContextMenu", nodeDragStart: "nodeDragStart", nodeDragEnd: "nodeDragEnd", zoomChange: "zoomChange", refreshRequested: "refreshRequested", layoutComplete: "layoutComplete", stateChange: "stateChange" }, features: [i0.ɵɵNgOnChangesFeature], decls: 5, vars: 2, consts: [["erdContainer", ""], [1, "erd-section"], [1, "section-header"], [1, "erd-container"], [1, "loading-overlay"], [1, "erd-controls"], ["title", "Zoom In", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-search-plus"], ["title", "Zoom Out", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-search-minus"], ["title", "Reset Zoom", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-expand"], ["title", "Refresh Diagram", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"]], template: function ERDDiagramComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1867
|
+
} }, inputs: { nodes: "nodes", selectedNodeId: "selectedNodeId", highlightedNodeIds: "highlightedNodeIds", focusNodeId: "focusNodeId", focusDepth: "focusDepth", isRefreshing: "isRefreshing", readOnly: "readOnly", config: "config", showHeader: "showHeader", headerTitle: "headerTitle" }, outputs: { nodeClick: "nodeClick", nodeDoubleClick: "nodeDoubleClick", nodeSelected: "nodeSelected", nodeDeselected: "nodeDeselected", linkClick: "linkClick", nodeHover: "nodeHover", nodeHoverEnd: "nodeHoverEnd", linkHover: "linkHover", linkHoverEnd: "linkHoverEnd", nodeContextMenu: "nodeContextMenu", linkContextMenu: "linkContextMenu", diagramContextMenu: "diagramContextMenu", nodeDragStart: "nodeDragStart", nodeDragEnd: "nodeDragEnd", zoomChange: "zoomChange", refreshRequested: "refreshRequested", layoutComplete: "layoutComplete", stateChange: "stateChange" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 5, vars: 2, consts: [["erdContainer", ""], [1, "erd-section"], [1, "section-header"], [1, "erd-container"], [1, "loading-overlay"], [1, "erd-controls"], ["title", "Zoom In", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-search-plus"], ["title", "Zoom Out", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-search-minus"], ["title", "Reset Zoom", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-expand"], ["title", "Refresh Diagram", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"]], template: function ERDDiagramComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1860
1868
|
i0.ɵɵelementStart(0, "div", 1);
|
|
1861
|
-
i0.ɵɵ
|
|
1869
|
+
i0.ɵɵconditionalCreate(1, ERDDiagramComponent_Conditional_1_Template, 12, 1, "div", 2);
|
|
1862
1870
|
i0.ɵɵelementStart(2, "div", 3, 0);
|
|
1863
|
-
i0.ɵɵ
|
|
1871
|
+
i0.ɵɵconditionalCreate(4, ERDDiagramComponent_Conditional_4_Template, 8, 0, "div", 4);
|
|
1864
1872
|
i0.ɵɵelementEnd()();
|
|
1865
1873
|
} if (rf & 2) {
|
|
1866
1874
|
i0.ɵɵadvance();
|
|
1867
1875
|
i0.ɵɵconditional(ctx.showHeader ? 1 : -1);
|
|
1868
1876
|
i0.ɵɵadvance(3);
|
|
1869
1877
|
i0.ɵɵconditional(ctx.isRefreshing ? 4 : -1);
|
|
1870
|
-
} }, styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n display: block;\n height: 100%;\n width: 100%;\n}\n\n.erd-section[_ngcontent-%COMP%] {\n background: var(--mat-sys-surface);\n overflow: hidden;\n height: 100%;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--mat-sys-surface-container);\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n flex-shrink: 0;\n}\n\n.section-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font: var(--mat-sys-title-medium);\n color: var(--mat-sys-on-surface);\n}\n\n.erd-controls[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font: var(--mat-sys-label-medium);\n background: var(--mat-sys-surface);\n color: var(--mat-sys-on-surface-variant);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mat-sys-surface-container);\n border-color: var(--mat-sys-outline);\n color: var(--mat-sys-on-surface);\n}\n\n.control-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.38;\n cursor: not-allowed;\n}\n\n.erd-container[_ngcontent-%COMP%] {\n flex: 1;\n position: relative;\n background: var(--mat-sys-surface-container-low);\n overflow: hidden;\n width: 100%;\n min-height: 400px;\n box-sizing: border-box;\n}\n\n.erd-container[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n width: 100% !important;\n height: 100% !important;\n box-sizing: border-box;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mat-sys-surface);\n opacity: 0.95;\n backdrop-filter: blur(2px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in-out;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n position: relative;\n width: 60px;\n height: 60px;\n}\n\n.spinner-ring[_ngcontent-%COMP%] {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-radius: 50%;\n animation: _ngcontent-%COMP%_spin 1.5s linear infinite;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(1) {\n border-top-color: var(--mat-sys-primary);\n animation-delay: 0s;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n border-top-color: var(--mat-sys-secondary);\n animation-delay: 0.3s;\n transform: scale(0.8);\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n border-top-color: var(--mat-sys-tertiary);\n animation-delay: 0.6s;\n transform: scale(0.6);\n}\n\n.loading-text[_ngcontent-%COMP%] {\n font: var(--mat-sys-body-medium);\n color: var(--mat-sys-on-surface-variant);\n font-weight: 500;\n text-align: center;\n}\n\n\n\n@keyframes _ngcontent-%COMP%_spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n\n\n[_nghost-%COMP%] .erd-container svg .node .entity-rect.highlighted {\n stroke: var(--mat-sys-tertiary) !important;\n stroke-width: 4px !important;\n filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mat-sys-tertiary) 60%, transparent));\n
|
|
1878
|
+
} }, 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}"] });
|
|
1871
1879
|
}
|
|
1872
1880
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ERDDiagramComponent, [{
|
|
1873
1881
|
type: Component,
|
|
1874
|
-
args: [{ selector: 'mj-erd-diagram', template: "<div class=\"erd-section\">\n @if (showHeader) {\n <div class=\"section-header\">\n <h3>{{ headerTitle }}</h3>\n <div class=\"erd-controls\">\n <button class=\"control-btn\" (click)=\"zoomIn()\" title=\"Zoom In\">\n <span class=\"fa-solid fa-search-plus\"></span>\n </button>\n <button class=\"control-btn\" (click)=\"zoomOut()\" title=\"Zoom Out\">\n <span class=\"fa-solid fa-search-minus\"></span>\n </button>\n <button class=\"control-btn\" (click)=\"resetZoom()\" title=\"Reset Zoom\">\n <span class=\"fa-solid fa-expand\"></span>\n </button>\n <button class=\"control-btn\" (click)=\"refresh(); refreshRequested.emit()\" title=\"Refresh Diagram\">\n <span class=\"fa-solid fa-refresh\"></span>\n </button>\n </div>\n </div>\n }\n <div class=\"erd-container\" #erdContainer>\n @if (isRefreshing) {\n <div class=\"loading-overlay\">\n <div class=\"loading-content\">\n <div class=\"loading-spinner\">\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n </div>\n <div class=\"loading-text\">Loading diagram...</div>\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["/**\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
|
|
1882
|
+
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"] }]
|
|
1875
1883
|
}], null, { erdContainer: [{
|
|
1876
1884
|
type: ViewChild,
|
|
1877
1885
|
args: ['erdContainer', { static: false }]
|
|
@@ -1932,5 +1940,5 @@ export class ERDDiagramComponent {
|
|
|
1932
1940
|
}], stateChange: [{
|
|
1933
1941
|
type: Output
|
|
1934
1942
|
}] }); })();
|
|
1935
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ERDDiagramComponent, { className: "ERDDiagramComponent", filePath: "src/lib/components/erd-diagram.component.ts", lineNumber:
|
|
1943
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ERDDiagramComponent, { className: "ERDDiagramComponent", filePath: "src/lib/components/erd-diagram.component.ts", lineNumber: 195 }); })();
|
|
1936
1944
|
//# sourceMappingURL=erd-diagram.component.js.map
|