@memberjunction/ng-base-forms 4.0.0 → 4.2.0

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

@@ -1,273 +0,0 @@
-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_6_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵelement(1, "span", 15);
-    i0.ɵɵelementStart(2, "span", 16);
-    i0.ɵɵtext(3, "Custom Order");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 17);
-    i0.ɵɵlistener("click", function FormSectionControlsComponent_Conditional_6_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.confirmResetOrder()); });
-    i0.ɵɵelement(5, "span", 18);
-    i0.ɵɵelementEnd()();
-} }
-function FormSectionControlsComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 19);
-    i0.ɵɵlistener("click", function FormSectionControlsComponent_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearFilter()); });
-    i0.ɵɵelement(1, "span", 18);
-    i0.ɵɵelementEnd();
-} }
-function FormSectionControlsComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 13);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2("", ctx_r2.visibleCount, "/", ctx_r2.totalCount);
-} }
-function FormSectionControlsComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20);
-    i0.ɵɵlistener("click", function FormSectionControlsComponent_Conditional_16_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelResetOrder()); });
-    i0.ɵɵelementStart(1, "div", 21);
-    i0.ɵɵlistener("click", function FormSectionControlsComponent_Conditional_16_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 22);
-    i0.ɵɵelement(3, "span", 23);
-    i0.ɵɵelementStart(4, "h3");
-    i0.ɵɵtext(5, "Reset Section Order");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 24)(7, "p");
-    i0.ɵɵtext(8, "Are you sure you want to reset the section order to default?");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "p", 25);
-    i0.ɵɵtext(10, "This will remove your custom arrangement.");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 26)(12, "button", 27);
-    i0.ɵɵlistener("click", function FormSectionControlsComponent_Conditional_16_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.doResetOrder()); });
-    i0.ɵɵelement(13, "span", 28);
-    i0.ɵɵtext(14, " Reset Order ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "button", 29);
-    i0.ɵɵlistener("click", function FormSectionControlsComponent_Conditional_16_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelResetOrder()); });
-    i0.ɵɵtext(16, " Cancel ");
-    i0.ɵɵelementEnd()()()();
-} }
-/**
- * Reusable component for form section controls (Expand All, Collapse All, Filter, Counter, Width Toggle)
- * 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;
-    widthMode = 'centered';
-    hasCustomOrder = false;
-    expandAll = new EventEmitter();
-    collapseAll = new EventEmitter();
-    filterChange = new EventEmitter();
-    showEmptyFieldsChange = new EventEmitter();
-    widthModeChange = new EventEmitter();
-    resetOrder = new EventEmitter();
-    searchTerm = '';
-    showResetConfirmDialog = false;
-    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('');
-    }
-    toggleWidthMode() {
-        const newMode = this.widthMode === 'centered' ? 'full-width' : 'centered';
-        this.widthModeChange.emit(newMode);
-    }
-    confirmResetOrder() {
-        this.showResetConfirmDialog = true;
-    }
-    doResetOrder() {
-        this.showResetConfirmDialog = false;
-        this.resetOrder.emit();
-    }
-    cancelResetOrder() {
-        this.showResetConfirmDialog = false;
-    }
-    static ɵfac = function FormSectionControlsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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", widthMode: "widthMode", hasCustomOrder: "hasCustomOrder" }, outputs: { expandAll: "expandAll", collapseAll: "collapseAll", filterChange: "filterChange", showEmptyFieldsChange: "showEmptyFieldsChange", widthModeChange: "widthModeChange", resetOrder: "resetOrder" }, standalone: false, attrs: _c0, decls: 17, vars: 11, 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"], ["kendoButton", "", 3, "click", "title"], [1, "fa-solid", "fa-left-right"], ["title", "Sections are in a custom order", 1, "custom-order-indicator"], [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"], [1, "dialog-overlay"], [1, "fa-solid", "fa-shuffle"], [1, "indicator-label"], ["type", "button", "title", "Reset to default order", 1, "reset-order-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], ["kendoButton", "", "title", "Clear filter", 1, "clear-search-btn", 3, "click"], [1, "dialog-overlay", 3, "click"], [1, "confirm-dialog", 3, "click"], [1, "dialog-header"], [1, "fa-solid", "fa-shuffle", "dialog-icon"], [1, "dialog-body"], [1, "dialog-hint"], [1, "dialog-actions"], ["type", "button", 1, "dialog-btn", "dialog-btn-primary", 3, "click"], [1, "fa-solid", "fa-check"], ["type", "button", 1, "dialog-btn", "dialog-btn-secondary", 3, "click"]], 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, "button", 5);
-            i0.ɵɵlistener("click", function FormSectionControlsComponent_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleWidthMode()); });
-            i0.ɵɵelement(5, "span", 6);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(6, FormSectionControlsComponent_Conditional_6_Template, 6, 0, "div", 7);
-            i0.ɵɵelementStart(7, "label", 8)(8, "input", 9);
-            i0.ɵɵtwoWayListener("ngModelChange", function FormSectionControlsComponent_Template_input_ngModelChange_8_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_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.showEmptyFieldsChange.emit($event)); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "span");
-            i0.ɵɵtext(10, "Show Empty Fields");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(11, "div", 10)(12, "input", 11, 0);
-            i0.ɵɵtwoWayListener("ngModelChange", function FormSectionControlsComponent_Template_input_ngModelChange_12_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_12_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.filterChange.emit($event)); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(14, FormSectionControlsComponent_Conditional_14_Template, 2, 0, "button", 12);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(15, FormSectionControlsComponent_Conditional_15_Template, 2, 2, "span", 13);
-            i0.ɵɵconditionalCreate(16, FormSectionControlsComponent_Conditional_16_Template, 17, 0, "div", 14);
-        } if (rf & 2) {
-            i0.ɵɵproperty("disabled", ctx.allExpanded);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("disabled", ctx.allCollapsed);
-            i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("active", ctx.widthMode === "full-width");
-            i0.ɵɵproperty("title", ctx.widthMode === "full-width" ? "Switch to centered layout" : "Expand form to full width");
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.hasCustomOrder ? 6 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.showEmptyFields);
-            i0.ɵɵadvance(4);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.searchTerm);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.searchTerm ? 14 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.searchFilter && ctx.searchFilter.trim() ? 15 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showResetConfirmDialog ? 16 : -1);
-        } }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.ButtonComponent], styles: ["\n\n\n        button[_ngcontent-%COMP%] {\n            padding: 6px 12px;\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            justify-content: center;\n            gap: 6px;\n            font-weight: 500;\n            height: 36px;\n            box-sizing: border-box;\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.active[_ngcontent-%COMP%] {\n            background: #667eea;\n            color: white;\n            border-color: #667eea;\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: 6px 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            height: 36px;\n            box-sizing: border-box;\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: 6px 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            height: 36px;\n            box-sizing: border-box;\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        }\n\n        .custom-order-indicator[_ngcontent-%COMP%] {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 6px 8px 6px 14px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n            border-radius: 6px;\n            font-size: 13px;\n            font-weight: 500;\n            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);\n            height: 36px;\n            box-sizing: border-box;\n        }\n\n        .custom-order-indicator[_ngcontent-%COMP%]   .indicator-label[_ngcontent-%COMP%] {\n            white-space: nowrap;\n        }\n\n        .custom-order-indicator[_ngcontent-%COMP%]   .reset-order-btn[_ngcontent-%COMP%] {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 20px;\n            height: 20px;\n            padding: 0;\n            margin-left: 4px;\n            background: rgba(255, 255, 255, 0.2);\n            border: none;\n            border-radius: 50%;\n            color: white;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            font-size: 10px;\n        }\n\n        .custom-order-indicator[_ngcontent-%COMP%]   .reset-order-btn[_ngcontent-%COMP%]:hover {\n            background: rgba(255, 255, 255, 0.4);\n            transform: scale(1.1);\n        }\n\n        .custom-order-indicator[_ngcontent-%COMP%]   .reset-order-btn[_ngcontent-%COMP%]:active {\n            transform: scale(0.95);\n        }\n\n        \n\n        .dialog-overlay[_ngcontent-%COMP%] {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: rgba(0, 0, 0, 0.5);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            z-index: 10000;\n            animation: _ngcontent-%COMP%_fadeIn 0.15s ease;\n        }\n\n        @keyframes _ngcontent-%COMP%_fadeIn {\n            from { opacity: 0; }\n            to { opacity: 1; }\n        }\n\n        @keyframes _ngcontent-%COMP%_slideIn {\n            from {\n                opacity: 0;\n                transform: scale(0.95) translateY(-10px);\n            }\n            to {\n                opacity: 1;\n                transform: scale(1) translateY(0);\n            }\n        }\n\n        .confirm-dialog[_ngcontent-%COMP%] {\n            background: white;\n            border-radius: 12px;\n            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n            width: 380px;\n            max-width: 90vw;\n            overflow: hidden;\n            animation: _ngcontent-%COMP%_slideIn 0.2s ease;\n        }\n\n        .dialog-header[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            padding: 20px 24px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n        }\n\n        .dialog-header[_ngcontent-%COMP%]   .dialog-icon[_ngcontent-%COMP%] {\n            font-size: 20px;\n        }\n\n        .dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n            margin: 0;\n            font-size: 18px;\n            font-weight: 600;\n        }\n\n        .dialog-body[_ngcontent-%COMP%] {\n            padding: 24px;\n        }\n\n        .dialog-body[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n            margin: 0 0 8px 0;\n            font-size: 15px;\n            color: #374151;\n            line-height: 1.5;\n        }\n\n        .dialog-body[_ngcontent-%COMP%]   .dialog-hint[_ngcontent-%COMP%] {\n            font-size: 13px;\n            color: #6b7280;\n            margin-bottom: 0;\n        }\n\n        .dialog-actions[_ngcontent-%COMP%] {\n            display: flex;\n            gap: 12px;\n            padding: 16px 24px 24px;\n        }\n\n        .dialog-btn[_ngcontent-%COMP%] {\n            flex: 1;\n            padding: 10px 16px;\n            border-radius: 8px;\n            font-size: 14px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: all 0.2s;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n        }\n\n        .dialog-btn-primary[_ngcontent-%COMP%] {\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n            border: none;\n        }\n\n        .dialog-btn-primary[_ngcontent-%COMP%]:hover {\n            transform: translateY(-1px);\n            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n        }\n\n        .dialog-btn-secondary[_ngcontent-%COMP%] {\n            background: white;\n            color: #374151;\n            border: 1px solid #d1d5db;\n        }\n\n        .dialog-btn-secondary[_ngcontent-%COMP%]:hover {\n            background: #f3f4f6;\n            border-color: #9ca3af;\n        }"], changeDetection: 0 });
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormSectionControlsComponent, [{
-        type: Component,
-        args: [{ standalone: false, 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>
-        <button kendoButton
-                (click)="toggleWidthMode()"
-                [class.active]="widthMode === 'full-width'"
-                [title]="widthMode === 'full-width' ? 'Switch to centered layout' : 'Expand form to full width'">
-            <span class="fa-solid fa-left-right"></span>
-        </button>
-        @if (hasCustomOrder) {
-            <div class="custom-order-indicator"
-                 title="Sections are in a custom order">
-                <span class="fa-solid fa-shuffle"></span>
-                <span class="indicator-label">Custom Order</span>
-                <button type="button"
-                        class="reset-order-btn"
-                        (click)="confirmResetOrder()"
-                        title="Reset to default order">
-                    <span class="fa-solid fa-xmark"></span>
-                </button>
-            </div>
-        }
-        <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>
-        }
-
-        <!-- Custom confirm dialog for reset order -->
-        @if (showResetConfirmDialog) {
-            <div class="dialog-overlay" (click)="cancelResetOrder()">
-                <div class="confirm-dialog" (click)="$event.stopPropagation()">
-                    <div class="dialog-header">
-                        <span class="fa-solid fa-shuffle dialog-icon"></span>
-                        <h3>Reset Section Order</h3>
-                    </div>
-                    <div class="dialog-body">
-                        <p>Are you sure you want to reset the section order to default?</p>
-                        <p class="dialog-hint">This will remove your custom arrangement.</p>
-                    </div>
-                    <div class="dialog-actions">
-                        <button type="button" class="dialog-btn dialog-btn-primary" (click)="doResetOrder()">
-                            <span class="fa-solid fa-check"></span>
-                            Reset Order
-                        </button>
-                        <button type="button" class="dialog-btn dialog-btn-secondary" (click)="cancelResetOrder()">
-                            Cancel
-                        </button>
-                    </div>
-                </div>
-            </div>
-        }
-    `, styles: ["\n        /* Note: positioning (display, gap, align-items, margin-left) is handled by parent toolbar CSS */\n\n        button {\n            padding: 6px 12px;\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            justify-content: center;\n            gap: 6px;\n            font-weight: 500;\n            height: 36px;\n            box-sizing: border-box;\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.active {\n            background: #667eea;\n            color: white;\n            border-color: #667eea;\n        }\n\n        button i {\n            margin-right: 0;\n            font-size: 14px;\n        }\n\n        .section-search {\n            padding: 6px 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            height: 36px;\n            box-sizing: border-box;\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: 6px 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            height: 36px;\n            box-sizing: border-box;\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\n        .custom-order-indicator {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 6px 8px 6px 14px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n            border-radius: 6px;\n            font-size: 13px;\n            font-weight: 500;\n            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);\n            height: 36px;\n            box-sizing: border-box;\n        }\n\n        .custom-order-indicator .indicator-label {\n            white-space: nowrap;\n        }\n\n        .custom-order-indicator .reset-order-btn {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 20px;\n            height: 20px;\n            padding: 0;\n            margin-left: 4px;\n            background: rgba(255, 255, 255, 0.2);\n            border: none;\n            border-radius: 50%;\n            color: white;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            font-size: 10px;\n        }\n\n        .custom-order-indicator .reset-order-btn:hover {\n            background: rgba(255, 255, 255, 0.4);\n            transform: scale(1.1);\n        }\n\n        .custom-order-indicator .reset-order-btn:active {\n            transform: scale(0.95);\n        }\n\n        /* Custom confirm dialog styles */\n        .dialog-overlay {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: rgba(0, 0, 0, 0.5);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            z-index: 10000;\n            animation: fadeIn 0.15s ease;\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; }\n            to { opacity: 1; }\n        }\n\n        @keyframes slideIn {\n            from {\n                opacity: 0;\n                transform: scale(0.95) translateY(-10px);\n            }\n            to {\n                opacity: 1;\n                transform: scale(1) translateY(0);\n            }\n        }\n\n        .confirm-dialog {\n            background: white;\n            border-radius: 12px;\n            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n            width: 380px;\n            max-width: 90vw;\n            overflow: hidden;\n            animation: slideIn 0.2s ease;\n        }\n\n        .dialog-header {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            padding: 20px 24px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n        }\n\n        .dialog-header .dialog-icon {\n            font-size: 20px;\n        }\n\n        .dialog-header h3 {\n            margin: 0;\n            font-size: 18px;\n            font-weight: 600;\n        }\n\n        .dialog-body {\n            padding: 24px;\n        }\n\n        .dialog-body p {\n            margin: 0 0 8px 0;\n            font-size: 15px;\n            color: #374151;\n            line-height: 1.5;\n        }\n\n        .dialog-body .dialog-hint {\n            font-size: 13px;\n            color: #6b7280;\n            margin-bottom: 0;\n        }\n\n        .dialog-actions {\n            display: flex;\n            gap: 12px;\n            padding: 16px 24px 24px;\n        }\n\n        .dialog-btn {\n            flex: 1;\n            padding: 10px 16px;\n            border-radius: 8px;\n            font-size: 14px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: all 0.2s;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n        }\n\n        .dialog-btn-primary {\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n            border: none;\n        }\n\n        .dialog-btn-primary:hover {\n            transform: translateY(-1px);\n            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n        }\n\n        .dialog-btn-secondary {\n            background: white;\n            color: #374151;\n            border: 1px solid #d1d5db;\n        }\n\n        .dialog-btn-secondary:hover {\n            background: #f3f4f6;\n            border-color: #9ca3af;\n        }\n    "] }]
-    }], null, { visibleCount: [{
-            type: Input
-        }], totalCount: [{
-            type: Input
-        }], searchFilter: [{
-            type: Input
-        }], expandedCount: [{
-            type: Input
-        }], showEmptyFields: [{
-            type: Input
-        }], widthMode: [{
-            type: Input
-        }], hasCustomOrder: [{
-            type: Input
-        }], expandAll: [{
-            type: Output
-        }], collapseAll: [{
-            type: Output
-        }], filterChange: [{
-            type: Output
-        }], showEmptyFieldsChange: [{
-            type: Output
-        }], widthModeChange: [{
-            type: Output
-        }], resetOrder: [{
-            type: Output
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormSectionControlsComponent, { className: "FormSectionControlsComponent", filePath: "src/lib/form-section-controls.component.ts", lineNumber: 384 }); })();
-//# sourceMappingURL=form-section-controls.component.js.map

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

@@ -1 +0,0 @@
-{"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;;;;;;;IAiCpF,8BAC4C;IACxC,2BAAyC;IACzC,gCAA8B;IAAA,4BAAY;IAAA,iBAAO;IACjD,kCAGuC;IAD/B,gMAAS,0BAAmB,KAAC;IAEjC,2BAAuC;IAE/C,AADI,iBAAS,EACP;;;;IAkBF,kCAIyB;IADrB,iMAAS,oBAAa,KAAC;IAEvB,2BAAuC;IAC3C,iBAAS;;;IAIb,gCAA4B;IAAA,YAA+B;IAAA,iBAAO;;;IAAtC,cAA+B;IAA/B,sEAA+B;;;;IAK3D,+BAAyD;IAA7B,8LAAS,yBAAkB,KAAC;IACpD,+BAA+D;IAAnC,iKAAS,wBAAwB,KAAC;IAC1D,+BAA2B;IACvB,2BAAqD;IACrD,0BAAI;IAAA,mCAAmB;IAC3B,AAD2B,iBAAK,EAC1B;IAEF,AADJ,+BAAyB,QAClB;IAAA,4EAA4D;IAAA,iBAAI;IACnE,6BAAuB;IAAA,0DAAyC;IACpE,AADoE,iBAAI,EAClE;IAEF,AADJ,gCAA4B,kBAC6D;IAAzB,kMAAS,qBAAc,KAAC;IAChF,4BAAuC;IACvC,8BACJ;IAAA,iBAAS;IACT,mCAA2F;IAA7B,kMAAS,yBAAkB,KAAC;IACtF,yBACJ;IAGZ,AADI,AADI,AADI,iBAAS,EACP,EACJ,EACJ;;AA3FlB;;;GAGG;AAuXH,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;IACjC,SAAS,GAAkB,UAAU,CAAC;IACtC,cAAc,GAAY,KAAK,CAAC;IAC/B,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;IACpD,eAAe,GAAG,IAAI,YAAY,EAAiB,CAAC;IACpD,UAAU,GAAG,IAAI,YAAY,EAAQ,CAAC;IAEhD,UAAU,GAAG,EAAE,CAAC;IAChB,sBAAsB,GAAG,KAAK,CAAC;IAE/B,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;IAED,eAAe;QACX,MAAM,OAAO,GAAkB,IAAI,CAAC,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;QACzF,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvC,CAAC;IAED,iBAAiB;QACb,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;IACvC,CAAC;IAED,YAAY;QACR,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;QACpC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;IAED,gBAAgB;QACZ,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;IACxC,CAAC;sHA/CQ,4BAA4B;6DAA5B,4BAA4B;;YAjXjC,iCAGoC;YAF5B,+IAAS,oBAAgB,KAAC;YAG9B,0BAAmD;YACvD,iBAAS;YACT,iCAGsC;YAF9B,+IAAS,sBAAkB,KAAC;YAGhC,0BAAiD;YACrD,iBAAS;YACT,iCAGyG;YAFjG,+IAAS,qBAAiB,KAAC;YAG/B,0BAA4C;YAChD,iBAAS;YACT,8FAAsB;YAclB,AADJ,gCAAwC,eAIqB;YADrD,2QAA6B;YAC7B,oKAAiB,sCAAkC,KAAC;YAHxD,iBAGyD;YACzD,4BAAM;YAAA,kCAAiB;YAC3B,AAD2B,iBAAO,EAC1B;YAEJ,AADJ,gCAAiC,oBAOZ;YAFb,kQAAwB;YACxB,qKAAiB,6BAAyB,KAAC;YAL/C,iBAMiB;YACjB,oGAAkB;YAStB,iBAAM;YACN,kGAA2C;YAK3C,kGAA8B;;YA3DtB,0CAAwB;YAMxB,eAAyB;YAAzB,2CAAyB;YAMzB,eAA2C;YAA3C,wDAA2C;YAC3C,kHAAgG;YAGxG,eAYC;YAZD,6CAYC;YAIO,eAA6B;YAA7B,mDAA6B;YAS7B,eAAwB;YAAxB,8CAAwB;YAG5B,eAQC;YARD,0CAQC;YAEL,cAEC;YAFD,uEAEC;YAGD,cAsBC;YAtBD,sDAsBC;;;iFA8RI,4BAA4B;cAtXxC,SAAS;6BACI,KAAK,YACL,uDAAuD,mBAChD,uBAAuB,CAAC,MAAM,YACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqFT;;kBA8RA,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,MAAM;;kBACN,MAAM;;kBACN,MAAM;;kBACN,MAAM;;kBACN,MAAM;;kBACN,MAAM;;kFAbE,4BAA4B"}

package/dist/lib/link-field.component.d.ts

@@ -1,62 +0,0 @@
-import { AfterViewInit, ElementRef, ChangeDetectorRef } from "@angular/core";
-import { BaseRecordComponent } from "./base-record-component";
-import { BaseEntity, EntityFieldInfo, EntityInfo } from "@memberjunction/core";
-import { NavigationService } from "@memberjunction/ng-shared";
-import * as i0 from "@angular/core";
-/**
- * This component is used to automatically generate a UI for any field in a given BaseEntity object. The CodeGen tool will generate forms and form sections that
- * use this component. This component automatically determines the type of the field and generates the appropriate UI element for it. It is possible to use other
- * elements to render a field as desired in a custom form, think of this component as a nice "base" component you can use for many cases, and you can create custom
- * components for field rendering/editing when needed.
- */
-export declare class MJLinkField extends BaseRecordComponent implements AfterViewInit {
-    private cdr;
-    private navigationService;
-    constructor(cdr: ChangeDetectorRef, navigationService: NavigationService);
-    /**
-     * The record object that contains the field to be rendered. This object should be an instance of BaseEntity or a derived class.
-     */
-    record: BaseEntity;
-    /**
-     * The name of the field in the entity to be rendered.
-     */
-    FieldName: string;
-    /**
-     * For users of this component, if you already know the name of the record we are linking to, provide it here to reduce DB overhead
-     */
-    RecordName?: string;
-    /**
-     * The type of component to show, search is a user input field that searches for records, dropdown is a dropdown list of records. The default is 'search'. If the related entity has
-     * a small list of possible records, it is often desirable to show a dropdown list instead of a search box.
-     */
-    LinkComponentType?: 'Search' | 'Dropdown';
-    RelatedEntityInfo: EntityInfo | undefined;
-    private _SelectedRecord;
-    get SelectedRecord(): BaseEntity | undefined;
-    set SelectedRecord(val: BaseEntity | undefined);
-    RecordLinked: boolean;
-    RelatedEntityRecords: BaseEntity[];
-    showMatchingRecords: boolean;
-    dropDownColumns: EntityFieldInfo[];
-    inputBox: ElementRef;
-    private initComponent;
-    ngAfterViewInit(): Promise<void>;
-    private _cache_userCanCreateNewLinkedRecord;
-    get UserCanCreateNewLinkedRecord(): boolean;
-    onNewClicked(): void;
-    protected AttemptToLinkValue(): Promise<void>;
-    get Value(): any;
-    set Value(val: any);
-    get EntityField(): EntityFieldInfo | undefined;
-    get DisplayName(): string;
-    onClearClicked(): void;
-    RelatedEntityNameField: string;
-    protected fetchMatchingRecords(query: string): Promise<void>;
-    GetRecordDisplayString(record: any): any;
-    protected populateDropdownList(): Promise<void>;
-    protected SetDropdownValue(): Promise<void>;
-    onRecordSelected(linkedRecord: BaseEntity): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MJLinkField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MJLinkField, "mj-link-field", never, { "record": { "alias": "record"; "required": false; }; "FieldName": { "alias": "FieldName"; "required": false; }; "RecordName": { "alias": "RecordName"; "required": false; }; "LinkComponentType": { "alias": "LinkComponentType"; "required": false; }; }, {}, never, never, false, never>;
-}
-//# sourceMappingURL=link-field.component.d.ts.map

package/dist/lib/link-field.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"link-field.component.d.ts","sourceRoot":"","sources":["../../src/lib/link-field.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAoB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC1G,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAgB,eAAe,EAAE,UAAU,EAAqB,MAAM,sBAAsB,CAAC;AAEhH,OAAO,EAAiB,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;;AAE7E;;;;;GAKG;AACH,qBAMa,WAAY,SAAQ,mBAAoB,YAAW,aAAa;IAC7D,OAAO,CAAC,GAAG;IAAqB,OAAO,CAAC,iBAAiB;gBAAjD,GAAG,EAAE,iBAAiB,EAAU,iBAAiB,EAAE,iBAAiB;IAGxF;;OAEG;IACM,MAAM,EAAG,UAAU,CAAC;IAE7B;;OAEG;IACM,SAAS,EAAE,MAAM,CAAM;IAEhC;;OAEG;IACM,UAAU,CAAC,EAAE,MAAM,CAAM;IAElC;;;OAGG;IACM,iBAAiB,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEvD,iBAAiB,EAAE,UAAU,GAAG,SAAS,CAAa;IAE7D,OAAO,CAAC,eAAe,CAAqC;IAC5D,IAAW,cAAc,IAAI,UAAU,GAAG,SAAS,CAElD;IACD,IAAW,cAAc,CAAC,GAAG,EAAE,UAAU,GAAG,SAAS,EAOpD;IACM,YAAY,EAAE,OAAO,CAAS;IAC9B,oBAAoB,EAAE,UAAU,EAAE,CAAM;IACxC,mBAAmB,EAAE,OAAO,CAAS;IACrC,eAAe,EAAE,eAAe,EAAE,CAAM;IAEL,QAAQ,EAAG,UAAU,CAAC;YAElD,aAAa;IA0CrB,eAAe;IAIrB,OAAO,CAAC,mCAAmC,CAAwB;IACnE,IAAW,4BAA4B,IAAI,OAAO,CAcjD;IAEM,YAAY;cAcH,kBAAkB;IAoBlC,IAAW,KAAK,IAAI,GAAG,CAEtB;IAED,IAAW,KAAK,CAAC,GAAG,EAAE,GAAG,EAQxB;IAED,IAAW,WAAW,IAAI,eAAe,GAAG,SAAS,CAEpD;IACD,IAAW,WAAW,IAAI,MAAM,CAM/B;IAGM,cAAc;IAOd,sBAAsB,EAAE,MAAM,CAAM;cAC3B,oBAAoB,CAAC,KAAK,EAAE,MAAM;IAuD3C,sBAAsB,CAAC,MAAM,EAAE,GAAG;cAazB,oBAAoB;cA4BpB,gBAAgB;IAIzB,gBAAgB,CAAC,YAAY,EAAE,UAAU;yCArRvC,WAAW;2CAAX,WAAW;CAsSvB"}