Member Junction
    Preparing search index...

    Class MjCollapsiblePanelComponent

    Reusable collapsible panel for form sections.

    Supports three visual variants:

    • default: White card with accent border (standard field sections)
    • related-entity: Blue-accented card with row count badge (related entity grids)
    • inherited: Purple-accented card with "Inherited from X" badge (IS-A parent field sections)

    Features:

    • Expand/collapse with smooth animation
    • Search filtering (hides non-matching panels, highlights matched names)
    • Drag-to-reorder sections
    • Inheritable "Inherited from X" badge with navigation event
    • Row count badge for related entity sections
    • Section indicators: an unsaved-changes dot and an invalid-field count derived live from the section's mj-form-fields (plus anything a custom section supplies through [Indicators]), published to the form's chrome rail through FormSectionIndicatorCoordinator

    Which fields belong to the section. Two sources, unioned: the @ContentChildren query over projected content, and fields that registered themselves through FORM_SECTION_FIELD_HOST, which this panel provides. The content query cannot see a field declared inside a child component's own template (a widget projected into the panel), and a section that saw none of its fields reported no required-and-empty count, claimed none of the failed save's field errors, and so never badged on the rail. The injector follows the element tree across view boundaries, so the registered set covers exactly those fields. A registered field counts only while its element is physically inside this panel, which keeps a field created in an overlay that happened to inherit this injector from being counted.

    <mj-collapsible-panel
      SectionKey="productDetails"
      SectionName="Product Details"
      Icon="fa fa-box"
      Variant="inherited"
      InheritedFromEntity="Products"
      [Form]="formComponent"
      [FormContext]="formContext"
      (Navigate)="onNavigate($event)">
      <mj-form-field ...></mj-form-field>
    </mj-collapsible-panel>

    Implements

    Index

    Constructors

    constructor

    Properties

    BadgeCount ClaimableFieldNames ClaimableFields DefaultExpanded DisplayName DragEnded DragStarted FieldComponents FieldNames Form FormContext? Icon Indicators? InheritedFromEntity InheritedRecordPrimaryKey? IsDragging IsDragOver IsVisible Navigate Order PanelDrop SectionKey SectionName ValidationSources? Variant

    Accessors

    _deprecatedForm _deprecatedFormContext _deprecatedIcon _deprecatedSectionKey _deprecatedSectionName Collapsible CssOrder Expanded FieldPanelEntity FieldPanelForm Hidden HostClass HostDirtyCount HostErrorCount HostIcon HostSectionKey HostsFieldPanels HostVariant PanelContentHeight ReorderAllowed SectionDirtyCount SectionDirtyTitle SectionErrorCount SectionErrorTitle SectionIndicators SectionWarningCount SectionWarningTitle ValidationCollectionNames

    Methods

    GetSectionIndicators MatchesSearch ngAfterContentInit ngAfterViewInit ngOnChanges ngOnDestroy ngOnInit NotifyFieldChanged OnDragEnd OnDragLeave OnDragOver OnDragStart OnDrop OnInheritedBadgeClick OwnsValidationSource RegisterField Toggle UnregisterField

    Constructors

    Properties

    BadgeCount: number | undefined

    Row count badge for related entity sections

    ClaimableFieldNames: string[] = []

    Just the names, for the field-panel slot. Same lifetime as ClaimableFields.

    ClaimableFields: { Label: string; Name: string }[] = []

    The fields this panel draws, for the contributions that stand in for one and for the composition snapshot the placement dialog reads.

    Held as fields rather than derived in getters: the field-panel slot treats a new array as a structural change, and a getter would hand it one on every change-detection pass. Recomputed only when the projected fields change.

    DefaultExpanded: boolean | undefined

    Default expanded state when no persisted state exists

    DisplayName: string = ''
    DragEnded: EventEmitter<void> = ...
    DragStarted: EventEmitter<PanelDragStartEvent> = ...
    FieldComponents: QueryList<MjFormFieldComponent>
    FieldNames: string = ''
    Form: unknown

    Reference to the parent form component for state delegation. Expected to have IsSectionExpanded, SetSectionExpanded, getSectionDisplayOrder methods.

    FormContext?: FormContext

    Form-level context (search filter, showEmptyFields)

    Icon: string = 'fa fa-folder'

    Font Awesome icon class for the panel header

    Indicators?: Partial<FormSectionIndicators> | null

    Indicator counts a custom section supplies for content that is NOT rendered by mj-form-field — a designer, an inline grid, a hand-built editor. Added to the counts this panel derives from its own fields, so a section that mixes both reports the union. Omit for ordinary field panels: their state is derived.

    <mj-collapsible-panel SectionKey="lines" [Indicators]="{ DirtyCount: LineEditor.EditedRows, ErrorCount: LineEditor.InvalidRows }">
    InheritedFromEntity: string = ''

    For 'inherited' variant: the parent entity name this section's fields come from. Displayed as "Inherited from X" badge and used for navigation.

    InheritedRecordPrimaryKey?: CompositeKey

    For 'inherited' variant: the primary key to navigate to when clicking the badge. (Shared PK in IS-A relationships.)

    IsDragging: boolean = false
    IsDragOver: boolean = false
    IsVisible: boolean = true
    Navigate: EventEmitter<FormNavigationEvent> = ...
    Order: number | null = null

    Flex order, for a panel the form's section order does not know about.

    getSectionDisplayOrder answers with the section count for an unknown key, which is the highest order on the form — so a contribution panel rendered anywhere lands last regardless of the slot it mounted in. A slot-derived order is passed here instead.

    PanelDrop: EventEmitter<PanelDropEvent> = ...
    SectionKey: string = ''

    Unique key for state persistence

    SectionName: string = ''

    Display name shown in the panel header

    ValidationSources?: string | readonly string[] | null

    Graph-path collection names whose validation failures belong to THIS panel — ValidationSources="Modifications" claims Modifications[2].ProvisionID.

    Only needed when a panel hosts a child collection whose path name differs from its SectionKey: plain field failures are joined automatically from the panel's mj-form-field children, and a graph path whose leading segment already matches the SectionKey is claimed without any declaration. Declared HERE, on the panel that owns the collection, rather than in an app-side fieldName -> sectionKey map that duplicates a fact the panel owns and drifts silently when a SectionKey is renamed. Accepts a single name or a list.

    Variant: PanelVariant = 'default'

    Panel visual variant

    Accessors

    _deprecatedForm

    _deprecatedFormContext

    _deprecatedIcon

    _deprecatedSectionKey

    _deprecatedSectionName

    • get Collapsible(): boolean

      Whether this panel's header may collapse/expand. Driven by FormContext.collapsibleSections; when false the panel renders always-expanded with no toggle chevron (used by dialog/slide-in surfaces that lock sections open). Undefined / true means collapsible.

      Returns boolean

    • get CssOrder(): number

      Flex order, in precedence: where the user put this panel, then where its host said to put it, then the form's section order.

      The user's placement comes first so a dragged panel draws where it was dropped. Order is a fixed number a host supplies (a contribution panel derives one from its slot); it applies only while the user has not placed the panel.

      Returns number

    • get PanelContentHeight(): number | undefined

      Persisted accordion resize height for related-entity panels. Related grids size themselves from row count (accordion and left-nav), so a pinned pixel height — especially 0 / toolbar-only measured while collapsed — would clip the grid. Only honor a user drag that is at least the CSS min-height.

      Returns number | undefined

    • get SectionIndicators(): FormSectionIndicators

      Live state of this section: fields edited since the last save, fields that are invalid or required-and-empty, and fields carrying warnings. Derived from the projected mj-form-fields on every read — the same state those fields use for their own amber dot and red underline, so the section can never disagree with its fields — plus graph-path validation failures this section claims, plus whatever a custom section supplies through [Indicators].

      Read during change detection (host bindings, the header template, the rail via the coordinator). Pure and cheap: one pass over the field list.

      Returns FormSectionIndicators

    Methods

    • A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

      Parameters

      • changes: { [propName: string]: SimpleChange<any> }

        The changed properties.

      Returns void

    • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

      Returns void

    • Navigate to the parent entity when clicking the "Inherited from X" badge. Derives the PrimaryKey from the Form's record when InheritedRecordPrimaryKey is not explicitly provided (which is the common case in generated templates).

      Parameters

      • event: MouseEvent

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods