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

Example

<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

OnInit
OnChanges
AfterContentInit
AfterViewInit
OnDestroy

Constructors

constructor

new MjCollapsiblePanelComponent(): MjCollapsiblePanelComponent
Returns MjCollapsiblePanelComponent

Properties

BadgeCount

BadgeCount: number | undefined

Row count badge for related entity sections

DefaultExpanded

DefaultExpanded: boolean | undefined

Default expanded state when no persisted state exists

DisplayName

DisplayName: string = ''

DragEnded

DragEnded: EventEmitter<void> = ...

DragStarted

DragStarted: EventEmitter<PanelDragStartEvent> = ...

FieldComponents

FieldComponents: QueryList<MjFormFieldComponent>

FieldNames

FieldNames: string = ''

Form

Form: unknown

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

`Optional`FormContext

FormContext?: FormContext

Form-level context (search filter, showEmptyFields)

Icon

Icon: string = 'fa fa-folder'

Font Awesome icon class for the panel header

InheritedFromEntity

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.

`Optional`InheritedRecordPrimaryKey

InheritedRecordPrimaryKey?: CompositeKey

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

IsDragging

IsDragging: boolean = false

IsDragOver

IsDragOver: boolean = false

IsVisible

IsVisible: boolean = true

Navigate

Navigate: EventEmitter<FormNavigationEvent> = ...

PanelDrop

PanelDrop: EventEmitter<PanelDropEvent> = ...

SectionKey

SectionKey: string = ''

Unique key for state persistence

SectionName

SectionName: string = ''

Display name shown in the panel header

Variant

Variant: PanelVariant = 'default'

Panel visual variant

Accessors

_deprecatedForm

set _deprecatedForm(value: unknown): void
Parameters
- value: unknown
Returns void
Deprecated
Use [Form] instead
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:133

_deprecatedFormContext

set _deprecatedFormContext(value: FormContext | undefined): void
Parameters
- value: FormContext | undefined
Returns void
Deprecated
Use [FormContext] instead
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:136

_deprecatedIcon

set _deprecatedIcon(value: string): void
Parameters
- value: string
Returns void
Deprecated
Use [Icon] instead
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:130

_deprecatedSectionKey

set _deprecatedSectionKey(value: string): void
Parameters
- value: string
Returns void
Deprecated
Use [SectionKey] instead
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:124

_deprecatedSectionName

set _deprecatedSectionName(value: string): void
Parameters
- value: string
Returns void
Deprecated
Use [SectionName] instead
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:127

Collapsible

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
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:207

CssOrder

get CssOrder(): number
Returns number
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:165

Expanded

get Expanded(): boolean
Whether the panel is expanded (delegates to form state; always true when not collapsible)

Returns boolean
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:212

Hidden

get Hidden(): boolean
Returns boolean
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:116
set Hidden(value: boolean): void
Container-driven hard hide. When true the panel is removed from view regardless of search state — used by the record-form container to honor EntityFormConfig.showRelatedEntities / hiddenSectionKeys / visibleSectionKeys. Composes with (overrides) search visibility so all existing IsVisible-based section counts stay correct.
Parameters
- value: boolean
Returns void
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:107

HostClass

get HostClass(): string
Returns string
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:156

PanelContentHeight

get PanelContentHeight(): number | undefined
Persisted panel height for related-entity panels. Returns undefined to let CSS default (400px) apply.

Returns number | undefined
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:190

ReorderAllowed

get ReorderAllowed(): boolean
Whether drag-to-reorder is allowed (from FormContext)

Returns boolean
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:197

Methods

ngAfterContentInit

ngAfterContentInit(): void
A callback method that is invoked immediately after Angular has completed initialization of all of the directive's content. It is invoked only once when the directive is instantiated.

Returns void
Implementation of AfterContentInit.ngAfterContentInit
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:224

ngAfterViewInit

ngAfterViewInit(): void
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

Returns void
Implementation of AfterViewInit.ngAfterViewInit
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:247

ngOnChanges

ngOnChanges(changes: { [propName: string]: SimpleChange<any> }): void
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
Implementation of OnChanges.ngOnChanges
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:233

ngOnDestroy

ngOnDestroy(): void
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.

Returns void
Implementation of OnDestroy.ngOnDestroy
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:251

ngOnInit

ngOnInit(): 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
Implementation of OnInit.ngOnInit
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:220

OnDragEnd

OnDragEnd(): void
Returns void
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:338

OnDragLeave

OnDragLeave(event: DragEvent): void
Parameters
- event: DragEvent
Returns void
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:305

OnDragOver

OnDragOver(event: DragEvent): void
Parameters
- event: DragEvent
Returns void
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:295

OnDragStart

OnDragStart(event: DragEvent): void
Parameters
- event: DragEvent
Returns void
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:328

OnDrop

OnDrop(event: DragEvent): void
Parameters
- event: DragEvent
Returns void
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:312

OnInheritedBadgeClick

OnInheritedBadgeClick(event: MouseEvent): 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
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:276

Toggle

Toggle(): void
Returns void
- Defined in Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.ts:262

Class MjCollapsiblePanelComponent

Example

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Returns MjCollapsiblePanelComponent

Properties

BadgeCount

DefaultExpanded

DisplayName

DragEnded

DragStarted

FieldComponents

FieldNames

Form

OptionalFormContext

Icon

InheritedFromEntity

OptionalInheritedRecordPrimaryKey

IsDragging

IsDragOver

IsVisible

Navigate

PanelDrop

SectionKey

SectionName

Variant

Accessors

_deprecatedForm

Parameters

Returns void

Deprecated

_deprecatedFormContext

Parameters

Returns void

Deprecated

_deprecatedIcon

Parameters

Returns void

Deprecated

_deprecatedSectionKey

Parameters

Returns void

Deprecated

_deprecatedSectionName

Parameters

Returns void

Deprecated

Collapsible

Returns boolean

CssOrder

Returns number

Expanded

Returns boolean

Hidden

Returns boolean

Parameters

Returns void

HostClass

Returns string

PanelContentHeight

Returns number | undefined

ReorderAllowed

Returns boolean

Methods

ngAfterContentInit

Returns void

ngAfterViewInit

Returns void

ngOnChanges

Parameters

Returns void

ngOnDestroy

Returns void

ngOnInit

`Optional`FormContext

`Optional`InheritedRecordPrimaryKey