@memberjunction/ng-base-forms 3.2.0 → 3.4.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/dist/lib/base-form-component.d.ts +38 -9
- package/dist/lib/base-form-component.d.ts.map +1 -1
- package/dist/lib/base-form-component.js +81 -21
- package/dist/lib/base-form-component.js.map +1 -1
- package/dist/lib/collapsible-panel.component.d.ts +30 -13
- package/dist/lib/collapsible-panel.component.d.ts.map +1 -1
- package/dist/lib/collapsible-panel.component.js +148 -93
- package/dist/lib/collapsible-panel.component.js.map +1 -1
- package/dist/lib/form-section-controls.component.d.ts +13 -2
- package/dist/lib/form-section-controls.component.d.ts.map +1 -1
- package/dist/lib/form-section-controls.component.js +146 -24
- package/dist/lib/form-section-controls.component.js.map +1 -1
- package/dist/lib/form-state.interface.d.ts +4 -2
- package/dist/lib/form-state.interface.d.ts.map +1 -1
- package/dist/lib/form-state.interface.js +3 -3
- package/dist/lib/form-state.interface.js.map +1 -1
- package/dist/lib/form-state.service.d.ts +31 -22
- package/dist/lib/form-state.service.d.ts.map +1 -1
- package/dist/lib/form-state.service.js +71 -71
- package/dist/lib/form-state.service.js.map +1 -1
- package/dist/public-api.d.ts +1 -1
- package/dist/public-api.d.ts.map +1 -1
- package/package.json +13 -13
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { Component, Input, ContentChildren, HostBinding, Output, EventEmitter } from '@angular/core';
|
|
1
|
+
import { Component, Input, ContentChildren, HostBinding, Output, EventEmitter, HostListener } from '@angular/core';
|
|
2
2
|
import { MJFormField } from './base-field-component';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
const _c0 = ["*"];
|
|
5
|
-
function
|
|
6
|
-
i0.ɵɵelementStart(0, "span",
|
|
5
|
+
function CollapsiblePanelComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
6
|
+
i0.ɵɵelementStart(0, "span", 10);
|
|
7
7
|
i0.ɵɵtext(1);
|
|
8
8
|
i0.ɵɵelementEnd();
|
|
9
9
|
} if (rf & 2) {
|
|
@@ -20,10 +20,10 @@ function CollapsiblePanelComponent_Conditional_6_Template(rf, ctx) { if (rf & 1)
|
|
|
20
20
|
* - Yellow highlighting of matched section names
|
|
21
21
|
* - Visibility management based on section name or field name matches
|
|
22
22
|
* - Passes sectionFilter down to child mj-form-field components for their own label highlighting
|
|
23
|
-
* - Panel width modes: normal (default), full-width (spans entire row)
|
|
24
23
|
*/
|
|
25
24
|
export class CollapsiblePanelComponent {
|
|
26
25
|
cdr;
|
|
26
|
+
elementRef;
|
|
27
27
|
sectionKey = '';
|
|
28
28
|
sectionName = '';
|
|
29
29
|
icon = 'fa fa-folder';
|
|
@@ -33,27 +33,94 @@ export class CollapsiblePanelComponent {
|
|
|
33
33
|
badgeCount;
|
|
34
34
|
entityName = ''; // For display/reference purposes
|
|
35
35
|
defaultExpanded; // Default expanded state when no persisted state exists
|
|
36
|
-
|
|
36
|
+
dragStarted = new EventEmitter();
|
|
37
|
+
dragEnded = new EventEmitter();
|
|
38
|
+
panelDrop = new EventEmitter();
|
|
37
39
|
fieldComponents;
|
|
38
40
|
get isHidden() {
|
|
39
41
|
return !this.isVisible;
|
|
40
42
|
}
|
|
41
|
-
get
|
|
42
|
-
|
|
43
|
+
get cssOrder() {
|
|
44
|
+
const formRef = this.form;
|
|
45
|
+
return formRef?.getSectionDisplayOrder ? formRef.getSectionDisplayOrder(this.sectionKey) : 0;
|
|
46
|
+
}
|
|
47
|
+
isDragging = false;
|
|
48
|
+
isDragOver = false;
|
|
49
|
+
constructor(cdr, elementRef) {
|
|
50
|
+
this.cdr = cdr;
|
|
51
|
+
this.elementRef = elementRef;
|
|
52
|
+
}
|
|
53
|
+
onDragOver(event) {
|
|
54
|
+
event.preventDefault();
|
|
55
|
+
event.stopPropagation();
|
|
56
|
+
// Check if this is a panel drag (not a file drag)
|
|
57
|
+
if (event.dataTransfer?.types.includes('text/plain')) {
|
|
58
|
+
this.isDragOver = true;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
onDragLeave(event) {
|
|
62
|
+
event.preventDefault();
|
|
63
|
+
this.isDragOver = false;
|
|
64
|
+
}
|
|
65
|
+
onDrop(event) {
|
|
66
|
+
event.preventDefault();
|
|
67
|
+
event.stopPropagation();
|
|
68
|
+
this.isDragOver = false;
|
|
69
|
+
const sourceSectionKey = event.dataTransfer?.getData('text/plain');
|
|
70
|
+
if (sourceSectionKey && sourceSectionKey !== this.sectionKey) {
|
|
71
|
+
this.panelDrop.emit({
|
|
72
|
+
sourceSectionKey,
|
|
73
|
+
targetSectionKey: this.sectionKey
|
|
74
|
+
});
|
|
75
|
+
// Reorder sections via the form component
|
|
76
|
+
this.reorderSections(sourceSectionKey, this.sectionKey);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
/**
|
|
80
|
+
* Reorders sections by moving the source section to the position of the target section.
|
|
81
|
+
*/
|
|
82
|
+
reorderSections(sourceSectionKey, targetSectionKey) {
|
|
83
|
+
const formRef = this.form;
|
|
84
|
+
if (!formRef?.getSectionOrder || !formRef?.setSectionOrder) {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
const currentOrder = formRef.getSectionOrder();
|
|
88
|
+
const sourceIndex = currentOrder.indexOf(sourceSectionKey);
|
|
89
|
+
const targetIndex = currentOrder.indexOf(targetSectionKey);
|
|
90
|
+
if (sourceIndex === -1 || targetIndex === -1) {
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
// Remove source from current position
|
|
94
|
+
const newOrder = [...currentOrder];
|
|
95
|
+
newOrder.splice(sourceIndex, 1);
|
|
96
|
+
// Insert at target position
|
|
97
|
+
newOrder.splice(targetIndex, 0, sourceSectionKey);
|
|
98
|
+
// Save the new order
|
|
99
|
+
formRef.setSectionOrder(newOrder);
|
|
100
|
+
this.cdr.markForCheck();
|
|
101
|
+
}
|
|
102
|
+
onDragStart(event) {
|
|
103
|
+
this.isDragging = true;
|
|
104
|
+
event.dataTransfer?.setData('text/plain', this.sectionKey);
|
|
105
|
+
if (event.dataTransfer) {
|
|
106
|
+
event.dataTransfer.effectAllowed = 'move';
|
|
107
|
+
}
|
|
108
|
+
this.dragStarted.emit({ sectionKey: this.sectionKey, event });
|
|
109
|
+
}
|
|
110
|
+
onDragEnd(event) {
|
|
111
|
+
this.isDragging = false;
|
|
112
|
+
this.dragEnded.emit();
|
|
43
113
|
}
|
|
44
114
|
get expanded() {
|
|
45
|
-
|
|
115
|
+
const formRef = this.form;
|
|
116
|
+
return formRef?.IsSectionExpanded ? formRef.IsSectionExpanded(this.sectionKey, this.defaultExpanded) : true;
|
|
46
117
|
}
|
|
47
118
|
displayName = '';
|
|
48
119
|
fieldNames = '';
|
|
49
120
|
isVisible = true;
|
|
50
|
-
widthMode = 'normal';
|
|
51
|
-
constructor(cdr) {
|
|
52
|
-
this.cdr = cdr;
|
|
53
|
-
}
|
|
54
121
|
ngOnInit() {
|
|
55
|
-
//
|
|
56
|
-
this.
|
|
122
|
+
// Initialize display name
|
|
123
|
+
this.displayName = this.sectionName;
|
|
57
124
|
}
|
|
58
125
|
ngAfterContentInit() {
|
|
59
126
|
// Extract field names from projected field components
|
|
@@ -77,42 +144,12 @@ export class CollapsiblePanelComponent {
|
|
|
77
144
|
}
|
|
78
145
|
}
|
|
79
146
|
toggle() {
|
|
80
|
-
|
|
81
|
-
|
|
147
|
+
const formRef = this.form;
|
|
148
|
+
if (formRef?.SetSectionExpanded) {
|
|
149
|
+
formRef.SetSectionExpanded(this.sectionKey, !this.expanded);
|
|
82
150
|
this.cdr.markForCheck();
|
|
83
151
|
}
|
|
84
152
|
}
|
|
85
|
-
toggleFullWidth(event) {
|
|
86
|
-
event.stopPropagation();
|
|
87
|
-
const newMode = this.widthMode === 'full-width' ? 'normal' : 'full-width';
|
|
88
|
-
// Auto-expand panel when switching to full-width mode
|
|
89
|
-
if (newMode === 'full-width' && !this.expanded && this.form) {
|
|
90
|
-
this.form.SetSectionExpanded(this.sectionKey, true);
|
|
91
|
-
}
|
|
92
|
-
this.setWidthMode(newMode);
|
|
93
|
-
}
|
|
94
|
-
setWidthMode(mode) {
|
|
95
|
-
this.widthMode = mode;
|
|
96
|
-
this.saveWidthMode();
|
|
97
|
-
this.widthModeChange.emit(mode);
|
|
98
|
-
this.cdr.markForCheck();
|
|
99
|
-
}
|
|
100
|
-
saveWidthMode() {
|
|
101
|
-
// Delegate to form's state service for persistence
|
|
102
|
-
if (this.form && typeof this.form.setSectionWidthMode === 'function') {
|
|
103
|
-
this.form.setSectionWidthMode(this.sectionKey, this.widthMode);
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
loadWidthMode() {
|
|
107
|
-
// Load from form's state service
|
|
108
|
-
if (this.form && typeof this.form.getSectionWidthMode === 'function') {
|
|
109
|
-
const saved = this.form.getSectionWidthMode(this.sectionKey);
|
|
110
|
-
if (saved && (saved === 'normal' || saved === 'full-width')) {
|
|
111
|
-
this.widthMode = saved;
|
|
112
|
-
this.cdr.markForCheck();
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
153
|
updateFieldNames() {
|
|
117
154
|
if (this.fieldComponents) {
|
|
118
155
|
// Extract field display names from all mj-form-field components
|
|
@@ -153,50 +190,51 @@ export class CollapsiblePanelComponent {
|
|
|
153
190
|
escapeRegex(term) {
|
|
154
191
|
return term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
155
192
|
}
|
|
156
|
-
static ɵfac = function CollapsiblePanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CollapsiblePanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
|
|
193
|
+
static ɵfac = function CollapsiblePanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CollapsiblePanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef)); };
|
|
157
194
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CollapsiblePanelComponent, selectors: [["mj-collapsible-panel"]], contentQueries: function CollapsiblePanelComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
|
|
158
195
|
i0.ɵɵcontentQuery(dirIndex, MJFormField, 5);
|
|
159
196
|
} if (rf & 2) {
|
|
160
197
|
let _t;
|
|
161
198
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fieldComponents = _t);
|
|
162
|
-
} }, hostVars:
|
|
163
|
-
i0.ɵɵ
|
|
164
|
-
}
|
|
199
|
+
} }, hostVars: 8, hostBindings: function CollapsiblePanelComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
200
|
+
i0.ɵɵlistener("dragover", function CollapsiblePanelComponent_dragover_HostBindingHandler($event) { return ctx.onDragOver($event); })("dragleave", function CollapsiblePanelComponent_dragleave_HostBindingHandler($event) { return ctx.onDragLeave($event); })("drop", function CollapsiblePanelComponent_drop_HostBindingHandler($event) { return ctx.onDrop($event); });
|
|
201
|
+
} if (rf & 2) {
|
|
202
|
+
i0.ɵɵstyleProp("order", ctx.cssOrder);
|
|
203
|
+
i0.ɵɵclassProp("search-hidden", ctx.isHidden)("dragging", ctx.isDragging)("drag-over", ctx.isDragOver);
|
|
204
|
+
} }, inputs: { sectionKey: "sectionKey", sectionName: "sectionName", icon: "icon", form: "form", formContext: "formContext", variant: "variant", badgeCount: "badgeCount", entityName: "entityName", defaultExpanded: "defaultExpanded" }, outputs: { dragStarted: "dragStarted", dragEnded: "dragEnded", panelDrop: "panelDrop" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 14, vars: 13, consts: [[1, "form-card", "collapsible-card"], ["role", "button", "tabindex", "0", 1, "collapsible-header", 3, "click"], ["title", "Drag to reorder sections", "draggable", "true", 1, "drag-handle", 3, "dragstart", "dragend", "click"], [1, "fa-solid", "fa-grip-vertical"], [1, "collapsible-title"], [1, "section-name", 3, "innerHTML"], [1, "row-count-badge", 3, "zero-rows"], [1, "collapse-icon"], [1, "collapsible-body"], [1, "form-body"], [1, "row-count-badge"]], template: function CollapsiblePanelComponent_Template(rf, ctx) { if (rf & 1) {
|
|
165
205
|
i0.ɵɵprojectionDef();
|
|
166
|
-
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)
|
|
167
|
-
i0.ɵɵlistener("click", function
|
|
168
|
-
i0.ɵɵ
|
|
169
|
-
i0.ɵɵ
|
|
170
|
-
i0.ɵɵelement(
|
|
171
|
-
i0.ɵɵ
|
|
172
|
-
i0.ɵɵ
|
|
173
|
-
i0.ɵɵ
|
|
174
|
-
i0.ɵɵ
|
|
175
|
-
i0.ɵɵelement(
|
|
206
|
+
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
|
|
207
|
+
i0.ɵɵlistener("click", function CollapsiblePanelComponent_Template_div_click_1_listener() { return ctx.toggle(); });
|
|
208
|
+
i0.ɵɵelementStart(2, "div", 2);
|
|
209
|
+
i0.ɵɵlistener("dragstart", function CollapsiblePanelComponent_Template_div_dragstart_2_listener($event) { return ctx.onDragStart($event); })("dragend", function CollapsiblePanelComponent_Template_div_dragend_2_listener($event) { return ctx.onDragEnd($event); })("click", function CollapsiblePanelComponent_Template_div_click_2_listener($event) { return $event.stopPropagation(); });
|
|
210
|
+
i0.ɵɵelement(3, "i", 3);
|
|
211
|
+
i0.ɵɵelementEnd();
|
|
212
|
+
i0.ɵɵelementStart(4, "div", 4);
|
|
213
|
+
i0.ɵɵelement(5, "i");
|
|
214
|
+
i0.ɵɵelementStart(6, "h3");
|
|
215
|
+
i0.ɵɵelement(7, "span", 5);
|
|
216
|
+
i0.ɵɵtemplate(8, CollapsiblePanelComponent_Conditional_8_Template, 2, 3, "span", 6);
|
|
176
217
|
i0.ɵɵelementEnd()();
|
|
177
|
-
i0.ɵɵelementStart(
|
|
178
|
-
i0.ɵɵ
|
|
179
|
-
i0.ɵɵelement(11, "i");
|
|
218
|
+
i0.ɵɵelementStart(9, "div", 7);
|
|
219
|
+
i0.ɵɵelement(10, "i");
|
|
180
220
|
i0.ɵɵelementEnd()();
|
|
181
|
-
i0.ɵɵelementStart(
|
|
182
|
-
i0.ɵɵprojection(
|
|
221
|
+
i0.ɵɵelementStart(11, "div", 8)(12, "div", 9);
|
|
222
|
+
i0.ɵɵprojection(13);
|
|
183
223
|
i0.ɵɵelementEnd()()();
|
|
184
224
|
} if (rf & 2) {
|
|
185
225
|
i0.ɵɵclassProp("related-entity", ctx.variant === "related-entity");
|
|
186
|
-
i0.ɵɵattribute("data-section-name", ctx.sectionName)("data-field-names", ctx.fieldNames);
|
|
187
|
-
i0.ɵɵadvance(
|
|
226
|
+
i0.ɵɵattribute("data-section-name", ctx.sectionName)("data-field-names", ctx.fieldNames)("data-section-key", ctx.sectionKey);
|
|
227
|
+
i0.ɵɵadvance(5);
|
|
188
228
|
i0.ɵɵclassMap(ctx.icon);
|
|
189
229
|
i0.ɵɵadvance(2);
|
|
190
230
|
i0.ɵɵproperty("innerHTML", ctx.displayName, i0.ɵɵsanitizeHtml);
|
|
191
231
|
i0.ɵɵadvance();
|
|
192
|
-
i0.ɵɵconditional(ctx.badgeCount !== undefined ?
|
|
232
|
+
i0.ɵɵconditional(ctx.badgeCount !== undefined ? 8 : -1);
|
|
193
233
|
i0.ɵɵadvance(2);
|
|
194
|
-
i0.ɵɵclassProp("active", ctx.widthMode === "full-width");
|
|
195
|
-
i0.ɵɵadvance(3);
|
|
196
234
|
i0.ɵɵclassMap(ctx.expanded ? "fa fa-chevron-up" : "fa fa-chevron-down");
|
|
197
235
|
i0.ɵɵadvance();
|
|
198
236
|
i0.ɵɵclassProp("collapsed", !ctx.expanded);
|
|
199
|
-
} }, styles: ["[_nghost-%COMP%] {\n display: block;\n }\n\n .search-hidden[_nghost-%COMP%] {\n display: none;\n }\n\n .
|
|
237
|
+
} }, styles: ["[_nghost-%COMP%] {\n display: block;\n }\n\n .search-hidden[_nghost-%COMP%] {\n display: none;\n }\n\n .form-card[_ngcontent-%COMP%] {\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n transition: all 0.3s ease;\n }\n\n .collapsible-card[_ngcontent-%COMP%] {\n overflow: hidden;\n }\n\n .collapsible-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 20px 24px;\n background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n border-bottom: 2px solid #e5e7eb;\n user-select: none;\n transition: all 0.3s ease;\n cursor: pointer;\n }\n\n .drag-handle[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 0;\n height: 24px;\n color: #9ca3af;\n cursor: grab;\n opacity: 0;\n overflow: hidden;\n transition: width 0.2s ease, opacity 0.2s ease, color 0.2s ease;\n flex-shrink: 0;\n }\n\n .collapsible-header[_ngcontent-%COMP%]:hover .drag-handle[_ngcontent-%COMP%] {\n width: 24px;\n opacity: 1;\n }\n\n .drag-handle[_ngcontent-%COMP%]:hover {\n color: #667eea;\n }\n\n .drag-handle[_ngcontent-%COMP%]:active {\n cursor: grabbing;\n }\n\n .dragging[_nghost-%COMP%] .drag-handle[_ngcontent-%COMP%] {\n width: 24px;\n opacity: 1;\n color: #667eea;\n }\n\n .drag-over[_nghost-%COMP%] {\n border: 2px dashed #667eea;\n border-radius: 8px;\n }\n\n .collapsible-header[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n border-bottom-color: #667eea;\n }\n\n .collapsible-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n }\n\n .collapsible-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n color: #667eea;\n }\n\n .collapsible-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: #1f2937;\n }\n\n .collapsible-header[_ngcontent-%COMP%] .collapse-icon[_ngcontent-%COMP%] {\n color: #6b7280;\n transition: transform 0.3s ease;\n padding: 4px;\n }\n\n .collapsible-body[_ngcontent-%COMP%] {\n max-height: 2000px;\n overflow: hidden;\n transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n opacity: 1;\n }\n\n .collapsible-body.collapsed[_ngcontent-%COMP%] {\n max-height: 0;\n padding: 0;\n opacity: 0;\n }\n\n .form-body[_ngcontent-%COMP%] {\n padding: 24px;\n overflow: auto;\n max-height: 600px;\n }\n\n \n\n .form-card.related-entity[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n border-left: 3px solid #3b82f6;\n }\n\n \n\n .form-card.related-entity[_ngcontent-%COMP%] .form-body[_ngcontent-%COMP%] {\n max-height: none;\n min-height: 300px;\n height: 400px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n \n\n .form-card.related-entity[_ngcontent-%COMP%] .form-body[_ngcontent-%COMP%] > div {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n }\n\n .form-card.related-entity[_ngcontent-%COMP%] .form-body[_ngcontent-%COMP%] mj-entity-data-grid, \n .form-card.related-entity[_ngcontent-%COMP%] .form-body[_ngcontent-%COMP%] mj-explorer-entity-data-grid {\n flex: 1;\n display: block;\n min-height: 0;\n }\n\n .form-card.related-entity[_ngcontent-%COMP%] .collapsible-header[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n }\n\n .form-card.related-entity[_ngcontent-%COMP%] .collapsible-header[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n border-bottom-color: #3b82f6;\n }\n\n .form-card.related-entity[_ngcontent-%COMP%] .collapsible-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #3b82f6;\n }\n\n \n\n .collapsible-title[_ngcontent-%COMP%] .row-count-badge[_ngcontent-%COMP%] {\n background: #10b981;\n color: white;\n padding: 3px 8px 2px 9px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n margin-left: 8px;\n vertical-align: middle;\n position: relative;\n top: -2px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 24px;\n line-height: 1;\n }\n\n \n\n .collapsible-title[_ngcontent-%COMP%] .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n background: #9ca3af;\n }\n\n \n\n .collapsible-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] .search-highlight {\n background-color: #fef08a;\n color: #854d0e;\n padding: 0;\n border-radius: 2px;\n font-weight: 700;\n box-shadow: 0 0 0 2px #fef08a;\n }"] });
|
|
200
238
|
}
|
|
201
239
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CollapsiblePanelComponent, [{
|
|
202
240
|
type: Component,
|
|
@@ -205,9 +243,18 @@ export class CollapsiblePanelComponent {
|
|
|
205
243
|
class="form-card collapsible-card"
|
|
206
244
|
[class.related-entity]="variant === 'related-entity'"
|
|
207
245
|
[attr.data-section-name]="sectionName"
|
|
208
|
-
[attr.data-field-names]="fieldNames"
|
|
209
|
-
|
|
210
|
-
|
|
246
|
+
[attr.data-field-names]="fieldNames"
|
|
247
|
+
[attr.data-section-key]="sectionKey">
|
|
248
|
+
<div class="collapsible-header" role="button" tabindex="0" (click)="toggle()">
|
|
249
|
+
<div class="drag-handle"
|
|
250
|
+
title="Drag to reorder sections"
|
|
251
|
+
draggable="true"
|
|
252
|
+
(dragstart)="onDragStart($event)"
|
|
253
|
+
(dragend)="onDragEnd($event)"
|
|
254
|
+
(click)="$event.stopPropagation()">
|
|
255
|
+
<i class="fa-solid fa-grip-vertical"></i>
|
|
256
|
+
</div>
|
|
257
|
+
<div class="collapsible-title">
|
|
211
258
|
<i [class]="icon"></i>
|
|
212
259
|
<h3>
|
|
213
260
|
<span class="section-name" [innerHTML]="displayName"></span>
|
|
@@ -219,18 +266,7 @@ export class CollapsiblePanelComponent {
|
|
|
219
266
|
}
|
|
220
267
|
</h3>
|
|
221
268
|
</div>
|
|
222
|
-
<div class="
|
|
223
|
-
<button
|
|
224
|
-
class="width-control-btn"
|
|
225
|
-
[class.active]="widthMode === 'full-width'"
|
|
226
|
-
(click)="toggleFullWidth($event)"
|
|
227
|
-
title="Stretch panel to full width"
|
|
228
|
-
aria-label="Stretch panel to full width"
|
|
229
|
-
type="button">
|
|
230
|
-
<i class="fa-solid fa-left-right"></i>
|
|
231
|
-
</button>
|
|
232
|
-
</div>
|
|
233
|
-
<div class="collapse-icon" (click)="toggle()">
|
|
269
|
+
<div class="collapse-icon">
|
|
234
270
|
<i [class]="expanded ? 'fa fa-chevron-up' : 'fa fa-chevron-down'"></i>
|
|
235
271
|
</div>
|
|
236
272
|
</div>
|
|
@@ -240,8 +276,8 @@ export class CollapsiblePanelComponent {
|
|
|
240
276
|
</div>
|
|
241
277
|
</div>
|
|
242
278
|
</div>
|
|
243
|
-
`, styles: ["\n :host {\n display: block;\n }\n\n :host(.search-hidden) {\n display: none;\n }\n\n
|
|
244
|
-
}], () => [{ type: i0.ChangeDetectorRef }], { sectionKey: [{
|
|
279
|
+
`, styles: ["\n :host {\n display: block;\n }\n\n :host(.search-hidden) {\n display: none;\n }\n\n .form-card {\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n transition: all 0.3s ease;\n }\n\n .collapsible-card {\n overflow: hidden;\n }\n\n .collapsible-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 20px 24px;\n background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n border-bottom: 2px solid #e5e7eb;\n user-select: none;\n transition: all 0.3s ease;\n cursor: pointer;\n }\n\n .drag-handle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 0;\n height: 24px;\n color: #9ca3af;\n cursor: grab;\n opacity: 0;\n overflow: hidden;\n transition: width 0.2s ease, opacity 0.2s ease, color 0.2s ease;\n flex-shrink: 0;\n }\n\n .collapsible-header:hover .drag-handle {\n width: 24px;\n opacity: 1;\n }\n\n .drag-handle:hover {\n color: #667eea;\n }\n\n .drag-handle:active {\n cursor: grabbing;\n }\n\n :host(.dragging) .drag-handle {\n width: 24px;\n opacity: 1;\n color: #667eea;\n }\n\n :host(.drag-over) {\n border: 2px dashed #667eea;\n border-radius: 8px;\n }\n\n .collapsible-header:hover {\n background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n border-bottom-color: #667eea;\n }\n\n .collapsible-title {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n }\n\n .collapsible-title i {\n font-size: 20px;\n color: #667eea;\n }\n\n .collapsible-title h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: #1f2937;\n }\n\n .collapsible-header .collapse-icon {\n color: #6b7280;\n transition: transform 0.3s ease;\n padding: 4px;\n }\n\n .collapsible-body {\n max-height: 2000px;\n overflow: hidden;\n transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n opacity: 1;\n }\n\n .collapsible-body.collapsed {\n max-height: 0;\n padding: 0;\n opacity: 0;\n }\n\n .form-body {\n padding: 24px;\n overflow: auto;\n max-height: 600px;\n }\n\n /* Related Entity Sections - Visual Distinction */\n .form-card.related-entity {\n background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n border-left: 3px solid #3b82f6;\n }\n\n /* Related entity sections contain grids that need more vertical space */\n .form-card.related-entity .form-body {\n max-height: none;\n min-height: 300px;\n height: 400px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n /* Ensure wrapper div and grid inside take full height */\n .form-card.related-entity .form-body > ::ng-deep div {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n }\n\n .form-card.related-entity .form-body ::ng-deep mj-entity-data-grid,\n .form-card.related-entity .form-body ::ng-deep mj-explorer-entity-data-grid {\n flex: 1;\n display: block;\n min-height: 0;\n }\n\n .form-card.related-entity .collapsible-header {\n background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n }\n\n .form-card.related-entity .collapsible-header:hover {\n background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n border-bottom-color: #3b82f6;\n }\n\n .form-card.related-entity .collapsible-title i {\n color: #3b82f6;\n }\n\n /* Row count badge for related entity sections */\n .collapsible-title .row-count-badge {\n background: #10b981;\n color: white;\n padding: 3px 8px 2px 9px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n margin-left: 8px;\n vertical-align: middle;\n position: relative;\n top: -2px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 24px;\n line-height: 1;\n }\n\n /* Gray badge for zero rows (loaded but empty) */\n .collapsible-title .row-count-badge.zero-rows {\n background: #9ca3af;\n }\n\n /* Search highlighting */\n .collapsible-title h3 ::ng-deep .search-highlight {\n background-color: #fef08a;\n color: #854d0e;\n padding: 0;\n border-radius: 2px;\n font-weight: 700;\n box-shadow: 0 0 0 2px #fef08a;\n }\n "] }]
|
|
280
|
+
}], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], { sectionKey: [{
|
|
245
281
|
type: Input
|
|
246
282
|
}], sectionName: [{
|
|
247
283
|
type: Input
|
|
@@ -259,7 +295,11 @@ export class CollapsiblePanelComponent {
|
|
|
259
295
|
type: Input
|
|
260
296
|
}], defaultExpanded: [{
|
|
261
297
|
type: Input
|
|
262
|
-
}],
|
|
298
|
+
}], dragStarted: [{
|
|
299
|
+
type: Output
|
|
300
|
+
}], dragEnded: [{
|
|
301
|
+
type: Output
|
|
302
|
+
}], panelDrop: [{
|
|
263
303
|
type: Output
|
|
264
304
|
}], fieldComponents: [{
|
|
265
305
|
type: ContentChildren,
|
|
@@ -267,9 +307,24 @@ export class CollapsiblePanelComponent {
|
|
|
267
307
|
}], isHidden: [{
|
|
268
308
|
type: HostBinding,
|
|
269
309
|
args: ['class.search-hidden']
|
|
270
|
-
}],
|
|
310
|
+
}], cssOrder: [{
|
|
311
|
+
type: HostBinding,
|
|
312
|
+
args: ['style.order']
|
|
313
|
+
}], isDragging: [{
|
|
314
|
+
type: HostBinding,
|
|
315
|
+
args: ['class.dragging']
|
|
316
|
+
}], isDragOver: [{
|
|
271
317
|
type: HostBinding,
|
|
272
|
-
args: ['class.
|
|
318
|
+
args: ['class.drag-over']
|
|
319
|
+
}], onDragOver: [{
|
|
320
|
+
type: HostListener,
|
|
321
|
+
args: ['dragover', ['$event']]
|
|
322
|
+
}], onDragLeave: [{
|
|
323
|
+
type: HostListener,
|
|
324
|
+
args: ['dragleave', ['$event']]
|
|
325
|
+
}], onDrop: [{
|
|
326
|
+
type: HostListener,
|
|
327
|
+
args: ['drop', ['$event']]
|
|
273
328
|
}] }); })();
|
|
274
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CollapsiblePanelComponent, { className: "CollapsiblePanelComponent", filePath: "src/lib/collapsible-panel.component.ts", lineNumber:
|
|
329
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CollapsiblePanelComponent, { className: "CollapsiblePanelComponent", filePath: "src/lib/collapsible-panel.component.ts", lineNumber: 267 }); })();
|
|
275
330
|
//# sourceMappingURL=collapsible-panel.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapsible-panel.component.js","sourceRoot":"","sources":["../../src/lib/collapsible-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAiE,eAAe,EAAa,WAAW,
|
|
1
|
+
{"version":3,"file":"collapsible-panel.component.js","sourceRoot":"","sources":["../../src/lib/collapsible-panel.component.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { EventEmitter } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
|
+
/** Form width mode - 'centered' uses max-width constraint, 'full-width' uses all available space */
|
|
4
|
+
export type FormWidthMode = 'centered' | 'full-width';
|
|
3
5
|
/**
|
|
4
|
-
* Reusable component for form section controls (Expand All, Collapse All, Filter, Counter)
|
|
6
|
+
* Reusable component for form section controls (Expand All, Collapse All, Filter, Counter, Width Toggle)
|
|
5
7
|
* Designed to be projected into form toolbars via ng-content with [toolbar-additional-controls] selector
|
|
6
8
|
*/
|
|
7
9
|
export declare class FormSectionControlsComponent {
|
|
@@ -10,15 +12,24 @@ export declare class FormSectionControlsComponent {
|
|
|
10
12
|
searchFilter: string;
|
|
11
13
|
expandedCount: number;
|
|
12
14
|
showEmptyFields: boolean;
|
|
15
|
+
widthMode: FormWidthMode;
|
|
16
|
+
hasCustomOrder: boolean;
|
|
13
17
|
expandAll: EventEmitter<void>;
|
|
14
18
|
collapseAll: EventEmitter<void>;
|
|
15
19
|
filterChange: EventEmitter<string>;
|
|
16
20
|
showEmptyFieldsChange: EventEmitter<boolean>;
|
|
21
|
+
widthModeChange: EventEmitter<FormWidthMode>;
|
|
22
|
+
resetOrder: EventEmitter<void>;
|
|
17
23
|
searchTerm: string;
|
|
24
|
+
showResetConfirmDialog: boolean;
|
|
18
25
|
get allExpanded(): boolean;
|
|
19
26
|
get allCollapsed(): boolean;
|
|
20
27
|
clearFilter(): void;
|
|
28
|
+
toggleWidthMode(): void;
|
|
29
|
+
confirmResetOrder(): void;
|
|
30
|
+
doResetOrder(): void;
|
|
31
|
+
cancelResetOrder(): void;
|
|
21
32
|
static ɵfac: i0.ɵɵFactoryDeclaration<FormSectionControlsComponent, never>;
|
|
22
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<FormSectionControlsComponent, "mj-form-section-controls[toolbar-additional-controls]", never, { "visibleCount": { "alias": "visibleCount"; "required": false; }; "totalCount": { "alias": "totalCount"; "required": false; }; "searchFilter": { "alias": "searchFilter"; "required": false; }; "expandedCount": { "alias": "expandedCount"; "required": false; }; "showEmptyFields": { "alias": "showEmptyFields"; "required": false; }; }, { "expandAll": "expandAll"; "collapseAll": "collapseAll"; "filterChange": "filterChange"; "showEmptyFieldsChange": "showEmptyFieldsChange"; }, never, never, false, never>;
|
|
33
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<FormSectionControlsComponent, "mj-form-section-controls[toolbar-additional-controls]", never, { "visibleCount": { "alias": "visibleCount"; "required": false; }; "totalCount": { "alias": "totalCount"; "required": false; }; "searchFilter": { "alias": "searchFilter"; "required": false; }; "expandedCount": { "alias": "expandedCount"; "required": false; }; "showEmptyFields": { "alias": "showEmptyFields"; "required": false; }; "widthMode": { "alias": "widthMode"; "required": false; }; "hasCustomOrder": { "alias": "hasCustomOrder"; "required": false; }; }, { "expandAll": "expandAll"; "collapseAll": "collapseAll"; "filterChange": "filterChange"; "showEmptyFieldsChange": "showEmptyFieldsChange"; "widthModeChange": "widthModeChange"; "resetOrder": "resetOrder"; }, never, never, false, never>;
|
|
23
34
|
}
|
|
24
35
|
//# sourceMappingURL=form-section-controls.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-section-controls.component.d.ts","sourceRoot":"","sources":["../../src/lib/form-section-controls.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAA0C,MAAM,eAAe,CAAC;;AAEhG;;;GAGG;AACH,
|
|
1
|
+
{"version":3,"file":"form-section-controls.component.d.ts","sourceRoot":"","sources":["../../src/lib/form-section-controls.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAA0C,MAAM,eAAe,CAAC;;AAEhG,oGAAoG;AACpG,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,YAAY,CAAC;AAEtD;;;GAGG;AACH,qBAqXa,4BAA4B;IAC5B,YAAY,EAAE,MAAM,CAAK;IACzB,UAAU,EAAE,MAAM,CAAK;IACvB,YAAY,EAAE,MAAM,CAAM;IAC1B,aAAa,EAAE,MAAM,CAAK;IAC1B,eAAe,EAAE,OAAO,CAAS;IACjC,SAAS,EAAE,aAAa,CAAc;IACtC,cAAc,EAAE,OAAO,CAAS;IAC/B,SAAS,qBAA4B;IACrC,WAAW,qBAA4B;IACvC,YAAY,uBAA8B;IAC1C,qBAAqB,wBAA+B;IACpD,eAAe,8BAAqC;IACpD,UAAU,qBAA4B;IAEhD,UAAU,SAAM;IAChB,sBAAsB,UAAS;IAE/B,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,WAAW,IAAI,IAAI;IAKnB,eAAe,IAAI,IAAI;IAKvB,iBAAiB,IAAI,IAAI;IAIzB,YAAY,IAAI,IAAI;IAKpB,gBAAgB,IAAI,IAAI;yCA7Cf,4BAA4B;2CAA5B,4BAA4B;CAgDxC"}
|