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 projected mj-form-fields (plus anything a custom section supplies through [Indicators]), published to the form's chrome rail through FormSectionIndicatorCoordinator
    <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 DefaultExpanded DisplayName DragEnded DragStarted FieldComponents FieldNames Form FormContext? Icon Indicators? InheritedFromEntity InheritedRecordPrimaryKey? IsDragging IsDragOver IsVisible Navigate PanelDrop SectionKey SectionName ValidationSources? Variant

    Accessors

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

    Methods

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

    Constructors

    Properties

    BadgeCount: number | undefined

    Row count badge for related entity sections

    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> = ...
    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 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