@memberjunction/ng-form-toolbar 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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AfterViewChecked, ChangeDetectorRef } from '@angular/core';
|
|
2
|
-
import { BaseFormComponent } from '@memberjunction/ng-base-forms';
|
|
2
|
+
import { BaseFormComponent, FormWidthMode } from '@memberjunction/ng-base-forms';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
/**
|
|
5
5
|
* Container component that wraps generated forms with consistent structure and styling.
|
|
@@ -12,15 +12,22 @@ import * as i0 from "@angular/core";
|
|
|
12
12
|
*/
|
|
13
13
|
export declare class RecordFormContainerComponent implements AfterViewChecked {
|
|
14
14
|
private cdr;
|
|
15
|
-
record:
|
|
15
|
+
record: unknown;
|
|
16
16
|
formComponent: BaseFormComponent;
|
|
17
17
|
visibleCount: number;
|
|
18
18
|
totalCount: number;
|
|
19
19
|
expandedCount: number;
|
|
20
|
+
widthMode: FormWidthMode;
|
|
20
21
|
private countsInitialized;
|
|
22
|
+
/** Returns true if user has customized the section order */
|
|
23
|
+
get hasCustomOrder(): boolean;
|
|
21
24
|
constructor(cdr: ChangeDetectorRef);
|
|
22
25
|
ngAfterViewChecked(): void;
|
|
23
26
|
onFilterChange(filter: string): void;
|
|
27
|
+
onExpandAll(): void;
|
|
28
|
+
onCollapseAll(): void;
|
|
29
|
+
onWidthModeChange(mode: FormWidthMode): void;
|
|
30
|
+
onResetOrder(): void;
|
|
24
31
|
private updateCounts;
|
|
25
32
|
static ɵfac: i0.ɵɵFactoryDeclaration<RecordFormContainerComponent, never>;
|
|
26
33
|
static ɵcmp: i0.ɵɵComponentDeclaration<RecordFormContainerComponent, "mj-record-form-container", never, { "record": { "alias": "record"; "required": false; }; "formComponent": { "alias": "formComponent"; "required": false; }; }, {}, never, ["[slot='before-panels']", "[slot='field-panels']", "[slot='after-panels']"], false, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"record-form-container.component.d.ts","sourceRoot":"","sources":["../../src/lib/record-form-container.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAuC,MAAM,eAAe,CAAC;AACzG,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;;
|
|
1
|
+
{"version":3,"file":"record-form-container.component.d.ts","sourceRoot":"","sources":["../../src/lib/record-form-container.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAuC,MAAM,eAAe,CAAC;AACzG,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;;AAEjF;;;;;;;;GAQG;AACH,qBAyCa,4BAA6B,YAAW,gBAAgB;IAiBrD,OAAO,CAAC,GAAG;IAhBd,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAG,iBAAiB,CAAC;IAG3C,YAAY,SAAK;IACjB,UAAU,SAAK;IACf,aAAa,SAAK;IAClB,SAAS,EAAE,aAAa,CAAc;IAEtC,OAAO,CAAC,iBAAiB,CAAS;IAElC,4DAA4D;IAC5D,IAAI,cAAc,IAAI,OAAO,CAE5B;gBAEmB,GAAG,EAAE,iBAAiB;IAE1C,kBAAkB,IAAI,IAAI;IAe1B,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAMpC,WAAW,IAAI,IAAI;IAKnB,aAAa,IAAI,IAAI;IAKrB,iBAAiB,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI;IAK5C,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,YAAY;yCA5DX,4BAA4B;2CAA5B,4BAA4B;CAmExC"}
|
|
@@ -9,22 +9,23 @@ const _c1 = ["[slot='before-panels']", "[slot='field-panels']", "[slot='after-pa
|
|
|
9
9
|
function RecordFormContainerComponent_form_1_Template(rf, ctx) { if (rf & 1) {
|
|
10
10
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
11
11
|
i0.ɵɵelementStart(0, "form", 3, 0)(2, "mj-form-toolbar", 4)(3, "mj-form-section-controls", 5);
|
|
12
|
-
i0.ɵɵlistener("expandAll", function RecordFormContainerComponent_form_1_Template_mj_form_section_controls_expandAll_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.
|
|
12
|
+
i0.ɵɵlistener("expandAll", function RecordFormContainerComponent_form_1_Template_mj_form_section_controls_expandAll_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onExpandAll()); })("collapseAll", function RecordFormContainerComponent_form_1_Template_mj_form_section_controls_collapseAll_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCollapseAll()); })("filterChange", function RecordFormContainerComponent_form_1_Template_mj_form_section_controls_filterChange_3_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFilterChange($event)); })("showEmptyFieldsChange", function RecordFormContainerComponent_form_1_Template_mj_form_section_controls_showEmptyFieldsChange_3_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.formComponent.showEmptyFields = $event); })("widthModeChange", function RecordFormContainerComponent_form_1_Template_mj_form_section_controls_widthModeChange_3_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onWidthModeChange($event)); })("resetOrder", function RecordFormContainerComponent_form_1_Template_mj_form_section_controls_resetOrder_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResetOrder()); });
|
|
13
13
|
i0.ɵɵelementEnd()();
|
|
14
14
|
i0.ɵɵelementStart(4, "div", 6)(5, "div", 7)(6, "div", 8);
|
|
15
15
|
i0.ɵɵprojection(7);
|
|
16
16
|
i0.ɵɵelementEnd();
|
|
17
17
|
i0.ɵɵprojection(8, 1);
|
|
18
|
-
i0.ɵɵ
|
|
19
|
-
i0.ɵɵ
|
|
20
|
-
i0.ɵɵprojection(11, 2);
|
|
18
|
+
i0.ɵɵelementStart(9, "div", 8);
|
|
19
|
+
i0.ɵɵprojection(10, 2);
|
|
21
20
|
i0.ɵɵelementEnd()()()();
|
|
22
21
|
} if (rf & 2) {
|
|
23
22
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
24
23
|
i0.ɵɵadvance(2);
|
|
25
24
|
i0.ɵɵproperty("form", ctx_r1.formComponent);
|
|
26
25
|
i0.ɵɵadvance();
|
|
27
|
-
i0.ɵɵproperty("visibleCount", ctx_r1.visibleCount)("totalCount", ctx_r1.totalCount)("expandedCount", ctx_r1.expandedCount)("searchFilter", ctx_r1.formComponent.searchFilter)("showEmptyFields", ctx_r1.formComponent.showEmptyFields);
|
|
26
|
+
i0.ɵɵproperty("visibleCount", ctx_r1.visibleCount)("totalCount", ctx_r1.totalCount)("expandedCount", ctx_r1.expandedCount)("searchFilter", ctx_r1.formComponent.searchFilter)("showEmptyFields", ctx_r1.formComponent.showEmptyFields)("widthMode", ctx_r1.widthMode)("hasCustomOrder", ctx_r1.hasCustomOrder);
|
|
27
|
+
i0.ɵɵadvance(2);
|
|
28
|
+
i0.ɵɵclassProp("full-width", ctx_r1.widthMode === "full-width");
|
|
28
29
|
} }
|
|
29
30
|
/**
|
|
30
31
|
* Container component that wraps generated forms with consistent structure and styling.
|
|
@@ -43,7 +44,12 @@ export class RecordFormContainerComponent {
|
|
|
43
44
|
visibleCount = 0;
|
|
44
45
|
totalCount = 0;
|
|
45
46
|
expandedCount = 0;
|
|
47
|
+
widthMode = 'centered';
|
|
46
48
|
countsInitialized = false;
|
|
49
|
+
/** Returns true if user has customized the section order */
|
|
50
|
+
get hasCustomOrder() {
|
|
51
|
+
return this.formComponent?.hasCustomSectionOrder() ?? false;
|
|
52
|
+
}
|
|
47
53
|
constructor(cdr) {
|
|
48
54
|
this.cdr = cdr;
|
|
49
55
|
}
|
|
@@ -55,6 +61,8 @@ export class RecordFormContainerComponent {
|
|
|
55
61
|
if (newTotal > 0) {
|
|
56
62
|
this.countsInitialized = true;
|
|
57
63
|
this.updateCounts();
|
|
64
|
+
// Also load persisted width mode
|
|
65
|
+
this.widthMode = this.formComponent.getFormWidthMode();
|
|
58
66
|
this.cdr.detectChanges();
|
|
59
67
|
}
|
|
60
68
|
}
|
|
@@ -64,6 +72,22 @@ export class RecordFormContainerComponent {
|
|
|
64
72
|
// Update counts after filter change
|
|
65
73
|
this.updateCounts();
|
|
66
74
|
}
|
|
75
|
+
onExpandAll() {
|
|
76
|
+
this.formComponent.expandAllSections();
|
|
77
|
+
this.updateCounts();
|
|
78
|
+
}
|
|
79
|
+
onCollapseAll() {
|
|
80
|
+
this.formComponent.collapseAllSections();
|
|
81
|
+
this.updateCounts();
|
|
82
|
+
}
|
|
83
|
+
onWidthModeChange(mode) {
|
|
84
|
+
this.widthMode = mode;
|
|
85
|
+
this.formComponent.setFormWidthMode(mode);
|
|
86
|
+
}
|
|
87
|
+
onResetOrder() {
|
|
88
|
+
this.formComponent.resetSectionOrder();
|
|
89
|
+
this.cdr.detectChanges();
|
|
90
|
+
}
|
|
67
91
|
updateCounts() {
|
|
68
92
|
if (this.formComponent) {
|
|
69
93
|
this.visibleCount = this.formComponent.getVisibleSectionCount();
|
|
@@ -72,15 +96,15 @@ export class RecordFormContainerComponent {
|
|
|
72
96
|
}
|
|
73
97
|
}
|
|
74
98
|
static ɵfac = function RecordFormContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RecordFormContainerComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
|
|
75
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecordFormContainerComponent, selectors: [["mj-record-form-container"]], inputs: { record: "record", formComponent: "formComponent" }, ngContentSelectors: _c1, decls: 2, vars: 1, consts: [["formElement", "ngForm"], [1, "record-form-container"], ["class", "record-form", 4, "ngIf"], [1, "record-form"], [3, "form"], ["toolbar-additional-controls", "", 3, "expandAll", "collapseAll", "filterChange", "showEmptyFieldsChange", "visibleCount", "totalCount", "expandedCount", "searchFilter", "showEmptyFields"], [1, "forms-panel-container-outer"], [1, "form-panels-container"], [1, "related-entity-grid"]
|
|
99
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecordFormContainerComponent, selectors: [["mj-record-form-container"]], inputs: { record: "record", formComponent: "formComponent" }, ngContentSelectors: _c1, decls: 2, vars: 1, consts: [["formElement", "ngForm"], [1, "record-form-container"], ["class", "record-form", 4, "ngIf"], [1, "record-form"], [3, "form"], ["toolbar-additional-controls", "", 3, "expandAll", "collapseAll", "filterChange", "showEmptyFieldsChange", "widthModeChange", "resetOrder", "visibleCount", "totalCount", "expandedCount", "searchFilter", "showEmptyFields", "widthMode", "hasCustomOrder"], [1, "forms-panel-container-outer"], [1, "form-panels-container"], [1, "related-entity-grid"]], template: function RecordFormContainerComponent_Template(rf, ctx) { if (rf & 1) {
|
|
76
100
|
i0.ɵɵprojectionDef(_c0);
|
|
77
101
|
i0.ɵɵelementStart(0, "div", 1);
|
|
78
|
-
i0.ɵɵtemplate(1, RecordFormContainerComponent_form_1_Template,
|
|
102
|
+
i0.ɵɵtemplate(1, RecordFormContainerComponent_form_1_Template, 11, 10, "form", 2);
|
|
79
103
|
i0.ɵɵelementEnd();
|
|
80
104
|
} if (rf & 2) {
|
|
81
105
|
i0.ɵɵadvance();
|
|
82
106
|
i0.ɵɵproperty("ngIf", ctx.record);
|
|
83
|
-
} }, dependencies: [i1.NgIf, i2.ɵNgNoValidate, i2.NgControlStatusGroup, i2.NgForm, i3.FormSectionControlsComponent, i4.FormToolbarComponent], styles: [".k-pane {\n background-color: #F5F6FA;\n}\n\n.record-form-container {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\na {\n font-size: 14px;\n
|
|
107
|
+
} }, dependencies: [i1.NgIf, i2.ɵNgNoValidate, i2.NgControlStatusGroup, i2.NgForm, i3.FormSectionControlsComponent, i4.FormToolbarComponent], styles: [".k-pane {\n background-color: #F5F6FA;\n}\n\n.record-form-container {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\na {\n font-size: 14px;\n}\n\n.record-form {\n display: flex;\n flex-direction: column;\n background-color: #F5F6FA;\n padding: 0;\n height: 100%;\n min-height: 0; /* Allow flex child to shrink */\n}\n\n.record-form-group {\n margin-top: 0px;\n background-color: #F5F6FA;\n}\n\nbutton {\n margin-right: 5px;\n}\n\n.record-form h2 {\n margin-bottom: 10px;\n}\n\n.k-splitter {\n border-width: 0px;\n}\n\n.record-form-row {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: start;\n gap: 10px;\n margin-bottom: 12px;\n padding-top: 5px;\n padding-bottom: 5px;\n}\n\n\n/* .record-form .record-form-row:nth-child(odd) {\n background-color: #f2f2f2;\n} */\n\n/*\n.record-form .record-form-row:nth-child(even) {\n background-color: #ffffff;\n} */\n\n.record-form .record-form-row > :first-child {\n font-weight: bold;\n padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n white-space: pre-line;\n max-height: 300px;\n overflow: auto;\n}\n\n\n\n@media (min-width: 768px) {\n .record-form-row {\n flex-direction: row;\n align-items: center;\n }\n\n .record-form-row label {\n width: 240px;\n margin-bottom: 0;\n }\n}\n\n/* Collapsible Panel Styles */\n.forms-panel-container-outer {\n flex: 1;\n min-height: 0; /* Critical: allows flex item to shrink below content size */\n overflow-y: auto;\n}\n\n.form-panels-container {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 20px;\n background-color: #F5F6FA;\n max-width: 900px;\n margin: 0 auto;\n transition: max-width 0.3s ease;\n}\n\n/* On very wide screens, allow slightly wider forms for better use of space */\n@media (min-width: 1600px) {\n .form-panels-container {\n max-width: 1000px;\n }\n}\n\n/* Full-width mode - removes max-width constraint */\n.form-panels-container.full-width {\n max-width: none;\n}\n\n/* Related entity grid container - treated as regular panels now */\n.form-panels-container .related-entity-grid {\n display: contents; /* Makes children participate in parent grid */\n}\n\n.form-card {\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n.collapsible-card {\n overflow: hidden;\n}\n\n.collapsible-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n border-bottom: 2px solid #e5e7eb;\n cursor: pointer;\n user-select: none;\n transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n border-bottom-color: #667eea;\n}\n\n.collapsible-title {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n}\n\n.collapsible-title i {\n font-size: 20px;\n color: #667eea;\n}\n\n.collapsible-title h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: #1f2937;\n}\n\n.collapsible-header .collapse-icon {\n color: #6b7280;\n transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n max-height: 2000px;\n overflow: hidden;\n transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n opacity: 1;\n}\n\n.collapsible-body.collapsed {\n max-height: 0;\n padding: 0;\n opacity: 0;\n}\n\n.form-body {\n padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity .collapsible-header {\n background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity .collapsible-title i {\n color: #3b82f6;\n}\n\n/* Section Controls */\n.form-section-controls {\n display: flex;\n gap: 10px;\n padding: 14px 18px;\n background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n border-bottom: 2px solid #e5e7eb;\n align-items: center;\n flex-wrap: wrap;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.form-section-controls .control-group {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.form-section-controls button {\n padding: 8px 14px;\n font-size: 13px;\n border: 1px solid #d1d5db;\n background: white;\n color: #374151;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n margin-right: 0;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-weight: 500;\n}\n\n.form-section-controls button:hover {\n background: #667eea;\n color: white;\n border-color: #667eea;\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.form-section-controls button:active {\n transform: translateY(0);\n}\n\n.form-section-controls button i {\n margin-right: 0;\n font-size: 14px;\n}\n\n.form-section-controls .section-search {\n padding: 8px 14px;\n font-size: 13px;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n width: 240px;\n transition: all 0.2s;\n background: white;\n}\n\n.form-section-controls .section-search:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls .section-search::placeholder {\n color: #9ca3af;\n font-style: italic;\n}\n\n.form-section-controls .section-count {\n font-size: 13px;\n color: #6b7280;\n margin-left: auto;\n font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n background: #667eea;\n color: white;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n}\n\n/* Row count badge for related entity sections */\n.collapsible-title .row-count-badge {\n background: #10b981;\n color: white;\n padding: 3px 6px 2px 6px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n margin-left: 8px;\n vertical-align: middle;\n position: relative;\n top: -2px;\n display: inline-block;\n line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n background: #9ca3af;\n}\n\n/* Search highlighting */\n.collapsible-title h3 .search-highlight {\n background-color: #fef08a;\n color: #854d0e;\n padding: 2px 4px;\n border-radius: 3px;\n font-weight: 700;\n}\n"], encapsulation: 2 });
|
|
84
108
|
}
|
|
85
109
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RecordFormContainerComponent, [{
|
|
86
110
|
type: Component,
|
|
@@ -95,20 +119,23 @@ export class RecordFormContainerComponent {
|
|
|
95
119
|
[expandedCount]="expandedCount"
|
|
96
120
|
[searchFilter]="formComponent.searchFilter"
|
|
97
121
|
[showEmptyFields]="formComponent.showEmptyFields"
|
|
98
|
-
|
|
99
|
-
|
|
122
|
+
[widthMode]="widthMode"
|
|
123
|
+
[hasCustomOrder]="hasCustomOrder"
|
|
124
|
+
(expandAll)="onExpandAll()"
|
|
125
|
+
(collapseAll)="onCollapseAll()"
|
|
100
126
|
(filterChange)="onFilterChange($event)"
|
|
101
|
-
(showEmptyFieldsChange)="formComponent.showEmptyFields = $event"
|
|
127
|
+
(showEmptyFieldsChange)="formComponent.showEmptyFields = $event"
|
|
128
|
+
(widthModeChange)="onWidthModeChange($event)"
|
|
129
|
+
(resetOrder)="onResetOrder()">
|
|
102
130
|
</mj-form-section-controls>
|
|
103
131
|
</mj-form-toolbar>
|
|
104
132
|
|
|
105
133
|
<div class="forms-panel-container-outer">
|
|
106
|
-
<div class="form-panels-container">
|
|
134
|
+
<div class="form-panels-container" [class.full-width]="widthMode === 'full-width'">
|
|
107
135
|
<div class="related-entity-grid">
|
|
108
136
|
<ng-content select="[slot='before-panels']"></ng-content>
|
|
109
137
|
</div>
|
|
110
138
|
<ng-content select="[slot='field-panels']"></ng-content>
|
|
111
|
-
<div class="related-entities-divider"></div>
|
|
112
139
|
<div class="related-entity-grid">
|
|
113
140
|
<ng-content select="[slot='after-panels']"></ng-content>
|
|
114
141
|
</div>
|
|
@@ -116,11 +143,11 @@ export class RecordFormContainerComponent {
|
|
|
116
143
|
</div>
|
|
117
144
|
</form>
|
|
118
145
|
</div>
|
|
119
|
-
`, styles: [".k-pane {\n background-color: #F5F6FA;\n}\n\n.record-form-container {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\na {\n font-size: 14px;\n
|
|
146
|
+
`, styles: [".k-pane {\n background-color: #F5F6FA;\n}\n\n.record-form-container {\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\na {\n font-size: 14px;\n}\n\n.record-form {\n display: flex;\n flex-direction: column;\n background-color: #F5F6FA;\n padding: 0;\n height: 100%;\n min-height: 0; /* Allow flex child to shrink */\n}\n\n.record-form-group {\n margin-top: 0px;\n background-color: #F5F6FA;\n}\n\nbutton {\n margin-right: 5px;\n}\n\n.record-form h2 {\n margin-bottom: 10px;\n}\n\n.k-splitter {\n border-width: 0px;\n}\n\n.record-form-row {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: start;\n gap: 10px;\n margin-bottom: 12px;\n padding-top: 5px;\n padding-bottom: 5px;\n}\n\n\n/* .record-form .record-form-row:nth-child(odd) {\n background-color: #f2f2f2;\n} */\n\n/*\n.record-form .record-form-row:nth-child(even) {\n background-color: #ffffff;\n} */\n\n.record-form .record-form-row > :first-child {\n font-weight: bold;\n padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n white-space: pre-line;\n max-height: 300px;\n overflow: auto;\n}\n\n\n\n@media (min-width: 768px) {\n .record-form-row {\n flex-direction: row;\n align-items: center;\n }\n\n .record-form-row label {\n width: 240px;\n margin-bottom: 0;\n }\n}\n\n/* Collapsible Panel Styles */\n.forms-panel-container-outer {\n flex: 1;\n min-height: 0; /* Critical: allows flex item to shrink below content size */\n overflow-y: auto;\n}\n\n.form-panels-container {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 20px;\n background-color: #F5F6FA;\n max-width: 900px;\n margin: 0 auto;\n transition: max-width 0.3s ease;\n}\n\n/* On very wide screens, allow slightly wider forms for better use of space */\n@media (min-width: 1600px) {\n .form-panels-container {\n max-width: 1000px;\n }\n}\n\n/* Full-width mode - removes max-width constraint */\n.form-panels-container.full-width {\n max-width: none;\n}\n\n/* Related entity grid container - treated as regular panels now */\n.form-panels-container .related-entity-grid {\n display: contents; /* Makes children participate in parent grid */\n}\n\n.form-card {\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n.collapsible-card {\n overflow: hidden;\n}\n\n.collapsible-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 24px;\n background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n border-bottom: 2px solid #e5e7eb;\n cursor: pointer;\n user-select: none;\n transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n border-bottom-color: #667eea;\n}\n\n.collapsible-title {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n}\n\n.collapsible-title i {\n font-size: 20px;\n color: #667eea;\n}\n\n.collapsible-title h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: #1f2937;\n}\n\n.collapsible-header .collapse-icon {\n color: #6b7280;\n transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n max-height: 2000px;\n overflow: hidden;\n transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n opacity: 1;\n}\n\n.collapsible-body.collapsed {\n max-height: 0;\n padding: 0;\n opacity: 0;\n}\n\n.form-body {\n padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity .collapsible-header {\n background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity .collapsible-title i {\n color: #3b82f6;\n}\n\n/* Section Controls */\n.form-section-controls {\n display: flex;\n gap: 10px;\n padding: 14px 18px;\n background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n border-bottom: 2px solid #e5e7eb;\n align-items: center;\n flex-wrap: wrap;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.form-section-controls .control-group {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.form-section-controls button {\n padding: 8px 14px;\n font-size: 13px;\n border: 1px solid #d1d5db;\n background: white;\n color: #374151;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n margin-right: 0;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-weight: 500;\n}\n\n.form-section-controls button:hover {\n background: #667eea;\n color: white;\n border-color: #667eea;\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.form-section-controls button:active {\n transform: translateY(0);\n}\n\n.form-section-controls button i {\n margin-right: 0;\n font-size: 14px;\n}\n\n.form-section-controls .section-search {\n padding: 8px 14px;\n font-size: 13px;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n width: 240px;\n transition: all 0.2s;\n background: white;\n}\n\n.form-section-controls .section-search:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls .section-search::placeholder {\n color: #9ca3af;\n font-style: italic;\n}\n\n.form-section-controls .section-count {\n font-size: 13px;\n color: #6b7280;\n margin-left: auto;\n font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n background: #667eea;\n color: white;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n}\n\n/* Row count badge for related entity sections */\n.collapsible-title .row-count-badge {\n background: #10b981;\n color: white;\n padding: 3px 6px 2px 6px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n margin-left: 8px;\n vertical-align: middle;\n position: relative;\n top: -2px;\n display: inline-block;\n line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n background: #9ca3af;\n}\n\n/* Search highlighting */\n.collapsible-title h3 .search-highlight {\n background-color: #fef08a;\n color: #854d0e;\n padding: 2px 4px;\n border-radius: 3px;\n font-weight: 700;\n}\n"] }]
|
|
120
147
|
}], () => [{ type: i0.ChangeDetectorRef }], { record: [{
|
|
121
148
|
type: Input
|
|
122
149
|
}], formComponent: [{
|
|
123
150
|
type: Input
|
|
124
151
|
}] }); })();
|
|
125
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecordFormContainerComponent, { className: "RecordFormContainerComponent", filePath: "src/lib/record-form-container.component.ts", lineNumber:
|
|
152
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecordFormContainerComponent, { className: "RecordFormContainerComponent", filePath: "src/lib/record-form-container.component.ts", lineNumber: 54 }); })();
|
|
126
153
|
//# sourceMappingURL=record-form-container.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"record-form-container.component.js","sourceRoot":"","sources":["../../src/lib/record-form-container.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuC,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;IAmBrF,AADJ,AADJ,kCAA+D,yBACnB,
|
|
1
|
+
{"version":3,"file":"record-form-container.component.js","sourceRoot":"","sources":["../../src/lib/record-form-container.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuC,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;IAmBrF,AADJ,AADJ,kCAA+D,yBACnB,kCAeF;IAA9B,AADA,AADA,AADA,AADA,AADA,mNAAa,oBAAa,KAAC,0MACZ,sBAAe,KAAC,kNACf,6BAAsB,KAAC,sRACyB,wNAC7C,gCAAyB,KAAC,wMAC/B,qBAAc,KAAC;IAErC,AADI,iBAA2B,EACb;IAIV,AADJ,AADJ,8BAAyC,aAC8C,aAC9C;IAC7B,kBAAyD;IAC7D,iBAAM;IACN,qBAAwD;IACxD,8BAAiC;IAC7B,sBAAwD;IAIxE,AADI,AADI,AADI,iBAAM,EACJ,EACJ,EACH;;;IA9Bc,eAAsB;IAAtB,2CAAsB;IAG/B,cAA6B;IAM7B,AADA,AADA,AADA,AADA,AADA,AADA,kDAA6B,iCACJ,uCACM,mDACY,yDACM,+BAC1B,yCACU;IAWF,eAA+C;IAA/C,+DAA+C;;AAnCtG;;;;;;;;GAQG;AA0CH,MAAM,OAAO,4BAA4B;IAiBjB;IAhBX,MAAM,CAAU;IAChB,aAAa,CAAqB;IAE3C,qEAAqE;IACrE,YAAY,GAAG,CAAC,CAAC;IACjB,UAAU,GAAG,CAAC,CAAC;IACf,aAAa,GAAG,CAAC,CAAC;IAClB,SAAS,GAAkB,UAAU,CAAC;IAE9B,iBAAiB,GAAG,KAAK,CAAC;IAElC,4DAA4D;IAC5D,IAAI,cAAc;QACd,OAAO,IAAI,CAAC,aAAa,EAAE,qBAAqB,EAAE,IAAI,KAAK,CAAC;IAChE,CAAC;IAED,YAAoB,GAAsB;QAAtB,QAAG,GAAH,GAAG,CAAmB;IAAG,CAAC;IAE9C,kBAAkB;QACd,kEAAkE;QAClE,mDAAmD;QACnD,IAAI,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAChD,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,oBAAoB,EAAE,CAAC;YAC3D,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;gBACf,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;gBAC9B,IAAI,CAAC,YAAY,EAAE,CAAC;gBACpB,iCAAiC;gBACjC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,EAAE,CAAC;gBACvD,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;YAC7B,CAAC;QACL,CAAC;IACL,CAAC;IAED,cAAc,CAAC,MAAc;QACzB,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QAC1C,oCAAoC;QACpC,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,WAAW;QACP,IAAI,CAAC,aAAa,CAAC,iBAAiB,EAAE,CAAC;QACvC,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,aAAa;QACT,IAAI,CAAC,aAAa,CAAC,mBAAmB,EAAE,CAAC;QACzC,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,iBAAiB,CAAC,IAAmB;QACjC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,YAAY;QACR,IAAI,CAAC,aAAa,CAAC,iBAAiB,EAAE,CAAC;QACvC,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;IAC7B,CAAC;IAEO,YAAY;QAChB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,sBAAsB,EAAE,CAAC;YAChE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,oBAAoB,EAAE,CAAC;YAC5D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,EAAE,CAAC;QAC/D,CAAC;IACL,CAAC;sHAlEQ,4BAA4B;6DAA5B,4BAA4B;;YArCjC,8BAAmC;YAC/B,iFAA+D;YAgCnE,iBAAM;;YAhCK,cAAY;YAAZ,iCAAY;;;iFAoClB,4BAA4B;cAzCxC,SAAS;2BACI,0BAA0B,iBACrB,iBAAiB,CAAC,IAAI,YAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCT;kDAIQ,MAAM;kBAAd,KAAK;YACG,aAAa;kBAArB,KAAK;;kFAFG,4BAA4B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-form-toolbar",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.4.0",
|
|
4
4
|
"description": "MemberJunction: Angular Form Toolbar",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -25,19 +25,19 @@
|
|
|
25
25
|
"@angular/router": "18.2.14"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@memberjunction/core": "3.
|
|
29
|
-
"@memberjunction/core-entities": "3.
|
|
30
|
-
"@memberjunction/global": "3.
|
|
31
|
-
"@memberjunction/ng-base-forms": "3.
|
|
32
|
-
"@memberjunction/ng-container-directives": "3.
|
|
33
|
-
"@memberjunction/ng-record-changes": "3.
|
|
34
|
-
"@memberjunction/ng-list-management": "3.
|
|
35
|
-
"@memberjunction/ng-shared": "3.
|
|
28
|
+
"@memberjunction/core": "3.4.0",
|
|
29
|
+
"@memberjunction/core-entities": "3.4.0",
|
|
30
|
+
"@memberjunction/global": "3.4.0",
|
|
31
|
+
"@memberjunction/ng-base-forms": "3.4.0",
|
|
32
|
+
"@memberjunction/ng-container-directives": "3.4.0",
|
|
33
|
+
"@memberjunction/ng-record-changes": "3.4.0",
|
|
34
|
+
"@memberjunction/ng-list-management": "3.4.0",
|
|
35
|
+
"@memberjunction/ng-shared": "3.4.0",
|
|
36
36
|
"@progress/kendo-angular-buttons": "16.2.0",
|
|
37
37
|
"@progress/kendo-angular-dialog": "16.2.0",
|
|
38
38
|
"@progress/kendo-angular-indicators": "16.2.0",
|
|
39
39
|
"@progress/kendo-angular-inputs": "16.2.0",
|
|
40
|
-
"@memberjunction/ng-markdown": "3.
|
|
40
|
+
"@memberjunction/ng-markdown": "3.4.0",
|
|
41
41
|
"tslib": "^2.3.0"
|
|
42
42
|
},
|
|
43
43
|
"sideEffects": false,
|