@memberjunction/ng-base-forms 5.10.1 → 5.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/container/record-form-container.component.js +2 -2
- package/dist/lib/explorer-entity-data-grid.component.d.ts.map +1 -1
- package/dist/lib/explorer-entity-data-grid.component.js +12 -19
- package/dist/lib/explorer-entity-data-grid.component.js.map +1 -1
- package/dist/lib/field/form-field.component.d.ts.map +1 -1
- package/dist/lib/field/form-field.component.js +7 -2
- package/dist/lib/field/form-field.component.js.map +1 -1
- package/dist/lib/isa-related-panel/isa-related-card.component.js +2 -2
- package/dist/lib/isa-related-panel/isa-related-panel.component.js +2 -2
- package/dist/lib/panel/collapsible-panel.component.js +2 -2
- package/dist/lib/section-manager/section-manager.component.js +2 -2
- package/dist/lib/toolbar/form-toolbar.component.js +2 -2
- package/package.json +8 -8
|
@@ -186,11 +186,11 @@ export class MjSectionManagerComponent {
|
|
|
186
186
|
i0.ɵɵconditionalCreate(0, MjSectionManagerComponent_Conditional_0_Template, 15, 0, "div", 0);
|
|
187
187
|
} if (rf & 2) {
|
|
188
188
|
i0.ɵɵconditional(ctx.Visible ? 0 : -1);
|
|
189
|
-
} }, styles: ["\n\n\n\n[_nghost-%COMP%] {\n
|
|
189
|
+
} }, styles: ["\n\n\n\n[_nghost-%COMP%] {\n display: block;\n}\n\n\n\n\n\n.mj-sm-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 1000;\n animation: _ngcontent-%COMP%_mj-sm-fade-in 150ms ease;\n}\n\n\n\n\n\n.mj-sm-drawer[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n width: 340px;\n max-width: 90vw;\n background: var(--mj-bg-surface);\n box-shadow: var(--mj-shadow-lg);\n display: flex;\n flex-direction: column;\n animation: _ngcontent-%COMP%_mj-sm-slide-in 200ms ease;\n}\n\n\n\n\n\n.mj-sm-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n background: var(--mj-bg-surface-elevated);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.mj-sm-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 15px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.mj-sm-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-sm);\n}\n\n.mj-sm-close[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 6px;\n font-size: var(--mj-text-base);\n border-radius: var(--mj-radius-sm);\n transition: all var(--mj-transition-base);\n line-height: 1;\n}\n\n.mj-sm-close[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n background: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n}\n\n\n\n\n\n.mj-sm-list[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 8px 0;\n}\n\n.mj-sm-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 20px;\n border-bottom: 1px solid var(--mj-bg-surface-hover);\n transition: background var(--mj-transition-base);\n}\n\n.mj-sm-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n}\n\n.mj-sm-row-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n min-width: 0;\n flex: 1;\n}\n\n.mj-sm-row-icon[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-secondary);\n width: 18px;\n text-align: center;\n flex-shrink: 0;\n}\n\n.mj-sm-row-name[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: var(--mj-font-medium);\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n\n\n.mj-sm-row-badge[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: var(--mj-font-semibold);\n padding: 2px 6px;\n border-radius: var(--mj-radius-sm);\n flex-shrink: 0;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.mj-sm-row-badge--default[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n}\n\n.mj-sm-row-badge--related-entity[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n color: var(--mj-status-info);\n}\n\n.mj-sm-row-badge--inherited[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-color-indigo-500) 10%, var(--mj-bg-surface));\n color: var(--mj-color-indigo-500);\n}\n\n\n\n.mj-sm-row-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 2px;\n flex-shrink: 0;\n margin-left: 8px;\n}\n\n.mj-sm-arrow[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n color: var(--mj-text-secondary);\n font-size: 11px;\n transition: all var(--mj-transition-base);\n}\n\n.mj-sm-arrow[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.mj-sm-arrow[_ngcontent-%COMP%]:disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n\n\n\n\n\n.mj-sm-footer[_ngcontent-%COMP%] {\n padding: 14px 20px;\n border-top: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.mj-sm-reset[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 7px 14px;\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-medium);\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n font-family: inherit;\n}\n\n.mj-sm-reset[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-border-strong);\n color: var(--mj-text-primary);\n}\n\n.mj-sm-reset[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n}\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_mj-sm-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes _ngcontent-%COMP%_mj-sm-slide-in {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n}"], changeDetection: 0 });
|
|
190
190
|
}
|
|
191
191
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjSectionManagerComponent, [{
|
|
192
192
|
type: Component,
|
|
193
|
-
args: [{ standalone: false, selector: 'mj-section-manager', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Overlay backdrop -->\n@if (Visible) {\n <div class=\"mj-sm-overlay\" (click)=\"OnOverlayClick($event)\">\n <!-- Drawer panel -->\n <div class=\"mj-sm-drawer\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div class=\"mj-sm-header\">\n <h3 class=\"mj-sm-title\">\n <i class=\"fa-solid fa-bars-staggered\"></i>\n Manage Sections\n </h3>\n <button class=\"mj-sm-close\" (click)=\"OnClose()\" title=\"Close\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n\n <!-- Section list -->\n <div class=\"mj-sm-list\">\n @for (section of OrderedSections; track section.SectionKey; let i = $index) {\n <div class=\"mj-sm-row\">\n <div class=\"mj-sm-row-info\">\n <i [class]=\"section.Icon\" class=\"mj-sm-row-icon\"></i>\n <span class=\"mj-sm-row-name\">{{ section.SectionName }}</span>\n <span class=\"mj-sm-row-badge mj-sm-row-badge--{{ section.Variant }}\">\n {{ GetVariantLabel(section.Variant) }}\n </span>\n </div>\n <div class=\"mj-sm-row-actions\">\n <button class=\"mj-sm-arrow\"\n [disabled]=\"i === 0\"\n (click)=\"OnMoveUp(i)\"\n title=\"Move up\">\n <i class=\"fa-solid fa-chevron-up\"></i>\n </button>\n <button class=\"mj-sm-arrow\"\n [disabled]=\"i === OrderedSections.length - 1\"\n (click)=\"OnMoveDown(i)\"\n title=\"Move down\">\n <i class=\"fa-solid fa-chevron-down\"></i>\n </button>\n </div>\n </div>\n }\n </div>\n\n <!-- Footer -->\n <div class=\"mj-sm-footer\">\n <button class=\"mj-sm-reset\" (click)=\"OnReset()\">\n <i class=\"fa-solid fa-arrow-rotate-left\"></i>\n Reset to Default Order\n </button>\n </div>\n </div>\n </div>\n}\n", styles: ["/* ============================================\n
|
|
193
|
+
args: [{ standalone: false, selector: 'mj-section-manager', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Overlay backdrop -->\n@if (Visible) {\n <div class=\"mj-sm-overlay\" (click)=\"OnOverlayClick($event)\">\n <!-- Drawer panel -->\n <div class=\"mj-sm-drawer\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div class=\"mj-sm-header\">\n <h3 class=\"mj-sm-title\">\n <i class=\"fa-solid fa-bars-staggered\"></i>\n Manage Sections\n </h3>\n <button class=\"mj-sm-close\" (click)=\"OnClose()\" title=\"Close\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n\n <!-- Section list -->\n <div class=\"mj-sm-list\">\n @for (section of OrderedSections; track section.SectionKey; let i = $index) {\n <div class=\"mj-sm-row\">\n <div class=\"mj-sm-row-info\">\n <i [class]=\"section.Icon\" class=\"mj-sm-row-icon\"></i>\n <span class=\"mj-sm-row-name\">{{ section.SectionName }}</span>\n <span class=\"mj-sm-row-badge mj-sm-row-badge--{{ section.Variant }}\">\n {{ GetVariantLabel(section.Variant) }}\n </span>\n </div>\n <div class=\"mj-sm-row-actions\">\n <button class=\"mj-sm-arrow\"\n [disabled]=\"i === 0\"\n (click)=\"OnMoveUp(i)\"\n title=\"Move up\">\n <i class=\"fa-solid fa-chevron-up\"></i>\n </button>\n <button class=\"mj-sm-arrow\"\n [disabled]=\"i === OrderedSections.length - 1\"\n (click)=\"OnMoveDown(i)\"\n title=\"Move down\">\n <i class=\"fa-solid fa-chevron-down\"></i>\n </button>\n </div>\n </div>\n }\n </div>\n\n <!-- Footer -->\n <div class=\"mj-sm-footer\">\n <button class=\"mj-sm-reset\" (click)=\"OnReset()\">\n <i class=\"fa-solid fa-arrow-rotate-left\"></i>\n Reset to Default Order\n </button>\n </div>\n </div>\n </div>\n}\n", styles: ["/* ============================================\n SECTION MANAGER \u2014 uses global --mj-* design tokens\n ============================================ */\n:host {\n display: block;\n}\n\n/* ============================================\n OVERLAY\n ============================================ */\n.mj-sm-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 1000;\n animation: mj-sm-fade-in 150ms ease;\n}\n\n/* ============================================\n DRAWER\n ============================================ */\n.mj-sm-drawer {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n width: 340px;\n max-width: 90vw;\n background: var(--mj-bg-surface);\n box-shadow: var(--mj-shadow-lg);\n display: flex;\n flex-direction: column;\n animation: mj-sm-slide-in 200ms ease;\n}\n\n/* ============================================\n HEADER\n ============================================ */\n.mj-sm-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n background: var(--mj-bg-surface-elevated);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.mj-sm-title {\n margin: 0;\n font-size: 15px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.mj-sm-title i {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-sm);\n}\n\n.mj-sm-close {\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 6px;\n font-size: var(--mj-text-base);\n border-radius: var(--mj-radius-sm);\n transition: all var(--mj-transition-base);\n line-height: 1;\n}\n\n.mj-sm-close:hover {\n color: var(--mj-text-primary);\n background: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n}\n\n/* ============================================\n SECTION LIST\n ============================================ */\n.mj-sm-list {\n flex: 1;\n overflow-y: auto;\n padding: 8px 0;\n}\n\n.mj-sm-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 20px;\n border-bottom: 1px solid var(--mj-bg-surface-hover);\n transition: background var(--mj-transition-base);\n}\n\n.mj-sm-row:hover {\n background: var(--mj-bg-surface-card);\n}\n\n.mj-sm-row-info {\n display: flex;\n align-items: center;\n gap: 10px;\n min-width: 0;\n flex: 1;\n}\n\n.mj-sm-row-icon {\n font-size: 13px;\n color: var(--mj-text-secondary);\n width: 18px;\n text-align: center;\n flex-shrink: 0;\n}\n\n.mj-sm-row-name {\n font-size: 13px;\n font-weight: var(--mj-font-medium);\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Variant badges */\n.mj-sm-row-badge {\n font-size: 10px;\n font-weight: var(--mj-font-semibold);\n padding: 2px 6px;\n border-radius: var(--mj-radius-sm);\n flex-shrink: 0;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.mj-sm-row-badge--default {\n background: var(--mj-bg-surface-hover);\n color: var(--mj-text-secondary);\n}\n\n.mj-sm-row-badge--related-entity {\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n color: var(--mj-status-info);\n}\n\n.mj-sm-row-badge--inherited {\n background: color-mix(in srgb, var(--mj-color-indigo-500) 10%, var(--mj-bg-surface));\n color: var(--mj-color-indigo-500);\n}\n\n/* Arrow buttons */\n.mj-sm-row-actions {\n display: flex;\n gap: 2px;\n flex-shrink: 0;\n margin-left: 8px;\n}\n\n.mj-sm-arrow {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n color: var(--mj-text-secondary);\n font-size: 11px;\n transition: all var(--mj-transition-base);\n}\n\n.mj-sm-arrow:hover:not(:disabled) {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.mj-sm-arrow:disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n\n/* ============================================\n FOOTER\n ============================================ */\n.mj-sm-footer {\n padding: 14px 20px;\n border-top: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.mj-sm-reset {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 7px 14px;\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-medium);\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n font-family: inherit;\n}\n\n.mj-sm-reset:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-border-strong);\n color: var(--mj-text-primary);\n}\n\n.mj-sm-reset i {\n font-size: var(--mj-text-xs);\n}\n\n/* ============================================\n ANIMATIONS\n ============================================ */\n@keyframes mj-sm-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes mj-sm-slide-in {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n}\n"] }]
|
|
194
194
|
}], null, { Sections: [{
|
|
195
195
|
type: Input
|
|
196
196
|
}], SectionOrder: [{
|
|
@@ -962,11 +962,11 @@ export class MjFormToolbarComponent {
|
|
|
962
962
|
i0.ɵɵconditional(ctx.ShowDiscardDialog ? 2 : -1);
|
|
963
963
|
i0.ɵɵadvance();
|
|
964
964
|
i0.ɵɵconditional(ctx.ShowDeleteDialog ? 3 : -1);
|
|
965
|
-
} }, dependencies: [i1.NgTemplateOutlet], styles: ["\n\n\n\n[_nghost-%COMP%] {\n --mj-forms-toolbar-bg: #f9fafb;\n --mj-card-bg: #ffffff;\n --mj-accent: #667eea;\n --mj-accent-light: rgba(102, 126, 234, 0.08);\n --mj-text-primary: #1f2937;\n --mj-text-secondary: #6b7280;\n --mj-text-muted: #9ca3af;\n --mj-border: #e5e7eb;\n --mj-error: #ef4444;\n --mj-warning: #f59e0b;\n --mj-isa-parent: #8b5cf6;\n --mj-isa-child: #06b6d4;\n --mj-transition: 200ms;\n\n display: block;\n}\n\n\n\n\n\n.mj-forms-edit-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 16px 16px;\n background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);\n border-bottom: 2px solid var(--mj-accent);\n font-size: 13px;\n color: var(--mj-accent);\n font-weight: 500;\n}\n\n.mj-forms-edit-banner[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.mj-forms-edit-banner-icon--dirty[_ngcontent-%COMP%] {\n color: var(--mj-warning);\n font-size: 16px;\n}\n\n.mj-forms-edit-banner-text[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.mj-forms-edit-banner-dirty[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #374151;\n}\n\n.mj-forms-edit-banner-dirty[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: var(--mj-warning);\n font-weight: 700;\n}\n\n.mj-forms-edit-banner-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n\n\n\n\n.mj-forms-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 22px 16px;\n background: var(--mj-forms-toolbar-bg);\n border-bottom: 2px solid var(--mj-border);\n flex-wrap: wrap;\n z-index: 40;\n}\n\n.mj-forms-toolbar--sticky[_ngcontent-%COMP%] {\n position: sticky;\n top: 0;\n}\n\n.mj-forms-toolbar--disabled[_ngcontent-%COMP%] {\n pointer-events: none;\n opacity: 0.7;\n}\n\n.mj-forms-toolbar-group[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.mj-forms-toolbar-separator[_ngcontent-%COMP%] {\n width: 1px;\n height: 24px;\n background: var(--mj-border);\n margin: 0 4px;\n}\n\n.mj-forms-toolbar-spacer[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n\n\n\n\n.mj-forms-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 500;\n border: 1px solid var(--mj-border);\n background: var(--mj-card-bg);\n color: var(--mj-text-primary);\n border-radius: 6px;\n cursor: pointer;\n transition: all var(--mj-transition) ease;\n white-space: nowrap;\n font-family: inherit;\n line-height: 1;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:hover {\n background: #f3f4f6;\n border-color: #9ca3af;\n box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:active {\n transform: translateY(0);\n box-shadow: none;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 15px;\n line-height: 1;\n}\n\n.mj-forms-btn--primary[_ngcontent-%COMP%] {\n background: var(--mj-accent);\n color: white;\n border-color: var(--mj-accent);\n}\n\n.mj-forms-btn--primary[_ngcontent-%COMP%]:hover {\n background: #5a6fd6;\n border-color: #5a6fd6;\n box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);\n}\n\n.mj-forms-btn--danger[_ngcontent-%COMP%] {\n color: var(--mj-error);\n border-color: #fecaca;\n background: #fef2f2;\n}\n\n.mj-forms-btn--danger[_ngcontent-%COMP%]:hover {\n background: #fee2e2;\n border-color: var(--mj-error);\n}\n\n.mj-forms-btn--ghost[_ngcontent-%COMP%] {\n border-color: transparent;\n background: transparent;\n}\n\n.mj-forms-btn--ghost[_ngcontent-%COMP%]:hover {\n background: var(--mj-accent-light);\n border-color: transparent;\n}\n\n.mj-forms-btn--icon-only[_ngcontent-%COMP%] {\n padding: 7px 9px;\n}\n\n.mj-forms-btn--sm[_ngcontent-%COMP%] {\n padding: 5px 12px;\n font-size: 12px;\n}\n\n.mj-forms-btn--sm[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.mj-forms-btn-text[_ngcontent-%COMP%] {\n margin-left: 2px;\n}\n\n.mj-icon--favorite[_ngcontent-%COMP%] {\n color: #f59e0b;\n}\n\n\n\n.mj-forms-btn--list[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.mj-list-count-badge[_ngcontent-%COMP%] {\n position: absolute;\n top: -6px;\n right: -6px;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n font-size: 10px;\n font-weight: 700;\n color: white;\n background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--mj-forms-toolbar-bg);\n}\n\n\n\n\n\n.mj-entity-hierarchy[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-entity-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 600;\n border-radius: 6px;\n cursor: pointer;\n transition: all var(--mj-transition) ease;\n text-decoration: none;\n border: 1px solid transparent;\n}\n\n.mj-entity-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.mj-entity-badge--parent[_ngcontent-%COMP%] {\n background: #f3f0ff;\n color: var(--mj-isa-parent);\n border-color: #e0d5ff;\n}\n\n.mj-entity-badge--parent[_ngcontent-%COMP%]:hover {\n background: #e8e0ff;\n border-color: var(--mj-isa-parent);\n box-shadow: 0 2px 6px rgba(139, 92, 246, 0.15);\n}\n\n.mj-entity-badge--current[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-text-primary);\n padding: 4px 8px;\n background: #f3f4f6;\n border-radius: 6px;\n cursor: default;\n}\n\n.mj-entity-badge--child[_ngcontent-%COMP%] {\n background: #ecfeff;\n color: var(--mj-isa-child);\n border-color: #cffafe;\n}\n\n.mj-entity-badge--child[_ngcontent-%COMP%]:hover {\n background: #cffafe;\n border-color: var(--mj-isa-child);\n box-shadow: 0 2px 6px rgba(6, 182, 212, 0.15);\n}\n\n.mj-entity-badge--overlapping[_ngcontent-%COMP%] {\n background: #fffbeb;\n color: #d97706;\n border-color: #fde68a;\n}\n\n.mj-entity-badge--overlapping[_ngcontent-%COMP%]:hover {\n background: #fef3c7;\n border-color: #d97706;\n box-shadow: 0 2px 6px rgba(217, 119, 6, 0.15);\n}\n\n.mj-entity-badge-group[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n flex-wrap: wrap;\n}\n\n.mj-child-count[_ngcontent-%COMP%] {\n background: var(--mj-isa-child);\n color: white;\n font-size: 10px;\n padding: 1px 5px;\n border-radius: 8px;\n font-weight: 700;\n}\n\n.mj-entity-badge--leaf[_ngcontent-%COMP%] {\n border-style: dashed;\n}\n\n.mj-entity-badge--root[_ngcontent-%COMP%] {\n border-style: dashed;\n}\n\n.mj-hierarchy-arrow[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 10px;\n}\n\n\n\n.mj-descendant-chains[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n position: relative;\n padding-left: 20px;\n}\n\n\n\n.mj-descendant-chains[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: -4px;\n top: 50%;\n width: 4px;\n border-top: 1.5px solid var(--mj-text-muted);\n}\n\n.mj-descendant-chain[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n position: relative;\n padding: 2px 0;\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: -20px;\n top: 50%;\n width: 18px;\n border-top: 1.5px solid var(--mj-text-muted);\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n left: -20px;\n top: 0;\n bottom: 0;\n border-left: 1.5px solid var(--mj-text-muted);\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]:first-child::after {\n top: 50%;\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]:last-child::after {\n bottom: 50%;\n}\n\n\n\n\n\n\n\n\n.mj-section-controls[_ngcontent-%COMP%] {\n gap: 6px;\n}\n\n.mj-forms-search-wrapper[_ngcontent-%COMP%] {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.mj-section-search[_ngcontent-%COMP%] {\n max-width: 180px;\n font-size: 13px;\n padding: 6px 28px 6px 8px;\n border: 1px solid var(--mj-border);\n border-radius: 6px;\n background: white;\n outline: none;\n font-family: inherit;\n transition: all var(--mj-transition);\n}\n\n.mj-section-search[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-accent);\n box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);\n}\n\n\n\n.mj-section-search--active[_ngcontent-%COMP%] {\n background-color: #fef08a;\n border-color: #eab308;\n color: #854d0e;\n font-weight: 600;\n box-shadow: 0 0 0 2px rgba(254, 240, 138, 0.5);\n}\n\n.mj-section-search[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n.mj-clear-search[_ngcontent-%COMP%] {\n position: absolute;\n right: 4px;\n padding: 4px;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 12px;\n line-height: 1;\n}\n\n.mj-clear-search[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n}\n\n\n\n\n\n.mj-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.4);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: _ngcontent-%COMP%_mj-fade-in 150ms ease;\n}\n\n.mj-dialog[_ngcontent-%COMP%] {\n background: var(--mj-card-bg);\n border-radius: 12px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);\n min-width: 400px;\n max-width: 550px;\n animation: _ngcontent-%COMP%_mj-slide-up 200ms ease;\n}\n\n.mj-dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border);\n}\n\n.mj-dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n}\n\n.mj-dialog-close[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n font-size: 16px;\n transition: color var(--mj-transition);\n}\n\n.mj-dialog-close[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n}\n\n.mj-dialog-body[_ngcontent-%COMP%] {\n padding: 20px;\n font-size: 14px;\n color: var(--mj-text-secondary);\n line-height: 1.6;\n}\n\n.mj-dialog-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n}\n\n.mj-dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border);\n}\n\n@keyframes _ngcontent-%COMP%_mj-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes _ngcontent-%COMP%_mj-slide-up {\n from { transform: translateY(8px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}"], changeDetection: 0 });
|
|
965
|
+
} }, dependencies: [i1.NgTemplateOutlet], styles: ["\n\n\n\n[_nghost-%COMP%] {\n display: block;\n}\n\n\n\n\n\n.mj-forms-edit-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 16px 16px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-bottom: 2px solid var(--mj-brand-primary);\n font-size: 13px;\n color: var(--mj-brand-primary);\n font-weight: var(--mj-font-medium);\n}\n\n.mj-forms-edit-banner[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-icon--dirty[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n font-size: var(--mj-text-base);\n}\n\n.mj-forms-edit-banner-text[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-dirty[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n}\n\n.mj-forms-edit-banner-dirty[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n font-weight: var(--mj-font-bold);\n}\n\n.mj-forms-edit-banner-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n\n\n\n\n.mj-forms-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 22px 16px;\n background: var(--mj-bg-surface-card);\n border-bottom: 2px solid var(--mj-border-default);\n flex-wrap: wrap;\n z-index: 40;\n}\n\n.mj-forms-toolbar--sticky[_ngcontent-%COMP%] {\n position: sticky;\n top: 0;\n}\n\n.mj-forms-toolbar--disabled[_ngcontent-%COMP%] {\n pointer-events: none;\n opacity: 0.7;\n}\n\n.mj-forms-toolbar-group[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.mj-forms-toolbar-separator[_ngcontent-%COMP%] {\n width: 1px;\n height: 24px;\n background: var(--mj-border-default);\n margin: 0 4px;\n}\n\n.mj-forms-toolbar-spacer[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n\n\n\n\n.mj-forms-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: var(--mj-font-medium);\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all var(--mj-transition-base) ease;\n white-space: nowrap;\n font-family: inherit;\n line-height: 1;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-border-strong);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:active {\n transform: translateY(0);\n box-shadow: none;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 15px;\n line-height: 1;\n}\n\n.mj-forms-btn--primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.mj-forms-btn--primary[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n border-color: var(--mj-brand-primary-hover);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.mj-forms-btn--danger[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n}\n\n.mj-forms-btn--danger[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-error);\n}\n\n.mj-forms-btn--ghost[_ngcontent-%COMP%] {\n border-color: transparent;\n background: transparent;\n}\n\n.mj-forms-btn--ghost[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n border-color: transparent;\n}\n\n.mj-forms-btn--icon-only[_ngcontent-%COMP%] {\n padding: 7px 9px;\n}\n\n.mj-forms-btn--sm[_ngcontent-%COMP%] {\n padding: 5px 12px;\n font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn--sm[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn-text[_ngcontent-%COMP%] {\n margin-left: 2px;\n}\n\n.mj-icon--favorite[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n\n\n.mj-forms-btn--list[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.mj-list-count-badge[_ngcontent-%COMP%] {\n position: absolute;\n top: -6px;\n right: -6px;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n font-size: 10px;\n font-weight: var(--mj-font-bold);\n color: var(--mj-text-inverse);\n background: linear-gradient(135deg, var(--mj-status-info) 0%, color-mix(in srgb, var(--mj-status-info) 85%, black) 100%);\n border-radius: var(--mj-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--mj-bg-surface-card);\n}\n\n\n\n\n\n.mj-entity-hierarchy[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-entity-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-semibold);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all var(--mj-transition-base) ease;\n text-decoration: none;\n border: 1px solid transparent;\n}\n\n.mj-entity-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.mj-entity-badge--parent[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-color-indigo-500) 10%, var(--mj-bg-surface));\n color: var(--mj-color-indigo-500);\n border-color: color-mix(in srgb, var(--mj-color-indigo-500) 25%, transparent);\n}\n\n.mj-entity-badge--parent[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-color-indigo-500) 18%, var(--mj-bg-surface));\n border-color: var(--mj-color-indigo-500);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-color-indigo-500) 15%, transparent);\n}\n\n.mj-entity-badge--current[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n font-size: 13px;\n color: var(--mj-text-primary);\n padding: 4px 8px;\n background: var(--mj-bg-surface-hover);\n border-radius: var(--mj-radius-sm);\n cursor: default;\n}\n\n.mj-entity-badge--child[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n color: var(--mj-status-info);\n border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.mj-entity-badge--child[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-info) 18%, var(--mj-bg-surface));\n border-color: var(--mj-status-info);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-info) 15%, transparent);\n}\n\n.mj-entity-badge--overlapping[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n border-color: color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n}\n\n.mj-entity-badge--overlapping[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-warning) 15%, transparent);\n}\n\n.mj-entity-badge-group[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n flex-wrap: wrap;\n}\n\n.mj-child-count[_ngcontent-%COMP%] {\n background: var(--mj-status-info);\n color: var(--mj-text-inverse);\n font-size: 10px;\n padding: 1px 5px;\n border-radius: var(--mj-radius-full);\n font-weight: var(--mj-font-bold);\n}\n\n.mj-entity-badge--leaf[_ngcontent-%COMP%] {\n border-style: dashed;\n}\n\n.mj-entity-badge--root[_ngcontent-%COMP%] {\n border-style: dashed;\n}\n\n.mj-hierarchy-arrow[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 10px;\n}\n\n\n\n.mj-descendant-chains[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n position: relative;\n padding-left: 20px;\n}\n\n\n\n.mj-descendant-chains[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: -4px;\n top: 50%;\n width: 4px;\n border-top: 1.5px solid var(--mj-text-muted);\n}\n\n.mj-descendant-chain[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n position: relative;\n padding: 2px 0;\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: -20px;\n top: 50%;\n width: 18px;\n border-top: 1.5px solid var(--mj-text-muted);\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n left: -20px;\n top: 0;\n bottom: 0;\n border-left: 1.5px solid var(--mj-text-muted);\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]:first-child::after {\n top: 50%;\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]:last-child::after {\n bottom: 50%;\n}\n\n\n\n\n\n\n\n\n.mj-section-controls[_ngcontent-%COMP%] {\n gap: 6px;\n}\n\n.mj-forms-search-wrapper[_ngcontent-%COMP%] {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.mj-section-search[_ngcontent-%COMP%] {\n max-width: 180px;\n font-size: 13px;\n padding: 6px 28px 6px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-sm);\n background: var(--mj-bg-surface);\n outline: none;\n font-family: inherit;\n transition: all var(--mj-transition-base);\n}\n\n.mj-section-search[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n\n\n.mj-section-search--active[_ngcontent-%COMP%] {\n background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n border-color: var(--mj-status-warning);\n color: color-mix(in srgb, var(--mj-status-warning) 80%, black);\n font-weight: var(--mj-font-semibold);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n.mj-section-search[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n.mj-clear-search[_ngcontent-%COMP%] {\n position: absolute;\n right: 4px;\n padding: 4px;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: var(--mj-text-xs);\n line-height: 1;\n}\n\n.mj-clear-search[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n}\n\n\n\n\n\n.mj-dialog-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: _ngcontent-%COMP%_mj-fade-in 150ms ease;\n}\n\n.mj-dialog[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-lg);\n min-width: 400px;\n max-width: 550px;\n animation: _ngcontent-%COMP%_mj-slide-up 200ms ease;\n}\n\n.mj-dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mj-dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n}\n\n.mj-dialog-close[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n font-size: var(--mj-text-base);\n transition: color var(--mj-transition-base);\n}\n\n.mj-dialog-close[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n}\n\n.mj-dialog-body[_ngcontent-%COMP%] {\n padding: 20px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n line-height: 1.6;\n}\n\n.mj-dialog-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n}\n\n.mj-dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n@keyframes _ngcontent-%COMP%_mj-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes _ngcontent-%COMP%_mj-slide-up {\n from { transform: translateY(8px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}"], changeDetection: 0 });
|
|
966
966
|
}
|
|
967
967
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjFormToolbarComponent, [{
|
|
968
968
|
type: Component,
|
|
969
|
-
args: [{ standalone: false, selector: 'mj-form-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- ============================================\n EDIT MODE BANNER (shows above toolbar when editing)\n ============================================ -->\n@if (EditMode && Config.ShowEditBanner) {\n <div class=\"mj-forms-edit-banner\">\n @if (DirtyFieldDisplayNames.length > 0) {\n <i class=\"fa-solid fa-circle-exclamation mj-forms-edit-banner-icon--dirty\"></i>\n <span class=\"mj-forms-edit-banner-dirty\">\n <strong>{{ DirtyFieldDisplayNames.length }}</strong>\n field{{ DirtyFieldDisplayNames.length === 1 ? '' : 's' }} modified\n — {{ DirtyFieldDisplayNames.join(', ') }}\n </span>\n } @else {\n <i class=\"fa-solid fa-pen-to-square\"></i>\n <span class=\"mj-forms-edit-banner-text\">Editing: {{ RecordDisplayName }}</span>\n }\n <div class=\"mj-forms-toolbar-spacer\"></div>\n <div class=\"mj-forms-edit-banner-actions\">\n <button class=\"mj-forms-btn mj-forms-btn--primary\" (click)=\"OnSave()\" [disabled]=\"IsSaving\" title=\"Save Changes\">\n <i class=\"fa-solid fa-floppy-disk\"></i>\n <span class=\"mj-forms-btn-text\">Save Changes</span>\n </button>\n <button class=\"mj-forms-btn\" (click)=\"OnCancel()\" [disabled]=\"IsSaving\" title=\"Discard Changes\">\n <i class=\"fa-solid fa-rotate-left\"></i>\n <span class=\"mj-forms-btn-text\">Discard</span>\n </button>\n </div>\n </div>\n}\n\n<!-- ============================================\n MAIN TOOLBAR (read mode only \u2014 hidden in edit mode)\n ============================================ -->\n@if (!EditMode) {\n <div class=\"mj-forms-toolbar\" [class.mj-forms-toolbar--sticky]=\"Config.StickyToolbar\">\n\n <!-- Action buttons -->\n <div class=\"mj-forms-toolbar-group\">\n @if (Config.ShowEditButton && UserCanEdit) {\n <button class=\"mj-forms-btn\" (click)=\"OnEdit()\" title=\"Edit this Record\">\n <i class=\"fa-solid fa-pen-to-square\"></i>\n </button>\n }\n @if (Config.ShowDeleteButton && UserCanDelete) {\n <button class=\"mj-forms-btn\" (click)=\"OnDeleteClick()\" title=\"Delete this Record\">\n <i class=\"fa-regular fa-trash-can\"></i>\n </button>\n }\n @if (Config.ShowFavoriteButton && FavoriteInitDone) {\n <button class=\"mj-forms-btn\" (click)=\"OnFavoriteToggle()\" [title]=\"IsFavorite ? 'Remove Favorite' : 'Make Favorite'\">\n <i [class]=\"IsFavorite ? 'fa-solid fa-star mj-icon--favorite' : 'fa-regular fa-star'\"></i>\n </button>\n }\n @if (Config.ShowHistoryButton && TracksChanges) {\n <button class=\"mj-forms-btn\" (click)=\"OnHistory()\" title=\"MJ: Record Changes\">\n <i class=\"fa-regular fa-clock\"></i>\n </button>\n }\n @if (Config.ShowListButton) {\n <button class=\"mj-forms-btn mj-forms-btn--list\" (click)=\"OnListManagement()\"\n [title]=\"ListCount > 0 ? 'Member of ' + ListCount + ' list(s)' : 'Add to a list'\">\n <i class=\"fa-regular fa-bookmark\"></i>\n @if (ListCount > 0) {\n <span class=\"mj-list-count-badge\">{{ ListCount }}</span>\n }\n </button>\n }\n\n <!-- Custom toolbar buttons -->\n @for (button of Config.CustomButtons; track button.Key) {\n @if (button.Visible !== false) {\n <button class=\"mj-forms-btn\"\n [class]=\"button.CssClass || ''\"\n [disabled]=\"button.Disabled || false\"\n [title]=\"button.Description\"\n (click)=\"OnCustomButtonClick(button)\">\n <i [class]=\"button.Icon\"></i>\n </button>\n }\n }\n </div>\n\n <!-- Separator before hierarchy -->\n @if (Config.ShowEntityHierarchy && IsInHierarchy) {\n <div class=\"mj-forms-toolbar-separator\"></div>\n }\n\n <!-- IS-A Entity Hierarchy Breadcrumb (bidirectional: Root \u2192 ... \u2192 Current \u2192 ... \u2192 Leaf) -->\n @if (Config.ShowEntityHierarchy && IsInHierarchy) {\n <div class=\"mj-entity-hierarchy\">\n <!-- Parent chain (root \u2192 ... \u2192 immediate parent) -->\n @for (parent of ParentChain; track parent.ID) {\n <a class=\"mj-entity-badge mj-entity-badge--parent\"\n [title]=\"'Navigate to parent: ' + parent.Name\"\n (click)=\"OnParentBadgeClick(parent, $event)\">\n <i class=\"fa-solid fa-arrow-up\"></i>\n {{ parent.Name }}\n </a>\n <span class=\"mj-hierarchy-arrow\"><i class=\"fa-solid fa-chevron-right\"></i></span>\n }\n\n <!-- Current entity (always shown) -->\n <span class=\"mj-entity-badge mj-entity-badge--current\">{{ EntityInfo?.Name }}</span>\n\n <!-- Descendant tree (recursive: inline for single paths, branching for multiple) -->\n @if (DescendantTree.length > 0) {\n <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n [ngTemplateOutletContext]=\"{ items: DescendantTree }\"></ng-container>\n }\n </div>\n }\n\n <!-- Spacer pushes section controls to the right -->\n <div class=\"mj-forms-toolbar-spacer\"></div>\n\n <!-- Section Controls -->\n @if (Config.ShowSectionControls) {\n <div class=\"mj-forms-toolbar-group mj-section-controls\">\n @if (Config.ShowSectionFilter) {\n <div class=\"mj-forms-search-wrapper\">\n <input type=\"text\"\n class=\"mj-section-search\"\n [class.mj-section-search--active]=\"SearchFilter\"\n [value]=\"SearchFilter\"\n (input)=\"OnFilterInput($event)\"\n placeholder=\"Search sections...\">\n @if (SearchFilter) {\n <button class=\"mj-clear-search\" (click)=\"OnClearFilter()\" title=\"Clear search\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n </div>\n }\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n [disabled]=\"ExpandedSectionCount >= VisibleSectionCount\"\n (click)=\"OnExpandAll()\" title=\"Expand all sections\">\n <i class=\"fa-solid fa-angles-down\"></i>\n </button>\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n [disabled]=\"ExpandedSectionCount === 0\"\n (click)=\"OnCollapseAll()\" title=\"Collapse all sections\">\n <i class=\"fa-solid fa-angles-up\"></i>\n </button>\n @if (HasCustomSectionOrder) {\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\" (click)=\"OnResetSectionOrder()\" title=\"Reset section order\">\n <i class=\"fa-solid fa-arrow-rotate-left\"></i>\n </button>\n }\n @if (Config.ShowSectionManager) {\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n (click)=\"OnManageSections()\" title=\"Manage section order\">\n <i class=\"fa-solid fa-bars-staggered\"></i>\n </button>\n }\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n (click)=\"OnToggleWidthMode()\"\n [title]=\"WidthMode === 'centered' ? 'Expand to full width' : 'Center content'\">\n <i [class]=\"WidthMode === 'centered' ? 'fa-solid fa-arrows-left-right-to-line' : 'fa-solid fa-compress'\"></i>\n </button>\n </div>\n }\n\n <!-- Additional actions slot -->\n @if (AdditionalActionsTemplate) {\n <ng-container [ngTemplateOutlet]=\"AdditionalActionsTemplate\"></ng-container>\n }\n <ng-content select=\"[toolbar-additional-controls]\"></ng-content>\n </div>\n}\n\n<!-- ============================================\n DISCARD CHANGES CONFIRMATION DIALOG\n ============================================ -->\n@if (ShowDiscardDialog) {\n <div class=\"mj-dialog-overlay\" (click)=\"OnDiscardCancel()\">\n <div class=\"mj-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"mj-dialog-header\">\n <h3>Discard Changes?</h3>\n <button class=\"mj-dialog-close\" (click)=\"OnDiscardCancel()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"mj-dialog-body\">\n <p>You have <strong>{{ DirtyFieldDisplayNames.length }}</strong> unsaved change{{ DirtyFieldDisplayNames.length === 1 ? '' : 's' }}. Are you sure you want to discard {{ DirtyFieldDisplayNames.length === 1 ? 'it' : 'them' }}?</p>\n </div>\n <div class=\"mj-dialog-footer\">\n <button class=\"mj-forms-btn mj-forms-btn--danger\" (click)=\"OnDiscardConfirm()\">\n <i class=\"fa-solid fa-rotate-left\"></i>\n Discard Changes\n </button>\n <button class=\"mj-forms-btn\" (click)=\"OnDiscardCancel()\">\n Keep Editing\n </button>\n </div>\n </div>\n </div>\n}\n\n<!-- ============================================\n DELETE CONFIRMATION DIALOG\n ============================================ -->\n@if (ShowDeleteDialog) {\n <div class=\"mj-dialog-overlay\" (click)=\"OnDeleteCancel()\">\n <div class=\"mj-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"mj-dialog-header\">\n <h3>Confirm Deletion</h3>\n <button class=\"mj-dialog-close\" (click)=\"OnDeleteCancel()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"mj-dialog-body\">\n <p>Are you sure you want to delete this record? This action cannot be undone.</p>\n </div>\n <div class=\"mj-dialog-footer\">\n <button class=\"mj-forms-btn mj-forms-btn--danger\" (click)=\"OnDeleteConfirm()\">\n <i class=\"fa-solid fa-trash-can\"></i>\n Delete\n </button>\n <button class=\"mj-forms-btn\" (click)=\"OnDeleteCancel()\">\n Cancel\n </button>\n </div>\n </div>\n </div>\n}\n\n<!-- Recursive template for IS-A descendant tree rendering.\n Single child at a level \u2192 inline with chevron.\n Multiple children at a level \u2192 tree branch with CSS connector lines. -->\n<ng-template #descendantTreeTpl let-items=\"items\">\n @if (items.length === 1) {\n <span class=\"mj-hierarchy-arrow\"><i class=\"fa-solid fa-chevron-right\"></i></span>\n <a class=\"mj-entity-badge mj-entity-badge--child\"\n [title]=\"'Navigate to: ' + items[0].EntityName\"\n (click)=\"OnDescendantBadgeClick(items[0].EntityName, $event)\">\n <i class=\"fa-solid fa-arrow-down\"></i>\n {{ items[0].EntityName }}\n </a>\n @if (items[0].Children.length > 0) {\n <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n [ngTemplateOutletContext]=\"{ items: items[0].Children }\"></ng-container>\n }\n } @else if (items.length > 1) {\n <div class=\"mj-descendant-chains\">\n @for (item of items; track item.EntityName) {\n <div class=\"mj-descendant-chain\">\n <a class=\"mj-entity-badge mj-entity-badge--child\"\n [title]=\"'Navigate to: ' + item.EntityName\"\n (click)=\"OnDescendantBadgeClick(item.EntityName, $event)\">\n <i class=\"fa-solid fa-arrow-down\"></i>\n {{ item.EntityName }}\n </a>\n @if (item.Children.length > 0) {\n <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n [ngTemplateOutletContext]=\"{ items: item.Children }\"></ng-container>\n }\n </div>\n }\n </div>\n }\n</ng-template>\n", styles: ["/* ============================================\n CSS VARIABLES (theming hooks)\n ============================================ */\n:host {\n --mj-forms-toolbar-bg: #f9fafb;\n --mj-card-bg: #ffffff;\n --mj-accent: #667eea;\n --mj-accent-light: rgba(102, 126, 234, 0.08);\n --mj-text-primary: #1f2937;\n --mj-text-secondary: #6b7280;\n --mj-text-muted: #9ca3af;\n --mj-border: #e5e7eb;\n --mj-error: #ef4444;\n --mj-warning: #f59e0b;\n --mj-isa-parent: #8b5cf6;\n --mj-isa-child: #06b6d4;\n --mj-transition: 200ms;\n\n display: block;\n}\n\n/* ============================================\n EDIT BANNER\n ============================================ */\n.mj-forms-edit-banner {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 16px 16px;\n background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);\n border-bottom: 2px solid var(--mj-accent);\n font-size: 13px;\n color: var(--mj-accent);\n font-weight: 500;\n}\n\n.mj-forms-edit-banner > i {\n font-size: 14px;\n}\n\n.mj-forms-edit-banner-icon--dirty {\n color: var(--mj-warning);\n font-size: 16px;\n}\n\n.mj-forms-edit-banner-text {\n font-size: 14px;\n}\n\n.mj-forms-edit-banner-dirty {\n font-size: 14px;\n color: #374151;\n}\n\n.mj-forms-edit-banner-dirty strong {\n color: var(--mj-warning);\n font-weight: 700;\n}\n\n.mj-forms-edit-banner-actions {\n display: flex;\n gap: 8px;\n}\n\n/* ============================================\n MAIN TOOLBAR\n ============================================ */\n.mj-forms-toolbar {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 22px 16px;\n background: var(--mj-forms-toolbar-bg);\n border-bottom: 2px solid var(--mj-border);\n flex-wrap: wrap;\n z-index: 40;\n}\n\n.mj-forms-toolbar--sticky {\n position: sticky;\n top: 0;\n}\n\n.mj-forms-toolbar--disabled {\n pointer-events: none;\n opacity: 0.7;\n}\n\n.mj-forms-toolbar-group {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.mj-forms-toolbar-separator {\n width: 1px;\n height: 24px;\n background: var(--mj-border);\n margin: 0 4px;\n}\n\n.mj-forms-toolbar-spacer {\n flex: 1;\n}\n\n/* ============================================\n BUTTONS\n ============================================ */\n.mj-forms-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 500;\n border: 1px solid var(--mj-border);\n background: var(--mj-card-bg);\n color: var(--mj-text-primary);\n border-radius: 6px;\n cursor: pointer;\n transition: all var(--mj-transition) ease;\n white-space: nowrap;\n font-family: inherit;\n line-height: 1;\n}\n\n.mj-forms-btn:hover {\n background: #f3f4f6;\n border-color: #9ca3af;\n box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n}\n\n.mj-forms-btn:active {\n transform: translateY(0);\n box-shadow: none;\n}\n\n.mj-forms-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mj-forms-btn i {\n font-size: 15px;\n line-height: 1;\n}\n\n.mj-forms-btn--primary {\n background: var(--mj-accent);\n color: white;\n border-color: var(--mj-accent);\n}\n\n.mj-forms-btn--primary:hover {\n background: #5a6fd6;\n border-color: #5a6fd6;\n box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);\n}\n\n.mj-forms-btn--danger {\n color: var(--mj-error);\n border-color: #fecaca;\n background: #fef2f2;\n}\n\n.mj-forms-btn--danger:hover {\n background: #fee2e2;\n border-color: var(--mj-error);\n}\n\n.mj-forms-btn--ghost {\n border-color: transparent;\n background: transparent;\n}\n\n.mj-forms-btn--ghost:hover {\n background: var(--mj-accent-light);\n border-color: transparent;\n}\n\n.mj-forms-btn--icon-only {\n padding: 7px 9px;\n}\n\n.mj-forms-btn--sm {\n padding: 5px 12px;\n font-size: 12px;\n}\n\n.mj-forms-btn--sm i {\n font-size: 12px;\n}\n\n.mj-forms-btn-text {\n margin-left: 2px;\n}\n\n.mj-icon--favorite {\n color: #f59e0b;\n}\n\n/* List button with count badge */\n.mj-forms-btn--list {\n position: relative;\n}\n\n.mj-list-count-badge {\n position: absolute;\n top: -6px;\n right: -6px;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n font-size: 10px;\n font-weight: 700;\n color: white;\n background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--mj-forms-toolbar-bg);\n}\n\n/* ============================================\n IS-A ENTITY HIERARCHY\n ============================================ */\n.mj-entity-hierarchy {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-entity-badge {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 600;\n border-radius: 6px;\n cursor: pointer;\n transition: all var(--mj-transition) ease;\n text-decoration: none;\n border: 1px solid transparent;\n}\n\n.mj-entity-badge i {\n font-size: 11px;\n}\n\n.mj-entity-badge--parent {\n background: #f3f0ff;\n color: var(--mj-isa-parent);\n border-color: #e0d5ff;\n}\n\n.mj-entity-badge--parent:hover {\n background: #e8e0ff;\n border-color: var(--mj-isa-parent);\n box-shadow: 0 2px 6px rgba(139, 92, 246, 0.15);\n}\n\n.mj-entity-badge--current {\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-text-primary);\n padding: 4px 8px;\n background: #f3f4f6;\n border-radius: 6px;\n cursor: default;\n}\n\n.mj-entity-badge--child {\n background: #ecfeff;\n color: var(--mj-isa-child);\n border-color: #cffafe;\n}\n\n.mj-entity-badge--child:hover {\n background: #cffafe;\n border-color: var(--mj-isa-child);\n box-shadow: 0 2px 6px rgba(6, 182, 212, 0.15);\n}\n\n.mj-entity-badge--overlapping {\n background: #fffbeb;\n color: #d97706;\n border-color: #fde68a;\n}\n\n.mj-entity-badge--overlapping:hover {\n background: #fef3c7;\n border-color: #d97706;\n box-shadow: 0 2px 6px rgba(217, 119, 6, 0.15);\n}\n\n.mj-entity-badge-group {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n flex-wrap: wrap;\n}\n\n.mj-child-count {\n background: var(--mj-isa-child);\n color: white;\n font-size: 10px;\n padding: 1px 5px;\n border-radius: 8px;\n font-weight: 700;\n}\n\n.mj-entity-badge--leaf {\n border-style: dashed;\n}\n\n.mj-entity-badge--root {\n border-style: dashed;\n}\n\n.mj-hierarchy-arrow {\n color: var(--mj-text-muted);\n font-size: 10px;\n}\n\n/* Descendant chain tree (connecting lines when multiple chains branch) */\n.mj-descendant-chains {\n display: flex;\n flex-direction: column;\n gap: 6px;\n position: relative;\n padding-left: 20px;\n}\n\n/* Horizontal connector from parent entity badge to tree trunk */\n.mj-descendant-chains::before {\n content: '';\n position: absolute;\n left: -4px;\n top: 50%;\n width: 4px;\n border-top: 1.5px solid var(--mj-text-muted);\n}\n\n.mj-descendant-chain {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n position: relative;\n padding: 2px 0;\n}\n\n/* Horizontal branch line from trunk to chain content */\n.mj-descendant-chain::before {\n content: '';\n position: absolute;\n left: -20px;\n top: 50%;\n width: 18px;\n border-top: 1.5px solid var(--mj-text-muted);\n}\n\n/* Vertical trunk segment (each chain draws its portion) */\n.mj-descendant-chain::after {\n content: '';\n position: absolute;\n left: -20px;\n top: 0;\n bottom: 0;\n border-left: 1.5px solid var(--mj-text-muted);\n}\n\n/* First chain: trunk starts from center */\n.mj-descendant-chain:first-child::after {\n top: 50%;\n}\n\n/* Last chain: trunk ends at center */\n.mj-descendant-chain:last-child::after {\n bottom: 50%;\n}\n\n/* (dirty summary removed \u2014 now inline in edit banner) */\n\n/* ============================================\n SECTION CONTROLS\n ============================================ */\n.mj-section-controls {\n gap: 6px;\n}\n\n.mj-forms-search-wrapper {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.mj-section-search {\n max-width: 180px;\n font-size: 13px;\n padding: 6px 28px 6px 8px;\n border: 1px solid var(--mj-border);\n border-radius: 6px;\n background: white;\n outline: none;\n font-family: inherit;\n transition: all var(--mj-transition);\n}\n\n.mj-section-search:focus {\n border-color: var(--mj-accent);\n box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);\n}\n\n/* Active filter highlight \u2014 matches the yellow used on matched panel/field names */\n.mj-section-search--active {\n background-color: #fef08a;\n border-color: #eab308;\n color: #854d0e;\n font-weight: 600;\n box-shadow: 0 0 0 2px rgba(254, 240, 138, 0.5);\n}\n\n.mj-section-search::placeholder {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n.mj-clear-search {\n position: absolute;\n right: 4px;\n padding: 4px;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 12px;\n line-height: 1;\n}\n\n.mj-clear-search:hover {\n color: var(--mj-text-secondary);\n}\n\n/* ============================================\n DIALOG (lightweight inline)\n ============================================ */\n.mj-dialog-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: mj-fade-in 150ms ease;\n}\n\n.mj-dialog {\n background: var(--mj-card-bg);\n border-radius: 12px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);\n min-width: 400px;\n max-width: 550px;\n animation: mj-slide-up 200ms ease;\n}\n\n.mj-dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border);\n}\n\n.mj-dialog-header h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n}\n\n.mj-dialog-close {\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n font-size: 16px;\n transition: color var(--mj-transition);\n}\n\n.mj-dialog-close:hover {\n color: var(--mj-text-primary);\n}\n\n.mj-dialog-body {\n padding: 20px;\n font-size: 14px;\n color: var(--mj-text-secondary);\n line-height: 1.6;\n}\n\n.mj-dialog-body p {\n margin: 0;\n}\n\n.mj-dialog-footer {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border);\n}\n\n@keyframes mj-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes mj-slide-up {\n from { transform: translateY(8px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}\n"] }]
|
|
969
|
+
args: [{ standalone: false, selector: 'mj-form-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- ============================================\n EDIT MODE BANNER (shows above toolbar when editing)\n ============================================ -->\n@if (EditMode && Config.ShowEditBanner) {\n <div class=\"mj-forms-edit-banner\">\n @if (DirtyFieldDisplayNames.length > 0) {\n <i class=\"fa-solid fa-circle-exclamation mj-forms-edit-banner-icon--dirty\"></i>\n <span class=\"mj-forms-edit-banner-dirty\">\n <strong>{{ DirtyFieldDisplayNames.length }}</strong>\n field{{ DirtyFieldDisplayNames.length === 1 ? '' : 's' }} modified\n — {{ DirtyFieldDisplayNames.join(', ') }}\n </span>\n } @else {\n <i class=\"fa-solid fa-pen-to-square\"></i>\n <span class=\"mj-forms-edit-banner-text\">Editing: {{ RecordDisplayName }}</span>\n }\n <div class=\"mj-forms-toolbar-spacer\"></div>\n <div class=\"mj-forms-edit-banner-actions\">\n <button class=\"mj-forms-btn mj-forms-btn--primary\" (click)=\"OnSave()\" [disabled]=\"IsSaving\" title=\"Save Changes\">\n <i class=\"fa-solid fa-floppy-disk\"></i>\n <span class=\"mj-forms-btn-text\">Save Changes</span>\n </button>\n <button class=\"mj-forms-btn\" (click)=\"OnCancel()\" [disabled]=\"IsSaving\" title=\"Discard Changes\">\n <i class=\"fa-solid fa-rotate-left\"></i>\n <span class=\"mj-forms-btn-text\">Discard</span>\n </button>\n </div>\n </div>\n}\n\n<!-- ============================================\n MAIN TOOLBAR (read mode only \u2014 hidden in edit mode)\n ============================================ -->\n@if (!EditMode) {\n <div class=\"mj-forms-toolbar\" [class.mj-forms-toolbar--sticky]=\"Config.StickyToolbar\">\n\n <!-- Action buttons -->\n <div class=\"mj-forms-toolbar-group\">\n @if (Config.ShowEditButton && UserCanEdit) {\n <button class=\"mj-forms-btn\" (click)=\"OnEdit()\" title=\"Edit this Record\">\n <i class=\"fa-solid fa-pen-to-square\"></i>\n </button>\n }\n @if (Config.ShowDeleteButton && UserCanDelete) {\n <button class=\"mj-forms-btn\" (click)=\"OnDeleteClick()\" title=\"Delete this Record\">\n <i class=\"fa-regular fa-trash-can\"></i>\n </button>\n }\n @if (Config.ShowFavoriteButton && FavoriteInitDone) {\n <button class=\"mj-forms-btn\" (click)=\"OnFavoriteToggle()\" [title]=\"IsFavorite ? 'Remove Favorite' : 'Make Favorite'\">\n <i [class]=\"IsFavorite ? 'fa-solid fa-star mj-icon--favorite' : 'fa-regular fa-star'\"></i>\n </button>\n }\n @if (Config.ShowHistoryButton && TracksChanges) {\n <button class=\"mj-forms-btn\" (click)=\"OnHistory()\" title=\"MJ: Record Changes\">\n <i class=\"fa-regular fa-clock\"></i>\n </button>\n }\n @if (Config.ShowListButton) {\n <button class=\"mj-forms-btn mj-forms-btn--list\" (click)=\"OnListManagement()\"\n [title]=\"ListCount > 0 ? 'Member of ' + ListCount + ' list(s)' : 'Add to a list'\">\n <i class=\"fa-regular fa-bookmark\"></i>\n @if (ListCount > 0) {\n <span class=\"mj-list-count-badge\">{{ ListCount }}</span>\n }\n </button>\n }\n\n <!-- Custom toolbar buttons -->\n @for (button of Config.CustomButtons; track button.Key) {\n @if (button.Visible !== false) {\n <button class=\"mj-forms-btn\"\n [class]=\"button.CssClass || ''\"\n [disabled]=\"button.Disabled || false\"\n [title]=\"button.Description\"\n (click)=\"OnCustomButtonClick(button)\">\n <i [class]=\"button.Icon\"></i>\n </button>\n }\n }\n </div>\n\n <!-- Separator before hierarchy -->\n @if (Config.ShowEntityHierarchy && IsInHierarchy) {\n <div class=\"mj-forms-toolbar-separator\"></div>\n }\n\n <!-- IS-A Entity Hierarchy Breadcrumb (bidirectional: Root \u2192 ... \u2192 Current \u2192 ... \u2192 Leaf) -->\n @if (Config.ShowEntityHierarchy && IsInHierarchy) {\n <div class=\"mj-entity-hierarchy\">\n <!-- Parent chain (root \u2192 ... \u2192 immediate parent) -->\n @for (parent of ParentChain; track parent.ID) {\n <a class=\"mj-entity-badge mj-entity-badge--parent\"\n [title]=\"'Navigate to parent: ' + parent.Name\"\n (click)=\"OnParentBadgeClick(parent, $event)\">\n <i class=\"fa-solid fa-arrow-up\"></i>\n {{ parent.Name }}\n </a>\n <span class=\"mj-hierarchy-arrow\"><i class=\"fa-solid fa-chevron-right\"></i></span>\n }\n\n <!-- Current entity (always shown) -->\n <span class=\"mj-entity-badge mj-entity-badge--current\">{{ EntityInfo?.Name }}</span>\n\n <!-- Descendant tree (recursive: inline for single paths, branching for multiple) -->\n @if (DescendantTree.length > 0) {\n <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n [ngTemplateOutletContext]=\"{ items: DescendantTree }\"></ng-container>\n }\n </div>\n }\n\n <!-- Spacer pushes section controls to the right -->\n <div class=\"mj-forms-toolbar-spacer\"></div>\n\n <!-- Section Controls -->\n @if (Config.ShowSectionControls) {\n <div class=\"mj-forms-toolbar-group mj-section-controls\">\n @if (Config.ShowSectionFilter) {\n <div class=\"mj-forms-search-wrapper\">\n <input type=\"text\"\n class=\"mj-section-search\"\n [class.mj-section-search--active]=\"SearchFilter\"\n [value]=\"SearchFilter\"\n (input)=\"OnFilterInput($event)\"\n placeholder=\"Search sections...\">\n @if (SearchFilter) {\n <button class=\"mj-clear-search\" (click)=\"OnClearFilter()\" title=\"Clear search\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n </div>\n }\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n [disabled]=\"ExpandedSectionCount >= VisibleSectionCount\"\n (click)=\"OnExpandAll()\" title=\"Expand all sections\">\n <i class=\"fa-solid fa-angles-down\"></i>\n </button>\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n [disabled]=\"ExpandedSectionCount === 0\"\n (click)=\"OnCollapseAll()\" title=\"Collapse all sections\">\n <i class=\"fa-solid fa-angles-up\"></i>\n </button>\n @if (HasCustomSectionOrder) {\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\" (click)=\"OnResetSectionOrder()\" title=\"Reset section order\">\n <i class=\"fa-solid fa-arrow-rotate-left\"></i>\n </button>\n }\n @if (Config.ShowSectionManager) {\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n (click)=\"OnManageSections()\" title=\"Manage section order\">\n <i class=\"fa-solid fa-bars-staggered\"></i>\n </button>\n }\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n (click)=\"OnToggleWidthMode()\"\n [title]=\"WidthMode === 'centered' ? 'Expand to full width' : 'Center content'\">\n <i [class]=\"WidthMode === 'centered' ? 'fa-solid fa-arrows-left-right-to-line' : 'fa-solid fa-compress'\"></i>\n </button>\n </div>\n }\n\n <!-- Additional actions slot -->\n @if (AdditionalActionsTemplate) {\n <ng-container [ngTemplateOutlet]=\"AdditionalActionsTemplate\"></ng-container>\n }\n <ng-content select=\"[toolbar-additional-controls]\"></ng-content>\n </div>\n}\n\n<!-- ============================================\n DISCARD CHANGES CONFIRMATION DIALOG\n ============================================ -->\n@if (ShowDiscardDialog) {\n <div class=\"mj-dialog-overlay\" (click)=\"OnDiscardCancel()\">\n <div class=\"mj-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"mj-dialog-header\">\n <h3>Discard Changes?</h3>\n <button class=\"mj-dialog-close\" (click)=\"OnDiscardCancel()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"mj-dialog-body\">\n <p>You have <strong>{{ DirtyFieldDisplayNames.length }}</strong> unsaved change{{ DirtyFieldDisplayNames.length === 1 ? '' : 's' }}. Are you sure you want to discard {{ DirtyFieldDisplayNames.length === 1 ? 'it' : 'them' }}?</p>\n </div>\n <div class=\"mj-dialog-footer\">\n <button class=\"mj-forms-btn mj-forms-btn--danger\" (click)=\"OnDiscardConfirm()\">\n <i class=\"fa-solid fa-rotate-left\"></i>\n Discard Changes\n </button>\n <button class=\"mj-forms-btn\" (click)=\"OnDiscardCancel()\">\n Keep Editing\n </button>\n </div>\n </div>\n </div>\n}\n\n<!-- ============================================\n DELETE CONFIRMATION DIALOG\n ============================================ -->\n@if (ShowDeleteDialog) {\n <div class=\"mj-dialog-overlay\" (click)=\"OnDeleteCancel()\">\n <div class=\"mj-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"mj-dialog-header\">\n <h3>Confirm Deletion</h3>\n <button class=\"mj-dialog-close\" (click)=\"OnDeleteCancel()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"mj-dialog-body\">\n <p>Are you sure you want to delete this record? This action cannot be undone.</p>\n </div>\n <div class=\"mj-dialog-footer\">\n <button class=\"mj-forms-btn mj-forms-btn--danger\" (click)=\"OnDeleteConfirm()\">\n <i class=\"fa-solid fa-trash-can\"></i>\n Delete\n </button>\n <button class=\"mj-forms-btn\" (click)=\"OnDeleteCancel()\">\n Cancel\n </button>\n </div>\n </div>\n </div>\n}\n\n<!-- Recursive template for IS-A descendant tree rendering.\n Single child at a level \u2192 inline with chevron.\n Multiple children at a level \u2192 tree branch with CSS connector lines. -->\n<ng-template #descendantTreeTpl let-items=\"items\">\n @if (items.length === 1) {\n <span class=\"mj-hierarchy-arrow\"><i class=\"fa-solid fa-chevron-right\"></i></span>\n <a class=\"mj-entity-badge mj-entity-badge--child\"\n [title]=\"'Navigate to: ' + items[0].EntityName\"\n (click)=\"OnDescendantBadgeClick(items[0].EntityName, $event)\">\n <i class=\"fa-solid fa-arrow-down\"></i>\n {{ items[0].EntityName }}\n </a>\n @if (items[0].Children.length > 0) {\n <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n [ngTemplateOutletContext]=\"{ items: items[0].Children }\"></ng-container>\n }\n } @else if (items.length > 1) {\n <div class=\"mj-descendant-chains\">\n @for (item of items; track item.EntityName) {\n <div class=\"mj-descendant-chain\">\n <a class=\"mj-entity-badge mj-entity-badge--child\"\n [title]=\"'Navigate to: ' + item.EntityName\"\n (click)=\"OnDescendantBadgeClick(item.EntityName, $event)\">\n <i class=\"fa-solid fa-arrow-down\"></i>\n {{ item.EntityName }}\n </a>\n @if (item.Children.length > 0) {\n <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n [ngTemplateOutletContext]=\"{ items: item.Children }\"></ng-container>\n }\n </div>\n }\n </div>\n }\n</ng-template>\n", styles: ["/* ============================================\n FORM TOOLBAR \u2014 uses global --mj-* design tokens\n ============================================ */\n:host {\n display: block;\n}\n\n/* ============================================\n EDIT BANNER\n ============================================ */\n.mj-forms-edit-banner {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 16px 16px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-bottom: 2px solid var(--mj-brand-primary);\n font-size: 13px;\n color: var(--mj-brand-primary);\n font-weight: var(--mj-font-medium);\n}\n\n.mj-forms-edit-banner > i {\n font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-icon--dirty {\n color: var(--mj-status-warning);\n font-size: var(--mj-text-base);\n}\n\n.mj-forms-edit-banner-text {\n font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-dirty {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n}\n\n.mj-forms-edit-banner-dirty strong {\n color: var(--mj-status-warning);\n font-weight: var(--mj-font-bold);\n}\n\n.mj-forms-edit-banner-actions {\n display: flex;\n gap: 8px;\n}\n\n/* ============================================\n MAIN TOOLBAR\n ============================================ */\n.mj-forms-toolbar {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 22px 16px;\n background: var(--mj-bg-surface-card);\n border-bottom: 2px solid var(--mj-border-default);\n flex-wrap: wrap;\n z-index: 40;\n}\n\n.mj-forms-toolbar--sticky {\n position: sticky;\n top: 0;\n}\n\n.mj-forms-toolbar--disabled {\n pointer-events: none;\n opacity: 0.7;\n}\n\n.mj-forms-toolbar-group {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.mj-forms-toolbar-separator {\n width: 1px;\n height: 24px;\n background: var(--mj-border-default);\n margin: 0 4px;\n}\n\n.mj-forms-toolbar-spacer {\n flex: 1;\n}\n\n/* ============================================\n BUTTONS\n ============================================ */\n.mj-forms-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: var(--mj-font-medium);\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all var(--mj-transition-base) ease;\n white-space: nowrap;\n font-family: inherit;\n line-height: 1;\n}\n\n.mj-forms-btn:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-border-strong);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-forms-btn:active {\n transform: translateY(0);\n box-shadow: none;\n}\n\n.mj-forms-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mj-forms-btn i {\n font-size: 15px;\n line-height: 1;\n}\n\n.mj-forms-btn--primary {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.mj-forms-btn--primary:hover {\n background: var(--mj-brand-primary-hover);\n border-color: var(--mj-brand-primary-hover);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.mj-forms-btn--danger {\n color: var(--mj-status-error);\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n}\n\n.mj-forms-btn--danger:hover {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-error);\n}\n\n.mj-forms-btn--ghost {\n border-color: transparent;\n background: transparent;\n}\n\n.mj-forms-btn--ghost:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n border-color: transparent;\n}\n\n.mj-forms-btn--icon-only {\n padding: 7px 9px;\n}\n\n.mj-forms-btn--sm {\n padding: 5px 12px;\n font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn--sm i {\n font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn-text {\n margin-left: 2px;\n}\n\n.mj-icon--favorite {\n color: var(--mj-status-warning);\n}\n\n/* List button with count badge */\n.mj-forms-btn--list {\n position: relative;\n}\n\n.mj-list-count-badge {\n position: absolute;\n top: -6px;\n right: -6px;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n font-size: 10px;\n font-weight: var(--mj-font-bold);\n color: var(--mj-text-inverse);\n background: linear-gradient(135deg, var(--mj-status-info) 0%, color-mix(in srgb, var(--mj-status-info) 85%, black) 100%);\n border-radius: var(--mj-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--mj-bg-surface-card);\n}\n\n/* ============================================\n IS-A ENTITY HIERARCHY\n ============================================ */\n.mj-entity-hierarchy {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-entity-badge {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-semibold);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all var(--mj-transition-base) ease;\n text-decoration: none;\n border: 1px solid transparent;\n}\n\n.mj-entity-badge i {\n font-size: 11px;\n}\n\n.mj-entity-badge--parent {\n background: color-mix(in srgb, var(--mj-color-indigo-500) 10%, var(--mj-bg-surface));\n color: var(--mj-color-indigo-500);\n border-color: color-mix(in srgb, var(--mj-color-indigo-500) 25%, transparent);\n}\n\n.mj-entity-badge--parent:hover {\n background: color-mix(in srgb, var(--mj-color-indigo-500) 18%, var(--mj-bg-surface));\n border-color: var(--mj-color-indigo-500);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-color-indigo-500) 15%, transparent);\n}\n\n.mj-entity-badge--current {\n font-weight: var(--mj-font-semibold);\n font-size: 13px;\n color: var(--mj-text-primary);\n padding: 4px 8px;\n background: var(--mj-bg-surface-hover);\n border-radius: var(--mj-radius-sm);\n cursor: default;\n}\n\n.mj-entity-badge--child {\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n color: var(--mj-status-info);\n border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.mj-entity-badge--child:hover {\n background: color-mix(in srgb, var(--mj-status-info) 18%, var(--mj-bg-surface));\n border-color: var(--mj-status-info);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-info) 15%, transparent);\n}\n\n.mj-entity-badge--overlapping {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n border-color: color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n}\n\n.mj-entity-badge--overlapping:hover {\n background: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-warning) 15%, transparent);\n}\n\n.mj-entity-badge-group {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n flex-wrap: wrap;\n}\n\n.mj-child-count {\n background: var(--mj-status-info);\n color: var(--mj-text-inverse);\n font-size: 10px;\n padding: 1px 5px;\n border-radius: var(--mj-radius-full);\n font-weight: var(--mj-font-bold);\n}\n\n.mj-entity-badge--leaf {\n border-style: dashed;\n}\n\n.mj-entity-badge--root {\n border-style: dashed;\n}\n\n.mj-hierarchy-arrow {\n color: var(--mj-text-muted);\n font-size: 10px;\n}\n\n/* Descendant chain tree (connecting lines when multiple chains branch) */\n.mj-descendant-chains {\n display: flex;\n flex-direction: column;\n gap: 6px;\n position: relative;\n padding-left: 20px;\n}\n\n/* Horizontal connector from parent entity badge to tree trunk */\n.mj-descendant-chains::before {\n content: '';\n position: absolute;\n left: -4px;\n top: 50%;\n width: 4px;\n border-top: 1.5px solid var(--mj-text-muted);\n}\n\n.mj-descendant-chain {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n position: relative;\n padding: 2px 0;\n}\n\n/* Horizontal branch line from trunk to chain content */\n.mj-descendant-chain::before {\n content: '';\n position: absolute;\n left: -20px;\n top: 50%;\n width: 18px;\n border-top: 1.5px solid var(--mj-text-muted);\n}\n\n/* Vertical trunk segment (each chain draws its portion) */\n.mj-descendant-chain::after {\n content: '';\n position: absolute;\n left: -20px;\n top: 0;\n bottom: 0;\n border-left: 1.5px solid var(--mj-text-muted);\n}\n\n/* First chain: trunk starts from center */\n.mj-descendant-chain:first-child::after {\n top: 50%;\n}\n\n/* Last chain: trunk ends at center */\n.mj-descendant-chain:last-child::after {\n bottom: 50%;\n}\n\n/* (dirty summary removed \u2014 now inline in edit banner) */\n\n/* ============================================\n SECTION CONTROLS\n ============================================ */\n.mj-section-controls {\n gap: 6px;\n}\n\n.mj-forms-search-wrapper {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.mj-section-search {\n max-width: 180px;\n font-size: 13px;\n padding: 6px 28px 6px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-sm);\n background: var(--mj-bg-surface);\n outline: none;\n font-family: inherit;\n transition: all var(--mj-transition-base);\n}\n\n.mj-section-search:focus {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n/* Active filter highlight \u2014 matches the yellow used on matched panel/field names */\n.mj-section-search--active {\n background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n border-color: var(--mj-status-warning);\n color: color-mix(in srgb, var(--mj-status-warning) 80%, black);\n font-weight: var(--mj-font-semibold);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n.mj-section-search::placeholder {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n.mj-clear-search {\n position: absolute;\n right: 4px;\n padding: 4px;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: var(--mj-text-xs);\n line-height: 1;\n}\n\n.mj-clear-search:hover {\n color: var(--mj-text-secondary);\n}\n\n/* ============================================\n DIALOG (lightweight inline)\n ============================================ */\n.mj-dialog-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: mj-fade-in 150ms ease;\n}\n\n.mj-dialog {\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-lg);\n min-width: 400px;\n max-width: 550px;\n animation: mj-slide-up 200ms ease;\n}\n\n.mj-dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mj-dialog-header h3 {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n}\n\n.mj-dialog-close {\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n font-size: var(--mj-text-base);\n transition: color var(--mj-transition-base);\n}\n\n.mj-dialog-close:hover {\n color: var(--mj-text-primary);\n}\n\n.mj-dialog-body {\n padding: 20px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n line-height: 1.6;\n}\n\n.mj-dialog-body p {\n margin: 0;\n}\n\n.mj-dialog-footer {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n@keyframes mj-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes mj-slide-up {\n from { transform: translateY(8px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}\n"] }]
|
|
970
970
|
}], null, { Form: [{
|
|
971
971
|
type: Input
|
|
972
972
|
}], _deprecatedForm: [{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-base-forms",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.12.0",
|
|
4
4
|
"description": "MemberJunction: Generic Angular form components for rendering and editing entity records. Provides configurable toolbar, modern form fields (PrimeNG unstyled), collapsible panels with IS-A inheritance support, and event-driven navigation. Zero Explorer dependencies - usable in any Angular application.",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -36,13 +36,13 @@
|
|
|
36
36
|
"primeng": "21.1.1"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@memberjunction/core": "5.
|
|
40
|
-
"@memberjunction/core-entities": "5.
|
|
41
|
-
"@memberjunction/global": "5.
|
|
42
|
-
"@memberjunction/ng-base-types": "5.
|
|
43
|
-
"@memberjunction/ng-list-management": "5.
|
|
44
|
-
"@memberjunction/ng-record-changes": "5.
|
|
45
|
-
"@memberjunction/ng-entity-viewer": "5.
|
|
39
|
+
"@memberjunction/core": "5.12.0",
|
|
40
|
+
"@memberjunction/core-entities": "5.12.0",
|
|
41
|
+
"@memberjunction/global": "5.12.0",
|
|
42
|
+
"@memberjunction/ng-base-types": "5.12.0",
|
|
43
|
+
"@memberjunction/ng-list-management": "5.12.0",
|
|
44
|
+
"@memberjunction/ng-record-changes": "5.12.0",
|
|
45
|
+
"@memberjunction/ng-entity-viewer": "5.12.0",
|
|
46
46
|
"rxjs": "^7.8.2",
|
|
47
47
|
"tslib": "^2.8.1"
|
|
48
48
|
},
|