@memberjunction/ng-ui-components 5.42.0 → 5.44.0

package/dist/lib/accordion/accordion.component.d.ts

@@ -21,6 +21,55 @@ export declare class MJAccordionTitleDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<MJAccordionTitleDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MJAccordionTitleDirective, "[mjAccordionTitle]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Directive to mark a template as the accordion header **actions** — interactive
+ * controls (edit / copy / run / checkbox, etc.) that sit in the header row but
+ * are NOT the expand/collapse toggle. Rendered as a sibling of the toggle
+ * `<button>`, so there's no button-in-button and the toggle stays a clean,
+ * accessible control.
+ *
+ * @example
+ * ```html
+ * <mj-accordion-panel>
+ *   <ng-template mjAccordionTitle>Connection</ng-template>
+ *   <ng-template mjAccordionActions>
+ *     <button mjButton variant="icon" (click)="edit()"><i class="fa fa-pen"></i></button>
+ *   </ng-template>
+ *   …body…
+ * </mj-accordion-panel>
+ * ```
+ */
+export declare class MJAccordionActionsDirective {
+    templateRef: TemplateRef<unknown>;
+    constructor(templateRef: TemplateRef<unknown>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJAccordionActionsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MJAccordionActionsDirective, "[mjAccordionActions]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to mark a template as the accordion **body** — the panel's collapsible
+ * content. Use this INSTEAD of placing content directly in the panel when the body
+ * may be expensive (code editors, grids, large lists) OR just to be future-proof:
+ * the accordion instantiates the template **lazily on first expand** and then keeps
+ * it alive, so nothing is created until the user opens the panel, while later
+ * open/close still animates. Consumers never have to reason about content weight or
+ * write `@if (expanded)` themselves.
+ *
+ * @example
+ * ```html
+ * <mj-accordion-panel [Expanded]="open" (ExpandedChange)="open = $event">
+ *   <ng-template mjAccordionTitle>Configuration</ng-template>
+ *   <ng-template mjAccordionBody>
+ *     <mj-code-editor ...></mj-code-editor>   <!-- not created until first opened -->
+ *   </ng-template>
+ * </mj-accordion-panel>
+ * ```
+ */
+export declare class MJAccordionBodyDirective {
+    templateRef: TemplateRef<unknown>;
+    constructor(templateRef: TemplateRef<unknown>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJAccordionBodyDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MJAccordionBodyDirective, "[mjAccordionBody]", never, {}, {}, never, never, true, never>;
+}
 /**
  * mj-accordion-panel — Collapsible panel. Replaces `<kendo-panelbar-item>` and `<kendo-expansionpanel>`.
  *
@@ -46,13 +95,99 @@ export declare class MJAccordionTitleDirective {
  */
 export declare class MJAccordionPanelComponent {
     Title: string;
-    Expanded: boolean;
+    private _expanded;
+    /** Latches true the first time the panel is expanded; never resets. Lets a
+     *  [mjAccordionBody] template instantiate lazily on first open and then stay
+     *  alive so subsequent open/close still animates. */
+    private _everExpanded;
+    set Expanded(value: boolean);
+    get Expanded(): boolean;
+    protected get hasBeenExpanded(): boolean;
     Disabled: boolean;
+    /**
+     * Emphasis variant for visual hierarchy:
+     * - `primary`   — bold, solid brand-colored header (use to make a panel stand out)
+     * - `secondary` — subtle brand tint
+     * - `default`   — standard neutral header
+     * All brand-token-driven, so dark-mode-safe and themeable.
+     */
+    Variant: 'default' | 'primary' | 'secondary';
+    /**
+     * Render icons projected into the title slot in the muted color instead of the
+     * header's primary text color. Lets consumers get the common "quiet icon" look
+     * without writing CSS. Status/brand-colored icons can still be colored inline.
+     */
+    TitleIconMuted: boolean;
+    /**
+     * Density. `md` (default) is the standard size; `sm` tightens header padding and
+     * font for dense contexts (sidebars, flyouts, nested panels).
+     */
+    Size: 'sm' | 'md';
+    /**
+     * Bare chrome — drop the panel's own border and header background so the panel
+     * sits cleanly inside a host that already provides chrome (e.g. an expandable
+     * card). The toggle/title/chevron/body still work; only the box styling is removed.
+     */
+    Bare: boolean;
+    /**
+     * Remove the body's default padding, for bodies that manage their own spacing
+     * (code editors, full-bleed grids, custom forms).
+     */
+    FlushBody: boolean;
+    /**
+     * Fill mode — for "rail section that owns the leftover height" cases (e.g. an
+     * entity tree or grid that should consume all remaining vertical space and
+     * scroll *internally*), rather than the default "reveal stacked content"
+     * disclosure. When set AND expanded, the panel becomes a flex column that
+     * fills its flex parent and its body becomes a `flex:1; min-height:0` region —
+     * the projected content is expected to provide its own scroll child. While
+     * collapsed, the panel behaves exactly like a normal panel (header only,
+     * natural height) and does NOT claim the leftover space.
+     *
+     * Requires the panel's parent to be a flex column with `min-height:0`.
+     * Note: the open/close height animation is skipped in fill mode (the body
+     * fills rather than animating to content height).
+     */
+    Fill: boolean;
     ExpandedChange: EventEmitter<boolean>;
     titleTemplate: MJAccordionTitleDirective | null;
+    actionsTemplate: MJAccordionActionsDirective | null;
+    bodyTemplate: MJAccordionBodyDirective | null;
     readonly hostClass = true;
+    /** Host claims flex:1 of its parent ONLY while a Fill panel is expanded —
+     *  so a collapsed Fill panel sits at natural (header) height like any other. */
+    get fillActive(): boolean;
+    /** Stable per-instance ids that programmatically associate the header
+     *  `<button>` with its body region (`aria-controls` ↔ `aria-labelledby`),
+     *  completing the WAI-ARIA accordion pattern so screen readers announce the
+     *  region with the header's name. */
+    private readonly _uid;
+    readonly HeaderId: string;
+    readonly BodyId: string;
     Toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MJAccordionPanelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MJAccordionPanelComponent, "mj-accordion-panel", never, { "Title": { "alias": "Title"; "required": false; }; "Expanded": { "alias": "Expanded"; "required": false; }; "Disabled": { "alias": "Disabled"; "required": false; }; }, { "ExpandedChange": "ExpandedChange"; }, ["titleTemplate"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJAccordionPanelComponent, "mj-accordion-panel", never, { "Title": { "alias": "Title"; "required": false; }; "Expanded": { "alias": "Expanded"; "required": false; }; "Disabled": { "alias": "Disabled"; "required": false; }; "Variant": { "alias": "Variant"; "required": false; }; "TitleIconMuted": { "alias": "TitleIconMuted"; "required": false; }; "Size": { "alias": "Size"; "required": false; }; "Bare": { "alias": "Bare"; "required": false; }; "FlushBody": { "alias": "FlushBody"; "required": false; }; "Fill": { "alias": "Fill"; "required": false; }; }, { "ExpandedChange": "ExpandedChange"; }, ["titleTemplate", "actionsTemplate", "bodyTemplate"], ["*"], true, never>;
+}
+/**
+ * Convenience module bundling the accordion panel + all of its slot directives.
+ * Import this ONE symbol instead of listing the component and each directive
+ * separately:
+ *
+ * ```ts
+ * import { MJAccordionModule } from '@memberjunction/ng-ui-components';
+ * @NgModule({ imports: [MJAccordionModule, ...] })   // or @Component standalone imports
+ * ```
+ *
+ * Why a module (not a bare `const [...]` array): Angular's AOT compiler can't
+ * statically expand a value-array imported across a compiled-package boundary in
+ * an `imports` array (NG1010), and `as const` makes it a readonly tuple the
+ * `imports` type rejects (TS2322). An NgModule is always a valid `imports` entry
+ * in both NgModule and standalone consumers. Adding a future accordion directive
+ * here makes it available to every consumer automatically — no per-module churn.
+ */
+export declare class MJAccordionModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJAccordionModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MJAccordionModule, never, [typeof MJAccordionPanelComponent, typeof MJAccordionTitleDirective, typeof MJAccordionActionsDirective, typeof MJAccordionBodyDirective], [typeof MJAccordionPanelComponent, typeof MJAccordionTitleDirective, typeof MJAccordionActionsDirective, typeof MJAccordionBodyDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MJAccordionModule>;
 }
 //# sourceMappingURL=accordion.component.d.ts.map

package/dist/lib/accordion/accordion.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.component.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAA6B,WAAW,EAAa,MAAM,eAAe,CAAC;;AAG1H;;;;;;;;;;;;;;GAcG;AACH,qBAIa,yBAAyB;IACjB,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;gBAAjC,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;yCADzC,yBAAyB;2CAAzB,yBAAyB;CAErC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBA2Ba,yBAAyB;IAC3B,KAAK,SAAM;IACX,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAChB,cAAc,wBAA+B;IACd,aAAa,EAAE,yBAAyB,GAAG,IAAI,CAAQ;IAClD,QAAQ,CAAC,SAAS,QAAQ;IAExE,MAAM,IAAI,IAAI;yCARH,yBAAyB;2CAAzB,yBAAyB;CAarC"}
+{"version":3,"file":"accordion.component.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAA6B,WAAW,EAAuB,MAAM,eAAe,CAAC;;AAOpI;;;;;;;;;;;;;;GAcG;AACH,qBAIa,yBAAyB;IACjB,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;gBAAjC,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;yCADzC,yBAAyB;2CAAzB,yBAAyB;CAErC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAIa,2BAA2B;IACnB,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;gBAAjC,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;yCADzC,2BAA2B;2CAA3B,2BAA2B;CAEvC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAIa,wBAAwB;IAChB,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;gBAAjC,WAAW,EAAE,WAAW,CAAC,OAAO,CAAC;yCADzC,wBAAwB;2CAAxB,wBAAwB;CAEpC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAwDa,yBAAyB;IAC3B,KAAK,SAAM;IACpB,OAAO,CAAC,SAAS,CAAS;IAC1B;;yDAEqD;IACrD,OAAO,CAAC,aAAa,CAAS;IAC9B,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IACD,IAAI,QAAQ,IAAI,OAAO,CAA2B;IAClD,SAAS,KAAK,eAAe,IAAI,OAAO,CAA+B;IAC9D,QAAQ,UAAS;IAC1B;;;;;;OAMG;IACM,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,CAAa;IAClE;;;;OAIG;IACM,cAAc,UAAS;IAChC;;;OAGG;IACM,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAClC;;;;OAIG;IACM,IAAI,UAAS;IACtB;;;OAGG;IACM,SAAS,UAAS;IAC3B;;;;;;;;;;;;;OAaG;IACM,IAAI,UAAS;IACZ,cAAc,wBAA+B;IACd,aAAa,EAAE,yBAAyB,GAAG,IAAI,CAAQ;IACrD,eAAe,EAAE,2BAA2B,GAAG,IAAI,CAAQ;IAC9D,YAAY,EAAE,wBAAwB,GAAG,IAAI,CAAQ;IAC/C,QAAQ,CAAC,SAAS,QAAQ;IACxE;oFACgF;IAChF,IAAmD,UAAU,IAAI,OAAO,CAEvE;IAED;;;yCAGqC;IACrC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAsB;IAC3C,QAAQ,CAAC,QAAQ,SAAsC;IACvD,QAAQ,CAAC,MAAM,SAAoC;IAEnD,MAAM,IAAI,IAAI;yCA/EH,yBAAyB;2CAAzB,yBAAyB;CAoFrC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBAca,iBAAiB;yCAAjB,iBAAiB;0CAAjB,iBAAiB,iBArHjB,yBAAyB,SAxIzB,yBAAyB,SA0BzB,2BAA2B,SA2B3B,wBAAwB,WAmFxB,yBAAyB,SAxIzB,yBAAyB,SA0BzB,2BAA2B,SA2B3B,wBAAwB;0CAwMxB,iBAAiB;CAAG"}

package/dist/lib/accordion/accordion.component.js

@@ -1,14 +1,14 @@
-import { Component, Input, Output, EventEmitter, HostBinding, ContentChild, Directive } from '@angular/core';
+import { Component, Input, Output, EventEmitter, HostBinding, ContentChild, Directive, NgModule } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
-function MJAccordionPanelComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 3);
+function MJAccordionPanelComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 4);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.titleTemplate.templateRef);
 } }
-function MJAccordionPanelComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function MJAccordionPanelComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -16,9 +16,22 @@ function MJAccordionPanelComponent_Conditional_4_Template(rf, ctx) { if (rf & 1)
 } }
 function MJAccordionPanelComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵprojection(1);
+    i0.ɵɵelementContainer(1, 4);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.actionsTemplate.templateRef);
 } }
+function MJAccordionPanelComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 4);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.bodyTemplate.templateRef);
+} }
+/** Process-wide counter for generating unique, stable accordion element ids
+ *  (used to wire `aria-controls` / `aria-labelledby` between header and body). */
+let nextAccordionUid = 0;
 /**
  * Directive to mark a template as the accordion panel title.
  * Supports rich HTML content (icons, badges, dynamic text).
@@ -49,6 +62,73 @@ export class MJAccordionTitleDirective {
                 standalone: true
             }]
     }], () => [{ type: i0.TemplateRef }], null); })();
+/**
+ * Directive to mark a template as the accordion header **actions** — interactive
+ * controls (edit / copy / run / checkbox, etc.) that sit in the header row but
+ * are NOT the expand/collapse toggle. Rendered as a sibling of the toggle
+ * `<button>`, so there's no button-in-button and the toggle stays a clean,
+ * accessible control.
+ *
+ * @example
+ * ```html
+ * <mj-accordion-panel>
+ *   <ng-template mjAccordionTitle>Connection</ng-template>
+ *   <ng-template mjAccordionActions>
+ *     <button mjButton variant="icon" (click)="edit()"><i class="fa fa-pen"></i></button>
+ *   </ng-template>
+ *   …body…
+ * </mj-accordion-panel>
+ * ```
+ */
+export class MJAccordionActionsDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = function MJAccordionActionsDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJAccordionActionsDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef)); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MJAccordionActionsDirective, selectors: [["", "mjAccordionActions", ""]] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAccordionActionsDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[mjAccordionActions]',
+                standalone: true
+            }]
+    }], () => [{ type: i0.TemplateRef }], null); })();
+/**
+ * Directive to mark a template as the accordion **body** — the panel's collapsible
+ * content. Use this INSTEAD of placing content directly in the panel when the body
+ * may be expensive (code editors, grids, large lists) OR just to be future-proof:
+ * the accordion instantiates the template **lazily on first expand** and then keeps
+ * it alive, so nothing is created until the user opens the panel, while later
+ * open/close still animates. Consumers never have to reason about content weight or
+ * write `@if (expanded)` themselves.
+ *
+ * @example
+ * ```html
+ * <mj-accordion-panel [Expanded]="open" (ExpandedChange)="open = $event">
+ *   <ng-template mjAccordionTitle>Configuration</ng-template>
+ *   <ng-template mjAccordionBody>
+ *     <mj-code-editor ...></mj-code-editor>   <!-- not created until first opened -->
+ *   </ng-template>
+ * </mj-accordion-panel>
+ * ```
+ */
+export class MJAccordionBodyDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = function MJAccordionBodyDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJAccordionBodyDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef)); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MJAccordionBodyDirective, selectors: [["", "mjAccordionBody", ""]] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAccordionBodyDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[mjAccordionBody]',
+                standalone: true
+            }]
+    }], () => [{ type: i0.TemplateRef }], null); })();
 /**
  * mj-accordion-panel — Collapsible panel. Replaces `<kendo-panelbar-item>` and `<kendo-expansionpanel>`.
  *
@@ -74,11 +154,81 @@ export class MJAccordionTitleDirective {
  */
 export class MJAccordionPanelComponent {
     Title = '';
-    Expanded = false;
+    _expanded = false;
+    /** Latches true the first time the panel is expanded; never resets. Lets a
+     *  [mjAccordionBody] template instantiate lazily on first open and then stay
+     *  alive so subsequent open/close still animates. */
+    _everExpanded = false;
+    set Expanded(value) {
+        this._expanded = value;
+        if (value)
+            this._everExpanded = true;
+    }
+    get Expanded() { return this._expanded; }
+    get hasBeenExpanded() { return this._everExpanded; }
     Disabled = false;
+    /**
+     * Emphasis variant for visual hierarchy:
+     * - `primary`   — bold, solid brand-colored header (use to make a panel stand out)
+     * - `secondary` — subtle brand tint
+     * - `default`   — standard neutral header
+     * All brand-token-driven, so dark-mode-safe and themeable.
+     */
+    Variant = 'default';
+    /**
+     * Render icons projected into the title slot in the muted color instead of the
+     * header's primary text color. Lets consumers get the common "quiet icon" look
+     * without writing CSS. Status/brand-colored icons can still be colored inline.
+     */
+    TitleIconMuted = false;
+    /**
+     * Density. `md` (default) is the standard size; `sm` tightens header padding and
+     * font for dense contexts (sidebars, flyouts, nested panels).
+     */
+    Size = 'md';
+    /**
+     * Bare chrome — drop the panel's own border and header background so the panel
+     * sits cleanly inside a host that already provides chrome (e.g. an expandable
+     * card). The toggle/title/chevron/body still work; only the box styling is removed.
+     */
+    Bare = false;
+    /**
+     * Remove the body's default padding, for bodies that manage their own spacing
+     * (code editors, full-bleed grids, custom forms).
+     */
+    FlushBody = false;
+    /**
+     * Fill mode — for "rail section that owns the leftover height" cases (e.g. an
+     * entity tree or grid that should consume all remaining vertical space and
+     * scroll *internally*), rather than the default "reveal stacked content"
+     * disclosure. When set AND expanded, the panel becomes a flex column that
+     * fills its flex parent and its body becomes a `flex:1; min-height:0` region —
+     * the projected content is expected to provide its own scroll child. While
+     * collapsed, the panel behaves exactly like a normal panel (header only,
+     * natural height) and does NOT claim the leftover space.
+     *
+     * Requires the panel's parent to be a flex column with `min-height:0`.
+     * Note: the open/close height animation is skipped in fill mode (the body
+     * fills rather than animating to content height).
+     */
+    Fill = false;
     ExpandedChange = new EventEmitter();
     titleTemplate = null;
+    actionsTemplate = null;
+    bodyTemplate = null;
     hostClass = true;
+    /** Host claims flex:1 of its parent ONLY while a Fill panel is expanded —
+     *  so a collapsed Fill panel sits at natural (header) height like any other. */
+    get fillActive() {
+        return this.Fill && this.Expanded;
+    }
+    /** Stable per-instance ids that programmatically associate the header
+     *  `<button>` with its body region (`aria-controls` ↔ `aria-labelledby`),
+     *  completing the WAI-ARIA accordion pattern so screen readers announce the
+     *  region with the header's name. */
+    _uid = nextAccordionUid++;
+    HeaderId = `mj-accordion-header-${this._uid}`;
+    BodyId = `mj-accordion-body-${this._uid}`;
     Toggle() {
         if (this.Disabled)
             return;
@@ -87,32 +237,49 @@ export class MJAccordionPanelComponent {
     }
     static ɵfac = function MJAccordionPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJAccordionPanelComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJAccordionPanelComponent, selectors: [["mj-accordion-panel"]], contentQueries: function MJAccordionPanelComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, MJAccordionTitleDirective, 5);
+            i0.ɵɵcontentQuery(dirIndex, MJAccordionTitleDirective, 5)(dirIndex, MJAccordionActionsDirective, 5)(dirIndex, MJAccordionBodyDirective, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.titleTemplate = _t.first);
-        } }, hostVars: 2, hostBindings: function MJAccordionPanelComponent_HostBindings(rf, ctx) { if (rf & 2) {
-            i0.ɵɵclassProp("mj-accordion-panel-host", ctx.hostClass);
-        } }, inputs: { Title: "Title", Expanded: "Expanded", Disabled: "Disabled" }, outputs: { ExpandedChange: "ExpandedChange" }, ngContentSelectors: _c0, decls: 7, vars: 8, consts: [[1, "mj-accordion-panel"], ["type", "button", 1, "mj-accordion-header", 3, "click", "disabled"], [1, "mj-accordion-title"], [3, "ngTemplateOutlet"], [1, "fa-solid", "fa-chevron-down", "mj-accordion-icon"], ["role", "region", 1, "mj-accordion-body"]], template: function MJAccordionPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.actionsTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.bodyTemplate = _t.first);
+        } }, hostVars: 4, hostBindings: function MJAccordionPanelComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassProp("mj-accordion-panel-host", ctx.hostClass)("mj-accordion-fill-active", ctx.fillActive);
+        } }, inputs: { Title: "Title", Expanded: "Expanded", Disabled: "Disabled", Variant: "Variant", TitleIconMuted: "TitleIconMuted", Size: "Size", Bare: "Bare", FlushBody: "FlushBody", Fill: "Fill" }, outputs: { ExpandedChange: "ExpandedChange" }, ngContentSelectors: _c0, decls: 14, vars: 26, consts: [[1, "mj-accordion-panel"], [1, "mj-accordion-header-row"], ["type", "button", 1, "mj-accordion-header", 3, "click", "id", "disabled"], [1, "mj-accordion-title"], [3, "ngTemplateOutlet"], [1, "mj-accordion-actions"], ["type", "button", "tabindex", "-1", "aria-hidden", "true", 1, "mj-accordion-chevron", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-down", "mj-accordion-icon"], [1, "mj-accordion-body-outer"], [1, "mj-accordion-body-clip"], ["role", "region", 1, "mj-accordion-body", 3, "id"]], template: function MJAccordionPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
-            i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
-            i0.ɵɵlistener("click", function MJAccordionPanelComponent_Template_button_click_1_listener() { return ctx.Toggle(); });
-            i0.ɵɵelementStart(2, "span", 2);
-            i0.ɵɵconditionalCreate(3, MJAccordionPanelComponent_Conditional_3_Template, 1, 1, "ng-container", 3)(4, MJAccordionPanelComponent_Conditional_4_Template, 1, 1);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(5, "i", 4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(6, MJAccordionPanelComponent_Conditional_6_Template, 2, 0, "div", 5);
-            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
+            i0.ɵɵlistener("click", function MJAccordionPanelComponent_Template_button_click_2_listener() { return ctx.Toggle(); });
+            i0.ɵɵelementStart(3, "span", 3);
+            i0.ɵɵconditionalCreate(4, MJAccordionPanelComponent_Conditional_4_Template, 1, 1, "ng-container", 4)(5, MJAccordionPanelComponent_Conditional_5_Template, 1, 1);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(6, MJAccordionPanelComponent_Conditional_6_Template, 2, 1, "div", 5);
+            i0.ɵɵelementStart(7, "button", 6);
+            i0.ɵɵlistener("click", function MJAccordionPanelComponent_Template_button_click_7_listener() { return ctx.Toggle(); });
+            i0.ɵɵelement(8, "i", 7);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(9, "div", 8)(10, "div", 9)(11, "div", 10);
+            i0.ɵɵprojection(12);
+            i0.ɵɵconditionalCreate(13, MJAccordionPanelComponent_Conditional_13_Template, 1, 1, "ng-container", 4);
+            i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
-            i0.ɵɵclassProp("mj-accordion-panel--expanded", ctx.Expanded)("mj-accordion-panel--disabled", ctx.Disabled);
+            i0.ɵɵclassProp("mj-accordion-panel--expanded", ctx.Expanded)("mj-accordion-panel--disabled", ctx.Disabled)("mj-accordion-panel--muted-icon", ctx.TitleIconMuted)("mj-accordion-panel--sm", ctx.Size === "sm")("mj-accordion-panel--bare", ctx.Bare)("mj-accordion-panel--flush-body", ctx.FlushBody)("mj-accordion-panel--fill", ctx.Fill);
+            i0.ɵɵattribute("data-variant", ctx.Variant !== "default" ? ctx.Variant : null);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("id", ctx.HeaderId)("disabled", ctx.Disabled);
+            i0.ɵɵattribute("aria-expanded", ctx.Expanded)("aria-controls", ctx.BodyId);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.titleTemplate ? 4 : 5);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.actionsTemplate ? 6 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("disabled", ctx.Disabled);
-            i0.ɵɵattribute("aria-expanded", ctx.Expanded);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.titleTemplate ? 3 : 4);
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.Expanded ? 6 : -1);
+            i0.ɵɵattribute("inert", ctx.Expanded ? null : "");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("id", ctx.BodyId);
+            i0.ɵɵattribute("aria-labelledby", ctx.HeaderId);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.bodyTemplate && (ctx.Expanded || ctx.hasBeenExpanded) ? 13 : -1);
         } }, dependencies: [NgTemplateOutlet], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAccordionPanelComponent, [{
@@ -122,25 +289,54 @@ export class MJAccordionPanelComponent {
                 standalone: true,
                 imports: [NgTemplateOutlet],
                 template: `
-    <div class="mj-accordion-panel" [class.mj-accordion-panel--expanded]="Expanded" [class.mj-accordion-panel--disabled]="Disabled">
-      <button class="mj-accordion-header" type="button"
-        [attr.aria-expanded]="Expanded"
-        [disabled]="Disabled"
-        (click)="Toggle()">
-        <span class="mj-accordion-title">
-          @if (titleTemplate) {
-            <ng-container [ngTemplateOutlet]="titleTemplate.templateRef"></ng-container>
-          } @else {
-            {{ Title }}
-          }
-        </span>
-        <i class="fa-solid fa-chevron-down mj-accordion-icon"></i>
-      </button>
-      @if (Expanded) {
-        <div class="mj-accordion-body" role="region">
-          <ng-content></ng-content>
+    <div class="mj-accordion-panel" [class.mj-accordion-panel--expanded]="Expanded" [class.mj-accordion-panel--disabled]="Disabled"
+      [class.mj-accordion-panel--muted-icon]="TitleIconMuted"
+      [class.mj-accordion-panel--sm]="Size === 'sm'"
+      [class.mj-accordion-panel--bare]="Bare"
+      [class.mj-accordion-panel--flush-body]="FlushBody"
+      [class.mj-accordion-panel--fill]="Fill"
+      [attr.data-variant]="Variant !== 'default' ? Variant : null">
+      <div class="mj-accordion-header-row">
+        <button class="mj-accordion-header" type="button"
+          [id]="HeaderId"
+          [attr.aria-expanded]="Expanded"
+          [attr.aria-controls]="BodyId"
+          [disabled]="Disabled"
+          (click)="Toggle()">
+          <span class="mj-accordion-title">
+            @if (titleTemplate) {
+              <ng-container [ngTemplateOutlet]="titleTemplate.templateRef"></ng-container>
+            } @else {
+              {{ Title }}
+            }
+          </span>
+        </button>
+        @if (actionsTemplate) {
+          <div class="mj-accordion-actions">
+            <ng-container [ngTemplateOutlet]="actionsTemplate.templateRef"></ng-container>
+          </div>
+        }
+        <!-- The chevron is ALWAYS the rightmost element of the header row (after any
+             actions). It's a secondary, a11y-hidden toggle affordance — the primary
+             disclosure control is the title button above (which owns aria-expanded). -->
+        <button class="mj-accordion-chevron" type="button" tabindex="-1" aria-hidden="true"
+          [disabled]="Disabled" (click)="Toggle()">
+          <i class="fa-solid fa-chevron-down mj-accordion-icon"></i>
+        </button>
+      </div>
+      <div class="mj-accordion-body-outer" [attr.inert]="Expanded ? null : ''">
+        <div class="mj-accordion-body-clip">
+          <div class="mj-accordion-body" role="region" [id]="BodyId" [attr.aria-labelledby]="HeaderId">
+            <!-- Legacy: content placed directly in the panel (eager). -->
+            <ng-content></ng-content>
+            <!-- Preferred: [mjAccordionBody] template — instantiated lazily on first
+                 expand, then kept alive so later toggles still animate. -->
+            @if (bodyTemplate && (Expanded || hasBeenExpanded)) {
+              <ng-container [ngTemplateOutlet]="bodyTemplate.templateRef"></ng-container>
+            }
+          </div>
         </div>
-      }
+      </div>
     </div>
   `
             }]
@@ -150,14 +346,75 @@ export class MJAccordionPanelComponent {
             type: Input
         }], Disabled: [{
             type: Input
+        }], Variant: [{
+            type: Input
+        }], TitleIconMuted: [{
+            type: Input
+        }], Size: [{
+            type: Input
+        }], Bare: [{
+            type: Input
+        }], FlushBody: [{
+            type: Input
+        }], Fill: [{
+            type: Input
         }], ExpandedChange: [{
             type: Output
         }], titleTemplate: [{
             type: ContentChild,
             args: [MJAccordionTitleDirective]
+        }], actionsTemplate: [{
+            type: ContentChild,
+            args: [MJAccordionActionsDirective]
+        }], bodyTemplate: [{
+            type: ContentChild,
+            args: [MJAccordionBodyDirective]
         }], hostClass: [{
             type: HostBinding,
             args: ['class.mj-accordion-panel-host']
+        }], fillActive: [{
+            type: HostBinding,
+            args: ['class.mj-accordion-fill-active']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJAccordionPanelComponent, { className: "MJAccordionPanelComponent", filePath: "lib/accordion/accordion.component.ts", lineNumber: 77 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJAccordionPanelComponent, { className: "MJAccordionPanelComponent", filePath: "lib/accordion/accordion.component.ts", lineNumber: 163 }); })();
+/**
+ * Convenience module bundling the accordion panel + all of its slot directives.
+ * Import this ONE symbol instead of listing the component and each directive
+ * separately:
+ *
+ * ```ts
+ * import { MJAccordionModule } from '@memberjunction/ng-ui-components';
+ * @NgModule({ imports: [MJAccordionModule, ...] })   // or @Component standalone imports
+ * ```
+ *
+ * Why a module (not a bare `const [...]` array): Angular's AOT compiler can't
+ * statically expand a value-array imported across a compiled-package boundary in
+ * an `imports` array (NG1010), and `as const` makes it a readonly tuple the
+ * `imports` type rejects (TS2322). An NgModule is always a valid `imports` entry
+ * in both NgModule and standalone consumers. Adding a future accordion directive
+ * here makes it available to every consumer automatically — no per-module churn.
+ */
+export class MJAccordionModule {
+    static ɵfac = function MJAccordionModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJAccordionModule)(); };
+    static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: MJAccordionModule });
+    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({});
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAccordionModule, [{
+        type: NgModule,
+        args: [{
+                imports: [
+                    MJAccordionPanelComponent,
+                    MJAccordionTitleDirective,
+                    MJAccordionActionsDirective,
+                    MJAccordionBodyDirective,
+                ],
+                exports: [
+                    MJAccordionPanelComponent,
+                    MJAccordionTitleDirective,
+                    MJAccordionActionsDirective,
+                    MJAccordionBodyDirective,
+                ],
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MJAccordionModule, { imports: [MJAccordionPanelComponent, MJAccordionTitleDirective, MJAccordionActionsDirective, MJAccordionBodyDirective], exports: [MJAccordionPanelComponent, MJAccordionTitleDirective, MJAccordionActionsDirective, MJAccordionBodyDirective] }); })();
 //# sourceMappingURL=accordion.component.js.map

package/dist/lib/accordion/accordion.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.component.js","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAe,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1H,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;;;;IA4DvC,2BAA4E;;;IAA9D,mEAA8C;;;IAE5D,YACF;;;IADE,6CACF;;;IAKF,8BAA6C;IAC3C,kBAAyB;IAC3B,iBAAM;;AApEd;;;;;;;;;;;;;;GAcG;AAKH,MAAM,OAAO,yBAAyB;IACjB;IAAnB,YAAmB,WAAiC;QAAjC,gBAAW,GAAX,WAAW,CAAsB;IAAG,CAAC;mHAD7C,yBAAyB;6DAAzB,yBAAyB;;iFAAzB,yBAAyB;cAJrC,SAAS;eAAC;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,UAAU,EAAE,IAAI;aACjB;;AAKD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AA4BH,MAAM,OAAO,yBAAyB;IAC3B,KAAK,GAAG,EAAE,CAAC;IACX,QAAQ,GAAG,KAAK,CAAC;IACjB,QAAQ,GAAG,KAAK,CAAC;IAChB,cAAc,GAAG,IAAI,YAAY,EAAW,CAAC;IACd,aAAa,GAAqC,IAAI,CAAC;IACzC,SAAS,GAAG,IAAI,CAAC;IAExE,MAAM;QACJ,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC;mHAZU,yBAAyB;6DAAzB,yBAAyB;wCAKtB,yBAAyB;;;;;YAL5B,wDAAyB;;;YArBhC,AADF,8BAAgI,gBAIzG;YAAnB,sGAAS,YAAQ,IAAC;YAClB,+BAAiC;YAG7B,AAFF,oGAAqB,2DAEZ;YAGX,iBAAO;YACP,uBAA0D;YAC5D,iBAAS;YACT,2FAAgB;YAKlB,iBAAM;;YAnB0E,AAAhD,4DAA+C,8CAAgD;YAG3H,cAAqB;YAArB,uCAAqB;;YAGnB,eAIC;YAJD,2CAIC;YAIL,eAIC;YAJD,uCAIC;4BApBK,gBAAgB;;iFAwBf,yBAAyB;cA3BrC,SAAS;eAAC;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,UAAU,EAAE,IAAI;gBAChB,OAAO,EAAE,CAAC,gBAAgB,CAAC;gBAC3B,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;GAqBT;aACF;;kBAEE,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,MAAM;;kBACN,YAAY;mBAAC,yBAAyB;;kBACtC,WAAW;mBAAC,+BAA+B;;kFANjC,yBAAyB","sourcesContent":["import { Component, Input, Output, EventEmitter, HostBinding, ContentChild, TemplateRef, Directive } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\n\n/**\n * Directive to mark a template as the accordion panel title.\n * Supports rich HTML content (icons, badges, dynamic text).\n *\n * @example\n * ```html\n * <mj-accordion-panel [Expanded]=\"true\">\n *   <ng-template mjAccordionTitle>\n *     <i class=\"fa-solid fa-code\"></i> Template Editor\n *     <span class=\"badge\">3</span>\n *   </ng-template>\n *   <p>Panel content here</p>\n * </mj-accordion-panel>\n * ```\n */\n@Directive({\n  selector: '[mjAccordionTitle]',\n  standalone: true\n})\nexport class MJAccordionTitleDirective {\n  constructor(public templateRef: TemplateRef<unknown>) {}\n}\n\n/**\n * mj-accordion-panel — Collapsible panel. Replaces `<kendo-panelbar-item>` and `<kendo-expansionpanel>`.\n *\n * Supports two title modes:\n * - Simple string: `[Title]=\"'Details'\"` — plain text title\n * - Rich template: `<ng-template mjAccordionTitle>` — HTML with icons, badges, etc.\n *\n * @example\n * ```html\n * <!-- Simple string title -->\n * <mj-accordion-panel Title=\"Details\" [Expanded]=\"true\">\n *   <p>Panel content here</p>\n * </mj-accordion-panel>\n *\n * <!-- Rich HTML title -->\n * <mj-accordion-panel [Expanded]=\"true\">\n *   <ng-template mjAccordionTitle>\n *     <i class=\"fa-solid fa-code\"></i> Template Editor\n *   </ng-template>\n *   <p>Panel content here</p>\n * </mj-accordion-panel>\n * ```\n */\n@Component({\n  selector: 'mj-accordion-panel',\n  standalone: true,\n  imports: [NgTemplateOutlet],\n  template: `\n    <div class=\"mj-accordion-panel\" [class.mj-accordion-panel--expanded]=\"Expanded\" [class.mj-accordion-panel--disabled]=\"Disabled\">\n      <button class=\"mj-accordion-header\" type=\"button\"\n        [attr.aria-expanded]=\"Expanded\"\n        [disabled]=\"Disabled\"\n        (click)=\"Toggle()\">\n        <span class=\"mj-accordion-title\">\n          @if (titleTemplate) {\n            <ng-container [ngTemplateOutlet]=\"titleTemplate.templateRef\"></ng-container>\n          } @else {\n            {{ Title }}\n          }\n        </span>\n        <i class=\"fa-solid fa-chevron-down mj-accordion-icon\"></i>\n      </button>\n      @if (Expanded) {\n        <div class=\"mj-accordion-body\" role=\"region\">\n          <ng-content></ng-content>\n        </div>\n      }\n    </div>\n  `\n})\nexport class MJAccordionPanelComponent {\n  @Input() Title = '';\n  @Input() Expanded = false;\n  @Input() Disabled = false;\n  @Output() ExpandedChange = new EventEmitter<boolean>();\n  @ContentChild(MJAccordionTitleDirective) titleTemplate: MJAccordionTitleDirective | null = null;\n  @HostBinding('class.mj-accordion-panel-host') readonly hostClass = true;\n\n  Toggle(): void {\n    if (this.Disabled) return;\n    this.Expanded = !this.Expanded;\n    this.ExpandedChange.emit(this.Expanded);\n  }\n}\n"]}
+{"version":3,"file":"accordion.component.js","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, HostBinding, ContentChild, TemplateRef, Directive, NgModule } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\n\n/** Process-wide counter for generating unique, stable accordion element ids\n *  (used to wire `aria-controls` / `aria-labelledby` between header and body). */\nlet nextAccordionUid = 0;\n\n/**\n * Directive to mark a template as the accordion panel title.\n * Supports rich HTML content (icons, badges, dynamic text).\n *\n * @example\n * ```html\n * <mj-accordion-panel [Expanded]=\"true\">\n *   <ng-template mjAccordionTitle>\n *     <i class=\"fa-solid fa-code\"></i> Template Editor\n *     <span class=\"badge\">3</span>\n *   </ng-template>\n *   <p>Panel content here</p>\n * </mj-accordion-panel>\n * ```\n */\n@Directive({\n  selector: '[mjAccordionTitle]',\n  standalone: true\n})\nexport class MJAccordionTitleDirective {\n  constructor(public templateRef: TemplateRef<unknown>) {}\n}\n\n/**\n * Directive to mark a template as the accordion header **actions** — interactive\n * controls (edit / copy / run / checkbox, etc.) that sit in the header row but\n * are NOT the expand/collapse toggle. Rendered as a sibling of the toggle\n * `<button>`, so there's no button-in-button and the toggle stays a clean,\n * accessible control.\n *\n * @example\n * ```html\n * <mj-accordion-panel>\n *   <ng-template mjAccordionTitle>Connection</ng-template>\n *   <ng-template mjAccordionActions>\n *     <button mjButton variant=\"icon\" (click)=\"edit()\"><i class=\"fa fa-pen\"></i></button>\n *   </ng-template>\n *   …body…\n * </mj-accordion-panel>\n * ```\n */\n@Directive({\n  selector: '[mjAccordionActions]',\n  standalone: true\n})\nexport class MJAccordionActionsDirective {\n  constructor(public templateRef: TemplateRef<unknown>) {}\n}\n\n/**\n * Directive to mark a template as the accordion **body** — the panel's collapsible\n * content. Use this INSTEAD of placing content directly in the panel when the body\n * may be expensive (code editors, grids, large lists) OR just to be future-proof:\n * the accordion instantiates the template **lazily on first expand** and then keeps\n * it alive, so nothing is created until the user opens the panel, while later\n * open/close still animates. Consumers never have to reason about content weight or\n * write `@if (expanded)` themselves.\n *\n * @example\n * ```html\n * <mj-accordion-panel [Expanded]=\"open\" (ExpandedChange)=\"open = $event\">\n *   <ng-template mjAccordionTitle>Configuration</ng-template>\n *   <ng-template mjAccordionBody>\n *     <mj-code-editor ...></mj-code-editor>   <!-- not created until first opened -->\n *   </ng-template>\n * </mj-accordion-panel>\n * ```\n */\n@Directive({\n  selector: '[mjAccordionBody]',\n  standalone: true\n})\nexport class MJAccordionBodyDirective {\n  constructor(public templateRef: TemplateRef<unknown>) {}\n}\n\n/**\n * mj-accordion-panel — Collapsible panel. Replaces `<kendo-panelbar-item>` and `<kendo-expansionpanel>`.\n *\n * Supports two title modes:\n * - Simple string: `[Title]=\"'Details'\"` — plain text title\n * - Rich template: `<ng-template mjAccordionTitle>` — HTML with icons, badges, etc.\n *\n * @example\n * ```html\n * <!-- Simple string title -->\n * <mj-accordion-panel Title=\"Details\" [Expanded]=\"true\">\n *   <p>Panel content here</p>\n * </mj-accordion-panel>\n *\n * <!-- Rich HTML title -->\n * <mj-accordion-panel [Expanded]=\"true\">\n *   <ng-template mjAccordionTitle>\n *     <i class=\"fa-solid fa-code\"></i> Template Editor\n *   </ng-template>\n *   <p>Panel content here</p>\n * </mj-accordion-panel>\n * ```\n */\n@Component({\n  selector: 'mj-accordion-panel',\n  standalone: true,\n  imports: [NgTemplateOutlet],\n  template: `\n    <div class=\"mj-accordion-panel\" [class.mj-accordion-panel--expanded]=\"Expanded\" [class.mj-accordion-panel--disabled]=\"Disabled\"\n      [class.mj-accordion-panel--muted-icon]=\"TitleIconMuted\"\n      [class.mj-accordion-panel--sm]=\"Size === 'sm'\"\n      [class.mj-accordion-panel--bare]=\"Bare\"\n      [class.mj-accordion-panel--flush-body]=\"FlushBody\"\n      [class.mj-accordion-panel--fill]=\"Fill\"\n      [attr.data-variant]=\"Variant !== 'default' ? Variant : null\">\n      <div class=\"mj-accordion-header-row\">\n        <button class=\"mj-accordion-header\" type=\"button\"\n          [id]=\"HeaderId\"\n          [attr.aria-expanded]=\"Expanded\"\n          [attr.aria-controls]=\"BodyId\"\n          [disabled]=\"Disabled\"\n          (click)=\"Toggle()\">\n          <span class=\"mj-accordion-title\">\n            @if (titleTemplate) {\n              <ng-container [ngTemplateOutlet]=\"titleTemplate.templateRef\"></ng-container>\n            } @else {\n              {{ Title }}\n            }\n          </span>\n        </button>\n        @if (actionsTemplate) {\n          <div class=\"mj-accordion-actions\">\n            <ng-container [ngTemplateOutlet]=\"actionsTemplate.templateRef\"></ng-container>\n          </div>\n        }\n        <!-- The chevron is ALWAYS the rightmost element of the header row (after any\n             actions). It's a secondary, a11y-hidden toggle affordance — the primary\n             disclosure control is the title button above (which owns aria-expanded). -->\n        <button class=\"mj-accordion-chevron\" type=\"button\" tabindex=\"-1\" aria-hidden=\"true\"\n          [disabled]=\"Disabled\" (click)=\"Toggle()\">\n          <i class=\"fa-solid fa-chevron-down mj-accordion-icon\"></i>\n        </button>\n      </div>\n      <div class=\"mj-accordion-body-outer\" [attr.inert]=\"Expanded ? null : ''\">\n        <div class=\"mj-accordion-body-clip\">\n          <div class=\"mj-accordion-body\" role=\"region\" [id]=\"BodyId\" [attr.aria-labelledby]=\"HeaderId\">\n            <!-- Legacy: content placed directly in the panel (eager). -->\n            <ng-content></ng-content>\n            <!-- Preferred: [mjAccordionBody] template — instantiated lazily on first\n                 expand, then kept alive so later toggles still animate. -->\n            @if (bodyTemplate && (Expanded || hasBeenExpanded)) {\n              <ng-container [ngTemplateOutlet]=\"bodyTemplate.templateRef\"></ng-container>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  `\n})\nexport class MJAccordionPanelComponent {\n  @Input() Title = '';\n  private _expanded = false;\n  /** Latches true the first time the panel is expanded; never resets. Lets a\n   *  [mjAccordionBody] template instantiate lazily on first open and then stay\n   *  alive so subsequent open/close still animates. */\n  private _everExpanded = false;\n  @Input()\n  set Expanded(value: boolean) {\n    this._expanded = value;\n    if (value) this._everExpanded = true;\n  }\n  get Expanded(): boolean { return this._expanded; }\n  protected get hasBeenExpanded(): boolean { return this._everExpanded; }\n  @Input() Disabled = false;\n  /**\n   * Emphasis variant for visual hierarchy:\n   * - `primary`   — bold, solid brand-colored header (use to make a panel stand out)\n   * - `secondary` — subtle brand tint\n   * - `default`   — standard neutral header\n   * All brand-token-driven, so dark-mode-safe and themeable.\n   */\n  @Input() Variant: 'default' | 'primary' | 'secondary' = 'default';\n  /**\n   * Render icons projected into the title slot in the muted color instead of the\n   * header's primary text color. Lets consumers get the common \"quiet icon\" look\n   * without writing CSS. Status/brand-colored icons can still be colored inline.\n   */\n  @Input() TitleIconMuted = false;\n  /**\n   * Density. `md` (default) is the standard size; `sm` tightens header padding and\n   * font for dense contexts (sidebars, flyouts, nested panels).\n   */\n  @Input() Size: 'sm' | 'md' = 'md';\n  /**\n   * Bare chrome — drop the panel's own border and header background so the panel\n   * sits cleanly inside a host that already provides chrome (e.g. an expandable\n   * card). The toggle/title/chevron/body still work; only the box styling is removed.\n   */\n  @Input() Bare = false;\n  /**\n   * Remove the body's default padding, for bodies that manage their own spacing\n   * (code editors, full-bleed grids, custom forms).\n   */\n  @Input() FlushBody = false;\n  /**\n   * Fill mode — for \"rail section that owns the leftover height\" cases (e.g. an\n   * entity tree or grid that should consume all remaining vertical space and\n   * scroll *internally*), rather than the default \"reveal stacked content\"\n   * disclosure. When set AND expanded, the panel becomes a flex column that\n   * fills its flex parent and its body becomes a `flex:1; min-height:0` region —\n   * the projected content is expected to provide its own scroll child. While\n   * collapsed, the panel behaves exactly like a normal panel (header only,\n   * natural height) and does NOT claim the leftover space.\n   *\n   * Requires the panel's parent to be a flex column with `min-height:0`.\n   * Note: the open/close height animation is skipped in fill mode (the body\n   * fills rather than animating to content height).\n   */\n  @Input() Fill = false;\n  @Output() ExpandedChange = new EventEmitter<boolean>();\n  @ContentChild(MJAccordionTitleDirective) titleTemplate: MJAccordionTitleDirective | null = null;\n  @ContentChild(MJAccordionActionsDirective) actionsTemplate: MJAccordionActionsDirective | null = null;\n  @ContentChild(MJAccordionBodyDirective) bodyTemplate: MJAccordionBodyDirective | null = null;\n  @HostBinding('class.mj-accordion-panel-host') readonly hostClass = true;\n  /** Host claims flex:1 of its parent ONLY while a Fill panel is expanded —\n   *  so a collapsed Fill panel sits at natural (header) height like any other. */\n  @HostBinding('class.mj-accordion-fill-active') get fillActive(): boolean {\n    return this.Fill && this.Expanded;\n  }\n\n  /** Stable per-instance ids that programmatically associate the header\n   *  `<button>` with its body region (`aria-controls` ↔ `aria-labelledby`),\n   *  completing the WAI-ARIA accordion pattern so screen readers announce the\n   *  region with the header's name. */\n  private readonly _uid = nextAccordionUid++;\n  readonly HeaderId = `mj-accordion-header-${this._uid}`;\n  readonly BodyId = `mj-accordion-body-${this._uid}`;\n\n  Toggle(): void {\n    if (this.Disabled) return;\n    this.Expanded = !this.Expanded;\n    this.ExpandedChange.emit(this.Expanded);\n  }\n}\n\n/**\n * Convenience module bundling the accordion panel + all of its slot directives.\n * Import this ONE symbol instead of listing the component and each directive\n * separately:\n *\n * ```ts\n * import { MJAccordionModule } from '@memberjunction/ng-ui-components';\n * @NgModule({ imports: [MJAccordionModule, ...] })   // or @Component standalone imports\n * ```\n *\n * Why a module (not a bare `const [...]` array): Angular's AOT compiler can't\n * statically expand a value-array imported across a compiled-package boundary in\n * an `imports` array (NG1010), and `as const` makes it a readonly tuple the\n * `imports` type rejects (TS2322). An NgModule is always a valid `imports` entry\n * in both NgModule and standalone consumers. Adding a future accordion directive\n * here makes it available to every consumer automatically — no per-module churn.\n */\n@NgModule({\n  imports: [\n    MJAccordionPanelComponent,\n    MJAccordionTitleDirective,\n    MJAccordionActionsDirective,\n    MJAccordionBodyDirective,\n  ],\n  exports: [\n    MJAccordionPanelComponent,\n    MJAccordionTitleDirective,\n    MJAccordionActionsDirective,\n    MJAccordionBodyDirective,\n  ],\n})\nexport class MJAccordionModule {}\n"]}