@memberjunction/ng-base-forms 5.11.0 → 5.13.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/field/form-field.component.js +2 -2
- 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
|
@@ -531,11 +531,11 @@ export class MjRecordFormContainerComponent {
|
|
|
531
531
|
i0.ɵɵconditional(ctx.ShowListManagement && ctx.EffectiveRecord ? 10 : -1);
|
|
532
532
|
i0.ɵɵadvance();
|
|
533
533
|
i0.ɵɵproperty("Sections", ctx.SectionManagerItems)("SectionOrder", ctx.SectionManagerOrder)("Visible", ctx.ShowSectionManager);
|
|
534
|
-
} }, dependencies: [i1.RecordChangesComponent, i2.ListManagementDialogComponent, i3.MjFormToolbarComponent, i4.MjSectionManagerComponent, i5.MjIsaRelatedPanelComponent], styles: ["/* ============================================\n RECORD FORM CONTAINER\n Top-level wrapper: toolbar + scrollable content\n ============================================ */\nmj-record-form-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n position: relative;\n overflow: hidden;\n}\n\n/* ViewEncapsulation.None fallback \u2014 ensure the element itself constrains overflow */\nmj-record-form-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n position: relative;\n overflow: hidden;\n}\n\n/* ============================================\n SCROLL AREA (full-width so mouse wheel works anywhere)\n ============================================ */\n.mj-forms-scroll-area {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n background:
|
|
534
|
+
} }, dependencies: [i1.RecordChangesComponent, i2.ListManagementDialogComponent, i3.MjFormToolbarComponent, i4.MjSectionManagerComponent, i5.MjIsaRelatedPanelComponent], styles: ["/* ============================================\n RECORD FORM CONTAINER \u2014 uses global --mj-* design tokens\n Top-level wrapper: toolbar + scrollable content\n ============================================ */\nmj-record-form-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n position: relative;\n overflow: hidden;\n}\n\n/* ViewEncapsulation.None fallback \u2014 ensure the element itself constrains overflow */\nmj-record-form-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n position: relative;\n overflow: hidden;\n}\n\n/* ============================================\n SCROLL AREA (full-width so mouse wheel works anywhere)\n ============================================ */\n.mj-forms-scroll-area {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n background: var(--mj-bg-page);\n}\n\n/* ============================================\n PANELS CONTAINER (centered content within scroll area)\n ============================================ */\n.mj-forms-panels-container {\n padding: 24px 32px 48px;\n max-width: 920px;\n margin: 0 auto;\n width: 100%;\n box-sizing: border-box;\n}\n\n/* Widen max-width when ISA side panel is present */\n.mj-forms-panels--has-isa-panel {\n max-width: 1240px;\n}\n\n.mj-forms-panels--full-width {\n max-width: none;\n padding-left: 24px;\n padding-right: 24px;\n}\n\n/* Flex row layout: form panels + optional ISA side panel */\n.mj-forms-layout-row {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n}\n\n/* All panels in a single flex container \u2014 CSS order drives sequencing */\n.mj-forms-all-panels {\n display: flex;\n flex-direction: column;\n gap: 16px;\n flex: 1;\n min-width: 0;\n}\n\n/* Hide related entity panels in edit mode (variant host class on mj-collapsible-panel) */\n.mj-forms-panels--edit-mode .mj-panel--related-entity {\n display: none;\n}\n\n/* ============================================\n EMPTY SEARCH STATE\n ============================================ */\n.mj-forms-empty-search-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 80px 24px;\n text-align: center;\n min-height: 400px;\n}\n\n.mj-forms-empty-search-icon {\n width: 80px;\n height: 80px;\n border-radius: var(--mj-radius-full);\n background: var(--mj-bg-surface-sunken);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 24px;\n}\n\n.mj-forms-empty-search-icon i {\n font-size: 32px;\n color: var(--mj-text-muted);\n}\n\n.mj-forms-empty-search-title {\n font-size: var(--mj-text-xl);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n margin: 0 0 12px 0;\n}\n\n.mj-forms-empty-search-message {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n line-height: 1.6;\n max-width: 400px;\n margin: 0;\n}\n\n.mj-forms-empty-search-message strong {\n color: var(--mj-text-primary);\n font-weight: var(--mj-font-semibold);\n}\n\n.mj-forms-empty-search-link {\n color: var(--mj-brand-primary);\n text-decoration: none;\n font-weight: var(--mj-font-medium);\n}\n\n.mj-forms-empty-search-link:hover {\n text-decoration: underline;\n}\n\n/* ============================================\n RESPONSIVE\n ============================================ */\n@media (max-width: 768px) {\n .mj-forms-panels-container {\n padding: 16px 12px 32px;\n }\n}\n"], encapsulation: 2, changeDetection: 0 });
|
|
535
535
|
}
|
|
536
536
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjRecordFormContainerComponent, [{
|
|
537
537
|
type: Component,
|
|
538
|
-
args: [{ standalone: false, selector: 'mj-record-form-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- ============================================\n BEFORE-TOOLBAR SLOT\n ============================================ -->\n<ng-content select=\"[before-toolbar]\"></ng-content>\n\n<!-- ============================================\n TOOLBAR (bridges FormComponent state \u2192 toolbar inputs)\n ============================================ -->\n<mj-form-toolbar\n [Record]=\"EffectiveRecord\"\n [EditMode]=\"EffectiveEditMode\"\n [UserCanEdit]=\"EffectiveUserCanEdit\"\n [UserCanDelete]=\"EffectiveUserCanDelete\"\n [IsFavorite]=\"EffectiveIsFavorite\"\n [FavoriteInitDone]=\"EffectiveFavoriteInitDone\"\n [IsDirty]=\"EffectiveIsDirty\"\n [DirtyFieldNames]=\"EffectiveDirtyFieldNames\"\n [ListCount]=\"ListCount\"\n [EntityInfo]=\"EffectiveEntityInfo\"\n [Config]=\"ToolbarConfig\"\n [IsSaving]=\"EffectiveIsSaving\"\n [VisibleSectionCount]=\"VisibleSectionCount\"\n [TotalSectionCount]=\"TotalSectionCount\"\n [ExpandedSectionCount]=\"ExpandedSectionCount\"\n [SearchFilter]=\"EffectiveSearchFilter\"\n [ShowEmptyFields]=\"EffectiveShowEmptyFields\"\n [WidthMode]=\"EffectiveWidthMode\"\n [HasCustomSectionOrder]=\"EffectiveHasCustomSectionOrder\"\n (Navigate)=\"OnNavigate($event)\"\n (EditModeChange)=\"OnEditModeChange($event)\"\n (BeforeSave)=\"BeforeSave.emit($event)\"\n (SaveRequested)=\"OnSaveRequested()\"\n (BeforeCancel)=\"BeforeCancel.emit($event)\"\n (CancelRequested)=\"OnCancelRequested()\"\n (BeforeDelete)=\"BeforeDelete.emit($event)\"\n (DeleteRequested)=\"OnDeleteRequested()\"\n (FavoriteToggled)=\"OnFavoriteToggled()\"\n (BeforeHistoryView)=\"BeforeHistoryView.emit($event)\"\n (HistoryRequested)=\"OnHistoryRequested()\"\n (BeforeListManagement)=\"BeforeListManagement.emit($event)\"\n (ListManagementRequested)=\"OnListManagementRequested()\"\n (ShowChangesRequested)=\"OnShowChangesRequested()\"\n (CustomButtonClick)=\"CustomButtonClick.emit($event)\"\n (FilterChange)=\"OnFilterChange($event)\"\n (ExpandAllRequested)=\"OnExpandAll()\"\n (CollapseAllRequested)=\"OnCollapseAll()\"\n (ShowEmptyFieldsChange)=\"OnShowEmptyFieldsChange($event)\"\n (WidthModeChange)=\"OnWidthModeChange($event)\"\n (ResetSectionOrderRequested)=\"OnResetSectionOrder()\"\n (ManageSectionsRequested)=\"OnManageSections()\">\n</mj-form-toolbar>\n\n<!-- ============================================\n SCROLL AREA (full-width so mouse wheel works anywhere)\n ============================================ -->\n<div class=\"mj-forms-scroll-area\">\n <div class=\"mj-forms-panels-container\"\n [class.mj-forms-panels--full-width]=\"EffectiveWidthMode === 'full-width'\"\n [class.mj-forms-panels--edit-mode]=\"EffectiveEditMode\"\n [class.mj-forms-panels--has-isa-panel]=\"HasIsaRelatedItems\">\n <!-- Flex row: form panels on left, ISA side panel on right -->\n <div class=\"mj-forms-layout-row\">\n <!-- All panels in a single flex container \u2014 CSS order drives sequencing -->\n <div class=\"mj-forms-all-panels\">\n <ng-content></ng-content>\n\n <!-- Empty state when no sections match search -->\n @if (EffectiveSearchFilter && VisibleSectionCount === 0) {\n <div class=\"mj-forms-empty-search-state\">\n <div class=\"mj-forms-empty-search-icon\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n </div>\n <h3 class=\"mj-forms-empty-search-title\">No sections found</h3>\n <p class=\"mj-forms-empty-search-message\">\n No sections match \"<strong>{{ EffectiveSearchFilter }}</strong>\".\n <br>Try a different search term or <a href=\"#\" (click)=\"OnFilterChange(''); $event.preventDefault()\" class=\"mj-forms-empty-search-link\">clear the search</a>.\n </p>\n </div>\n }\n </div>\n\n <!-- IS-A Related Records Side Panel -->\n <mj-isa-related-panel\n [Record]=\"EffectiveRecord\"\n [EditMode]=\"EffectiveEditMode\"\n [Collapsed]=\"EffectiveWidthMode === 'full-width'\"\n (Navigate)=\"OnNavigate($event)\">\n </mj-isa-related-panel>\n </div>\n </div>\n</div>\n\n<!-- ============================================\n RECORD CHANGES DRAWER (shown when history button clicked)\n ============================================ -->\n@if (ShowRecordChanges && EffectiveRecord) {\n <mj-record-changes\n [record]=\"EffectiveRecord\"\n (dialogClosed)=\"OnRecordChangesClosed()\">\n </mj-record-changes>\n}\n\n<!-- ============================================\n LIST MANAGEMENT DIALOG (shown when lists button clicked)\n ============================================ -->\n@if (ShowListManagement && EffectiveRecord) {\n <mj-list-management-dialog\n [visible]=\"ShowListManagement\"\n [config]=\"{\n mode: 'manage',\n entityId: EffectiveRecord.EntityInfo.ID,\n entityName: EffectiveRecord.EntityInfo.Name,\n recordIds: [EffectiveRecord.PrimaryKey.Values()[0]],\n allowCreate: true\n }\"\n (complete)=\"OnListManagementClosed()\"\n (cancel)=\"OnListManagementClosed()\">\n </mj-list-management-dialog>\n}\n\n<!-- ============================================\n SECTION MANAGER DRAWER (shown when manage-sections button clicked)\n ============================================ -->\n<mj-section-manager\n [Sections]=\"SectionManagerItems\"\n [SectionOrder]=\"SectionManagerOrder\"\n [Visible]=\"ShowSectionManager\"\n (SectionOrderChange)=\"OnSectionOrderChange($event)\"\n (ResetRequested)=\"OnSectionManagerReset()\"\n (Closed)=\"OnSectionManagerClosed()\">\n</mj-section-manager>\n", styles: ["/* ============================================\n RECORD FORM CONTAINER\n Top-level wrapper: toolbar + scrollable content\n ============================================ */\nmj-record-form-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n position: relative;\n overflow: hidden;\n}\n\n/* ViewEncapsulation.None fallback \u2014 ensure the element itself constrains overflow */\nmj-record-form-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n position: relative;\n overflow: hidden;\n}\n\n/* ============================================\n SCROLL AREA (full-width so mouse wheel works anywhere)\n ============================================ */\n.mj-forms-scroll-area {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n background:
|
|
538
|
+
args: [{ standalone: false, selector: 'mj-record-form-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- ============================================\n BEFORE-TOOLBAR SLOT\n ============================================ -->\n<ng-content select=\"[before-toolbar]\"></ng-content>\n\n<!-- ============================================\n TOOLBAR (bridges FormComponent state \u2192 toolbar inputs)\n ============================================ -->\n<mj-form-toolbar\n [Record]=\"EffectiveRecord\"\n [EditMode]=\"EffectiveEditMode\"\n [UserCanEdit]=\"EffectiveUserCanEdit\"\n [UserCanDelete]=\"EffectiveUserCanDelete\"\n [IsFavorite]=\"EffectiveIsFavorite\"\n [FavoriteInitDone]=\"EffectiveFavoriteInitDone\"\n [IsDirty]=\"EffectiveIsDirty\"\n [DirtyFieldNames]=\"EffectiveDirtyFieldNames\"\n [ListCount]=\"ListCount\"\n [EntityInfo]=\"EffectiveEntityInfo\"\n [Config]=\"ToolbarConfig\"\n [IsSaving]=\"EffectiveIsSaving\"\n [VisibleSectionCount]=\"VisibleSectionCount\"\n [TotalSectionCount]=\"TotalSectionCount\"\n [ExpandedSectionCount]=\"ExpandedSectionCount\"\n [SearchFilter]=\"EffectiveSearchFilter\"\n [ShowEmptyFields]=\"EffectiveShowEmptyFields\"\n [WidthMode]=\"EffectiveWidthMode\"\n [HasCustomSectionOrder]=\"EffectiveHasCustomSectionOrder\"\n (Navigate)=\"OnNavigate($event)\"\n (EditModeChange)=\"OnEditModeChange($event)\"\n (BeforeSave)=\"BeforeSave.emit($event)\"\n (SaveRequested)=\"OnSaveRequested()\"\n (BeforeCancel)=\"BeforeCancel.emit($event)\"\n (CancelRequested)=\"OnCancelRequested()\"\n (BeforeDelete)=\"BeforeDelete.emit($event)\"\n (DeleteRequested)=\"OnDeleteRequested()\"\n (FavoriteToggled)=\"OnFavoriteToggled()\"\n (BeforeHistoryView)=\"BeforeHistoryView.emit($event)\"\n (HistoryRequested)=\"OnHistoryRequested()\"\n (BeforeListManagement)=\"BeforeListManagement.emit($event)\"\n (ListManagementRequested)=\"OnListManagementRequested()\"\n (ShowChangesRequested)=\"OnShowChangesRequested()\"\n (CustomButtonClick)=\"CustomButtonClick.emit($event)\"\n (FilterChange)=\"OnFilterChange($event)\"\n (ExpandAllRequested)=\"OnExpandAll()\"\n (CollapseAllRequested)=\"OnCollapseAll()\"\n (ShowEmptyFieldsChange)=\"OnShowEmptyFieldsChange($event)\"\n (WidthModeChange)=\"OnWidthModeChange($event)\"\n (ResetSectionOrderRequested)=\"OnResetSectionOrder()\"\n (ManageSectionsRequested)=\"OnManageSections()\">\n</mj-form-toolbar>\n\n<!-- ============================================\n SCROLL AREA (full-width so mouse wheel works anywhere)\n ============================================ -->\n<div class=\"mj-forms-scroll-area\">\n <div class=\"mj-forms-panels-container\"\n [class.mj-forms-panels--full-width]=\"EffectiveWidthMode === 'full-width'\"\n [class.mj-forms-panels--edit-mode]=\"EffectiveEditMode\"\n [class.mj-forms-panels--has-isa-panel]=\"HasIsaRelatedItems\">\n <!-- Flex row: form panels on left, ISA side panel on right -->\n <div class=\"mj-forms-layout-row\">\n <!-- All panels in a single flex container \u2014 CSS order drives sequencing -->\n <div class=\"mj-forms-all-panels\">\n <ng-content></ng-content>\n\n <!-- Empty state when no sections match search -->\n @if (EffectiveSearchFilter && VisibleSectionCount === 0) {\n <div class=\"mj-forms-empty-search-state\">\n <div class=\"mj-forms-empty-search-icon\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n </div>\n <h3 class=\"mj-forms-empty-search-title\">No sections found</h3>\n <p class=\"mj-forms-empty-search-message\">\n No sections match \"<strong>{{ EffectiveSearchFilter }}</strong>\".\n <br>Try a different search term or <a href=\"#\" (click)=\"OnFilterChange(''); $event.preventDefault()\" class=\"mj-forms-empty-search-link\">clear the search</a>.\n </p>\n </div>\n }\n </div>\n\n <!-- IS-A Related Records Side Panel -->\n <mj-isa-related-panel\n [Record]=\"EffectiveRecord\"\n [EditMode]=\"EffectiveEditMode\"\n [Collapsed]=\"EffectiveWidthMode === 'full-width'\"\n (Navigate)=\"OnNavigate($event)\">\n </mj-isa-related-panel>\n </div>\n </div>\n</div>\n\n<!-- ============================================\n RECORD CHANGES DRAWER (shown when history button clicked)\n ============================================ -->\n@if (ShowRecordChanges && EffectiveRecord) {\n <mj-record-changes\n [record]=\"EffectiveRecord\"\n (dialogClosed)=\"OnRecordChangesClosed()\">\n </mj-record-changes>\n}\n\n<!-- ============================================\n LIST MANAGEMENT DIALOG (shown when lists button clicked)\n ============================================ -->\n@if (ShowListManagement && EffectiveRecord) {\n <mj-list-management-dialog\n [visible]=\"ShowListManagement\"\n [config]=\"{\n mode: 'manage',\n entityId: EffectiveRecord.EntityInfo.ID,\n entityName: EffectiveRecord.EntityInfo.Name,\n recordIds: [EffectiveRecord.PrimaryKey.Values()[0]],\n allowCreate: true\n }\"\n (complete)=\"OnListManagementClosed()\"\n (cancel)=\"OnListManagementClosed()\">\n </mj-list-management-dialog>\n}\n\n<!-- ============================================\n SECTION MANAGER DRAWER (shown when manage-sections button clicked)\n ============================================ -->\n<mj-section-manager\n [Sections]=\"SectionManagerItems\"\n [SectionOrder]=\"SectionManagerOrder\"\n [Visible]=\"ShowSectionManager\"\n (SectionOrderChange)=\"OnSectionOrderChange($event)\"\n (ResetRequested)=\"OnSectionManagerReset()\"\n (Closed)=\"OnSectionManagerClosed()\">\n</mj-section-manager>\n", styles: ["/* ============================================\n RECORD FORM CONTAINER \u2014 uses global --mj-* design tokens\n Top-level wrapper: toolbar + scrollable content\n ============================================ */\nmj-record-form-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n position: relative;\n overflow: hidden;\n}\n\n/* ViewEncapsulation.None fallback \u2014 ensure the element itself constrains overflow */\nmj-record-form-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n position: relative;\n overflow: hidden;\n}\n\n/* ============================================\n SCROLL AREA (full-width so mouse wheel works anywhere)\n ============================================ */\n.mj-forms-scroll-area {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n background: var(--mj-bg-page);\n}\n\n/* ============================================\n PANELS CONTAINER (centered content within scroll area)\n ============================================ */\n.mj-forms-panels-container {\n padding: 24px 32px 48px;\n max-width: 920px;\n margin: 0 auto;\n width: 100%;\n box-sizing: border-box;\n}\n\n/* Widen max-width when ISA side panel is present */\n.mj-forms-panels--has-isa-panel {\n max-width: 1240px;\n}\n\n.mj-forms-panels--full-width {\n max-width: none;\n padding-left: 24px;\n padding-right: 24px;\n}\n\n/* Flex row layout: form panels + optional ISA side panel */\n.mj-forms-layout-row {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n}\n\n/* All panels in a single flex container \u2014 CSS order drives sequencing */\n.mj-forms-all-panels {\n display: flex;\n flex-direction: column;\n gap: 16px;\n flex: 1;\n min-width: 0;\n}\n\n/* Hide related entity panels in edit mode (variant host class on mj-collapsible-panel) */\n.mj-forms-panels--edit-mode .mj-panel--related-entity {\n display: none;\n}\n\n/* ============================================\n EMPTY SEARCH STATE\n ============================================ */\n.mj-forms-empty-search-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 80px 24px;\n text-align: center;\n min-height: 400px;\n}\n\n.mj-forms-empty-search-icon {\n width: 80px;\n height: 80px;\n border-radius: var(--mj-radius-full);\n background: var(--mj-bg-surface-sunken);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 24px;\n}\n\n.mj-forms-empty-search-icon i {\n font-size: 32px;\n color: var(--mj-text-muted);\n}\n\n.mj-forms-empty-search-title {\n font-size: var(--mj-text-xl);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n margin: 0 0 12px 0;\n}\n\n.mj-forms-empty-search-message {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n line-height: 1.6;\n max-width: 400px;\n margin: 0;\n}\n\n.mj-forms-empty-search-message strong {\n color: var(--mj-text-primary);\n font-weight: var(--mj-font-semibold);\n}\n\n.mj-forms-empty-search-link {\n color: var(--mj-brand-primary);\n text-decoration: none;\n font-weight: var(--mj-font-medium);\n}\n\n.mj-forms-empty-search-link:hover {\n text-decoration: underline;\n}\n\n/* ============================================\n RESPONSIVE\n ============================================ */\n@media (max-width: 768px) {\n .mj-forms-panels-container {\n padding: 16px 12px 32px;\n }\n}\n"] }]
|
|
539
539
|
}], null, { Record: [{
|
|
540
540
|
type: Input
|
|
541
541
|
}], FormComponent: [{
|
|
@@ -1171,11 +1171,11 @@ export class MjFormFieldComponent {
|
|
|
1171
1171
|
i0.ɵɵconditionalCreate(0, MjFormFieldComponent_Conditional_0_Template, 2, 2);
|
|
1172
1172
|
} if (rf & 2) {
|
|
1173
1173
|
i0.ɵɵconditional(ctx.Record && (ctx.Record.IsSaved || !ctx.IsFieldReadOnly) ? 0 : -1);
|
|
1174
|
-
} }, dependencies: [i1.NgStyle], styles: ["\n\n\n\n[_nghost-%COMP%] {\n --mj-accent: #667eea;\n --mj-accent-light: rgba(102, 126, 234, 0.08);\n --mj-text-primary: #1f2937;\n --mj-text-secondary: #4b5563;\n --mj-text-muted: #9ca3af;\n --mj-border: #e5e7eb;\n --mj-error: #ef4444;\n --mj-warning: #f59e0b;\n --mj-card-bg: #ffffff;\n --mj-forms-field-label-width: 200px;\n --mj-forms-field-gap: 12px;\n --mj-transition: 200ms;\n\n display: contents;\n}\n\n.mj-forms-field[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: var(--mj-forms-field-label-width) 1fr;\n gap: var(--mj-forms-field-gap);\n align-items: baseline;\n padding: 8px 0;\n transition: all var(--mj-transition) ease;\n}\n\n\n\n.mj-forms-field--editing[_ngcontent-%COMP%]:hover {\n background: var(--mj-accent-light);\n border-radius: 6px;\n margin: 0 -8px;\n padding: 8px 8px;\n}\n\n\n\n\n\n.mj-forms-field-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n padding-top: 2px;\n word-break: break-word;\n}\n\n\n\n\n\n.mj-forms-field-control[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n}\n\n.mj-forms-field-control[_ngcontent-%COMP%] > *[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n\n\n\n\n.mj-forms-field--dirty[_ngcontent-%COMP%] .mj-forms-field-label[_ngcontent-%COMP%]::after {\n content: '';\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--mj-warning);\n margin-left: 6px;\n vertical-align: middle;\n}\n\n\n\n\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-error);\n}\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%]:focus {\n background: #fef2f2;\n border-bottom-color: var(--mj-error);\n}\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%] .mj-custom-select-trigger[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-error);\n}\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%] .mj-fk-search[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-error);\n}\n\n\n\n\n\n.mj-forms-field-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-primary);\n min-height: 24px;\n display: flex;\n align-items: center;\n overflow-wrap: break-word;\n word-break: break-word;\n}\n\n.mj-forms-field-value--long[_ngcontent-%COMP%] {\n white-space: pre-line;\n max-height: 300px;\n overflow: auto;\n}\n\n\n\n.mj-forms-field--readonly[_ngcontent-%COMP%] {\n opacity: 0.7;\n}\n\n.mj-forms-field--readonly[_ngcontent-%COMP%] .mj-forms-field-value[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n\n\n\n\n.mj-forms-field-link[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: var(--mj-accent);\n cursor: pointer;\n font-weight: 400;\n font-size: 14px;\n transition: color var(--mj-transition);\n text-decoration: none;\n}\n\n.mj-forms-field-link[_ngcontent-%COMP%]:hover {\n color: #5a6fd6;\n}\n\n.mj-forms-field-link-icon[_ngcontent-%COMP%] {\n font-size: 11px;\n opacity: 0;\n transition: opacity var(--mj-transition);\n}\n\n.mj-forms-field-link[_ngcontent-%COMP%]:hover .mj-forms-field-link-icon[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n\n\n.mj-forms-field-link--fk[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 400;\n}\n\n\n\n\n\n.mj-forms-field-input[_ngcontent-%COMP%] {\n font-size: 14px;\n font-family: inherit;\n color: var(--mj-text-primary);\n background: transparent;\n border: none;\n border-bottom: 1.5px solid var(--mj-border);\n padding: 4px 0;\n width: 100%;\n outline: none;\n transition: border-color var(--mj-transition) ease,\n background var(--mj-transition) ease;\n}\n\n.mj-forms-field-input[_ngcontent-%COMP%]:focus {\n border-bottom-color: var(--mj-accent);\n background: var(--mj-accent-light);\n border-radius: 4px 4px 0 0;\n padding: 4px 6px;\n}\n\n.mj-forms-field-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n\n\n.mj-forms-field-input--textarea[_ngcontent-%COMP%] {\n resize: vertical;\n min-height: 60px;\n border: 1.5px solid var(--mj-border);\n border-radius: 6px;\n padding: 8px 10px;\n background: white;\n font-family: inherit;\n}\n\n.mj-forms-field-input--textarea[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-accent);\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n background: white;\n padding: 8px 10px;\n border-radius: 6px;\n}\n\n\n\n.mj-forms-field-input--number[_ngcontent-%COMP%] {\n max-width: 200px;\n}\n\n\n\n.mj-forms-field-input--date[_ngcontent-%COMP%] {\n max-width: 220px;\n}\n\n\n\n\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n appearance: none;\n width: 18px;\n height: 18px;\n border: 2px solid var(--mj-border);\n border-radius: 4px;\n cursor: pointer;\n position: relative;\n transition: all var(--mj-transition) ease;\n flex-shrink: 0;\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%]:checked {\n background: var(--mj-accent);\n border-color: var(--mj-accent);\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%]:checked::after {\n content: '';\n position: absolute;\n left: 5px;\n top: 1px;\n width: 5px;\n height: 9px;\n border: solid white;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n\n\n\n\n.mj-custom-select-trigger[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n font-family: inherit;\n color: var(--mj-text-primary);\n background: transparent;\n border: none;\n border-bottom: 1.5px solid var(--mj-border);\n padding: 4px 0;\n width: 100%;\n cursor: pointer;\n outline: none;\n transition: border-color var(--mj-transition) ease,\n background var(--mj-transition) ease;\n}\n\n.mj-custom-select-trigger[_ngcontent-%COMP%]:focus {\n border-bottom-color: var(--mj-accent);\n background: var(--mj-accent-light);\n border-radius: 4px 4px 0 0;\n padding: 4px 6px;\n}\n\n.mj-custom-select-value[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.mj-custom-select-value--placeholder[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n.mj-custom-select-chevron[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n transition: transform var(--mj-transition) ease;\n flex-shrink: 0;\n margin-left: 8px;\n}\n\n.mj-custom-select-chevron--open[_ngcontent-%COMP%] {\n transform: rotate(180deg);\n}\n\n\n\n\n\n.mj-fk-search[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n}\n\n.mj-fk-search[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%] {\n padding-right: 28px;\n}\n\n.mj-fk-search-icon[_ngcontent-%COMP%] {\n position: absolute;\n right: 4px;\n color: var(--mj-text-muted);\n font-size: 12px;\n pointer-events: none;\n}\n\n.mj-fk-clear[_ngcontent-%COMP%] {\n position: absolute;\n right: 2px;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 11px;\n padding: 4px 6px;\n line-height: 1;\n border-radius: 3px;\n transition: all var(--mj-transition);\n}\n\n.mj-fk-clear[_ngcontent-%COMP%]:hover {\n color: var(--mj-error);\n background: rgba(239, 68, 68, 0.08);\n}\n\n\n\n.mj-fk-search--matched[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%] {\n border-bottom: 2px solid var(--mj-accent);\n}\n\n\n\n\n\n.mj-fk-dropdown[_ngcontent-%COMP%] {\n background: var(--mj-card-bg);\n border: 1px solid var(--mj-border);\n border-radius: 8px;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);\n max-height: 240px;\n overflow-y: auto;\n padding: 4px;\n animation: _ngcontent-%COMP%_mj-dropdown-in 150ms ease;\n}\n\n.mj-fk-dropdown--above[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_mj-dropdown-in-above 150ms ease;\n}\n\n.mj-fk-option[_ngcontent-%COMP%] {\n padding: 10px 14px;\n font-size: 14px;\n color: var(--mj-text-primary);\n cursor: pointer;\n transition: background var(--mj-transition);\n border-radius: 6px;\n}\n\n.mj-fk-option[_ngcontent-%COMP%]:hover {\n background: var(--mj-accent-light);\n}\n\n.mj-fk-option--selected[_ngcontent-%COMP%] {\n background: var(--mj-accent-light);\n font-weight: 600;\n color: var(--mj-accent);\n}\n\n.mj-fk-option--selected[_ngcontent-%COMP%]:hover {\n background: rgba(102, 126, 234, 0.15);\n}\n\n@keyframes _ngcontent-%COMP%_mj-dropdown-in {\n from { opacity: 0; transform: translateY(-4px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes _ngcontent-%COMP%_mj-dropdown-in-above {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n\n\n\n\n.mj-forms-field-label[_ngcontent-%COMP%] [_ngcontent-%COMP%]:global(.mj-forms-search-highlight) {\n background-color: #fef08a;\n color: #854d0e;\n padding: 0;\n border-radius: 2px;\n font-weight: 700;\n box-shadow: 0 0 0 2px #fef08a;\n}\n\n\n\n\n\n.mj-forms-field--has-error[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-error);\n border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%]:focus {\n background: #fef2f2;\n border-bottom-color: var(--mj-error);\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%] .mj-forms-field-input--textarea[_ngcontent-%COMP%] {\n border-color: var(--mj-error);\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%] .mj-forms-field-input--textarea[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-error);\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%] .mj-custom-select-trigger[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-error);\n border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%] .mj-fk-search[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-error);\n border-bottom-width: 2px;\n}\n\n\n\n\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-warning);\n border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%]:focus {\n background: #fffbeb;\n border-bottom-color: var(--mj-warning);\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%] .mj-forms-field-input--textarea[_ngcontent-%COMP%] {\n border-color: var(--mj-warning);\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%] .mj-forms-field-input--textarea[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-warning);\n box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08);\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%] .mj-custom-select-trigger[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-warning);\n border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%] .mj-fk-search[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-warning);\n border-bottom-width: 2px;\n}\n\n\n\n\n\n.mj-forms-field-validation[_ngcontent-%COMP%] {\n grid-column: 2;\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-top: -2px;\n overflow: hidden;\n animation: _ngcontent-%COMP%_mj-validation-slide-in 200ms ease-out;\n}\n\n.mj-forms-field-validation-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 6px;\n font-size: 12px;\n line-height: 1.4;\n padding: 3px 0 1px;\n}\n\n.mj-forms-field-validation-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n\n\n.mj-forms-field-validation--error[_ngcontent-%COMP%] .mj-forms-field-validation-item[_ngcontent-%COMP%] {\n color: var(--mj-error);\n}\n\n.mj-forms-field-validation--error[_ngcontent-%COMP%] .mj-forms-field-validation-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-error);\n}\n\n\n\n.mj-forms-field-validation--warning[_ngcontent-%COMP%] .mj-forms-field-validation-item[_ngcontent-%COMP%] {\n color: #b45309;\n}\n\n.mj-forms-field-validation--warning[_ngcontent-%COMP%] .mj-forms-field-validation-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-warning);\n}\n\n@keyframes _ngcontent-%COMP%_mj-validation-slide-in {\n from {\n opacity: 0;\n max-height: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n max-height: 100px;\n transform: translateY(0);\n }\n}\n\n\n\n\n\n@media (max-width: 640px) {\n .mj-forms-field[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 4px;\n }\n\n .mj-forms-field-label[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .mj-forms-field-validation[_ngcontent-%COMP%] {\n grid-column: 1;\n }\n}"], changeDetection: 0 });
|
|
1174
|
+
} }, dependencies: [i1.NgStyle], styles: ["\n\n\n\n[_nghost-%COMP%] {\n --mj-forms-field-label-width: 200px;\n --mj-forms-field-gap: 12px;\n\n display: contents;\n}\n\n.mj-forms-field[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: var(--mj-forms-field-label-width) 1fr;\n gap: var(--mj-forms-field-gap);\n align-items: baseline;\n padding: 8px 0;\n transition: all var(--mj-transition-base) ease;\n}\n\n\n\n.mj-forms-field--editing[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n border-radius: 6px;\n margin: 0 -8px;\n padding: 8px 8px;\n}\n\n\n\n\n\n.mj-forms-field-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n padding-top: 2px;\n word-break: break-word;\n}\n\n\n\n\n\n.mj-forms-field-control[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n}\n\n.mj-forms-field-control[_ngcontent-%COMP%] > *[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n\n\n\n\n.mj-forms-field--dirty[_ngcontent-%COMP%] .mj-forms-field-label[_ngcontent-%COMP%]::after {\n content: '';\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--mj-status-warning);\n margin-left: 6px;\n vertical-align: middle;\n}\n\n\n\n\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%]:focus {\n background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%] .mj-custom-select-trigger[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty[_ngcontent-%COMP%] .mj-fk-search[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-status-error);\n}\n\n\n\n\n\n.mj-forms-field-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-primary);\n min-height: 24px;\n display: flex;\n align-items: center;\n overflow-wrap: break-word;\n word-break: break-word;\n}\n\n.mj-forms-field-value--long[_ngcontent-%COMP%] {\n white-space: pre-line;\n max-height: 300px;\n overflow: auto;\n}\n\n\n\n.mj-forms-field--readonly[_ngcontent-%COMP%] {\n opacity: 0.7;\n}\n\n.mj-forms-field--readonly[_ngcontent-%COMP%] .mj-forms-field-value[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n\n\n\n\n.mj-forms-field-link[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: var(--mj-brand-primary);\n cursor: pointer;\n font-weight: 400;\n font-size: 14px;\n transition: color var(--mj-transition-base);\n text-decoration: none;\n}\n\n.mj-forms-field-link[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary-hover);\n}\n\n.mj-forms-field-link-icon[_ngcontent-%COMP%] {\n font-size: 11px;\n opacity: 0;\n transition: opacity var(--mj-transition-base);\n}\n\n.mj-forms-field-link[_ngcontent-%COMP%]:hover .mj-forms-field-link-icon[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n\n\n.mj-forms-field-link--fk[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 400;\n}\n\n\n\n\n\n.mj-forms-field-input[_ngcontent-%COMP%] {\n font-size: 14px;\n font-family: inherit;\n color: var(--mj-text-primary);\n background: transparent;\n border: none;\n border-bottom: 1.5px solid var(--mj-border-default);\n padding: 4px 0;\n width: 100%;\n outline: none;\n transition: border-color var(--mj-transition-base) ease,\n background var(--mj-transition-base) ease;\n}\n\n.mj-forms-field-input[_ngcontent-%COMP%]:focus {\n border-bottom-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n border-radius: 4px 4px 0 0;\n padding: 4px 6px;\n}\n\n.mj-forms-field-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n\n\n.mj-forms-field-input--textarea[_ngcontent-%COMP%] {\n resize: vertical;\n min-height: 60px;\n border: 1.5px solid var(--mj-border-default);\n border-radius: 6px;\n padding: 8px 10px;\n background: var(--mj-bg-surface);\n font-family: inherit;\n}\n\n.mj-forms-field-input--textarea[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n background: var(--mj-bg-surface);\n padding: 8px 10px;\n border-radius: 6px;\n}\n\n\n\n.mj-forms-field-input--number[_ngcontent-%COMP%] {\n max-width: 200px;\n}\n\n\n\n.mj-forms-field-input--date[_ngcontent-%COMP%] {\n max-width: 220px;\n}\n\n\n\n\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n appearance: none;\n width: 18px;\n height: 18px;\n border: 2px solid var(--mj-border-default);\n border-radius: 4px;\n cursor: pointer;\n position: relative;\n transition: all var(--mj-transition-base) ease;\n flex-shrink: 0;\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%]:checked {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%]:checked::after {\n content: '';\n position: absolute;\n left: 5px;\n top: 1px;\n width: 5px;\n height: 9px;\n border: solid var(--mj-text-inverse);\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n\n.mj-forms-field-checkbox[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n\n\n\n\n.mj-custom-select-trigger[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n font-family: inherit;\n color: var(--mj-text-primary);\n background: transparent;\n border: none;\n border-bottom: 1.5px solid var(--mj-border-default);\n padding: 4px 0;\n width: 100%;\n cursor: pointer;\n outline: none;\n transition: border-color var(--mj-transition-base) ease,\n background var(--mj-transition-base) ease;\n}\n\n.mj-custom-select-trigger[_ngcontent-%COMP%]:focus {\n border-bottom-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n border-radius: 4px 4px 0 0;\n padding: 4px 6px;\n}\n\n.mj-custom-select-value[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.mj-custom-select-value--placeholder[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n.mj-custom-select-chevron[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n transition: transform var(--mj-transition-base) ease;\n flex-shrink: 0;\n margin-left: 8px;\n}\n\n.mj-custom-select-chevron--open[_ngcontent-%COMP%] {\n transform: rotate(180deg);\n}\n\n\n\n\n\n.mj-fk-search[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n}\n\n.mj-fk-search[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%] {\n padding-right: 28px;\n}\n\n.mj-fk-search-icon[_ngcontent-%COMP%] {\n position: absolute;\n right: 4px;\n color: var(--mj-text-muted);\n font-size: 12px;\n pointer-events: none;\n}\n\n.mj-fk-clear[_ngcontent-%COMP%] {\n position: absolute;\n right: 2px;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 11px;\n padding: 4px 6px;\n line-height: 1;\n border-radius: 3px;\n transition: all var(--mj-transition-base);\n}\n\n.mj-fk-clear[_ngcontent-%COMP%]:hover {\n color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n}\n\n\n\n.mj-fk-search--matched[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%] {\n border-bottom: 2px solid var(--mj-brand-primary);\n}\n\n\n\n\n\n.mj-fk-dropdown[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n box-shadow: var(--mj-shadow-lg);\n max-height: 240px;\n overflow-y: auto;\n padding: 4px;\n animation: _ngcontent-%COMP%_mj-dropdown-in 150ms ease;\n}\n\n.mj-fk-dropdown--above[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_mj-dropdown-in-above 150ms ease;\n}\n\n.mj-fk-option[_ngcontent-%COMP%] {\n padding: 10px 14px;\n font-size: 14px;\n color: var(--mj-text-primary);\n cursor: pointer;\n transition: background var(--mj-transition-base);\n border-radius: 6px;\n}\n\n.mj-fk-option[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.mj-fk-option--selected[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n font-weight: 600;\n color: var(--mj-brand-primary);\n}\n\n.mj-fk-option--selected[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n@keyframes _ngcontent-%COMP%_mj-dropdown-in {\n from { opacity: 0; transform: translateY(-4px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes _ngcontent-%COMP%_mj-dropdown-in-above {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n\n\n\n\n.mj-forms-field-label[_ngcontent-%COMP%] [_ngcontent-%COMP%]:global(.mj-forms-search-highlight) {\n background-color: var(--mj-color-warning-200, #fef08a);\n color: var(--mj-color-warning-800, #854d0e);\n padding: 0;\n border-radius: 2px;\n font-weight: 700;\n box-shadow: 0 0 0 2px var(--mj-color-warning-200, #fef08a);\n}\n\n\n\n\n\n.mj-forms-field--has-error[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-status-error);\n border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%]:focus {\n background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%] .mj-forms-field-input--textarea[_ngcontent-%COMP%] {\n border-color: var(--mj-status-error);\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%] .mj-forms-field-input--textarea[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-status-error);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%] .mj-custom-select-trigger[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-status-error);\n border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error[_ngcontent-%COMP%] .mj-fk-search[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-status-error);\n border-bottom-width: 2px;\n}\n\n\n\n\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-status-warning);\n border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%]:focus {\n background: color-mix(in srgb, var(--mj-status-warning) 5%, var(--mj-bg-surface));\n border-bottom-color: var(--mj-status-warning);\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%] .mj-forms-field-input--textarea[_ngcontent-%COMP%] {\n border-color: var(--mj-status-warning);\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%] .mj-forms-field-input--textarea[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-status-warning);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-warning) 8%, transparent);\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%] .mj-custom-select-trigger[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-status-warning);\n border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning[_ngcontent-%COMP%] .mj-fk-search[_ngcontent-%COMP%] .mj-forms-field-input[_ngcontent-%COMP%] {\n border-bottom-color: var(--mj-status-warning);\n border-bottom-width: 2px;\n}\n\n\n\n\n\n.mj-forms-field-validation[_ngcontent-%COMP%] {\n grid-column: 2;\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-top: -2px;\n overflow: hidden;\n animation: _ngcontent-%COMP%_mj-validation-slide-in 200ms ease-out;\n}\n\n.mj-forms-field-validation-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 6px;\n font-size: 12px;\n line-height: 1.4;\n padding: 3px 0 1px;\n}\n\n.mj-forms-field-validation-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n\n\n.mj-forms-field-validation--error[_ngcontent-%COMP%] .mj-forms-field-validation-item[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.mj-forms-field-validation--error[_ngcontent-%COMP%] .mj-forms-field-validation-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n\n\n.mj-forms-field-validation--warning[_ngcontent-%COMP%] .mj-forms-field-validation-item[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-700);\n}\n\n.mj-forms-field-validation--warning[_ngcontent-%COMP%] .mj-forms-field-validation-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n@keyframes _ngcontent-%COMP%_mj-validation-slide-in {\n from {\n opacity: 0;\n max-height: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n max-height: 100px;\n transform: translateY(0);\n }\n}\n\n\n\n\n\n@media (max-width: 640px) {\n .mj-forms-field[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 4px;\n }\n\n .mj-forms-field-label[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .mj-forms-field-validation[_ngcontent-%COMP%] {\n grid-column: 1;\n }\n}"], changeDetection: 0 });
|
|
1175
1175
|
}
|
|
1176
1176
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjFormFieldComponent, [{
|
|
1177
1177
|
type: Component,
|
|
1178
|
-
args: [{ standalone: false, selector: 'mj-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (Record && (Record.IsSaved || !IsFieldReadOnly)) {\n <!-- READ-ONLY MODE -->\n @if ((!EditMode || IsFieldReadOnly) && !ShouldHideField) {\n <div class=\"mj-forms-field\" [class.mj-forms-field--readonly]=\"EditMode && IsFieldReadOnly\" [class.mj-forms-field--dirty]=\"IsDirty\">\n @if (ShowLabel) {\n <label class=\"mj-forms-field-label\" [innerHTML]=\"HighlightedDisplayName\"></label>\n }\n <div class=\"mj-forms-field-control\">\n <!-- FK fields with a mapped name field: show the name as a hyperlink -->\n @if (IsFKWithNameField) {\n <span class=\"mj-forms-field-value\">\n <a class=\"mj-forms-field-link mj-forms-field-link--fk\" (click)=\"OnRecordLinkClick($event)\" title=\"View related record\">\n {{ FKDisplayName }}\n </a>\n </span>\n }\n @else {\n @switch (LinkType) {\n @case ('Email') {\n <span class=\"mj-forms-field-value\">\n <a class=\"mj-forms-field-link\" (click)=\"OnEmailLinkClick($event)\" title=\"Send email\">\n {{ FormatValue() }}\n <i class=\"fa-solid fa-envelope mj-forms-field-link-icon\"></i>\n </a>\n </span>\n }\n @case ('URL') {\n <span class=\"mj-forms-field-value\">\n <a class=\"mj-forms-field-link\" (click)=\"OnUrlLinkClick($event)\" title=\"Open link\">\n {{ FormatValue() }}\n <i class=\"fa-solid fa-arrow-up-right-from-square mj-forms-field-link-icon\"></i>\n </a>\n </span>\n }\n @case ('Record') {\n <span class=\"mj-forms-field-value\">\n <a class=\"mj-forms-field-link\" (click)=\"OnRecordLinkClick($event)\" title=\"View related record\">\n {{ FormatValue() }}\n <i class=\"fa-solid fa-arrow-up-right-from-square mj-forms-field-link-icon\"></i>\n </a>\n </span>\n }\n @default {\n @if (Type === 'checkbox') {\n <span class=\"mj-forms-field-value\">\n <div class=\"mj-forms-field-checkbox\">\n <input type=\"checkbox\" [checked]=\"!!Value\" disabled>\n </div>\n </span>\n }\n @else if (IsLongText) {\n <span class=\"mj-forms-field-value mj-forms-field-value--long\">{{ FormatValue() }}</span>\n }\n @else {\n <span class=\"mj-forms-field-value\">{{ FormatValue() }}</span>\n }\n }\n }\n }\n </div>\n </div>\n }\n\n <!-- EDIT MODE -->\n @if (EditMode && !IsFieldReadOnly) {\n <div class=\"mj-forms-field mj-forms-field--editing\" [class.mj-forms-field--dirty]=\"IsDirty\" [class.mj-forms-field--required-empty]=\"IsRequiredEmpty\" [class.mj-forms-field--has-error]=\"ShowErrors\" [class.mj-forms-field--has-warning]=\"ShowWarnings\">\n @if (ShowLabel) {\n <label class=\"mj-forms-field-label\" [innerHTML]=\"HighlightedDisplayName\"></label>\n }\n <div class=\"mj-forms-field-control\">\n <!-- Foreign Key fields get custom search autocomplete -->\n @if (HasRelatedEntity) {\n <div class=\"mj-fk-search\" [class.mj-fk-search--matched]=\"FKIsMatched\">\n <input type=\"text\"\n class=\"mj-forms-field-input\"\n [value]=\"FKSearchText\"\n (input)=\"OnFKInput($event)\"\n (focus)=\"OnFKFocus($event)\"\n (blur)=\"OnFKBlur()\"\n placeholder=\"Search...\">\n @if (FKSearchText) {\n <button class=\"mj-fk-clear\" (mousedown)=\"OnFKClearClick($event)\" title=\"Clear\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n } @else {\n <i class=\"fa-solid fa-magnifying-glass mj-fk-search-icon\"></i>\n }\n @if (ShowFKDropdown && FKSuggestions.length > 0) {\n <div class=\"mj-fk-dropdown\" [ngStyle]=\"DropdownPositionStyle\" [class.mj-fk-dropdown--above]=\"OpenAbove\">\n @for (suggestion of FKSuggestions; track suggestion.PrimaryKeyValue) {\n <div class=\"mj-fk-option\" (mousedown)=\"OnFKSelectItem(suggestion, $event)\">\n {{ suggestion.DisplayName }}\n </div>\n }\n </div>\n }\n </div>\n }\n @else {\n @switch (Type) {\n @case ('textbox') {\n <input type=\"text\"\n class=\"mj-forms-field-input\"\n [value]=\"FormatValue()\"\n (input)=\"OnInputChange($event)\">\n }\n @case ('textarea') {\n <textarea\n class=\"mj-forms-field-input mj-forms-field-input--textarea\"\n [value]=\"FormatValue()\"\n (input)=\"OnInputChange($event)\"></textarea>\n }\n @case ('number') {\n <input type=\"number\"\n class=\"mj-forms-field-input mj-forms-field-input--number\"\n [value]=\"Value\"\n (change)=\"OnNumberChange($event)\">\n }\n @case ('datepicker') {\n <input type=\"date\"\n class=\"mj-forms-field-input mj-forms-field-input--date\"\n [value]=\"DateInputValue\"\n (change)=\"OnDateChange($event)\">\n }\n @case ('checkbox') {\n <div class=\"mj-forms-field-checkbox\">\n <input type=\"checkbox\"\n [checked]=\"!!Value\"\n (change)=\"OnCheckboxChange($event)\">\n </div>\n }\n @case ('select') {\n <div class=\"mj-custom-select-trigger\"\n tabindex=\"0\"\n (click)=\"OnSelectTriggerClick($event)\"\n (blur)=\"OnSelectTriggerBlur()\">\n <span class=\"mj-custom-select-value\" [class.mj-custom-select-value--placeholder]=\"!FormatValue()\">\n {{ FormatValue() || '-- Select --' }}\n </span>\n <i class=\"fa-solid fa-chevron-down mj-custom-select-chevron\" [class.mj-custom-select-chevron--open]=\"ShowSelectDropdown\"></i>\n </div>\n @if (ShowSelectDropdown && PossibleValues.length > 0) {\n <div class=\"mj-fk-dropdown\" [ngStyle]=\"DropdownPositionStyle\" [class.mj-fk-dropdown--above]=\"OpenAbove\">\n @for (option of PossibleValues; track option) {\n <div class=\"mj-fk-option\" [class.mj-fk-option--selected]=\"FormatValue() === option\" (mousedown)=\"OnSelectOptionClick(option, $event)\">\n {{ option }}\n </div>\n }\n </div>\n }\n }\n @case ('autocomplete') {\n <div class=\"mj-fk-search\">\n <input type=\"text\"\n class=\"mj-forms-field-input\"\n [value]=\"FormatValue()\"\n (input)=\"OnValueListInput($event)\"\n (focus)=\"OnValueListFocus($event)\"\n (blur)=\"OnValueListBlur()\"\n placeholder=\"Type to search...\">\n <i class=\"fa-solid fa-magnifying-glass mj-fk-search-icon\"></i>\n @if (ShowValueListDropdown && FilteredPossibleValues.length > 0) {\n <div class=\"mj-fk-dropdown\" [ngStyle]=\"DropdownPositionStyle\" [class.mj-fk-dropdown--above]=\"OpenAbove\">\n @for (option of FilteredPossibleValues; track option) {\n <div class=\"mj-fk-option\" (mousedown)=\"OnValueListSelect(option, $event)\">\n {{ option }}\n </div>\n }\n </div>\n }\n </div>\n }\n @default {\n <input type=\"text\"\n class=\"mj-forms-field-input\"\n [value]=\"FormatValue()\"\n (change)=\"OnInputChange($event)\">\n }\n }\n }\n </div>\n <!-- Inline validation messages -->\n @if (DisplayErrors.length > 0) {\n <div class=\"mj-forms-field-validation mj-forms-field-validation--error\">\n @for (error of DisplayErrors; track error.Message) {\n <div class=\"mj-forms-field-validation-item\">\n <i class=\"fa-solid fa-circle-exclamation\"></i>\n <span>{{ error.Message }}</span>\n </div>\n }\n </div>\n }\n @if (DisplayWarnings.length > 0) {\n <div class=\"mj-forms-field-validation mj-forms-field-validation--warning\">\n @for (warning of DisplayWarnings; track warning.Message) {\n <div class=\"mj-forms-field-validation-item\">\n <i class=\"fa-solid fa-triangle-exclamation\"></i>\n <span>{{ warning.Message }}</span>\n </div>\n }\n </div>\n }\n </div>\n }\n}\n", styles: ["/* ============================================\n FORM FIELD - Shared styles for read and edit\n ============================================ */\n:host {\n --mj-accent: #667eea;\n --mj-accent-light: rgba(102, 126, 234, 0.08);\n --mj-text-primary: #1f2937;\n --mj-text-secondary: #4b5563;\n --mj-text-muted: #9ca3af;\n --mj-border: #e5e7eb;\n --mj-error: #ef4444;\n --mj-warning: #f59e0b;\n --mj-card-bg: #ffffff;\n --mj-forms-field-label-width: 200px;\n --mj-forms-field-gap: 12px;\n --mj-transition: 200ms;\n\n display: contents;\n}\n\n.mj-forms-field {\n display: grid;\n grid-template-columns: var(--mj-forms-field-label-width) 1fr;\n gap: var(--mj-forms-field-gap);\n align-items: baseline;\n padding: 8px 0;\n transition: all var(--mj-transition) ease;\n}\n\n/* Subtle row hover in edit mode */\n.mj-forms-field--editing:hover {\n background: var(--mj-accent-light);\n border-radius: 6px;\n margin: 0 -8px;\n padding: 8px 8px;\n}\n\n/* ============================================\n LABEL\n ============================================ */\n.mj-forms-field-label {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n padding-top: 2px;\n word-break: break-word;\n}\n\n/* ============================================\n FIELD CONTROL WRAPPER (value + dirty dot)\n ============================================ */\n.mj-forms-field-control {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n}\n\n.mj-forms-field-control > * {\n flex: 1;\n min-width: 0;\n}\n\n/* ============================================\n DIRTY INDICATOR (solid amber dot after label)\n ============================================ */\n.mj-forms-field--dirty .mj-forms-field-label::after {\n content: '';\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--mj-warning);\n margin-left: 6px;\n vertical-align: middle;\n}\n\n/* ============================================\n REQUIRED FIELD - red underline when empty\n ============================================ */\n.mj-forms-field--required-empty .mj-forms-field-input {\n border-bottom-color: var(--mj-error);\n}\n\n.mj-forms-field--required-empty .mj-forms-field-input:focus {\n background: #fef2f2;\n border-bottom-color: var(--mj-error);\n}\n\n.mj-forms-field--required-empty .mj-custom-select-trigger {\n border-bottom-color: var(--mj-error);\n}\n\n.mj-forms-field--required-empty .mj-fk-search .mj-forms-field-input {\n border-bottom-color: var(--mj-error);\n}\n\n/* ============================================\n READ-ONLY VALUE\n ============================================ */\n.mj-forms-field-value {\n font-size: 14px;\n color: var(--mj-text-primary);\n min-height: 24px;\n display: flex;\n align-items: center;\n overflow-wrap: break-word;\n word-break: break-word;\n}\n\n.mj-forms-field-value--long {\n white-space: pre-line;\n max-height: 300px;\n overflow: auto;\n}\n\n/* Read-only fields in edit mode */\n.mj-forms-field--readonly {\n opacity: 0.7;\n}\n\n.mj-forms-field--readonly .mj-forms-field-value {\n color: var(--mj-text-secondary);\n}\n\n/* ============================================\n LINKS (FK, email, URL)\n ============================================ */\n.mj-forms-field-link {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: var(--mj-accent);\n cursor: pointer;\n font-weight: 400;\n font-size: 14px;\n transition: color var(--mj-transition);\n text-decoration: none;\n}\n\n.mj-forms-field-link:hover {\n color: #5a6fd6;\n}\n\n.mj-forms-field-link-icon {\n font-size: 11px;\n opacity: 0;\n transition: opacity var(--mj-transition);\n}\n\n.mj-forms-field-link:hover .mj-forms-field-link-icon {\n opacity: 1;\n}\n\n/* FK fields showing entity name instead of raw ID */\n.mj-forms-field-link--fk {\n font-size: 14px;\n font-weight: 400;\n}\n\n/* ============================================\n EDIT MODE INPUTS - Clean underline style\n ============================================ */\n.mj-forms-field-input {\n font-size: 14px;\n font-family: inherit;\n color: var(--mj-text-primary);\n background: transparent;\n border: none;\n border-bottom: 1.5px solid var(--mj-border);\n padding: 4px 0;\n width: 100%;\n outline: none;\n transition: border-color var(--mj-transition) ease,\n background var(--mj-transition) ease;\n}\n\n.mj-forms-field-input:focus {\n border-bottom-color: var(--mj-accent);\n background: var(--mj-accent-light);\n border-radius: 4px 4px 0 0;\n padding: 4px 6px;\n}\n\n.mj-forms-field-input::placeholder {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n/* Textarea variant */\n.mj-forms-field-input--textarea {\n resize: vertical;\n min-height: 60px;\n border: 1.5px solid var(--mj-border);\n border-radius: 6px;\n padding: 8px 10px;\n background: white;\n font-family: inherit;\n}\n\n.mj-forms-field-input--textarea:focus {\n border-color: var(--mj-accent);\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n background: white;\n padding: 8px 10px;\n border-radius: 6px;\n}\n\n/* Number input - narrower */\n.mj-forms-field-input--number {\n max-width: 200px;\n}\n\n/* Date input - narrower */\n.mj-forms-field-input--date {\n max-width: 220px;\n}\n\n/* ============================================\n CHECKBOX (custom styled)\n ============================================ */\n.mj-forms-field-checkbox {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"] {\n appearance: none;\n width: 18px;\n height: 18px;\n border: 2px solid var(--mj-border);\n border-radius: 4px;\n cursor: pointer;\n position: relative;\n transition: all var(--mj-transition) ease;\n flex-shrink: 0;\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"]:checked {\n background: var(--mj-accent);\n border-color: var(--mj-accent);\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"]:checked::after {\n content: '';\n position: absolute;\n left: 5px;\n top: 1px;\n width: 5px;\n height: 9px;\n border: solid white;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"]:disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n/* ============================================\n CUSTOM SELECT DROPDOWN (replaces native <select>)\n ============================================ */\n.mj-custom-select-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n font-family: inherit;\n color: var(--mj-text-primary);\n background: transparent;\n border: none;\n border-bottom: 1.5px solid var(--mj-border);\n padding: 4px 0;\n width: 100%;\n cursor: pointer;\n outline: none;\n transition: border-color var(--mj-transition) ease,\n background var(--mj-transition) ease;\n}\n\n.mj-custom-select-trigger:focus {\n border-bottom-color: var(--mj-accent);\n background: var(--mj-accent-light);\n border-radius: 4px 4px 0 0;\n padding: 4px 6px;\n}\n\n.mj-custom-select-value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.mj-custom-select-value--placeholder {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n.mj-custom-select-chevron {\n font-size: 11px;\n color: var(--mj-text-muted);\n transition: transform var(--mj-transition) ease;\n flex-shrink: 0;\n margin-left: 8px;\n}\n\n.mj-custom-select-chevron--open {\n transform: rotate(180deg);\n}\n\n/* ============================================\n FK SEARCH (custom autocomplete)\n ============================================ */\n.mj-fk-search {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n}\n\n.mj-fk-search .mj-forms-field-input {\n padding-right: 28px;\n}\n\n.mj-fk-search-icon {\n position: absolute;\n right: 4px;\n color: var(--mj-text-muted);\n font-size: 12px;\n pointer-events: none;\n}\n\n.mj-fk-clear {\n position: absolute;\n right: 2px;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 11px;\n padding: 4px 6px;\n line-height: 1;\n border-radius: 3px;\n transition: all var(--mj-transition);\n}\n\n.mj-fk-clear:hover {\n color: var(--mj-error);\n background: rgba(239, 68, 68, 0.08);\n}\n\n/* Matched state: solid accent underline */\n.mj-fk-search--matched .mj-forms-field-input {\n border-bottom: 2px solid var(--mj-accent);\n}\n\n/* ============================================\n FLOATING DROPDOWN PANEL (position: fixed via ngStyle)\n ============================================ */\n.mj-fk-dropdown {\n background: var(--mj-card-bg);\n border: 1px solid var(--mj-border);\n border-radius: 8px;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);\n max-height: 240px;\n overflow-y: auto;\n padding: 4px;\n animation: mj-dropdown-in 150ms ease;\n}\n\n.mj-fk-dropdown--above {\n animation: mj-dropdown-in-above 150ms ease;\n}\n\n.mj-fk-option {\n padding: 10px 14px;\n font-size: 14px;\n color: var(--mj-text-primary);\n cursor: pointer;\n transition: background var(--mj-transition);\n border-radius: 6px;\n}\n\n.mj-fk-option:hover {\n background: var(--mj-accent-light);\n}\n\n.mj-fk-option--selected {\n background: var(--mj-accent-light);\n font-weight: 600;\n color: var(--mj-accent);\n}\n\n.mj-fk-option--selected:hover {\n background: rgba(102, 126, 234, 0.15);\n}\n\n@keyframes mj-dropdown-in {\n from { opacity: 0; transform: translateY(-4px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes mj-dropdown-in-above {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n/* ============================================\n SEARCH HIGHLIGHTING\n ============================================ */\n.mj-forms-field-label :global(.mj-forms-search-highlight) {\n background-color: #fef08a;\n color: #854d0e;\n padding: 0;\n border-radius: 2px;\n font-weight: 700;\n box-shadow: 0 0 0 2px #fef08a;\n}\n\n/* ============================================\n VALIDATION ERROR STATE\n ============================================ */\n.mj-forms-field--has-error .mj-forms-field-input {\n border-bottom-color: var(--mj-error);\n border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error .mj-forms-field-input:focus {\n background: #fef2f2;\n border-bottom-color: var(--mj-error);\n}\n\n.mj-forms-field--has-error .mj-forms-field-input--textarea {\n border-color: var(--mj-error);\n}\n\n.mj-forms-field--has-error .mj-forms-field-input--textarea:focus {\n border-color: var(--mj-error);\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);\n}\n\n.mj-forms-field--has-error .mj-custom-select-trigger {\n border-bottom-color: var(--mj-error);\n border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error .mj-fk-search .mj-forms-field-input {\n border-bottom-color: var(--mj-error);\n border-bottom-width: 2px;\n}\n\n/* ============================================\n VALIDATION WARNING STATE\n ============================================ */\n.mj-forms-field--has-warning .mj-forms-field-input {\n border-bottom-color: var(--mj-warning);\n border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning .mj-forms-field-input:focus {\n background: #fffbeb;\n border-bottom-color: var(--mj-warning);\n}\n\n.mj-forms-field--has-warning .mj-forms-field-input--textarea {\n border-color: var(--mj-warning);\n}\n\n.mj-forms-field--has-warning .mj-forms-field-input--textarea:focus {\n border-color: var(--mj-warning);\n box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08);\n}\n\n.mj-forms-field--has-warning .mj-custom-select-trigger {\n border-bottom-color: var(--mj-warning);\n border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning .mj-fk-search .mj-forms-field-input {\n border-bottom-color: var(--mj-warning);\n border-bottom-width: 2px;\n}\n\n/* ============================================\n VALIDATION MESSAGE AREA\n ============================================ */\n.mj-forms-field-validation {\n grid-column: 2;\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-top: -2px;\n overflow: hidden;\n animation: mj-validation-slide-in 200ms ease-out;\n}\n\n.mj-forms-field-validation-item {\n display: flex;\n align-items: flex-start;\n gap: 6px;\n font-size: 12px;\n line-height: 1.4;\n padding: 3px 0 1px;\n}\n\n.mj-forms-field-validation-item i {\n font-size: 11px;\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n/* Error message colors */\n.mj-forms-field-validation--error .mj-forms-field-validation-item {\n color: var(--mj-error);\n}\n\n.mj-forms-field-validation--error .mj-forms-field-validation-item i {\n color: var(--mj-error);\n}\n\n/* Warning message colors */\n.mj-forms-field-validation--warning .mj-forms-field-validation-item {\n color: #b45309;\n}\n\n.mj-forms-field-validation--warning .mj-forms-field-validation-item i {\n color: var(--mj-warning);\n}\n\n@keyframes mj-validation-slide-in {\n from {\n opacity: 0;\n max-height: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n max-height: 100px;\n transform: translateY(0);\n }\n}\n\n/* ============================================\n RESPONSIVE\n ============================================ */\n@media (max-width: 640px) {\n .mj-forms-field {\n grid-template-columns: 1fr;\n gap: 4px;\n }\n\n .mj-forms-field-label {\n font-size: 12px;\n }\n\n .mj-forms-field-validation {\n grid-column: 1;\n }\n}\n"] }]
|
|
1178
|
+
args: [{ standalone: false, selector: 'mj-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (Record && (Record.IsSaved || !IsFieldReadOnly)) {\n <!-- READ-ONLY MODE -->\n @if ((!EditMode || IsFieldReadOnly) && !ShouldHideField) {\n <div class=\"mj-forms-field\" [class.mj-forms-field--readonly]=\"EditMode && IsFieldReadOnly\" [class.mj-forms-field--dirty]=\"IsDirty\">\n @if (ShowLabel) {\n <label class=\"mj-forms-field-label\" [innerHTML]=\"HighlightedDisplayName\"></label>\n }\n <div class=\"mj-forms-field-control\">\n <!-- FK fields with a mapped name field: show the name as a hyperlink -->\n @if (IsFKWithNameField) {\n <span class=\"mj-forms-field-value\">\n <a class=\"mj-forms-field-link mj-forms-field-link--fk\" (click)=\"OnRecordLinkClick($event)\" title=\"View related record\">\n {{ FKDisplayName }}\n </a>\n </span>\n }\n @else {\n @switch (LinkType) {\n @case ('Email') {\n <span class=\"mj-forms-field-value\">\n <a class=\"mj-forms-field-link\" (click)=\"OnEmailLinkClick($event)\" title=\"Send email\">\n {{ FormatValue() }}\n <i class=\"fa-solid fa-envelope mj-forms-field-link-icon\"></i>\n </a>\n </span>\n }\n @case ('URL') {\n <span class=\"mj-forms-field-value\">\n <a class=\"mj-forms-field-link\" (click)=\"OnUrlLinkClick($event)\" title=\"Open link\">\n {{ FormatValue() }}\n <i class=\"fa-solid fa-arrow-up-right-from-square mj-forms-field-link-icon\"></i>\n </a>\n </span>\n }\n @case ('Record') {\n <span class=\"mj-forms-field-value\">\n <a class=\"mj-forms-field-link\" (click)=\"OnRecordLinkClick($event)\" title=\"View related record\">\n {{ FormatValue() }}\n <i class=\"fa-solid fa-arrow-up-right-from-square mj-forms-field-link-icon\"></i>\n </a>\n </span>\n }\n @default {\n @if (Type === 'checkbox') {\n <span class=\"mj-forms-field-value\">\n <div class=\"mj-forms-field-checkbox\">\n <input type=\"checkbox\" [checked]=\"!!Value\" disabled>\n </div>\n </span>\n }\n @else if (IsLongText) {\n <span class=\"mj-forms-field-value mj-forms-field-value--long\">{{ FormatValue() }}</span>\n }\n @else {\n <span class=\"mj-forms-field-value\">{{ FormatValue() }}</span>\n }\n }\n }\n }\n </div>\n </div>\n }\n\n <!-- EDIT MODE -->\n @if (EditMode && !IsFieldReadOnly) {\n <div class=\"mj-forms-field mj-forms-field--editing\" [class.mj-forms-field--dirty]=\"IsDirty\" [class.mj-forms-field--required-empty]=\"IsRequiredEmpty\" [class.mj-forms-field--has-error]=\"ShowErrors\" [class.mj-forms-field--has-warning]=\"ShowWarnings\">\n @if (ShowLabel) {\n <label class=\"mj-forms-field-label\" [innerHTML]=\"HighlightedDisplayName\"></label>\n }\n <div class=\"mj-forms-field-control\">\n <!-- Foreign Key fields get custom search autocomplete -->\n @if (HasRelatedEntity) {\n <div class=\"mj-fk-search\" [class.mj-fk-search--matched]=\"FKIsMatched\">\n <input type=\"text\"\n class=\"mj-forms-field-input\"\n [value]=\"FKSearchText\"\n (input)=\"OnFKInput($event)\"\n (focus)=\"OnFKFocus($event)\"\n (blur)=\"OnFKBlur()\"\n placeholder=\"Search...\">\n @if (FKSearchText) {\n <button class=\"mj-fk-clear\" (mousedown)=\"OnFKClearClick($event)\" title=\"Clear\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n } @else {\n <i class=\"fa-solid fa-magnifying-glass mj-fk-search-icon\"></i>\n }\n @if (ShowFKDropdown && FKSuggestions.length > 0) {\n <div class=\"mj-fk-dropdown\" [ngStyle]=\"DropdownPositionStyle\" [class.mj-fk-dropdown--above]=\"OpenAbove\">\n @for (suggestion of FKSuggestions; track suggestion.PrimaryKeyValue) {\n <div class=\"mj-fk-option\" (mousedown)=\"OnFKSelectItem(suggestion, $event)\">\n {{ suggestion.DisplayName }}\n </div>\n }\n </div>\n }\n </div>\n }\n @else {\n @switch (Type) {\n @case ('textbox') {\n <input type=\"text\"\n class=\"mj-forms-field-input\"\n [value]=\"FormatValue()\"\n (input)=\"OnInputChange($event)\">\n }\n @case ('textarea') {\n <textarea\n class=\"mj-forms-field-input mj-forms-field-input--textarea\"\n [value]=\"FormatValue()\"\n (input)=\"OnInputChange($event)\"></textarea>\n }\n @case ('number') {\n <input type=\"number\"\n class=\"mj-forms-field-input mj-forms-field-input--number\"\n [value]=\"Value\"\n (change)=\"OnNumberChange($event)\">\n }\n @case ('datepicker') {\n <input type=\"date\"\n class=\"mj-forms-field-input mj-forms-field-input--date\"\n [value]=\"DateInputValue\"\n (change)=\"OnDateChange($event)\">\n }\n @case ('checkbox') {\n <div class=\"mj-forms-field-checkbox\">\n <input type=\"checkbox\"\n [checked]=\"!!Value\"\n (change)=\"OnCheckboxChange($event)\">\n </div>\n }\n @case ('select') {\n <div class=\"mj-custom-select-trigger\"\n tabindex=\"0\"\n (click)=\"OnSelectTriggerClick($event)\"\n (blur)=\"OnSelectTriggerBlur()\">\n <span class=\"mj-custom-select-value\" [class.mj-custom-select-value--placeholder]=\"!FormatValue()\">\n {{ FormatValue() || '-- Select --' }}\n </span>\n <i class=\"fa-solid fa-chevron-down mj-custom-select-chevron\" [class.mj-custom-select-chevron--open]=\"ShowSelectDropdown\"></i>\n </div>\n @if (ShowSelectDropdown && PossibleValues.length > 0) {\n <div class=\"mj-fk-dropdown\" [ngStyle]=\"DropdownPositionStyle\" [class.mj-fk-dropdown--above]=\"OpenAbove\">\n @for (option of PossibleValues; track option) {\n <div class=\"mj-fk-option\" [class.mj-fk-option--selected]=\"FormatValue() === option\" (mousedown)=\"OnSelectOptionClick(option, $event)\">\n {{ option }}\n </div>\n }\n </div>\n }\n }\n @case ('autocomplete') {\n <div class=\"mj-fk-search\">\n <input type=\"text\"\n class=\"mj-forms-field-input\"\n [value]=\"FormatValue()\"\n (input)=\"OnValueListInput($event)\"\n (focus)=\"OnValueListFocus($event)\"\n (blur)=\"OnValueListBlur()\"\n placeholder=\"Type to search...\">\n <i class=\"fa-solid fa-magnifying-glass mj-fk-search-icon\"></i>\n @if (ShowValueListDropdown && FilteredPossibleValues.length > 0) {\n <div class=\"mj-fk-dropdown\" [ngStyle]=\"DropdownPositionStyle\" [class.mj-fk-dropdown--above]=\"OpenAbove\">\n @for (option of FilteredPossibleValues; track option) {\n <div class=\"mj-fk-option\" (mousedown)=\"OnValueListSelect(option, $event)\">\n {{ option }}\n </div>\n }\n </div>\n }\n </div>\n }\n @default {\n <input type=\"text\"\n class=\"mj-forms-field-input\"\n [value]=\"FormatValue()\"\n (change)=\"OnInputChange($event)\">\n }\n }\n }\n </div>\n <!-- Inline validation messages -->\n @if (DisplayErrors.length > 0) {\n <div class=\"mj-forms-field-validation mj-forms-field-validation--error\">\n @for (error of DisplayErrors; track error.Message) {\n <div class=\"mj-forms-field-validation-item\">\n <i class=\"fa-solid fa-circle-exclamation\"></i>\n <span>{{ error.Message }}</span>\n </div>\n }\n </div>\n }\n @if (DisplayWarnings.length > 0) {\n <div class=\"mj-forms-field-validation mj-forms-field-validation--warning\">\n @for (warning of DisplayWarnings; track warning.Message) {\n <div class=\"mj-forms-field-validation-item\">\n <i class=\"fa-solid fa-triangle-exclamation\"></i>\n <span>{{ warning.Message }}</span>\n </div>\n }\n </div>\n }\n </div>\n }\n}\n", styles: ["/* ============================================\n FORM FIELD - Shared styles for read and edit\n ============================================ */\n:host {\n --mj-forms-field-label-width: 200px;\n --mj-forms-field-gap: 12px;\n\n display: contents;\n}\n\n.mj-forms-field {\n display: grid;\n grid-template-columns: var(--mj-forms-field-label-width) 1fr;\n gap: var(--mj-forms-field-gap);\n align-items: baseline;\n padding: 8px 0;\n transition: all var(--mj-transition-base) ease;\n}\n\n/* Subtle row hover in edit mode */\n.mj-forms-field--editing:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n border-radius: 6px;\n margin: 0 -8px;\n padding: 8px 8px;\n}\n\n/* ============================================\n LABEL\n ============================================ */\n.mj-forms-field-label {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n padding-top: 2px;\n word-break: break-word;\n}\n\n/* ============================================\n FIELD CONTROL WRAPPER (value + dirty dot)\n ============================================ */\n.mj-forms-field-control {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n}\n\n.mj-forms-field-control > * {\n flex: 1;\n min-width: 0;\n}\n\n/* ============================================\n DIRTY INDICATOR (solid amber dot after label)\n ============================================ */\n.mj-forms-field--dirty .mj-forms-field-label::after {\n content: '';\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--mj-status-warning);\n margin-left: 6px;\n vertical-align: middle;\n}\n\n/* ============================================\n REQUIRED FIELD - red underline when empty\n ============================================ */\n.mj-forms-field--required-empty .mj-forms-field-input {\n border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty .mj-forms-field-input:focus {\n background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty .mj-custom-select-trigger {\n border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--required-empty .mj-fk-search .mj-forms-field-input {\n border-bottom-color: var(--mj-status-error);\n}\n\n/* ============================================\n READ-ONLY VALUE\n ============================================ */\n.mj-forms-field-value {\n font-size: 14px;\n color: var(--mj-text-primary);\n min-height: 24px;\n display: flex;\n align-items: center;\n overflow-wrap: break-word;\n word-break: break-word;\n}\n\n.mj-forms-field-value--long {\n white-space: pre-line;\n max-height: 300px;\n overflow: auto;\n}\n\n/* Read-only fields in edit mode */\n.mj-forms-field--readonly {\n opacity: 0.7;\n}\n\n.mj-forms-field--readonly .mj-forms-field-value {\n color: var(--mj-text-secondary);\n}\n\n/* ============================================\n LINKS (FK, email, URL)\n ============================================ */\n.mj-forms-field-link {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: var(--mj-brand-primary);\n cursor: pointer;\n font-weight: 400;\n font-size: 14px;\n transition: color var(--mj-transition-base);\n text-decoration: none;\n}\n\n.mj-forms-field-link:hover {\n color: var(--mj-brand-primary-hover);\n}\n\n.mj-forms-field-link-icon {\n font-size: 11px;\n opacity: 0;\n transition: opacity var(--mj-transition-base);\n}\n\n.mj-forms-field-link:hover .mj-forms-field-link-icon {\n opacity: 1;\n}\n\n/* FK fields showing entity name instead of raw ID */\n.mj-forms-field-link--fk {\n font-size: 14px;\n font-weight: 400;\n}\n\n/* ============================================\n EDIT MODE INPUTS - Clean underline style\n ============================================ */\n.mj-forms-field-input {\n font-size: 14px;\n font-family: inherit;\n color: var(--mj-text-primary);\n background: transparent;\n border: none;\n border-bottom: 1.5px solid var(--mj-border-default);\n padding: 4px 0;\n width: 100%;\n outline: none;\n transition: border-color var(--mj-transition-base) ease,\n background var(--mj-transition-base) ease;\n}\n\n.mj-forms-field-input:focus {\n border-bottom-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n border-radius: 4px 4px 0 0;\n padding: 4px 6px;\n}\n\n.mj-forms-field-input::placeholder {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n/* Textarea variant */\n.mj-forms-field-input--textarea {\n resize: vertical;\n min-height: 60px;\n border: 1.5px solid var(--mj-border-default);\n border-radius: 6px;\n padding: 8px 10px;\n background: var(--mj-bg-surface);\n font-family: inherit;\n}\n\n.mj-forms-field-input--textarea:focus {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n background: var(--mj-bg-surface);\n padding: 8px 10px;\n border-radius: 6px;\n}\n\n/* Number input - narrower */\n.mj-forms-field-input--number {\n max-width: 200px;\n}\n\n/* Date input - narrower */\n.mj-forms-field-input--date {\n max-width: 220px;\n}\n\n/* ============================================\n CHECKBOX (custom styled)\n ============================================ */\n.mj-forms-field-checkbox {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"] {\n appearance: none;\n width: 18px;\n height: 18px;\n border: 2px solid var(--mj-border-default);\n border-radius: 4px;\n cursor: pointer;\n position: relative;\n transition: all var(--mj-transition-base) ease;\n flex-shrink: 0;\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"]:checked {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"]:checked::after {\n content: '';\n position: absolute;\n left: 5px;\n top: 1px;\n width: 5px;\n height: 9px;\n border: solid var(--mj-text-inverse);\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n\n.mj-forms-field-checkbox input[type=\"checkbox\"]:disabled {\n opacity: 0.5;\n cursor: default;\n}\n\n/* ============================================\n CUSTOM SELECT DROPDOWN (replaces native <select>)\n ============================================ */\n.mj-custom-select-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n font-family: inherit;\n color: var(--mj-text-primary);\n background: transparent;\n border: none;\n border-bottom: 1.5px solid var(--mj-border-default);\n padding: 4px 0;\n width: 100%;\n cursor: pointer;\n outline: none;\n transition: border-color var(--mj-transition-base) ease,\n background var(--mj-transition-base) ease;\n}\n\n.mj-custom-select-trigger:focus {\n border-bottom-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n border-radius: 4px 4px 0 0;\n padding: 4px 6px;\n}\n\n.mj-custom-select-value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.mj-custom-select-value--placeholder {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n.mj-custom-select-chevron {\n font-size: 11px;\n color: var(--mj-text-muted);\n transition: transform var(--mj-transition-base) ease;\n flex-shrink: 0;\n margin-left: 8px;\n}\n\n.mj-custom-select-chevron--open {\n transform: rotate(180deg);\n}\n\n/* ============================================\n FK SEARCH (custom autocomplete)\n ============================================ */\n.mj-fk-search {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n}\n\n.mj-fk-search .mj-forms-field-input {\n padding-right: 28px;\n}\n\n.mj-fk-search-icon {\n position: absolute;\n right: 4px;\n color: var(--mj-text-muted);\n font-size: 12px;\n pointer-events: none;\n}\n\n.mj-fk-clear {\n position: absolute;\n right: 2px;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 11px;\n padding: 4px 6px;\n line-height: 1;\n border-radius: 3px;\n transition: all var(--mj-transition-base);\n}\n\n.mj-fk-clear:hover {\n color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n}\n\n/* Matched state: solid accent underline */\n.mj-fk-search--matched .mj-forms-field-input {\n border-bottom: 2px solid var(--mj-brand-primary);\n}\n\n/* ============================================\n FLOATING DROPDOWN PANEL (position: fixed via ngStyle)\n ============================================ */\n.mj-fk-dropdown {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n box-shadow: var(--mj-shadow-lg);\n max-height: 240px;\n overflow-y: auto;\n padding: 4px;\n animation: mj-dropdown-in 150ms ease;\n}\n\n.mj-fk-dropdown--above {\n animation: mj-dropdown-in-above 150ms ease;\n}\n\n.mj-fk-option {\n padding: 10px 14px;\n font-size: 14px;\n color: var(--mj-text-primary);\n cursor: pointer;\n transition: background var(--mj-transition-base);\n border-radius: 6px;\n}\n\n.mj-fk-option:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.mj-fk-option--selected {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n font-weight: 600;\n color: var(--mj-brand-primary);\n}\n\n.mj-fk-option--selected:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n@keyframes mj-dropdown-in {\n from { opacity: 0; transform: translateY(-4px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes mj-dropdown-in-above {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n/* ============================================\n SEARCH HIGHLIGHTING\n ============================================ */\n.mj-forms-field-label :global(.mj-forms-search-highlight) {\n background-color: var(--mj-color-warning-200, #fef08a);\n color: var(--mj-color-warning-800, #854d0e);\n padding: 0;\n border-radius: 2px;\n font-weight: 700;\n box-shadow: 0 0 0 2px var(--mj-color-warning-200, #fef08a);\n}\n\n/* ============================================\n VALIDATION ERROR STATE\n ============================================ */\n.mj-forms-field--has-error .mj-forms-field-input {\n border-bottom-color: var(--mj-status-error);\n border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error .mj-forms-field-input:focus {\n background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n border-bottom-color: var(--mj-status-error);\n}\n\n.mj-forms-field--has-error .mj-forms-field-input--textarea {\n border-color: var(--mj-status-error);\n}\n\n.mj-forms-field--has-error .mj-forms-field-input--textarea:focus {\n border-color: var(--mj-status-error);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n}\n\n.mj-forms-field--has-error .mj-custom-select-trigger {\n border-bottom-color: var(--mj-status-error);\n border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-error .mj-fk-search .mj-forms-field-input {\n border-bottom-color: var(--mj-status-error);\n border-bottom-width: 2px;\n}\n\n/* ============================================\n VALIDATION WARNING STATE\n ============================================ */\n.mj-forms-field--has-warning .mj-forms-field-input {\n border-bottom-color: var(--mj-status-warning);\n border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning .mj-forms-field-input:focus {\n background: color-mix(in srgb, var(--mj-status-warning) 5%, var(--mj-bg-surface));\n border-bottom-color: var(--mj-status-warning);\n}\n\n.mj-forms-field--has-warning .mj-forms-field-input--textarea {\n border-color: var(--mj-status-warning);\n}\n\n.mj-forms-field--has-warning .mj-forms-field-input--textarea:focus {\n border-color: var(--mj-status-warning);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-warning) 8%, transparent);\n}\n\n.mj-forms-field--has-warning .mj-custom-select-trigger {\n border-bottom-color: var(--mj-status-warning);\n border-bottom-width: 2px;\n}\n\n.mj-forms-field--has-warning .mj-fk-search .mj-forms-field-input {\n border-bottom-color: var(--mj-status-warning);\n border-bottom-width: 2px;\n}\n\n/* ============================================\n VALIDATION MESSAGE AREA\n ============================================ */\n.mj-forms-field-validation {\n grid-column: 2;\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-top: -2px;\n overflow: hidden;\n animation: mj-validation-slide-in 200ms ease-out;\n}\n\n.mj-forms-field-validation-item {\n display: flex;\n align-items: flex-start;\n gap: 6px;\n font-size: 12px;\n line-height: 1.4;\n padding: 3px 0 1px;\n}\n\n.mj-forms-field-validation-item i {\n font-size: 11px;\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n/* Error message colors */\n.mj-forms-field-validation--error .mj-forms-field-validation-item {\n color: var(--mj-status-error);\n}\n\n.mj-forms-field-validation--error .mj-forms-field-validation-item i {\n color: var(--mj-status-error);\n}\n\n/* Warning message colors */\n.mj-forms-field-validation--warning .mj-forms-field-validation-item {\n color: var(--mj-color-warning-700);\n}\n\n.mj-forms-field-validation--warning .mj-forms-field-validation-item i {\n color: var(--mj-status-warning);\n}\n\n@keyframes mj-validation-slide-in {\n from {\n opacity: 0;\n max-height: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n max-height: 100px;\n transform: translateY(0);\n }\n}\n\n/* ============================================\n RESPONSIVE\n ============================================ */\n@media (max-width: 640px) {\n .mj-forms-field {\n grid-template-columns: 1fr;\n gap: 4px;\n }\n\n .mj-forms-field-label {\n font-size: 12px;\n }\n\n .mj-forms-field-validation {\n grid-column: 1;\n }\n}\n"] }]
|
|
1179
1179
|
}], null, { Record: [{
|
|
1180
1180
|
type: Input
|
|
1181
1181
|
}], EditMode: [{
|
|
@@ -323,11 +323,11 @@ export class MjIsaRelatedCardComponent {
|
|
|
323
323
|
i0.ɵɵconditional(!ctx.IsLoading && !ctx.LoadError && ctx.RelatedRecord ? 11 : -1);
|
|
324
324
|
i0.ɵɵadvance();
|
|
325
325
|
i0.ɵɵconditional(ctx.Children.length > 0 && !ctx.IsLoading ? 12 : -1);
|
|
326
|
-
} }, dependencies: [MjIsaRelatedCardComponent], styles: ["/* ============================================\n ISA RELATED CARD\n Compact summary card for one sibling/child entity\n ============================================ */\n\n.mj-isa-card {\n background:
|
|
326
|
+
} }, dependencies: [MjIsaRelatedCardComponent], styles: ["/* ============================================\n ISA RELATED CARD\n Compact summary card for one sibling/child entity\n ============================================ */\n\n.mj-isa-card {\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-sm);\n overflow: hidden;\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n/* ---- Header ---- */\n.mj-isa-card__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 14px;\n background: var(--mj-bg-surface-elevated);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mj-isa-card__header-left {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n}\n\n.mj-isa-card__icon {\n font-size: 14px;\n color: var(--mj-brand-primary);\n flex-shrink: 0;\n}\n\n.mj-isa-card__entity-name {\n font-size: 13px;\n font-weight: 700;\n color: var(--mj-text-primary);\n white-space: nowrap;\n}\n\n.mj-isa-card__record-name {\n font-size: 11px;\n color: var(--mj-text-muted);\n font-weight: 400;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.mj-isa-card__open-link {\n font-size: 11px;\n color: var(--mj-brand-primary);\n text-decoration: none;\n font-weight: 600;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n.mj-isa-card__open-link:hover {\n text-decoration: underline;\n}\n\n/* ---- Body / Fields ---- */\n.mj-isa-card__body {\n padding: 8px 14px 10px;\n}\n\n.mj-isa-card__field {\n display: flex;\n align-items: baseline;\n padding: 3px 0;\n gap: 8px;\n}\n\n.mj-isa-card__field-label {\n font-size: 11px;\n color: var(--mj-text-muted);\n width: 110px;\n flex-shrink: 0;\n}\n\n.mj-isa-card__field-value {\n font-size: 12px;\n color: var(--mj-text-primary);\n font-weight: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.mj-isa-card__field-value--bool-yes {\n color: var(--mj-status-success);\n}\n\n.mj-isa-card__field-value--bool-no {\n color: var(--mj-status-error);\n}\n\n/* ---- Expand/Collapse ---- */\n.mj-isa-card__expand-row {\n padding: 0 14px 8px;\n}\n\n.mj-isa-card__expand-btn {\n font-size: 11px;\n color: var(--mj-brand-primary);\n background: none;\n border: none;\n cursor: pointer;\n font-weight: 600;\n padding: 0;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-isa-card__expand-btn:hover {\n text-decoration: underline;\n}\n\n.mj-isa-card__expand-chevron {\n font-size: 9px;\n}\n\n.mj-isa-card__extra-fields {\n padding: 0 14px 10px;\n border-top: 1px dashed var(--mj-border-default);\n margin-top: 4px;\n padding-top: 8px;\n}\n\n/* ---- Loading State ---- */\n.mj-isa-card__body--loading {\n padding: 12px 14px;\n}\n\n.mj-isa-card__loading-bar {\n height: 10px;\n background: linear-gradient(90deg,\n var(--mj-bg-surface-sunken) 25%,\n var(--mj-border-default) 50%,\n var(--mj-bg-surface-sunken) 75%);\n background-size: 200% 100%;\n animation: mj-isa-shimmer 1.5s infinite;\n border-radius: 4px;\n margin-bottom: 8px;\n width: 80%;\n}\n\n.mj-isa-card__loading-bar--short {\n width: 50%;\n}\n\n@keyframes mj-isa-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n/* ---- Nested Sub-Cards (grandchild+ rendered inside parent card) ---- */\n.mj-isa-card__children {\n padding: 6px 10px 8px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.mj-isa-card--nested {\n box-shadow: none;\n border: 1px solid var(--mj-border-default);\n border-left: 2px solid color-mix(in srgb, var(--mj-brand-primary) 60%, var(--mj-color-neutral-400));\n border-radius: var(--mj-radius-md);\n}\n\n.mj-isa-card--nested .mj-isa-card__header {\n padding: 6px 10px;\n background: var(--mj-bg-surface-sunken);\n border-bottom-color: var(--mj-border-default);\n}\n\n.mj-isa-card--nested .mj-isa-card__entity-name {\n font-size: 12px;\n}\n\n.mj-isa-card--nested .mj-isa-card__icon {\n font-size: 12px;\n}\n\n.mj-isa-card--nested .mj-isa-card__body {\n padding: 6px 10px 8px;\n}\n\n.mj-isa-card--nested .mj-isa-card__field-label {\n width: 95px;\n font-size: 10px;\n}\n\n.mj-isa-card--nested .mj-isa-card__field-value {\n font-size: 11px;\n}\n\n/* ---- Error State ---- */\n.mj-isa-card__body--error {\n padding: 10px 14px;\n}\n\n.mj-isa-card__error-text {\n font-size: 11px;\n color: var(--mj-text-muted);\n font-style: italic;\n}\n"], encapsulation: 2, changeDetection: 0 });
|
|
327
327
|
}
|
|
328
328
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjIsaRelatedCardComponent, [{
|
|
329
329
|
type: Component,
|
|
330
|
-
args: [{ standalone: false, selector: 'mj-isa-related-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- ISA Related Card: compact summary of one sibling/child entity record -->\n<div class=\"mj-isa-card\"\n [class.mj-isa-card--loading]=\"IsLoading\"\n [class.mj-isa-card--error]=\"LoadError\"\n [class.mj-isa-card--nested]=\"Depth > 0\">\n\n <!-- Card Header -->\n <div class=\"mj-isa-card__header\">\n <div class=\"mj-isa-card__header-left\">\n <i [class]=\"IconClass\" class=\"mj-isa-card__icon\"></i>\n <span class=\"mj-isa-card__entity-name\">{{ DisplayName }}</span>\n @if (RecordName) {\n <span class=\"mj-isa-card__record-name\">{{ RecordName }}</span>\n }\n </div>\n <a href=\"#\" class=\"mj-isa-card__open-link\" (click)=\"OnOpenClick($event)\">Open →</a>\n </div>\n\n <!-- Loading State -->\n @if (IsLoading) {\n <div class=\"mj-isa-card__body mj-isa-card__body--loading\">\n <div class=\"mj-isa-card__loading-bar\"></div>\n <div class=\"mj-isa-card__loading-bar mj-isa-card__loading-bar--short\"></div>\n </div>\n }\n\n <!-- Error State -->\n @if (LoadError && !IsLoading) {\n <div class=\"mj-isa-card__body mj-isa-card__body--error\">\n <span class=\"mj-isa-card__error-text\">Unable to load record</span>\n </div>\n }\n\n <!-- Field Values -->\n @if (!IsLoading && !LoadError && RelatedRecord) {\n <div class=\"mj-isa-card__body\">\n @for (field of DefaultFields; track field.Label) {\n <div class=\"mj-isa-card__field\">\n <span class=\"mj-isa-card__field-label\">{{ field.Label }}</span>\n <span class=\"mj-isa-card__field-value\"\n [class.mj-isa-card__field-value--bool-yes]=\"field.IsBooleanTrue\"\n [class.mj-isa-card__field-value--bool-no]=\"field.IsBooleanFalse\">\n {{ field.Value }}\n </span>\n </div>\n }\n </div>\n\n <!-- Expand/Collapse for extra fields -->\n @if (ExtraFields.length > 0) {\n <div class=\"mj-isa-card__expand-row\">\n <button class=\"mj-isa-card__expand-btn\" (click)=\"ToggleExpand()\">\n @if (!Expanded) {\n Show {{ ExtraFields.length }} more field{{ ExtraFields.length > 1 ? 's' : '' }}\n <i class=\"fa-solid fa-chevron-down mj-isa-card__expand-chevron\"></i>\n } @else {\n Show fewer fields\n <i class=\"fa-solid fa-chevron-up mj-isa-card__expand-chevron\"></i>\n }\n </button>\n </div>\n\n @if (Expanded) {\n <div class=\"mj-isa-card__extra-fields\">\n @for (field of ExtraFields; track field.Label) {\n <div class=\"mj-isa-card__field\">\n <span class=\"mj-isa-card__field-label\">{{ field.Label }}</span>\n <span class=\"mj-isa-card__field-value\"\n [class.mj-isa-card__field-value--bool-yes]=\"field.IsBooleanTrue\"\n [class.mj-isa-card__field-value--bool-no]=\"field.IsBooleanFalse\">\n {{ field.Value }}\n </span>\n </div>\n }\n </div>\n }\n }\n }\n\n <!-- Nested sub-cards for IS-A children (e.g., Gold Members inside Members) -->\n @if (Children.length > 0 && !IsLoading) {\n <div class=\"mj-isa-card__children\">\n @for (child of Children; track child.EntityName) {\n <mj-isa-related-card\n [EntityName]=\"child.EntityName\"\n [PrimaryKey]=\"PrimaryKey\"\n [CurrentRecordName]=\"CurrentRecordName\"\n [Relationship]=\"'child'\"\n [Depth]=\"Depth + 1\"\n [Children]=\"child.Children\"\n (Navigate)=\"Navigate.emit($event)\">\n </mj-isa-related-card>\n }\n </div>\n }\n</div>\n", styles: ["/* ============================================\n ISA RELATED CARD\n Compact summary card for one sibling/child entity\n ============================================ */\n\n.mj-isa-card {\n background:
|
|
330
|
+
args: [{ standalone: false, selector: 'mj-isa-related-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- ISA Related Card: compact summary of one sibling/child entity record -->\n<div class=\"mj-isa-card\"\n [class.mj-isa-card--loading]=\"IsLoading\"\n [class.mj-isa-card--error]=\"LoadError\"\n [class.mj-isa-card--nested]=\"Depth > 0\">\n\n <!-- Card Header -->\n <div class=\"mj-isa-card__header\">\n <div class=\"mj-isa-card__header-left\">\n <i [class]=\"IconClass\" class=\"mj-isa-card__icon\"></i>\n <span class=\"mj-isa-card__entity-name\">{{ DisplayName }}</span>\n @if (RecordName) {\n <span class=\"mj-isa-card__record-name\">{{ RecordName }}</span>\n }\n </div>\n <a href=\"#\" class=\"mj-isa-card__open-link\" (click)=\"OnOpenClick($event)\">Open →</a>\n </div>\n\n <!-- Loading State -->\n @if (IsLoading) {\n <div class=\"mj-isa-card__body mj-isa-card__body--loading\">\n <div class=\"mj-isa-card__loading-bar\"></div>\n <div class=\"mj-isa-card__loading-bar mj-isa-card__loading-bar--short\"></div>\n </div>\n }\n\n <!-- Error State -->\n @if (LoadError && !IsLoading) {\n <div class=\"mj-isa-card__body mj-isa-card__body--error\">\n <span class=\"mj-isa-card__error-text\">Unable to load record</span>\n </div>\n }\n\n <!-- Field Values -->\n @if (!IsLoading && !LoadError && RelatedRecord) {\n <div class=\"mj-isa-card__body\">\n @for (field of DefaultFields; track field.Label) {\n <div class=\"mj-isa-card__field\">\n <span class=\"mj-isa-card__field-label\">{{ field.Label }}</span>\n <span class=\"mj-isa-card__field-value\"\n [class.mj-isa-card__field-value--bool-yes]=\"field.IsBooleanTrue\"\n [class.mj-isa-card__field-value--bool-no]=\"field.IsBooleanFalse\">\n {{ field.Value }}\n </span>\n </div>\n }\n </div>\n\n <!-- Expand/Collapse for extra fields -->\n @if (ExtraFields.length > 0) {\n <div class=\"mj-isa-card__expand-row\">\n <button class=\"mj-isa-card__expand-btn\" (click)=\"ToggleExpand()\">\n @if (!Expanded) {\n Show {{ ExtraFields.length }} more field{{ ExtraFields.length > 1 ? 's' : '' }}\n <i class=\"fa-solid fa-chevron-down mj-isa-card__expand-chevron\"></i>\n } @else {\n Show fewer fields\n <i class=\"fa-solid fa-chevron-up mj-isa-card__expand-chevron\"></i>\n }\n </button>\n </div>\n\n @if (Expanded) {\n <div class=\"mj-isa-card__extra-fields\">\n @for (field of ExtraFields; track field.Label) {\n <div class=\"mj-isa-card__field\">\n <span class=\"mj-isa-card__field-label\">{{ field.Label }}</span>\n <span class=\"mj-isa-card__field-value\"\n [class.mj-isa-card__field-value--bool-yes]=\"field.IsBooleanTrue\"\n [class.mj-isa-card__field-value--bool-no]=\"field.IsBooleanFalse\">\n {{ field.Value }}\n </span>\n </div>\n }\n </div>\n }\n }\n }\n\n <!-- Nested sub-cards for IS-A children (e.g., Gold Members inside Members) -->\n @if (Children.length > 0 && !IsLoading) {\n <div class=\"mj-isa-card__children\">\n @for (child of Children; track child.EntityName) {\n <mj-isa-related-card\n [EntityName]=\"child.EntityName\"\n [PrimaryKey]=\"PrimaryKey\"\n [CurrentRecordName]=\"CurrentRecordName\"\n [Relationship]=\"'child'\"\n [Depth]=\"Depth + 1\"\n [Children]=\"child.Children\"\n (Navigate)=\"Navigate.emit($event)\">\n </mj-isa-related-card>\n }\n </div>\n }\n</div>\n", styles: ["/* ============================================\n ISA RELATED CARD\n Compact summary card for one sibling/child entity\n ============================================ */\n\n.mj-isa-card {\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-sm);\n overflow: hidden;\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n/* ---- Header ---- */\n.mj-isa-card__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 14px;\n background: var(--mj-bg-surface-elevated);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mj-isa-card__header-left {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n}\n\n.mj-isa-card__icon {\n font-size: 14px;\n color: var(--mj-brand-primary);\n flex-shrink: 0;\n}\n\n.mj-isa-card__entity-name {\n font-size: 13px;\n font-weight: 700;\n color: var(--mj-text-primary);\n white-space: nowrap;\n}\n\n.mj-isa-card__record-name {\n font-size: 11px;\n color: var(--mj-text-muted);\n font-weight: 400;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.mj-isa-card__open-link {\n font-size: 11px;\n color: var(--mj-brand-primary);\n text-decoration: none;\n font-weight: 600;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n.mj-isa-card__open-link:hover {\n text-decoration: underline;\n}\n\n/* ---- Body / Fields ---- */\n.mj-isa-card__body {\n padding: 8px 14px 10px;\n}\n\n.mj-isa-card__field {\n display: flex;\n align-items: baseline;\n padding: 3px 0;\n gap: 8px;\n}\n\n.mj-isa-card__field-label {\n font-size: 11px;\n color: var(--mj-text-muted);\n width: 110px;\n flex-shrink: 0;\n}\n\n.mj-isa-card__field-value {\n font-size: 12px;\n color: var(--mj-text-primary);\n font-weight: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.mj-isa-card__field-value--bool-yes {\n color: var(--mj-status-success);\n}\n\n.mj-isa-card__field-value--bool-no {\n color: var(--mj-status-error);\n}\n\n/* ---- Expand/Collapse ---- */\n.mj-isa-card__expand-row {\n padding: 0 14px 8px;\n}\n\n.mj-isa-card__expand-btn {\n font-size: 11px;\n color: var(--mj-brand-primary);\n background: none;\n border: none;\n cursor: pointer;\n font-weight: 600;\n padding: 0;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-isa-card__expand-btn:hover {\n text-decoration: underline;\n}\n\n.mj-isa-card__expand-chevron {\n font-size: 9px;\n}\n\n.mj-isa-card__extra-fields {\n padding: 0 14px 10px;\n border-top: 1px dashed var(--mj-border-default);\n margin-top: 4px;\n padding-top: 8px;\n}\n\n/* ---- Loading State ---- */\n.mj-isa-card__body--loading {\n padding: 12px 14px;\n}\n\n.mj-isa-card__loading-bar {\n height: 10px;\n background: linear-gradient(90deg,\n var(--mj-bg-surface-sunken) 25%,\n var(--mj-border-default) 50%,\n var(--mj-bg-surface-sunken) 75%);\n background-size: 200% 100%;\n animation: mj-isa-shimmer 1.5s infinite;\n border-radius: 4px;\n margin-bottom: 8px;\n width: 80%;\n}\n\n.mj-isa-card__loading-bar--short {\n width: 50%;\n}\n\n@keyframes mj-isa-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n/* ---- Nested Sub-Cards (grandchild+ rendered inside parent card) ---- */\n.mj-isa-card__children {\n padding: 6px 10px 8px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.mj-isa-card--nested {\n box-shadow: none;\n border: 1px solid var(--mj-border-default);\n border-left: 2px solid color-mix(in srgb, var(--mj-brand-primary) 60%, var(--mj-color-neutral-400));\n border-radius: var(--mj-radius-md);\n}\n\n.mj-isa-card--nested .mj-isa-card__header {\n padding: 6px 10px;\n background: var(--mj-bg-surface-sunken);\n border-bottom-color: var(--mj-border-default);\n}\n\n.mj-isa-card--nested .mj-isa-card__entity-name {\n font-size: 12px;\n}\n\n.mj-isa-card--nested .mj-isa-card__icon {\n font-size: 12px;\n}\n\n.mj-isa-card--nested .mj-isa-card__body {\n padding: 6px 10px 8px;\n}\n\n.mj-isa-card--nested .mj-isa-card__field-label {\n width: 95px;\n font-size: 10px;\n}\n\n.mj-isa-card--nested .mj-isa-card__field-value {\n font-size: 11px;\n}\n\n/* ---- Error State ---- */\n.mj-isa-card__body--error {\n padding: 10px 14px;\n}\n\n.mj-isa-card__error-text {\n font-size: 11px;\n color: var(--mj-text-muted);\n font-style: italic;\n}\n"] }]
|
|
331
331
|
}], null, { EntityName: [{
|
|
332
332
|
type: Input
|
|
333
333
|
}], PrimaryKey: [{
|
|
@@ -172,11 +172,11 @@ export class MjIsaRelatedPanelComponent {
|
|
|
172
172
|
i0.ɵɵconditionalCreate(0, MjIsaRelatedPanelComponent_Conditional_0_Template, 3, 3, "div", 0);
|
|
173
173
|
} if (rf & 2) {
|
|
174
174
|
i0.ɵɵconditional(ctx.HasItems && !ctx.EditMode ? 0 : -1);
|
|
175
|
-
} }, dependencies: [i1.MjIsaRelatedCardComponent], styles: ["/* ============================================\n ISA RELATED PANEL\n Container for IS-A related entity cards\n ============================================ */\n\n.mj-isa-panel {\n width: 280px;\n flex-shrink: 0;\n position: sticky;\n top: 24px;\n align-self: flex-start;\n}\n\n/* Cards container \u2014 no gap between cards per design */\n.mj-isa-panel__cards {\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n/* Override card border-radius to butt up against each other */\n.mj-isa-panel__cards mj-isa-related-card:not(:first-child) .mj-isa-card {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.mj-isa-panel__cards mj-isa-related-card:not(:last-child) .mj-isa-card {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-bottom: 1px solid
|
|
175
|
+
} }, dependencies: [i1.MjIsaRelatedCardComponent], styles: ["/* ============================================\n ISA RELATED PANEL\n Container for IS-A related entity cards\n ============================================ */\n\n.mj-isa-panel {\n width: 280px;\n flex-shrink: 0;\n position: sticky;\n top: 24px;\n align-self: flex-start;\n}\n\n/* Cards container \u2014 no gap between cards per design */\n.mj-isa-panel__cards {\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n/* Override card border-radius to butt up against each other */\n.mj-isa-panel__cards mj-isa-related-card:not(:first-child) .mj-isa-card {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.mj-isa-panel__cards mj-isa-related-card:not(:last-child) .mj-isa-card {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-bottom: 1px solid var(--mj-border-default);\n box-shadow: none;\n}\n\n/* ---- Collapsed Strip ---- */\n.mj-isa-panel--collapsed {\n width: 40px;\n}\n\n.mj-isa-panel__collapsed-strip {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n padding: 8px 0;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-isa-panel__collapsed-icon {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-brand-primary);\n font-size: 12px;\n cursor: default;\n}\n\n/* ---- Responsive ---- */\n@media (max-width: 1024px) {\n .mj-isa-panel {\n display: none;\n }\n}\n"], encapsulation: 2, changeDetection: 0 });
|
|
176
176
|
}
|
|
177
177
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjIsaRelatedPanelComponent, [{
|
|
178
178
|
type: Component,
|
|
179
|
-
args: [{ standalone: false, selector: 'mj-isa-related-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- ISA Related Panel: side panel container for all related IS-A entity cards -->\n@if (HasItems && !EditMode) {\n <div class=\"mj-isa-panel\" [class.mj-isa-panel--collapsed]=\"Collapsed\">\n\n <!-- Collapsed state: icon-only strip -->\n @if (Collapsed) {\n <div class=\"mj-isa-panel__collapsed-strip\">\n @for (item of RelatedItems; track item.EntityName) {\n <div class=\"mj-isa-panel__collapsed-icon\" [title]=\"item.EntityName\">\n <i class=\"fa-solid fa-link\"></i>\n </div>\n }\n </div>\n } @else {\n <!-- Expanded state: full card list -->\n <div class=\"mj-isa-panel__cards\">\n @for (item of RelatedItems; track item.EntityName) {\n <mj-isa-related-card\n [EntityName]=\"item.EntityName\"\n [PrimaryKey]=\"SharedPrimaryKey\"\n [CurrentRecordName]=\"CurrentRecordName\"\n [Relationship]=\"item.Relationship\"\n [Depth]=\"item.Depth\"\n [Children]=\"item.Children\"\n (Navigate)=\"OnCardNavigate($event)\">\n </mj-isa-related-card>\n }\n </div>\n }\n </div>\n}\n", styles: ["/* ============================================\n ISA RELATED PANEL\n Container for IS-A related entity cards\n ============================================ */\n\n.mj-isa-panel {\n width: 280px;\n flex-shrink: 0;\n position: sticky;\n top: 24px;\n align-self: flex-start;\n}\n\n/* Cards container \u2014 no gap between cards per design */\n.mj-isa-panel__cards {\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n/* Override card border-radius to butt up against each other */\n.mj-isa-panel__cards mj-isa-related-card:not(:first-child) .mj-isa-card {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.mj-isa-panel__cards mj-isa-related-card:not(:last-child) .mj-isa-card {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-bottom: 1px solid
|
|
179
|
+
args: [{ standalone: false, selector: 'mj-isa-related-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- ISA Related Panel: side panel container for all related IS-A entity cards -->\n@if (HasItems && !EditMode) {\n <div class=\"mj-isa-panel\" [class.mj-isa-panel--collapsed]=\"Collapsed\">\n\n <!-- Collapsed state: icon-only strip -->\n @if (Collapsed) {\n <div class=\"mj-isa-panel__collapsed-strip\">\n @for (item of RelatedItems; track item.EntityName) {\n <div class=\"mj-isa-panel__collapsed-icon\" [title]=\"item.EntityName\">\n <i class=\"fa-solid fa-link\"></i>\n </div>\n }\n </div>\n } @else {\n <!-- Expanded state: full card list -->\n <div class=\"mj-isa-panel__cards\">\n @for (item of RelatedItems; track item.EntityName) {\n <mj-isa-related-card\n [EntityName]=\"item.EntityName\"\n [PrimaryKey]=\"SharedPrimaryKey\"\n [CurrentRecordName]=\"CurrentRecordName\"\n [Relationship]=\"item.Relationship\"\n [Depth]=\"item.Depth\"\n [Children]=\"item.Children\"\n (Navigate)=\"OnCardNavigate($event)\">\n </mj-isa-related-card>\n }\n </div>\n }\n </div>\n}\n", styles: ["/* ============================================\n ISA RELATED PANEL\n Container for IS-A related entity cards\n ============================================ */\n\n.mj-isa-panel {\n width: 280px;\n flex-shrink: 0;\n position: sticky;\n top: 24px;\n align-self: flex-start;\n}\n\n/* Cards container \u2014 no gap between cards per design */\n.mj-isa-panel__cards {\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n/* Override card border-radius to butt up against each other */\n.mj-isa-panel__cards mj-isa-related-card:not(:first-child) .mj-isa-card {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\n.mj-isa-panel__cards mj-isa-related-card:not(:last-child) .mj-isa-card {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-bottom: 1px solid var(--mj-border-default);\n box-shadow: none;\n}\n\n/* ---- Collapsed Strip ---- */\n.mj-isa-panel--collapsed {\n width: 40px;\n}\n\n.mj-isa-panel__collapsed-strip {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n padding: 8px 0;\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-isa-panel__collapsed-icon {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-brand-primary);\n font-size: 12px;\n cursor: default;\n}\n\n/* ---- Responsive ---- */\n@media (max-width: 1024px) {\n .mj-isa-panel {\n display: none;\n }\n}\n"] }]
|
|
180
180
|
}], null, { Record: [{
|
|
181
181
|
type: Input
|
|
182
182
|
}], EditMode: [{
|
|
@@ -418,11 +418,11 @@ export class MjCollapsiblePanelComponent {
|
|
|
418
418
|
i0.ɵɵclassProp("mj-forms-panel-body--collapsed", !ctx.Expanded);
|
|
419
419
|
i0.ɵɵadvance();
|
|
420
420
|
i0.ɵɵstyleProp("height", ctx.PanelContentHeight, "px");
|
|
421
|
-
} }, styles: ["mj-collapsible-panel {\n
|
|
421
|
+
} }, styles: ["mj-collapsible-panel {\n display: block;\n}\n\nmj-collapsible-panel.mj-search-hidden {\n display: none;\n}\n\nmj-collapsible-panel.mj-drag-over {\n border: 2px dashed var(--mj-brand-primary);\n border-radius: var(--mj-radius-md);\n}\n\n/* ============================================\n PANEL CARD\n ============================================ */\n.mj-forms-panel {\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-md);\n box-shadow: var(--mj-shadow-sm);\n border: 1px solid var(--mj-border-default);\n overflow: hidden;\n transition: all 0.3s ease;\n}\n\n/* ============================================\n HEADER\n ============================================ */\n.mj-forms-panel-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-bg-surface-elevated);\n border-bottom: 2px solid var(--mj-border-default);\n cursor: pointer;\n user-select: none;\n transition: all 0.3s ease;\n}\n\n.mj-forms-panel-header:hover {\n background: var(--mj-bg-surface-hover);\n border-bottom-color: var(--mj-brand-primary);\n}\n\n/* Drag handle */\n.mj-forms-drag-handle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 0;\n height: 24px;\n color: var(--mj-text-muted);\n cursor: grab;\n opacity: 0;\n overflow: hidden;\n transition: width var(--mj-transition-base) ease, opacity var(--mj-transition-base) ease;\n flex-shrink: 0;\n}\n\n.mj-forms-panel-header:hover .mj-forms-drag-handle {\n width: 24px;\n opacity: 1;\n}\n\n.mj-forms-drag-handle:hover {\n color: var(--mj-brand-primary);\n}\n\n.mj-forms-drag-handle:active {\n cursor: grabbing;\n}\n\nmj-collapsible-panel.mj-dragging .mj-forms-drag-handle {\n width: 24px;\n opacity: 1;\n color: var(--mj-brand-primary);\n}\n\n/* Title group */\n.mj-forms-panel-title-group {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n}\n\n.mj-forms-panel-icon {\n font-size: 18px;\n color: var(--mj-brand-primary);\n width: 24px;\n text-align: center;\n}\n\n.mj-forms-panel-title {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.mj-forms-panel-chevron {\n color: var(--mj-text-secondary);\n font-size: 14px;\n transition: transform 0.3s ease;\n padding: 4px;\n}\n\n/* Row count badge */\n.mj-forms-row-count-badge {\n background: var(--mj-status-success);\n color: var(--mj-text-inverse);\n padding: 2px 8px;\n border-radius: var(--mj-radius-full);\n font-size: 12px;\n font-weight: 600;\n margin-left: 8px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 24px;\n line-height: 1;\n}\n\n.mj-forms-row-count-badge--zero {\n background: var(--mj-text-muted);\n}\n\n/* ============================================\n INHERITED VARIANT (IS-A parent fields)\n ============================================ */\n.mj-forms-panel--inherited {\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-header {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-elevated));\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-header:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface-elevated));\n border-bottom-color: var(--mj-brand-primary);\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-icon {\n color: var(--mj-brand-primary);\n}\n\n.mj-forms-inherited-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 11px;\n font-weight: 600;\n padding: 3px 10px;\n border-radius: 4px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n cursor: pointer;\n transition: all var(--mj-transition-base) ease;\n text-decoration: none;\n}\n\n.mj-forms-inherited-badge:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.mj-forms-inherited-badge i {\n font-size: 10px;\n}\n\n/* ============================================\n RELATED ENTITY VARIANT\n ============================================ */\n.mj-forms-panel--related {\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.mj-forms-panel--related .mj-forms-panel-header {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-elevated));\n}\n\n.mj-forms-panel--related .mj-forms-panel-header:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface-elevated));\n border-bottom-color: var(--mj-brand-primary);\n}\n\n.mj-forms-panel--related .mj-forms-panel-icon {\n color: var(--mj-brand-primary);\n}\n\n/* Related entity content \u2014 400px default, user can drag-resize vertically */\n.mj-forms-panel--related .mj-forms-panel-content {\n height: 400px;\n padding: 0;\n overflow: hidden;\n resize: vertical;\n min-height: 120px;\n max-height: 800px;\n}\n\n/* Ensure child chain fills the resizable content area */\n.mj-forms-panel--related .mj-forms-panel-content > *,\n.mj-forms-panel--related .mj-forms-panel-content > .ng-star-inserted {\n height: 100%;\n}\n\n.mj-forms-panel--related .mj-forms-panel-content > * > * {\n height: 100%;\n}\n\n/* Related entity panels need the body to not clip the resize handle */\n.mj-forms-panel--related .mj-forms-panel-body {\n overflow: visible;\n}\n\n/* ============================================\n BODY (collapsible)\n ============================================ */\n.mj-forms-panel-body {\n max-height: 2000px;\n overflow: hidden;\n transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n opacity: 1;\n}\n\n.mj-forms-panel-body--collapsed {\n max-height: 0;\n padding: 0;\n opacity: 0;\n}\n\n.mj-forms-panel-content {\n padding: 20px;\n overflow: auto;\n max-height: 600px;\n}\n\n/* ============================================\n SEARCH HIGHLIGHTING\n ============================================ */\n.mj-forms-panel-title ::ng-deep .mj-forms-search-highlight {\n background-color: var(--mj-color-warning-200, #fef08a);\n color: var(--mj-color-warning-800, #854d0e);\n padding: 0;\n border-radius: 2px;\n font-weight: 700;\n box-shadow: 0 0 0 2px var(--mj-color-warning-200, #fef08a);\n}\n"], encapsulation: 2, changeDetection: 0 });
|
|
422
422
|
}
|
|
423
423
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjCollapsiblePanelComponent, [{
|
|
424
424
|
type: Component,
|
|
425
|
-
args: [{ standalone: false, selector: 'mj-collapsible-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"mj-forms-panel\"\n [class.mj-forms-panel--related]=\"Variant === 'related-entity'\"\n [class.mj-forms-panel--inherited]=\"Variant === 'inherited'\"\n [attr.data-section-key]=\"SectionKey\">\n\n <!-- Panel Header -->\n <div class=\"mj-forms-panel-header\" role=\"button\" tabindex=\"0\" (click)=\"Toggle()\">\n <!-- Drag Handle (hidden when reorder disabled) -->\n @if (ReorderAllowed) {\n <div class=\"mj-forms-drag-handle\"\n title=\"Drag to reorder sections\"\n draggable=\"true\"\n (dragstart)=\"OnDragStart($event)\"\n (dragend)=\"OnDragEnd()\"\n (click)=\"$event.stopPropagation()\">\n <i class=\"fa-solid fa-grip-vertical\"></i>\n </div>\n }\n\n <!-- Icon + Title -->\n <div class=\"mj-forms-panel-title-group\">\n <i [class]=\"Icon\" class=\"mj-forms-panel-icon\"></i>\n <h3 class=\"mj-forms-panel-title\">\n <span [innerHTML]=\"DisplayName\"></span>\n <!-- Row count badge for related entities -->\n @if (BadgeCount !== undefined) {\n <span class=\"mj-forms-row-count-badge\" [class.mj-forms-row-count-badge--zero]=\"BadgeCount === 0\">\n {{ BadgeCount }}\n </span>\n }\n </h3>\n </div>\n\n <!-- Inherited From badge (IS-A) -->\n @if (Variant === 'inherited' && InheritedFromEntity) {\n <a class=\"mj-forms-inherited-badge\" (click)=\"OnInheritedBadgeClick($event)\"\n [title]=\"'View parent record: ' + InheritedFromEntity\">\n <i class=\"fa-solid fa-arrow-up\"></i>\n Inherited from {{ InheritedFromEntity }}\n </a>\n }\n\n <!-- Chevron -->\n <div class=\"mj-forms-panel-chevron\">\n <i [class]=\"Expanded ? 'fa fa-chevron-up' : 'fa fa-chevron-down'\"></i>\n </div>\n </div>\n\n <!-- Panel Body -->\n <div class=\"mj-forms-panel-body\" [class.mj-forms-panel-body--collapsed]=\"!Expanded\">\n <div class=\"mj-forms-panel-content\"\n #panelContent\n [style.height.px]=\"PanelContentHeight\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: ["mj-collapsible-panel {\n
|
|
425
|
+
args: [{ standalone: false, selector: 'mj-collapsible-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"mj-forms-panel\"\n [class.mj-forms-panel--related]=\"Variant === 'related-entity'\"\n [class.mj-forms-panel--inherited]=\"Variant === 'inherited'\"\n [attr.data-section-key]=\"SectionKey\">\n\n <!-- Panel Header -->\n <div class=\"mj-forms-panel-header\" role=\"button\" tabindex=\"0\" (click)=\"Toggle()\">\n <!-- Drag Handle (hidden when reorder disabled) -->\n @if (ReorderAllowed) {\n <div class=\"mj-forms-drag-handle\"\n title=\"Drag to reorder sections\"\n draggable=\"true\"\n (dragstart)=\"OnDragStart($event)\"\n (dragend)=\"OnDragEnd()\"\n (click)=\"$event.stopPropagation()\">\n <i class=\"fa-solid fa-grip-vertical\"></i>\n </div>\n }\n\n <!-- Icon + Title -->\n <div class=\"mj-forms-panel-title-group\">\n <i [class]=\"Icon\" class=\"mj-forms-panel-icon\"></i>\n <h3 class=\"mj-forms-panel-title\">\n <span [innerHTML]=\"DisplayName\"></span>\n <!-- Row count badge for related entities -->\n @if (BadgeCount !== undefined) {\n <span class=\"mj-forms-row-count-badge\" [class.mj-forms-row-count-badge--zero]=\"BadgeCount === 0\">\n {{ BadgeCount }}\n </span>\n }\n </h3>\n </div>\n\n <!-- Inherited From badge (IS-A) -->\n @if (Variant === 'inherited' && InheritedFromEntity) {\n <a class=\"mj-forms-inherited-badge\" (click)=\"OnInheritedBadgeClick($event)\"\n [title]=\"'View parent record: ' + InheritedFromEntity\">\n <i class=\"fa-solid fa-arrow-up\"></i>\n Inherited from {{ InheritedFromEntity }}\n </a>\n }\n\n <!-- Chevron -->\n <div class=\"mj-forms-panel-chevron\">\n <i [class]=\"Expanded ? 'fa fa-chevron-up' : 'fa fa-chevron-down'\"></i>\n </div>\n </div>\n\n <!-- Panel Body -->\n <div class=\"mj-forms-panel-body\" [class.mj-forms-panel-body--collapsed]=\"!Expanded\">\n <div class=\"mj-forms-panel-content\"\n #panelContent\n [style.height.px]=\"PanelContentHeight\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: ["mj-collapsible-panel {\n display: block;\n}\n\nmj-collapsible-panel.mj-search-hidden {\n display: none;\n}\n\nmj-collapsible-panel.mj-drag-over {\n border: 2px dashed var(--mj-brand-primary);\n border-radius: var(--mj-radius-md);\n}\n\n/* ============================================\n PANEL CARD\n ============================================ */\n.mj-forms-panel {\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-md);\n box-shadow: var(--mj-shadow-sm);\n border: 1px solid var(--mj-border-default);\n overflow: hidden;\n transition: all 0.3s ease;\n}\n\n/* ============================================\n HEADER\n ============================================ */\n.mj-forms-panel-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n background: var(--mj-bg-surface-elevated);\n border-bottom: 2px solid var(--mj-border-default);\n cursor: pointer;\n user-select: none;\n transition: all 0.3s ease;\n}\n\n.mj-forms-panel-header:hover {\n background: var(--mj-bg-surface-hover);\n border-bottom-color: var(--mj-brand-primary);\n}\n\n/* Drag handle */\n.mj-forms-drag-handle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 0;\n height: 24px;\n color: var(--mj-text-muted);\n cursor: grab;\n opacity: 0;\n overflow: hidden;\n transition: width var(--mj-transition-base) ease, opacity var(--mj-transition-base) ease;\n flex-shrink: 0;\n}\n\n.mj-forms-panel-header:hover .mj-forms-drag-handle {\n width: 24px;\n opacity: 1;\n}\n\n.mj-forms-drag-handle:hover {\n color: var(--mj-brand-primary);\n}\n\n.mj-forms-drag-handle:active {\n cursor: grabbing;\n}\n\nmj-collapsible-panel.mj-dragging .mj-forms-drag-handle {\n width: 24px;\n opacity: 1;\n color: var(--mj-brand-primary);\n}\n\n/* Title group */\n.mj-forms-panel-title-group {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n}\n\n.mj-forms-panel-icon {\n font-size: 18px;\n color: var(--mj-brand-primary);\n width: 24px;\n text-align: center;\n}\n\n.mj-forms-panel-title {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.mj-forms-panel-chevron {\n color: var(--mj-text-secondary);\n font-size: 14px;\n transition: transform 0.3s ease;\n padding: 4px;\n}\n\n/* Row count badge */\n.mj-forms-row-count-badge {\n background: var(--mj-status-success);\n color: var(--mj-text-inverse);\n padding: 2px 8px;\n border-radius: var(--mj-radius-full);\n font-size: 12px;\n font-weight: 600;\n margin-left: 8px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 24px;\n line-height: 1;\n}\n\n.mj-forms-row-count-badge--zero {\n background: var(--mj-text-muted);\n}\n\n/* ============================================\n INHERITED VARIANT (IS-A parent fields)\n ============================================ */\n.mj-forms-panel--inherited {\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-header {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-elevated));\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-header:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface-elevated));\n border-bottom-color: var(--mj-brand-primary);\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-icon {\n color: var(--mj-brand-primary);\n}\n\n.mj-forms-inherited-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 11px;\n font-weight: 600;\n padding: 3px 10px;\n border-radius: 4px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n cursor: pointer;\n transition: all var(--mj-transition-base) ease;\n text-decoration: none;\n}\n\n.mj-forms-inherited-badge:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.mj-forms-inherited-badge i {\n font-size: 10px;\n}\n\n/* ============================================\n RELATED ENTITY VARIANT\n ============================================ */\n.mj-forms-panel--related {\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.mj-forms-panel--related .mj-forms-panel-header {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-elevated));\n}\n\n.mj-forms-panel--related .mj-forms-panel-header:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface-elevated));\n border-bottom-color: var(--mj-brand-primary);\n}\n\n.mj-forms-panel--related .mj-forms-panel-icon {\n color: var(--mj-brand-primary);\n}\n\n/* Related entity content \u2014 400px default, user can drag-resize vertically */\n.mj-forms-panel--related .mj-forms-panel-content {\n height: 400px;\n padding: 0;\n overflow: hidden;\n resize: vertical;\n min-height: 120px;\n max-height: 800px;\n}\n\n/* Ensure child chain fills the resizable content area */\n.mj-forms-panel--related .mj-forms-panel-content > *,\n.mj-forms-panel--related .mj-forms-panel-content > .ng-star-inserted {\n height: 100%;\n}\n\n.mj-forms-panel--related .mj-forms-panel-content > * > * {\n height: 100%;\n}\n\n/* Related entity panels need the body to not clip the resize handle */\n.mj-forms-panel--related .mj-forms-panel-body {\n overflow: visible;\n}\n\n/* ============================================\n BODY (collapsible)\n ============================================ */\n.mj-forms-panel-body {\n max-height: 2000px;\n overflow: hidden;\n transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n opacity: 1;\n}\n\n.mj-forms-panel-body--collapsed {\n max-height: 0;\n padding: 0;\n opacity: 0;\n}\n\n.mj-forms-panel-content {\n padding: 20px;\n overflow: auto;\n max-height: 600px;\n}\n\n/* ============================================\n SEARCH HIGHLIGHTING\n ============================================ */\n.mj-forms-panel-title ::ng-deep .mj-forms-search-highlight {\n background-color: var(--mj-color-warning-200, #fef08a);\n color: var(--mj-color-warning-800, #854d0e);\n padding: 0;\n border-radius: 2px;\n font-weight: 700;\n box-shadow: 0 0 0 2px var(--mj-color-warning-200, #fef08a);\n}\n"] }]
|
|
426
426
|
}], null, { SectionKey: [{
|
|
427
427
|
type: Input
|
|
428
428
|
}], SectionName: [{
|
|
@@ -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.13.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.13.0",
|
|
40
|
+
"@memberjunction/core-entities": "5.13.0",
|
|
41
|
+
"@memberjunction/global": "5.13.0",
|
|
42
|
+
"@memberjunction/ng-base-types": "5.13.0",
|
|
43
|
+
"@memberjunction/ng-list-management": "5.13.0",
|
|
44
|
+
"@memberjunction/ng-record-changes": "5.13.0",
|
|
45
|
+
"@memberjunction/ng-entity-viewer": "5.13.0",
|
|
46
46
|
"rxjs": "^7.8.2",
|
|
47
47
|
"tslib": "^2.8.1"
|
|
48
48
|
},
|