@memberjunction/ng-base-forms 2.116.0 → 2.117.0

package/dist/lib/collapsible-panel.component.js

@@ -0,0 +1,281 @@
+import { Component, Input, ContentChildren, HostBinding, Output, EventEmitter } from '@angular/core';
+import { MJFormField } from './base-field-component';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+function CollapsiblePanelComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 11);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("zero-rows", ctx_r0.badgeCount === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.badgeCount, " ");
+} }
+/**
+ * Reusable collapsible panel component for form sections
+ * Handles:
+ * - Expand/collapse state
+ * - Search filtering with case-insensitive matching
+ * - Yellow highlighting of matched section names
+ * - Visibility management based on section name or field name matches
+ * - Passes sectionFilter down to child mj-form-field components for their own label highlighting
+ * - Panel width modes: normal (default), full-width (spans entire row)
+ */
+export class CollapsiblePanelComponent {
+    cdr;
+    sectionKey = '';
+    sectionName = '';
+    icon = 'fa fa-folder';
+    form; // Reference to the form component for method calls
+    formContext; // Contains all form-level state
+    variant = 'default';
+    badgeCount;
+    entityName = ''; // For localStorage key generation
+    widthModeChange = new EventEmitter();
+    fieldComponents;
+    get isHidden() {
+        return !this.isVisible;
+    }
+    get isFullWidth() {
+        return this.widthMode === 'full-width';
+    }
+    get expanded() {
+        return this.form ? this.form.IsSectionExpanded(this.sectionKey) : true;
+    }
+    displayName = '';
+    fieldNames = '';
+    isVisible = true;
+    widthMode = 'normal';
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngAfterContentInit() {
+        // Extract field names from projected field components
+        this.updateFieldNames();
+        this.fieldComponents.changes.subscribe(() => {
+            this.updateFieldNames();
+        });
+        // Load saved width mode from localStorage
+        this.loadWidthMode();
+    }
+    ngOnChanges(changes) {
+        if (changes['sectionName']) {
+            this.displayName = this.sectionName;
+        }
+        if (changes['sectionName'] || changes['formContext']) {
+            this.updateVisibilityAndHighlighting();
+        }
+        // Update context on all child field components when it changes
+        if (changes['formContext'] && this.fieldComponents) {
+            this.fieldComponents.forEach(field => {
+                field.formContext = this.formContext;
+            });
+        }
+    }
+    toggle() {
+        if (this.form) {
+            this.form.SetSectionExpanded(this.sectionKey, !this.expanded);
+            this.cdr.markForCheck();
+        }
+    }
+    toggleFullWidth(event) {
+        event.stopPropagation();
+        const newMode = this.widthMode === 'full-width' ? 'normal' : 'full-width';
+        // Auto-expand panel when switching to full-width mode
+        if (newMode === 'full-width' && !this.expanded && this.form) {
+            this.form.SetSectionExpanded(this.sectionKey, true);
+        }
+        this.setWidthMode(newMode);
+    }
+    setWidthMode(mode) {
+        this.widthMode = mode;
+        this.saveWidthMode();
+        this.widthModeChange.emit(mode);
+        this.cdr.markForCheck();
+    }
+    getStorageKey() {
+        // Generate unique key based on entity name and section key
+        const entity = this.entityName || 'unknown';
+        return `mj_panel_width_${entity}_${this.sectionKey}`;
+    }
+    saveWidthMode() {
+        try {
+            const key = this.getStorageKey();
+            localStorage.setItem(key, this.widthMode);
+        }
+        catch (e) {
+            console.warn('Failed to save panel width mode to localStorage:', e);
+        }
+    }
+    loadWidthMode() {
+        try {
+            const key = this.getStorageKey();
+            const saved = localStorage.getItem(key);
+            if (saved && (saved === 'normal' || saved === 'full-width')) {
+                this.widthMode = saved;
+                this.cdr.markForCheck();
+            }
+        }
+        catch (e) {
+            console.warn('Failed to load panel width mode from localStorage:', e);
+        }
+    }
+    updateFieldNames() {
+        if (this.fieldComponents) {
+            // Extract field display names from all mj-form-field components
+            const names = [];
+            this.fieldComponents.forEach(field => {
+                if (field.DisplayName) {
+                    names.push(field.DisplayName.toLowerCase());
+                }
+            });
+            this.fieldNames = names.join(' ');
+            this.updateVisibilityAndHighlighting();
+        }
+    }
+    updateVisibilityAndHighlighting() {
+        const searchTerm = (this.formContext?.sectionFilter || '').toLowerCase().trim();
+        if (!searchTerm) {
+            // No filter - show everything, clear highlights
+            this.isVisible = true;
+            this.displayName = this.sectionName;
+            this.cdr.markForCheck();
+            return;
+        }
+        // Check if this section matches the filter (section name or any field name)
+        const sectionMatches = this.sectionName.toLowerCase().includes(searchTerm);
+        const fieldsMatch = this.fieldNames.includes(searchTerm);
+        this.isVisible = sectionMatches || fieldsMatch;
+        if (this.isVisible && sectionMatches) {
+            // Highlight section name if it matches
+            const escapedTerm = this.escapeRegex(searchTerm);
+            const regex = new RegExp(escapedTerm, 'gi');
+            this.displayName = this.sectionName.replace(regex, '<mark class="search-highlight">$&</mark>');
+        }
+        else {
+            this.displayName = this.sectionName;
+        }
+        this.cdr.markForCheck();
+    }
+    escapeRegex(term) {
+        return term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+    static ɵfac = function CollapsiblePanelComponent_Factory(t) { return new (t || CollapsiblePanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CollapsiblePanelComponent, selectors: [["mj-collapsible-panel"]], contentQueries: function CollapsiblePanelComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuery(dirIndex, MJFormField, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fieldComponents = _t);
+        } }, hostVars: 4, hostBindings: function CollapsiblePanelComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassProp("search-hidden", ctx.isHidden)("panel-full-width", ctx.isFullWidth);
+        } }, inputs: { sectionKey: "sectionKey", sectionName: "sectionName", icon: "icon", form: "form", formContext: "formContext", variant: "variant", badgeCount: "badgeCount", entityName: "entityName" }, outputs: { widthModeChange: "widthModeChange" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 15, vars: 14, consts: [[1, "form-card", "collapsible-card"], ["role", "button", "tabindex", "0", 1, "collapsible-header"], [1, "collapsible-title", 3, "click"], [1, "section-name", 3, "innerHTML"], [1, "row-count-badge", 3, "zero-rows"], [1, "panel-width-controls"], ["title", "Stretch panel to full width", "aria-label", "Stretch panel to full width", "type", "button", 1, "width-control-btn", 3, "click"], [1, "fa-solid", "fa-left-right"], [1, "collapse-icon", 3, "click"], [1, "collapsible-body"], [1, "form-body"], [1, "row-count-badge"]], template: function CollapsiblePanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
+            i0.ɵɵlistener("click", function CollapsiblePanelComponent_Template_div_click_2_listener() { return ctx.toggle(); });
+            i0.ɵɵelement(3, "i");
+            i0.ɵɵelementStart(4, "h3");
+            i0.ɵɵelement(5, "span", 3);
+            i0.ɵɵtemplate(6, CollapsiblePanelComponent_Conditional_6_Template, 2, 3, "span", 4);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "div", 5)(8, "button", 6);
+            i0.ɵɵlistener("click", function CollapsiblePanelComponent_Template_button_click_8_listener($event) { return ctx.toggleFullWidth($event); });
+            i0.ɵɵelement(9, "i", 7);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(10, "div", 8);
+            i0.ɵɵlistener("click", function CollapsiblePanelComponent_Template_div_click_10_listener() { return ctx.toggle(); });
+            i0.ɵɵelement(11, "i");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(12, "div", 9)(13, "div", 10);
+            i0.ɵɵprojection(14);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("related-entity", ctx.variant === "related-entity");
+            i0.ɵɵattribute("data-section-name", ctx.sectionName)("data-field-names", ctx.fieldNames);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassMap(ctx.icon);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("innerHTML", ctx.displayName, i0.ɵɵsanitizeHtml);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.badgeCount !== undefined ? 6 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.widthMode === "full-width");
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassMap(ctx.expanded ? "fa fa-chevron-up" : "fa fa-chevron-down");
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("collapsed", !ctx.expanded);
+        } }, styles: ["[_nghost-%COMP%] {\n            display: block;\n        }\n\n        .search-hidden[_nghost-%COMP%] {\n            display: none;\n        }\n\n        .panel-full-width[_nghost-%COMP%] {\n            grid-column: 1 / -1 !important;\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        .panel-full-width[_nghost-%COMP%]   .form-card[_ngcontent-%COMP%] {\n            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.15);\n            border: 2px solid #667eea;\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        }\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            cursor: pointer;\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        .panel-width-controls[_ngcontent-%COMP%] {\n            display: flex;\n            gap: 6px;\n            align-items: center;\n        }\n\n        .width-control-btn[_ngcontent-%COMP%] {\n            padding: 6px 10px;\n            font-size: 13px;\n            border: 1px solid #d1d5db;\n            background: white;\n            color: #6b7280;\n            border-radius: 4px;\n            cursor: pointer;\n            transition: all 0.2s;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .width-control-btn[_ngcontent-%COMP%]:hover {\n            background: #f3f4f6;\n            color: #374151;\n            border-color: #9ca3af;\n        }\n\n        .width-control-btn.active[_ngcontent-%COMP%] {\n            background: #667eea;\n            color: white;\n            border-color: #667eea;\n        }\n\n        .width-control-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            font-size: 12px;\n        }\n\n        .collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n            color: #6b7280;\n            transition: transform 0.3s ease;\n            cursor: pointer;\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        .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        }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CollapsiblePanelComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-collapsible-panel', template: `
+        <div
+            class="form-card collapsible-card"
+            [class.related-entity]="variant === 'related-entity'"
+            [attr.data-section-name]="sectionName"
+            [attr.data-field-names]="fieldNames">
+            <div class="collapsible-header" role="button" tabindex="0">
+                <div class="collapsible-title" (click)="toggle()">
+                    <i [class]="icon"></i>
+                    <h3>
+                        <span class="section-name" [innerHTML]="displayName"></span>
+                        @if (badgeCount !== undefined) {
+                            <span class="row-count-badge"
+                                  [class.zero-rows]="badgeCount === 0">
+                                {{badgeCount}}
+                            </span>
+                        }
+                    </h3>
+                </div>
+                <div class="panel-width-controls">
+                    <button
+                        class="width-control-btn"
+                        [class.active]="widthMode === 'full-width'"
+                        (click)="toggleFullWidth($event)"
+                        title="Stretch panel to full width"
+                        aria-label="Stretch panel to full width"
+                        type="button">
+                        <i class="fa-solid fa-left-right"></i>
+                    </button>
+                </div>
+                <div class="collapse-icon" (click)="toggle()">
+                    <i [class]="expanded ? 'fa fa-chevron-up' : 'fa fa-chevron-down'"></i>
+                </div>
+            </div>
+            <div class="collapsible-body" [class.collapsed]="!expanded">
+                <div class="form-body">
+                    <ng-content></ng-content>
+                </div>
+            </div>
+        </div>
+    `, styles: ["\n        :host {\n            display: block;\n        }\n\n        :host(.search-hidden) {\n            display: none;\n        }\n\n        :host(.panel-full-width) {\n            grid-column: 1 / -1 !important;\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        :host(.panel-full-width) .form-card {\n            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.15);\n            border: 2px solid #667eea;\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        }\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            cursor: pointer;\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        .panel-width-controls {\n            display: flex;\n            gap: 6px;\n            align-items: center;\n        }\n\n        .width-control-btn {\n            padding: 6px 10px;\n            font-size: 13px;\n            border: 1px solid #d1d5db;\n            background: white;\n            color: #6b7280;\n            border-radius: 4px;\n            cursor: pointer;\n            transition: all 0.2s;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .width-control-btn:hover {\n            background: #f3f4f6;\n            color: #374151;\n            border-color: #9ca3af;\n        }\n\n        .width-control-btn.active {\n            background: #667eea;\n            color: white;\n            border-color: #667eea;\n        }\n\n        .width-control-btn i {\n            font-size: 12px;\n        }\n\n        .collapsible-header .collapse-icon {\n            color: #6b7280;\n            transition: transform 0.3s ease;\n            cursor: pointer;\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        .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    "] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { sectionKey: [{
+            type: Input
+        }], sectionName: [{
+            type: Input
+        }], icon: [{
+            type: Input
+        }], form: [{
+            type: Input
+        }], formContext: [{
+            type: Input
+        }], variant: [{
+            type: Input
+        }], badgeCount: [{
+            type: Input
+        }], entityName: [{
+            type: Input
+        }], widthModeChange: [{
+            type: Output
+        }], fieldComponents: [{
+            type: ContentChildren,
+            args: [MJFormField, { descendants: true }]
+        }], isHidden: [{
+            type: HostBinding,
+            args: ['class.search-hidden']
+        }], isFullWidth: [{
+            type: HostBinding,
+            args: ['class.panel-full-width']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CollapsiblePanelComponent, { className: "CollapsiblePanelComponent", filePath: "src/lib/collapsible-panel.component.ts", lineNumber: 243 }); })();
+//# sourceMappingURL=collapsible-panel.component.js.map

package/dist/lib/collapsible-panel.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-panel.component.js","sourceRoot":"","sources":["../../src/lib/collapsible-panel.component.ts"],"names":[],"mappings":"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"}

package/dist/lib/form-section-controls.component.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Reusable component for form section controls (Expand All, Collapse All, Filter, Counter)
+ * Designed to be projected into form toolbars via ng-content with [toolbar-additional-controls] selector
+ */
+export declare class FormSectionControlsComponent {
+    visibleCount: number;
+    totalCount: number;
+    searchFilter: string;
+    expandedCount: number;
+    showEmptyFields: boolean;
+    expandAll: EventEmitter<void>;
+    collapseAll: EventEmitter<void>;
+    filterChange: EventEmitter<string>;
+    showEmptyFieldsChange: EventEmitter<boolean>;
+    searchTerm: string;
+    get allExpanded(): boolean;
+    get allCollapsed(): boolean;
+    clearFilter(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormSectionControlsComponent, never>;
+    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>;
+}
+//# sourceMappingURL=form-section-controls.component.d.ts.map

package/dist/lib/form-section-controls.component.d.ts.map

@@ -0,0 +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,qBAwJa,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;IAChC,SAAS,qBAA4B;IACrC,WAAW,qBAA4B;IACvC,YAAY,uBAA8B;IAC1C,qBAAqB,wBAA+B;IAE9D,UAAU,SAAM;IAEhB,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,WAAW,IAAI,IAAI;yCArBV,4BAA4B;2CAA5B,4BAA4B;CAyBxC"}

package/dist/lib/form-section-controls.component.js

@@ -0,0 +1,150 @@
+import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@progress/kendo-angular-buttons";
+const _c0 = ["toolbar-additional-controls", ""];
+function FormSectionControlsComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 11);
+    i0.ɵɵlistener("click", function FormSectionControlsComponent_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearFilter()); });
+    i0.ɵɵelement(1, "span", 12);
+    i0.ɵɵelementEnd();
+} }
+function FormSectionControlsComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 10);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("", ctx_r2.visibleCount, "/", ctx_r2.totalCount, "");
+} }
+/**
+ * Reusable component for form section controls (Expand All, Collapse All, Filter, Counter)
+ * Designed to be projected into form toolbars via ng-content with [toolbar-additional-controls] selector
+ */
+export class FormSectionControlsComponent {
+    visibleCount = 0;
+    totalCount = 0;
+    searchFilter = '';
+    expandedCount = 0;
+    showEmptyFields = false;
+    expandAll = new EventEmitter();
+    collapseAll = new EventEmitter();
+    filterChange = new EventEmitter();
+    showEmptyFieldsChange = new EventEmitter();
+    searchTerm = '';
+    get allExpanded() {
+        return this.totalCount > 0 && this.expandedCount === this.totalCount;
+    }
+    get allCollapsed() {
+        return this.totalCount > 0 && this.expandedCount === 0;
+    }
+    clearFilter() {
+        this.searchTerm = '';
+        this.filterChange.emit('');
+    }
+    static ɵfac = function FormSectionControlsComponent_Factory(t) { return new (t || FormSectionControlsComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormSectionControlsComponent, selectors: [["mj-form-section-controls", "toolbar-additional-controls", ""]], inputs: { visibleCount: "visibleCount", totalCount: "totalCount", searchFilter: "searchFilter", expandedCount: "expandedCount", showEmptyFields: "showEmptyFields" }, outputs: { expandAll: "expandAll", collapseAll: "collapseAll", filterChange: "filterChange", showEmptyFieldsChange: "showEmptyFieldsChange" }, attrs: _c0, decls: 13, vars: 6, consts: [["searchInput", ""], ["kendoButton", "", "title", "Expand all sections", 3, "click", "disabled"], [1, "fa-solid", "fa-angle-double-down"], ["kendoButton", "", "title", "Collapse all sections", 3, "click", "disabled"], [1, "fa-solid", "fa-angle-double-up"], [1, "show-empty-fields-toggle"], ["type", "checkbox", 3, "ngModelChange", "ngModel"], [2, "position", "relative"], ["type", "text", "placeholder", "Filter sections...", 1, "section-search", 3, "ngModelChange", "ngModel"], ["kendoButton", "", "title", "Clear filter", 1, "clear-search-btn"], [1, "section-count"], ["kendoButton", "", "title", "Clear filter", 1, "clear-search-btn", 3, "click"], [1, "fa-solid", "fa-xmark"]], template: function FormSectionControlsComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "button", 1);
+            i0.ɵɵlistener("click", function FormSectionControlsComponent_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.expandAll.emit()); });
+            i0.ɵɵelement(1, "span", 2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(2, "button", 3);
+            i0.ɵɵlistener("click", function FormSectionControlsComponent_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.collapseAll.emit()); });
+            i0.ɵɵelement(3, "span", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "label", 5)(5, "input", 6);
+            i0.ɵɵtwoWayListener("ngModelChange", function FormSectionControlsComponent_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.showEmptyFields, $event) || (ctx.showEmptyFields = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function FormSectionControlsComponent_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.showEmptyFieldsChange.emit($event)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "span");
+            i0.ɵɵtext(7, "Show Empty Fields");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(8, "div", 7)(9, "input", 8, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function FormSectionControlsComponent_Template_input_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.searchTerm, $event) || (ctx.searchTerm = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function FormSectionControlsComponent_Template_input_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.filterChange.emit($event)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(11, FormSectionControlsComponent_Conditional_11_Template, 2, 0, "button", 9);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(12, FormSectionControlsComponent_Conditional_12_Template, 2, 2, "span", 10);
+        } if (rf & 2) {
+            i0.ɵɵproperty("disabled", ctx.allExpanded);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", ctx.allCollapsed);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.showEmptyFields);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.searchTerm);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.searchTerm ? 11 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.searchFilter && ctx.searchFilter.trim() ? 12 : -1);
+        } }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.ButtonComponent], styles: ["\n\n\n        button[_ngcontent-%COMP%] {\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        button[_ngcontent-%COMP%]: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        button[_ngcontent-%COMP%]:active {\n            transform: translateY(0);\n        }\n\n        button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            margin-right: 0;\n            font-size: 14px;\n        }\n\n        .section-search[_ngcontent-%COMP%] {\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        .section-search[_ngcontent-%COMP%]:focus {\n            outline: none;\n            border-color: #667eea;\n            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n        }\n\n        .section-search[_ngcontent-%COMP%]::placeholder {\n            color: #9ca3af;\n            font-style: italic;\n        }\n\n        .section-count[_ngcontent-%COMP%] {\n            font-size: 13px;\n            color: #6b7280;\n            font-weight: 500;\n            padding: 6px 12px;\n            background: #f3f4f6;\n            border-radius: 6px;\n        }\n\n        .clear-search-btn[_ngcontent-%COMP%] {\n            position: absolute;\n            right: 6px;\n            top: 50%;\n            transform: translateY(-50%);\n            padding: 4px 8px;\n            min-width: unset;\n        }\n\n        .show-empty-fields-toggle[_ngcontent-%COMP%] {\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            padding: 8px 14px;\n            background: white;\n            border: 1px solid #d1d5db;\n            border-radius: 6px;\n            cursor: pointer;\n            transition: all 0.2s;\n            font-size: 13px;\n            font-weight: 500;\n            color: #374151;\n            user-select: none;\n        }\n\n        .show-empty-fields-toggle[_ngcontent-%COMP%]:hover {\n            background: #f3f4f6;\n            border-color: #9ca3af;\n        }\n\n        .show-empty-fields-toggle[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n            cursor: pointer;\n            width: 16px;\n            height: 16px;\n        }\n\n        .show-empty-fields-toggle[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n            white-space: nowrap;\n        }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormSectionControlsComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-form-section-controls[toolbar-additional-controls]', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        <button kendoButton
+                (click)="expandAll.emit()"
+                [disabled]="allExpanded"
+                title="Expand all sections">
+            <span class="fa-solid fa-angle-double-down"></span>
+        </button>
+        <button kendoButton
+                (click)="collapseAll.emit()"
+                [disabled]="allCollapsed"
+                title="Collapse all sections">
+            <span class="fa-solid fa-angle-double-up"></span>
+        </button>
+        <label class="show-empty-fields-toggle">
+            <input
+                type="checkbox"
+                [(ngModel)]="showEmptyFields"
+                (ngModelChange)="showEmptyFieldsChange.emit($event)">
+            <span>Show Empty Fields</span>
+        </label>
+        <div style="position: relative;">
+            <input
+                type="text"
+                class="section-search"
+                placeholder="Filter sections..."
+                [(ngModel)]="searchTerm"
+                (ngModelChange)="filterChange.emit($event)"
+                #searchInput>
+            @if (searchTerm) {
+                <button
+                    kendoButton
+                    class="clear-search-btn"
+                    (click)="clearFilter()"
+                    title="Clear filter">
+                    <span class="fa-solid fa-xmark"></span>
+                </button>
+            }
+        </div>
+        @if (searchFilter && searchFilter.trim()) {
+            <span class="section-count">{{visibleCount}}/{{totalCount}}</span>
+        }
+    `, styles: ["\n        /* Note: positioning (display, gap, align-items, margin-left) is handled by parent toolbar CSS */\n\n        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        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        button:active {\n            transform: translateY(0);\n        }\n\n        button i {\n            margin-right: 0;\n            font-size: 14px;\n        }\n\n        .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        .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        .section-search::placeholder {\n            color: #9ca3af;\n            font-style: italic;\n        }\n\n        .section-count {\n            font-size: 13px;\n            color: #6b7280;\n            font-weight: 500;\n            padding: 6px 12px;\n            background: #f3f4f6;\n            border-radius: 6px;\n        }\n\n        .clear-search-btn {\n            position: absolute;\n            right: 6px;\n            top: 50%;\n            transform: translateY(-50%);\n            padding: 4px 8px;\n            min-width: unset;\n        }\n\n        .show-empty-fields-toggle {\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            padding: 8px 14px;\n            background: white;\n            border: 1px solid #d1d5db;\n            border-radius: 6px;\n            cursor: pointer;\n            transition: all 0.2s;\n            font-size: 13px;\n            font-weight: 500;\n            color: #374151;\n            user-select: none;\n        }\n\n        .show-empty-fields-toggle:hover {\n            background: #f3f4f6;\n            border-color: #9ca3af;\n        }\n\n        .show-empty-fields-toggle input[type=\"checkbox\"] {\n            cursor: pointer;\n            width: 16px;\n            height: 16px;\n        }\n\n        .show-empty-fields-toggle span {\n            white-space: nowrap;\n        }\n    "] }]
+    }], null, { visibleCount: [{
+            type: Input
+        }], totalCount: [{
+            type: Input
+        }], searchFilter: [{
+            type: Input
+        }], expandedCount: [{
+            type: Input
+        }], showEmptyFields: [{
+            type: Input
+        }], expandAll: [{
+            type: Output
+        }], collapseAll: [{
+            type: Output
+        }], filterChange: [{
+            type: Output
+        }], showEmptyFieldsChange: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormSectionControlsComponent, { className: "FormSectionControlsComponent", filePath: "src/lib/form-section-controls.component.ts", lineNumber: 159 }); })();
+//# sourceMappingURL=form-section-controls.component.js.map

package/dist/lib/form-section-controls.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-section-controls.component.js","sourceRoot":"","sources":["../../src/lib/form-section-controls.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;;;;;;;IAsChF,kCAIyB;IADrB,iMAAS,oBAAa,KAAC;IAEvB,2BAAuC;IAC3C,iBAAS;;;IAIb,gCAA4B;IAAA,YAA+B;IAAA,iBAAO;;;IAAtC,cAA+B;IAA/B,0EAA+B;;AA9CvE;;;GAGG;AAyJH,MAAM,OAAO,4BAA4B;IAC5B,YAAY,GAAW,CAAC,CAAC;IACzB,UAAU,GAAW,CAAC,CAAC;IACvB,YAAY,GAAW,EAAE,CAAC;IAC1B,aAAa,GAAW,CAAC,CAAC;IAC1B,eAAe,GAAY,KAAK,CAAC;IAChC,SAAS,GAAG,IAAI,YAAY,EAAQ,CAAC;IACrC,WAAW,GAAG,IAAI,YAAY,EAAQ,CAAC;IACvC,YAAY,GAAG,IAAI,YAAY,EAAU,CAAC;IAC1C,qBAAqB,GAAG,IAAI,YAAY,EAAW,CAAC;IAE9D,UAAU,GAAG,EAAE,CAAC;IAEhB,IAAI,WAAW;QACX,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,UAAU,CAAC;IACzE,CAAC;IAED,IAAI,YAAY;QACZ,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,CAAC;IAC3D,CAAC;IAED,WAAW;QACP,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC;sFAxBQ,4BAA4B;6DAA5B,4BAA4B;;YApJjC,iCAGoC;YAF5B,+IAAS,oBAAgB,KAAC;YAG9B,0BAAmD;YACvD,iBAAS;YACT,iCAGsC;YAF9B,+IAAS,sBAAkB,KAAC;YAGhC,0BAAiD;YACrD,iBAAS;YAEL,AADJ,gCAAwC,eAIqB;YADrD,2QAA6B;YAC7B,oKAAiB,sCAAkC,KAAC;YAHxD,iBAGyD;YACzD,4BAAM;YAAA,iCAAiB;YAC3B,AAD2B,iBAAO,EAC1B;YAEJ,AADJ,8BAAiC,kBAOZ;YAFb,iQAAwB;YACxB,oKAAiB,6BAAyB,KAAC;YAL/C,iBAMiB;YACjB,0FAAkB;YAStB,iBAAM;YACN,yFAA2C;;YAnCnC,0CAAwB;YAMxB,eAAyB;YAAzB,2CAAyB;YAOzB,eAA6B;YAA7B,mDAA6B;YAS7B,eAAwB;YAAxB,8CAAwB;YAG5B,eAQC;YARD,0CAQC;YAEL,cAEC;YAFD,uEAEC;;;iFA6GI,4BAA4B;cAxJxC,SAAS;2BACI,uDAAuD,mBAChD,uBAAuB,CAAC,MAAM,YACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCT;gBA6GQ,YAAY;kBAApB,KAAK;YACG,UAAU;kBAAlB,KAAK;YACG,YAAY;kBAApB,KAAK;YACG,aAAa;kBAArB,KAAK;YACG,eAAe;kBAAvB,KAAK;YACI,SAAS;kBAAlB,MAAM;YACG,WAAW;kBAApB,MAAM;YACG,YAAY;kBAArB,MAAM;YACG,qBAAqB;kBAA9B,MAAM;;kFATE,4BAA4B"}

package/dist/module.d.ts

@@ -2,24 +2,26 @@ import * as i0 from "@angular/core";
 import * as i1 from "./lib/section-loader-component";
 import * as i2 from "./lib/base-field-component";
 import * as i3 from "./lib/link-field.component";
-import * as i4 from "@angular/common";
-import * as i5 from "@angular/forms";
-import * as i6 from "@memberjunction/ng-tabstrip";
-import * as i7 from "@memberjunction/ng-record-changes";
-import * as i8 from "@progress/kendo-angular-buttons";
-import * as i9 from "@progress/kendo-angular-inputs";
-import * as i10 from "@progress/kendo-angular-dateinputs";
-import * as i11 from "@progress/kendo-angular-dropdowns";
-import * as i12 from "@memberjunction/ng-link-directives";
-import * as i13 from "@progress/kendo-angular-dialog";
-import * as i14 from "@progress/kendo-angular-indicators";
-import * as i15 from "@memberjunction/ng-container-directives";
-import * as i16 from "@memberjunction/ng-shared";
-import * as i17 from "@memberjunction/ng-code-editor";
-import * as i18 from "ngx-markdown";
+import * as i4 from "./lib/form-section-controls.component";
+import * as i5 from "./lib/collapsible-panel.component";
+import * as i6 from "@angular/common";
+import * as i7 from "@angular/forms";
+import * as i8 from "@memberjunction/ng-tabstrip";
+import * as i9 from "@memberjunction/ng-record-changes";
+import * as i10 from "@progress/kendo-angular-buttons";
+import * as i11 from "@progress/kendo-angular-inputs";
+import * as i12 from "@progress/kendo-angular-dateinputs";
+import * as i13 from "@progress/kendo-angular-dropdowns";
+import * as i14 from "@memberjunction/ng-link-directives";
+import * as i15 from "@progress/kendo-angular-dialog";
+import * as i16 from "@progress/kendo-angular-indicators";
+import * as i17 from "@memberjunction/ng-container-directives";
+import * as i18 from "@memberjunction/ng-shared";
+import * as i19 from "@memberjunction/ng-code-editor";
+import * as i20 from "ngx-markdown";
 export declare class BaseFormsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseFormsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<BaseFormsModule, [typeof i1.SectionLoaderComponent, typeof i2.MJFormField, typeof i3.MJLinkField], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i6.MJTabStripModule, typeof i7.RecordChangesModule, typeof i8.ButtonsModule, typeof i9.InputsModule, typeof i10.DateInputsModule, typeof i11.DropDownsModule, typeof i12.LinkDirectivesModule, typeof i13.DialogsModule, typeof i14.IndicatorsModule, typeof i15.ContainerDirectivesModule, typeof i16.MemberJunctionSharedModule, typeof i17.CodeEditorModule, typeof i18.MarkdownModule], [typeof i1.SectionLoaderComponent, typeof i2.MJFormField, typeof i3.MJLinkField]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BaseFormsModule, [typeof i1.SectionLoaderComponent, typeof i2.MJFormField, typeof i3.MJLinkField, typeof i4.FormSectionControlsComponent, typeof i5.CollapsiblePanelComponent], [typeof i6.CommonModule, typeof i7.FormsModule, typeof i8.MJTabStripModule, typeof i9.RecordChangesModule, typeof i10.ButtonsModule, typeof i11.InputsModule, typeof i12.DateInputsModule, typeof i13.DropDownsModule, typeof i14.LinkDirectivesModule, typeof i15.DialogsModule, typeof i16.IndicatorsModule, typeof i17.ContainerDirectivesModule, typeof i18.MemberJunctionSharedModule, typeof i19.CodeEditorModule, typeof i20.MarkdownModule], [typeof i1.SectionLoaderComponent, typeof i2.MJFormField, typeof i3.MJLinkField, typeof i4.FormSectionControlsComponent, typeof i5.CollapsiblePanelComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<BaseFormsModule>;
 }
 //# sourceMappingURL=module.d.ts.map

package/dist/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA0BA,qBA6Ba,eAAe;yCAAf,eAAe;0CAAf,eAAe;0CAAf,eAAe;CAAI"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA4BA,qBAiCa,eAAe;yCAAf,eAAe;0CAAf,eAAe;0CAAf,eAAe;CAAI"}

package/dist/module.js

@@ -19,6 +19,8 @@ import { CodeEditorModule } from '@memberjunction/ng-code-editor';
 // Markdown
 import { MarkdownModule } from 'ngx-markdown';
 import { MJLinkField } from './lib/link-field.component';
+import { FormSectionControlsComponent } from './lib/form-section-controls.component';
+import { CollapsiblePanelComponent } from './lib/collapsible-panel.component';
 import * as i0 from "@angular/core";
 import * as i1 from "ngx-markdown";
 export class BaseFormsModule {
@@ -46,7 +48,9 @@ export class BaseFormsModule {
                 declarations: [
                     SectionLoaderComponent,
                     MJFormField,
-                    MJLinkField
+                    MJLinkField,
+                    FormSectionControlsComponent,
+                    CollapsiblePanelComponent
                 ],
                 imports: [
                     CommonModule,
@@ -68,13 +72,17 @@ export class BaseFormsModule {
                 exports: [
                     SectionLoaderComponent,
                     MJFormField,
-                    MJLinkField
+                    MJLinkField,
+                    FormSectionControlsComponent,
+                    CollapsiblePanelComponent
                 ]
             }]
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(BaseFormsModule, { declarations: [SectionLoaderComponent,
         MJFormField,
-        MJLinkField], imports: [CommonModule,
+        MJLinkField,
+        FormSectionControlsComponent,
+        CollapsiblePanelComponent], imports: [CommonModule,
         FormsModule,
         MJTabStripModule,
         RecordChangesModule,
@@ -89,5 +97,7 @@ export class BaseFormsModule {
         MemberJunctionSharedModule,
         CodeEditorModule, i1.MarkdownModule], exports: [SectionLoaderComponent,
         MJFormField,
-        MJLinkField] }); })();
+        MJLinkField,
+        FormSectionControlsComponent,
+        CollapsiblePanelComponent] }); })();
 //# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,2BAA2B;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAE1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,WAAW;AACX,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;;;AA+BzD,MAAM,OAAO,eAAe;yEAAf,eAAe;4DAAf,eAAe;gEAtBxB,YAAY;YACZ,WAAW;YACX,gBAAgB;YAChB,mBAAmB;YACnB,aAAa;YACb,YAAY;YACZ,gBAAgB;YAChB,eAAe;YACf,oBAAoB;YACpB,aAAa;YACb,gBAAgB;YAChB,yBAAyB;YACzB,0BAA0B;YAC1B,gBAAgB;YAChB,cAAc,CAAC,OAAO,EAAE;;iFAQf,eAAe;cA7B3B,QAAQ;eAAC;gBACR,YAAY,EAAE;oBACZ,sBAAsB;oBACtB,WAAW;oBACX,WAAW;iBACZ;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,WAAW;oBACX,gBAAgB;oBAChB,mBAAmB;oBACnB,aAAa;oBACb,YAAY;oBACZ,gBAAgB;oBAChB,eAAe;oBACf,oBAAoB;oBACpB,aAAa;oBACb,gBAAgB;oBAChB,yBAAyB;oBACzB,0BAA0B;oBAC1B,gBAAgB;oBAChB,cAAc,CAAC,OAAO,EAAE;iBACzB;gBACD,OAAO,EAAE;oBACP,sBAAsB;oBACtB,WAAW;oBACX,WAAW;iBACZ;aACF;;wFACY,eAAe,mBA3BxB,sBAAsB;QACtB,WAAW;QACX,WAAW,aAGX,YAAY;QACZ,WAAW;QACX,gBAAgB;QAChB,mBAAmB;QACnB,aAAa;QACb,YAAY;QACZ,gBAAgB;QAChB,eAAe;QACf,oBAAoB;QACpB,aAAa;QACb,gBAAgB;QAChB,yBAAyB;QACzB,0BAA0B;QAC1B,gBAAgB,gCAIhB,sBAAsB;QACtB,WAAW;QACX,WAAW"}
+{"version":3,"file":"module.js","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,2BAA2B;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAE1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,WAAW;AACX,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,4BAA4B,EAAE,MAAM,uCAAuC,CAAC;AACrF,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;;;AAmC9E,MAAM,OAAO,eAAe;yEAAf,eAAe;4DAAf,eAAe;gEAxBxB,YAAY;YACZ,WAAW;YACX,gBAAgB;YAChB,mBAAmB;YACnB,aAAa;YACb,YAAY;YACZ,gBAAgB;YAChB,eAAe;YACf,oBAAoB;YACpB,aAAa;YACb,gBAAgB;YAChB,yBAAyB;YACzB,0BAA0B;YAC1B,gBAAgB;YAChB,cAAc,CAAC,OAAO,EAAE;;iFAUf,eAAe;cAjC3B,QAAQ;eAAC;gBACR,YAAY,EAAE;oBACZ,sBAAsB;oBACtB,WAAW;oBACX,WAAW;oBACX,4BAA4B;oBAC5B,yBAAyB;iBAC1B;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,WAAW;oBACX,gBAAgB;oBAChB,mBAAmB;oBACnB,aAAa;oBACb,YAAY;oBACZ,gBAAgB;oBAChB,eAAe;oBACf,oBAAoB;oBACpB,aAAa;oBACb,gBAAgB;oBAChB,yBAAyB;oBACzB,0BAA0B;oBAC1B,gBAAgB;oBAChB,cAAc,CAAC,OAAO,EAAE;iBACzB;gBACD,OAAO,EAAE;oBACP,sBAAsB;oBACtB,WAAW;oBACX,WAAW;oBACX,4BAA4B;oBAC5B,yBAAyB;iBAC1B;aACF;;wFACY,eAAe,mBA/BxB,sBAAsB;QACtB,WAAW;QACX,WAAW;QACX,4BAA4B;QAC5B,yBAAyB,aAGzB,YAAY;QACZ,WAAW;QACX,gBAAgB;QAChB,mBAAmB;QACnB,aAAa;QACb,YAAY;QACZ,gBAAgB;QAChB,eAAe;QACf,oBAAoB;QACpB,aAAa;QACb,gBAAgB;QAChB,yBAAyB;QACzB,0BAA0B;QAC1B,gBAAgB,gCAIhB,sBAAsB;QACtB,WAAW;QACX,WAAW;QACX,4BAA4B;QAC5B,yBAAyB"}