@memberjunction/ng-ui-components 5.51.0 → 6.1.0-edge.0

package/LICENSE

@@ -0,0 +1,7 @@
+ISC License
+
+Copyright (c) 2023 MemberJunction
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -225,6 +225,15 @@ Floating, **non-modal** panel (no backdrop): `Draggable`, `Resizable` (8 handles
 ### `mj-filter-popover` — MJFilterPopoverComponent
 Filter trigger button + CDK popover on desktop, docked bottom-sheet on mobile. Inputs: `Label`, `Icon`, `ActiveCount` (badge), `ShowClearAll`. Output: `ClearAllRequested`. Project your filter UI (dropdowns, chips) as content.
 
+### `mj-bottom-sheet` — MJBottomSheetComponent
+Generic mobile bottom sheet: scrim + panel sliding up from the bottom edge with a grab handle. Pure chrome, no breakpoint logic — the caller decides when a sheet is the right presentation. Fully modal: `role="dialog"` + `aria-modal`, focus moves in on open and is **trapped** (Tab/Shift+Tab cycle within), body scroll locks while open, focus returns to the opener on close. Owns enter/exit transitions (class-driven, dismissal animates), Escape, scrim-click close, `prefers-reduced-motion`. Inputs: `[(Visible)]` (two-way), `Title` (optional header), `AriaLabel`. Output: `Closed` (after the exit transition). Sits in the mobile-chrome z band (9998/9999, below `mj-window`); settled open state is `transform: none` so `position: fixed` descendants (dropdowns) aren't displaced.
+
+```html
+<mj-bottom-sheet [(Visible)]="sheetOpen" Title="Open Records">
+  <div class="rows">…</div>
+</mj-bottom-sheet>
+```
+
 ## Patterns
 
 ### `mj-empty-state` — MJEmptyStateComponent

package/dist/lib/bottom-sheet/bottom-sheet.component.d.ts

@@ -0,0 +1,96 @@
+import { EventEmitter, OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Generic bottom sheet — the canonical mobile overlay surface (scrim + panel
+ * sliding up from the bottom edge with a grab handle).
+ *
+ * Pure chrome, no breakpoint logic: the CALLER decides when a sheet is the
+ * right presentation (typically below its mobile breakpoint). Content is
+ * projected; the sheet owns the scrim, enter/exit transitions, Escape,
+ * focus capture/restore, and the open/close lifecycle.
+ *
+ * Modality contract (this is a shared primitive — the a11y baseline is the
+ * full one, not the historic house minimum): `role="dialog"` +
+ * `aria-modal="true"`, focus moves INTO the sheet on open and is trapped
+ * there (Tab/Shift+Tab cycle within), body scroll is locked while open, and
+ * focus returns to the opener on close.
+ *
+ * Mechanics notes (learned from the earlier hand-rolled sheets):
+ * - Enter AND exit are class-driven `transition`s (the filter-popover sheet's
+ *   mount-only `animation` cannot animate dismissal).
+ * - The settled open state is `transform: none`, NOT `translateY(0)` — any
+ *   non-none transform makes the sheet a containing block and breaks
+ *   `position: fixed` descendants (dropdowns/popovers projected into it).
+ * - z-index 9998/9999: the established mobile-chrome band (same as the
+ *   left-nav drawer and filter sheet; below mj-window at 10000, and
+ *   MJConfirmService dialogs at 20000 still land above).
+ *
+ * @example
+ * ```html
+ * <mj-bottom-sheet [(Visible)]="sheetOpen" Title="Open Records">
+ *   <div>...rows...</div>
+ * </mj-bottom-sheet>
+ * ```
+ */
+export declare class MJBottomSheetComponent implements OnDestroy {
+    private cdr;
+    private sheetEl?;
+    /** Optional header row text; also the default accessible name */
+    Title: string;
+    /** Accessible name override (falls back to Title) */
+    AriaLabel: string;
+    set Visible(value: boolean);
+    get Visible(): boolean;
+    private _visible;
+    VisibleChange: EventEmitter<boolean>;
+    /** Emitted after the exit transition completes */
+    Closed: EventEmitter<void>;
+    /** @if gate — outlives Visible through the exit transition */
+    IsRendered: boolean;
+    /** Drives the enter/exit transition classes */
+    IsOpen: boolean;
+    /** Open transition finished — transform settles to `none` */
+    IsSettled: boolean;
+    /** Focus restore target captured at open */
+    private previousFocus;
+    /** body overflow value before the scroll lock; null = not locked by us */
+    private previousBodyOverflow;
+    private closeFallbackTimer;
+    /** Pending open rAFs — canceled on close so a rapid open→close can't
+     *  resurrect the open class after the close started */
+    private openRafIds;
+    /** Settle fallback: under prefers-reduced-motion no transitionend fires,
+     *  and the sheet must still reach transform:none (containing-block fix) */
+    private settleFallbackTimer;
+    OnEscape(): void;
+    /** Scrim click / programmatic dismiss */
+    Close(): void;
+    /**
+     * Focus trap: aria-modal promises assistive tech the background is inert —
+     * Tab must cycle within the sheet, never walk out behind the scrim.
+     */
+    OnSheetKeydown(event: KeyboardEvent): void;
+    OnTransitionEnd(event: TransitionEvent): void;
+    private open;
+    /**
+     * @param emit true when the sheet itself initiated the dismissal (Escape,
+     * scrim) — the Visible setter path passes false because the caller's
+     * binding is already up to date.
+     */
+    private close;
+    private finishClose;
+    /**
+     * Body scroll lock while open: aria-modal content must not let the page
+     * scroll behind the scrim. Restores the EXACT prior inline value (which is
+     * usually '') so a host page's own overflow styling survives.
+     */
+    private lockBodyScroll;
+    private unlockBodyScroll;
+    private clearCloseFallback;
+    private clearSettleFallback;
+    private cancelOpenRafs;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJBottomSheetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJBottomSheetComponent, "mj-bottom-sheet", never, { "Title": { "alias": "Title"; "required": false; }; "AriaLabel": { "alias": "AriaLabel"; "required": false; }; "Visible": { "alias": "Visible"; "required": false; }; }, { "VisibleChange": "VisibleChange"; "Closed": "Closed"; }, never, ["*"], true, never>;
+}
+//# sourceMappingURL=bottom-sheet.component.d.ts.map

package/dist/lib/bottom-sheet/bottom-sheet.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-sheet.component.d.ts","sourceRoot":"","sources":["../../../src/lib/bottom-sheet/bottom-sheet.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACqB,YAAY,EACZ,SAAS,EACpC,MAAM,eAAe,CAAC;;AAEvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBAOa,sBAAuB,YAAW,SAAS;IACtD,OAAO,CAAC,GAAG,CAA6B;IAEpB,OAAO,CAAC,OAAO,CAAC,CAA0B;IAE9D,iEAAiE;IACxD,KAAK,SAAM;IACpB,qDAAqD;IAC5C,SAAS,SAAM;IAExB,IACI,OAAO,CAAC,KAAK,EAAE,OAAO,EAUzB;IACD,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,OAAO,CAAC,QAAQ,CAAS;IAEf,aAAa,wBAA+B;IACtD,kDAAkD;IACxC,MAAM,qBAA4B;IAE5C,8DAA8D;IACvD,UAAU,UAAS;IAC1B,+CAA+C;IACxC,MAAM,UAAS;IACtB,6DAA6D;IACtD,SAAS,UAAS;IAEzB,4CAA4C;IAC5C,OAAO,CAAC,aAAa,CAA4B;IACjD,0EAA0E;IAC1E,OAAO,CAAC,oBAAoB,CAAuB;IACnD,OAAO,CAAC,kBAAkB,CAA8C;IACxE;2DACuD;IACvD,OAAO,CAAC,UAAU,CAAgB;IAClC;+EAC2E;IAC3E,OAAO,CAAC,mBAAmB,CAA8C;IAGlE,QAAQ,IAAI,IAAI;IAMvB,yCAAyC;IAClC,KAAK,IAAI,IAAI;IAMpB;;;OAGG;IACI,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA0B1C,eAAe,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI;IAapD,OAAO,CAAC,IAAI;IA8BZ;;;;OAIG;IACH,OAAO,CAAC,KAAK;IAgBb,OAAO,CAAC,WAAW;IAanB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,cAAc;IAKtB,WAAW,IAAI,IAAI;yCAjNR,sBAAsB;2CAAtB,sBAAsB;CAyNlC"}

package/dist/lib/bottom-sheet/bottom-sheet.component.js

@@ -0,0 +1,300 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef, ChangeDetectionStrategy, HostListener, ViewChild, inject } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["sheet"];
+const _c1 = ["*"];
+function MJBottomSheetComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 4);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.Title);
+} }
+function MJBottomSheetComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 1);
+    i0.ɵɵdomListener("click", function MJBottomSheetComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Close()); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(1, "div", 2, 0);
+    i0.ɵɵdomListener("keydown", function MJBottomSheetComponent_Conditional_0_Template_div_keydown_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnSheetKeydown($event)); })("transitionend", function MJBottomSheetComponent_Conditional_0_Template_div_transitionend_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTransitionEnd($event)); });
+    i0.ɵɵdomElement(3, "div", 3);
+    i0.ɵɵconditionalCreate(4, MJBottomSheetComponent_Conditional_0_Conditional_4_Template, 2, 1, "div", 4);
+    i0.ɵɵdomElementStart(5, "div", 5);
+    i0.ɵɵprojection(6);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("mj-bottom-sheet-scrim--open", ctx_r1.IsOpen);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("mj-bottom-sheet--open", ctx_r1.IsOpen)("mj-bottom-sheet--settled", ctx_r1.IsSettled);
+    i0.ɵɵattribute("aria-label", ctx_r1.AriaLabel || ctx_r1.Title || null);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.Title ? 4 : -1);
+} }
+/**
+ * Generic bottom sheet — the canonical mobile overlay surface (scrim + panel
+ * sliding up from the bottom edge with a grab handle).
+ *
+ * Pure chrome, no breakpoint logic: the CALLER decides when a sheet is the
+ * right presentation (typically below its mobile breakpoint). Content is
+ * projected; the sheet owns the scrim, enter/exit transitions, Escape,
+ * focus capture/restore, and the open/close lifecycle.
+ *
+ * Modality contract (this is a shared primitive — the a11y baseline is the
+ * full one, not the historic house minimum): `role="dialog"` +
+ * `aria-modal="true"`, focus moves INTO the sheet on open and is trapped
+ * there (Tab/Shift+Tab cycle within), body scroll is locked while open, and
+ * focus returns to the opener on close.
+ *
+ * Mechanics notes (learned from the earlier hand-rolled sheets):
+ * - Enter AND exit are class-driven `transition`s (the filter-popover sheet's
+ *   mount-only `animation` cannot animate dismissal).
+ * - The settled open state is `transform: none`, NOT `translateY(0)` — any
+ *   non-none transform makes the sheet a containing block and breaks
+ *   `position: fixed` descendants (dropdowns/popovers projected into it).
+ * - z-index 9998/9999: the established mobile-chrome band (same as the
+ *   left-nav drawer and filter sheet; below mj-window at 10000, and
+ *   MJConfirmService dialogs at 20000 still land above).
+ *
+ * @example
+ * ```html
+ * <mj-bottom-sheet [(Visible)]="sheetOpen" Title="Open Records">
+ *   <div>...rows...</div>
+ * </mj-bottom-sheet>
+ * ```
+ */
+export class MJBottomSheetComponent {
+    cdr = inject(ChangeDetectorRef);
+    sheetEl;
+    /** Optional header row text; also the default accessible name */
+    Title = '';
+    /** Accessible name override (falls back to Title) */
+    AriaLabel = '';
+    set Visible(value) {
+        if (value === this._visible) {
+            return;
+        }
+        this._visible = value;
+        if (value) {
+            this.open();
+        }
+        else {
+            this.close(false);
+        }
+    }
+    get Visible() {
+        return this._visible;
+    }
+    _visible = false;
+    VisibleChange = new EventEmitter();
+    /** Emitted after the exit transition completes */
+    Closed = new EventEmitter();
+    /** @if gate — outlives Visible through the exit transition */
+    IsRendered = false;
+    /** Drives the enter/exit transition classes */
+    IsOpen = false;
+    /** Open transition finished — transform settles to `none` */
+    IsSettled = false;
+    /** Focus restore target captured at open */
+    previousFocus = null;
+    /** body overflow value before the scroll lock; null = not locked by us */
+    previousBodyOverflow = null;
+    closeFallbackTimer = null;
+    /** Pending open rAFs — canceled on close so a rapid open→close can't
+     *  resurrect the open class after the close started */
+    openRafIds = [];
+    /** Settle fallback: under prefers-reduced-motion no transitionend fires,
+     *  and the sheet must still reach transform:none (containing-block fix) */
+    settleFallbackTimer = null;
+    OnEscape() {
+        if (this.IsOpen) {
+            this.close(true);
+        }
+    }
+    /** Scrim click / programmatic dismiss */
+    Close() {
+        if (this.IsOpen) {
+            this.close(true);
+        }
+    }
+    /**
+     * Focus trap: aria-modal promises assistive tech the background is inert —
+     * Tab must cycle within the sheet, never walk out behind the scrim.
+     */
+    OnSheetKeydown(event) {
+        if (event.key !== 'Tab' || !this.sheetEl) {
+            return;
+        }
+        const sheet = this.sheetEl.nativeElement;
+        const focusables = Array.from(sheet.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'));
+        if (focusables.length === 0) {
+            event.preventDefault(); // nothing to move to — keep focus on the sheet
+            return;
+        }
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey) {
+            if (active === first || active === sheet) {
+                event.preventDefault();
+                last.focus();
+            }
+        }
+        else if (active === last || active === sheet) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    OnTransitionEnd(event) {
+        if (event.target !== this.sheetEl?.nativeElement || event.propertyName !== 'transform') {
+            return;
+        }
+        if (this.IsOpen) {
+            // Settled: transform → none so fixed-position descendants aren't trapped
+            this.IsSettled = true;
+            this.cdr.markForCheck();
+        }
+        else if (this.IsRendered) {
+            this.finishClose();
+        }
+    }
+    open() {
+        this.clearCloseFallback();
+        this.previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        this.lockBodyScroll();
+        this.IsRendered = true;
+        this.cdr.markForCheck();
+        // Two frames: one for the @if to render at translateY(100%), one so the
+        // class flip actually transitions (same-frame flips snap instead)
+        this.openRafIds.push(requestAnimationFrame(() => {
+            this.openRafIds.push(requestAnimationFrame(() => {
+                this.openRafIds = [];
+                if (!this._visible) {
+                    return; // closed again before the frames ran — stay closed
+                }
+                this.IsOpen = true;
+                this.cdr.markForCheck();
+                this.sheetEl?.nativeElement?.focus();
+                // Reduced-motion (transition:none) never fires transitionend — the
+                // fallback still settles the transform to none
+                this.clearSettleFallback();
+                this.settleFallbackTimer = setTimeout(() => {
+                    if (this.IsOpen && !this.IsSettled) {
+                        this.IsSettled = true;
+                        this.cdr.markForCheck();
+                    }
+                }, 300);
+            }));
+        }));
+    }
+    /**
+     * @param emit true when the sheet itself initiated the dismissal (Escape,
+     * scrim) — the Visible setter path passes false because the caller's
+     * binding is already up to date.
+     */
+    close(emit) {
+        this._visible = false;
+        this.cancelOpenRafs();
+        this.clearSettleFallback();
+        this.IsOpen = false;
+        this.IsSettled = false;
+        this.cdr.markForCheck();
+        if (emit) {
+            this.VisibleChange.emit(false);
+        }
+        // transitionend normally finishes the close; the timer covers
+        // prefers-reduced-motion (no transition event) and detached nodes
+        this.clearCloseFallback();
+        this.closeFallbackTimer = setTimeout(() => this.finishClose(), 300);
+    }
+    finishClose() {
+        this.clearCloseFallback();
+        if (!this.IsRendered) {
+            return;
+        }
+        this.IsRendered = false;
+        this.unlockBodyScroll();
+        this.cdr.markForCheck();
+        this.Closed.emit();
+        this.previousFocus?.focus();
+        this.previousFocus = null;
+    }
+    /**
+     * Body scroll lock while open: aria-modal content must not let the page
+     * scroll behind the scrim. Restores the EXACT prior inline value (which is
+     * usually '') so a host page's own overflow styling survives.
+     */
+    lockBodyScroll() {
+        if (this.previousBodyOverflow === null) {
+            this.previousBodyOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+        }
+    }
+    unlockBodyScroll() {
+        if (this.previousBodyOverflow !== null) {
+            document.body.style.overflow = this.previousBodyOverflow;
+            this.previousBodyOverflow = null;
+        }
+    }
+    clearCloseFallback() {
+        if (this.closeFallbackTimer !== null) {
+            clearTimeout(this.closeFallbackTimer);
+            this.closeFallbackTimer = null;
+        }
+    }
+    clearSettleFallback() {
+        if (this.settleFallbackTimer !== null) {
+            clearTimeout(this.settleFallbackTimer);
+            this.settleFallbackTimer = null;
+        }
+    }
+    cancelOpenRafs() {
+        this.openRafIds.forEach(id => cancelAnimationFrame(id));
+        this.openRafIds = [];
+    }
+    ngOnDestroy() {
+        this.clearCloseFallback();
+        this.clearSettleFallback();
+        this.cancelOpenRafs();
+        // Destroyed while open (route change, parent teardown): never leave the
+        // page unscrollable
+        this.unlockBodyScroll();
+    }
+    static ɵfac = function MJBottomSheetComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJBottomSheetComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJBottomSheetComponent, selectors: [["mj-bottom-sheet"]], viewQuery: function MJBottomSheetComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sheetEl = _t.first);
+        } }, hostBindings: function MJBottomSheetComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown.escape", function MJBottomSheetComponent_keydown_escape_HostBindingHandler() { return ctx.OnEscape(); }, i0.ɵɵresolveDocument);
+        } }, inputs: { Title: "Title", AriaLabel: "AriaLabel", Visible: "Visible" }, outputs: { VisibleChange: "VisibleChange", Closed: "Closed" }, ngContentSelectors: _c1, decls: 1, vars: 1, consts: [["sheet", ""], ["aria-hidden", "true", 1, "mj-bottom-sheet-scrim", 3, "click"], ["role", "dialog", "aria-modal", "true", "tabindex", "-1", 1, "mj-bottom-sheet", 3, "keydown", "transitionend"], ["aria-hidden", "true", 1, "mj-bottom-sheet-grab"], [1, "mj-bottom-sheet-header"], [1, "mj-bottom-sheet-content"]], template: function MJBottomSheetComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵconditionalCreate(0, MJBottomSheetComponent_Conditional_0_Template, 7, 8);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.IsRendered ? 0 : -1);
+        } }, styles: ["\n\n\n\n\n.mj-bottom-sheet-scrim[_ngcontent-%COMP%] {\n  position: fixed;\n  inset: 0;\n  z-index: 9998;\n  background: var(--mj-bg-overlay);\n  opacity: 0;\n  transition: opacity 0.24s ease;\n}\n\n.mj-bottom-sheet-scrim--open[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.mj-bottom-sheet[_ngcontent-%COMP%] {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 9999;\n  display: flex;\n  flex-direction: column;\n  max-height: 85vh;\n  background: var(--mj-bg-surface);\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n  box-shadow: var(--mj-shadow-lg);\n  transform: translateY(100%);\n  transition: transform 0.24s ease;\n  outline: none;\n}\n\n.mj-bottom-sheet--open[_ngcontent-%COMP%] {\n  transform: translateY(0);\n}\n\n\n\n\n\n.mj-bottom-sheet--settled[_ngcontent-%COMP%] {\n  transform: none;\n}\n\n.mj-bottom-sheet-grab[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 4px;\n  border-radius: 2px;\n  background: var(--mj-border-strong);\n  margin: 10px auto 2px;\n  flex-shrink: 0;\n}\n\n.mj-bottom-sheet-header[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  padding: 8px 16px 10px;\n  font-size: var(--mj-text-base, 15px);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.mj-bottom-sheet-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  padding-bottom: var(--mj-space-6);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mj-bottom-sheet-scrim[_ngcontent-%COMP%], \n   .mj-bottom-sheet[_ngcontent-%COMP%] {\n    transition: none;\n  }\n}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJBottomSheetComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-bottom-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (IsRendered) {\n  <div\n    class=\"mj-bottom-sheet-scrim\"\n    [class.mj-bottom-sheet-scrim--open]=\"IsOpen\"\n    (click)=\"Close()\"\n    aria-hidden=\"true\"></div>\n  <div\n    #sheet\n    class=\"mj-bottom-sheet\"\n    [class.mj-bottom-sheet--open]=\"IsOpen\"\n    [class.mj-bottom-sheet--settled]=\"IsSettled\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"AriaLabel || Title || null\"\n    tabindex=\"-1\"\n    (keydown)=\"OnSheetKeydown($event)\"\n    (transitionend)=\"OnTransitionEnd($event)\">\n    <div class=\"mj-bottom-sheet-grab\" aria-hidden=\"true\"></div>\n    @if (Title) {\n      <div class=\"mj-bottom-sheet-header\">{{ Title }}</div>\n    }\n    <div class=\"mj-bottom-sheet-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", styles: ["/* z-index 9998/9999: the mobile-chrome overlay band (left-nav drawer,\n   filter sheet). Below mj-window (10000); MJConfirmService (20000) and\n   toasts (100000) still land above a sheet. */\n\n.mj-bottom-sheet-scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 9998;\n  background: var(--mj-bg-overlay);\n  opacity: 0;\n  transition: opacity 0.24s ease;\n}\n\n.mj-bottom-sheet-scrim--open {\n  opacity: 1;\n}\n\n.mj-bottom-sheet {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 9999;\n  display: flex;\n  flex-direction: column;\n  max-height: 85vh;\n  background: var(--mj-bg-surface);\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n  box-shadow: var(--mj-shadow-lg);\n  transform: translateY(100%);\n  transition: transform 0.24s ease;\n  outline: none;\n}\n\n.mj-bottom-sheet--open {\n  transform: translateY(0);\n}\n\n/* Settled open state: transform must be NONE, not translateY(0) \u2014 a non-none\n   transform creates a containing block that displaces position:fixed\n   descendants (dropdowns/popovers projected into the sheet). */\n.mj-bottom-sheet--settled {\n  transform: none;\n}\n\n.mj-bottom-sheet-grab {\n  width: 36px;\n  height: 4px;\n  border-radius: 2px;\n  background: var(--mj-border-strong);\n  margin: 10px auto 2px;\n  flex-shrink: 0;\n}\n\n.mj-bottom-sheet-header {\n  flex-shrink: 0;\n  padding: 8px 16px 10px;\n  font-size: var(--mj-text-base, 15px);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.mj-bottom-sheet-content {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  padding-bottom: var(--mj-space-6);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mj-bottom-sheet-scrim,\n  .mj-bottom-sheet {\n    transition: none;\n  }\n}\n"] }]
+    }], null, { sheetEl: [{
+            type: ViewChild,
+            args: ['sheet']
+        }], Title: [{
+            type: Input
+        }], AriaLabel: [{
+            type: Input
+        }], Visible: [{
+            type: Input
+        }], VisibleChange: [{
+            type: Output
+        }], Closed: [{
+            type: Output
+        }], OnEscape: [{
+            type: HostListener,
+            args: ['document:keydown.escape']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJBottomSheetComponent, { className: "MJBottomSheetComponent", filePath: "lib/bottom-sheet/bottom-sheet.component.ts", lineNumber: 45 }); })();
+//# sourceMappingURL=bottom-sheet.component.js.map

package/dist/lib/bottom-sheet/bottom-sheet.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-sheet.component.js","sourceRoot":"","sources":["../../../src/lib/bottom-sheet/bottom-sheet.component.ts","../../../src/lib/bottom-sheet/bottom-sheet.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component, Input, Output, EventEmitter, ChangeDetectorRef, ChangeDetectionStrategy,\n  ElementRef, HostListener, OnDestroy, ViewChild, inject\n} from '@angular/core';\n\n/**\n * Generic bottom sheet — the canonical mobile overlay surface (scrim + panel\n * sliding up from the bottom edge with a grab handle).\n *\n * Pure chrome, no breakpoint logic: the CALLER decides when a sheet is the\n * right presentation (typically below its mobile breakpoint). Content is\n * projected; the sheet owns the scrim, enter/exit transitions, Escape,\n * focus capture/restore, and the open/close lifecycle.\n *\n * Modality contract (this is a shared primitive — the a11y baseline is the\n * full one, not the historic house minimum): `role=\"dialog\"` +\n * `aria-modal=\"true\"`, focus moves INTO the sheet on open and is trapped\n * there (Tab/Shift+Tab cycle within), body scroll is locked while open, and\n * focus returns to the opener on close.\n *\n * Mechanics notes (learned from the earlier hand-rolled sheets):\n * - Enter AND exit are class-driven `transition`s (the filter-popover sheet's\n *   mount-only `animation` cannot animate dismissal).\n * - The settled open state is `transform: none`, NOT `translateY(0)` — any\n *   non-none transform makes the sheet a containing block and breaks\n *   `position: fixed` descendants (dropdowns/popovers projected into it).\n * - z-index 9998/9999: the established mobile-chrome band (same as the\n *   left-nav drawer and filter sheet; below mj-window at 10000, and\n *   MJConfirmService dialogs at 20000 still land above).\n *\n * @example\n * ```html\n * <mj-bottom-sheet [(Visible)]=\"sheetOpen\" Title=\"Open Records\">\n *   <div>...rows...</div>\n * </mj-bottom-sheet>\n * ```\n */\n@Component({\n  standalone: true,\n  selector: 'mj-bottom-sheet',\n  templateUrl: './bottom-sheet.component.html',\n  styleUrls: ['./bottom-sheet.component.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MJBottomSheetComponent implements OnDestroy {\n  private cdr = inject(ChangeDetectorRef);\n\n  @ViewChild('sheet') private sheetEl?: ElementRef<HTMLElement>;\n\n  /** Optional header row text; also the default accessible name */\n  @Input() Title = '';\n  /** Accessible name override (falls back to Title) */\n  @Input() AriaLabel = '';\n\n  @Input()\n  set Visible(value: boolean) {\n    if (value === this._visible) {\n      return;\n    }\n    this._visible = value;\n    if (value) {\n      this.open();\n    } else {\n      this.close(false);\n    }\n  }\n  get Visible(): boolean {\n    return this._visible;\n  }\n  private _visible = false;\n\n  @Output() VisibleChange = new EventEmitter<boolean>();\n  /** Emitted after the exit transition completes */\n  @Output() Closed = new EventEmitter<void>();\n\n  /** @if gate — outlives Visible through the exit transition */\n  public IsRendered = false;\n  /** Drives the enter/exit transition classes */\n  public IsOpen = false;\n  /** Open transition finished — transform settles to `none` */\n  public IsSettled = false;\n\n  /** Focus restore target captured at open */\n  private previousFocus: HTMLElement | null = null;\n  /** body overflow value before the scroll lock; null = not locked by us */\n  private previousBodyOverflow: string | null = null;\n  private closeFallbackTimer: ReturnType<typeof setTimeout> | null = null;\n  /** Pending open rAFs — canceled on close so a rapid open→close can't\n   *  resurrect the open class after the close started */\n  private openRafIds: number[] = [];\n  /** Settle fallback: under prefers-reduced-motion no transitionend fires,\n   *  and the sheet must still reach transform:none (containing-block fix) */\n  private settleFallbackTimer: ReturnType<typeof setTimeout> | null = null;\n\n  @HostListener('document:keydown.escape')\n  public OnEscape(): void {\n    if (this.IsOpen) {\n      this.close(true);\n    }\n  }\n\n  /** Scrim click / programmatic dismiss */\n  public Close(): void {\n    if (this.IsOpen) {\n      this.close(true);\n    }\n  }\n\n  /**\n   * Focus trap: aria-modal promises assistive tech the background is inert —\n   * Tab must cycle within the sheet, never walk out behind the scrim.\n   */\n  public OnSheetKeydown(event: KeyboardEvent): void {\n    if (event.key !== 'Tab' || !this.sheetEl) {\n      return;\n    }\n    const sheet = this.sheetEl.nativeElement;\n    const focusables = Array.from(sheet.querySelectorAll<HTMLElement>(\n      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n    ));\n    if (focusables.length === 0) {\n      event.preventDefault(); // nothing to move to — keep focus on the sheet\n      return;\n    }\n    const first = focusables[0];\n    const last = focusables[focusables.length - 1];\n    const active = document.activeElement;\n    if (event.shiftKey) {\n      if (active === first || active === sheet) {\n        event.preventDefault();\n        last.focus();\n      }\n    } else if (active === last || active === sheet) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n\n  public OnTransitionEnd(event: TransitionEvent): void {\n    if (event.target !== this.sheetEl?.nativeElement || event.propertyName !== 'transform') {\n      return;\n    }\n    if (this.IsOpen) {\n      // Settled: transform → none so fixed-position descendants aren't trapped\n      this.IsSettled = true;\n      this.cdr.markForCheck();\n    } else if (this.IsRendered) {\n      this.finishClose();\n    }\n  }\n\n  private open(): void {\n    this.clearCloseFallback();\n    this.previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n    this.lockBodyScroll();\n    this.IsRendered = true;\n    this.cdr.markForCheck();\n    // Two frames: one for the @if to render at translateY(100%), one so the\n    // class flip actually transitions (same-frame flips snap instead)\n    this.openRafIds.push(requestAnimationFrame(() => {\n      this.openRafIds.push(requestAnimationFrame(() => {\n        this.openRafIds = [];\n        if (!this._visible) {\n          return; // closed again before the frames ran — stay closed\n        }\n        this.IsOpen = true;\n        this.cdr.markForCheck();\n        this.sheetEl?.nativeElement?.focus();\n        // Reduced-motion (transition:none) never fires transitionend — the\n        // fallback still settles the transform to none\n        this.clearSettleFallback();\n        this.settleFallbackTimer = setTimeout(() => {\n          if (this.IsOpen && !this.IsSettled) {\n            this.IsSettled = true;\n            this.cdr.markForCheck();\n          }\n        }, 300);\n      }));\n    }));\n  }\n\n  /**\n   * @param emit true when the sheet itself initiated the dismissal (Escape,\n   * scrim) — the Visible setter path passes false because the caller's\n   * binding is already up to date.\n   */\n  private close(emit: boolean): void {\n    this._visible = false;\n    this.cancelOpenRafs();\n    this.clearSettleFallback();\n    this.IsOpen = false;\n    this.IsSettled = false;\n    this.cdr.markForCheck();\n    if (emit) {\n      this.VisibleChange.emit(false);\n    }\n    // transitionend normally finishes the close; the timer covers\n    // prefers-reduced-motion (no transition event) and detached nodes\n    this.clearCloseFallback();\n    this.closeFallbackTimer = setTimeout(() => this.finishClose(), 300);\n  }\n\n  private finishClose(): void {\n    this.clearCloseFallback();\n    if (!this.IsRendered) {\n      return;\n    }\n    this.IsRendered = false;\n    this.unlockBodyScroll();\n    this.cdr.markForCheck();\n    this.Closed.emit();\n    this.previousFocus?.focus();\n    this.previousFocus = null;\n  }\n\n  /**\n   * Body scroll lock while open: aria-modal content must not let the page\n   * scroll behind the scrim. Restores the EXACT prior inline value (which is\n   * usually '') so a host page's own overflow styling survives.\n   */\n  private lockBodyScroll(): void {\n    if (this.previousBodyOverflow === null) {\n      this.previousBodyOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n    }\n  }\n\n  private unlockBodyScroll(): void {\n    if (this.previousBodyOverflow !== null) {\n      document.body.style.overflow = this.previousBodyOverflow;\n      this.previousBodyOverflow = null;\n    }\n  }\n\n  private clearCloseFallback(): void {\n    if (this.closeFallbackTimer !== null) {\n      clearTimeout(this.closeFallbackTimer);\n      this.closeFallbackTimer = null;\n    }\n  }\n\n  private clearSettleFallback(): void {\n    if (this.settleFallbackTimer !== null) {\n      clearTimeout(this.settleFallbackTimer);\n      this.settleFallbackTimer = null;\n    }\n  }\n\n  private cancelOpenRafs(): void {\n    this.openRafIds.forEach(id => cancelAnimationFrame(id));\n    this.openRafIds = [];\n  }\n\n  ngOnDestroy(): void {\n    this.clearCloseFallback();\n    this.clearSettleFallback();\n    this.cancelOpenRafs();\n    // Destroyed while open (route change, parent teardown): never leave the\n    // page unscrollable\n    this.unlockBodyScroll();\n  }\n}\n","@if (IsRendered) {\n  <div\n    class=\"mj-bottom-sheet-scrim\"\n    [class.mj-bottom-sheet-scrim--open]=\"IsOpen\"\n    (click)=\"Close()\"\n    aria-hidden=\"true\"></div>\n  <div\n    #sheet\n    class=\"mj-bottom-sheet\"\n    [class.mj-bottom-sheet--open]=\"IsOpen\"\n    [class.mj-bottom-sheet--settled]=\"IsSettled\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"AriaLabel || Title || null\"\n    tabindex=\"-1\"\n    (keydown)=\"OnSheetKeydown($event)\"\n    (transitionend)=\"OnTransitionEnd($event)\">\n    <div class=\"mj-bottom-sheet-grab\" aria-hidden=\"true\"></div>\n    @if (Title) {\n      <div class=\"mj-bottom-sheet-header\">{{ Title }}</div>\n    }\n    <div class=\"mj-bottom-sheet-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n"]}

package/dist/lib/slide-panel/slide-panel.component.js

@@ -33,7 +33,7 @@ function MjSlidePanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("width", ctx_r1.WidthPx, "px")("max-width", ctx_r1.MaxWidthRatio * 100 + "vw");
-    i0.ɵɵclassProp("visible", ctx_r1.IsVisible);
+    i0.ɵɵclassProp("sp-open", ctx_r1.IsVisible);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.Resizable ? 1 : -1);
     i0.ɵɵadvance();
@@ -62,7 +62,7 @@ function MjSlidePanelComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("width", ctx_r1.WidthPx, "px");
-    i0.ɵɵclassProp("visible", ctx_r1.IsVisible);
+    i0.ɵɵclassProp("sp-open", ctx_r1.IsVisible);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.Title ? 1 : -1);
 } }
@@ -210,7 +210,7 @@ export class MjSlidePanelComponent {
     static ɵfac = function MjSlidePanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MjSlidePanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MjSlidePanelComponent, selectors: [["mj-slide-panel"]], hostBindings: function MjSlidePanelComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function MjSlidePanelComponent_keydown_escape_HostBindingHandler() { return ctx.OnEscapeKey(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { Mode: "Mode", Title: "Title", Visible: "Visible", Resizable: "Resizable", MinWidthPx: "MinWidthPx", MaxWidthRatio: "MaxWidthRatio", WidthPx: "WidthPx", CanClose: "CanClose" }, outputs: { Closed: "Closed", WidthChanged: "WidthChanged" }, ngContentSelectors: _c1, decls: 3, vars: 6, consts: [[1, "sp-backdrop", 3, "click"], [1, "sp-panel", 3, "visible", "width", "max-width"], [1, "sp-dialog", 3, "visible", "width"], [1, "sp-panel"], [1, "sp-resize-handle"], [1, "sp-header"], [1, "sp-body"], [1, "sp-resize-handle", 3, "mousedown"], [1, "sp-resize-grip"], [1, "sp-title"], [1, "sp-close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "sp-dialog"], [1, "sp-body", "sp-dialog-body"]], template: function MjSlidePanelComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { Mode: "Mode", Title: "Title", Visible: "Visible", Resizable: "Resizable", MinWidthPx: "MinWidthPx", MaxWidthRatio: "MaxWidthRatio", WidthPx: "WidthPx", CanClose: "CanClose" }, outputs: { Closed: "Closed", WidthChanged: "WidthChanged" }, ngContentSelectors: _c1, decls: 3, vars: 6, consts: [[1, "sp-backdrop", 3, "click"], [1, "sp-panel", 3, "sp-open", "width", "max-width"], [1, "sp-dialog", 3, "sp-open", "width"], [1, "sp-panel"], [1, "sp-resize-handle"], [1, "sp-header"], [1, "sp-body"], [1, "sp-resize-handle", 3, "mousedown"], [1, "sp-resize-grip"], [1, "sp-title"], [1, "sp-close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "sp-dialog"], [1, "sp-body", "sp-dialog-body"]], template: function MjSlidePanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c0);
             i0.ɵɵdomElementStart(0, "div", 0);
             i0.ɵɵdomListener("click", function MjSlidePanelComponent_Template_div_click_0_listener() { return ctx.OnBackdropClick(); });
@@ -218,16 +218,16 @@ export class MjSlidePanelComponent {
             i0.ɵɵconditionalCreate(1, MjSlidePanelComponent_Conditional_1_Template, 5, 8, "div", 1);
             i0.ɵɵconditionalCreate(2, MjSlidePanelComponent_Conditional_2_Template, 4, 5, "div", 2);
         } if (rf & 2) {
-            i0.ɵɵclassProp("visible", ctx.IsVisible)("sp-dialog-backdrop", ctx.Mode === "dialog");
+            i0.ɵɵclassProp("sp-open", ctx.IsVisible)("sp-dialog-backdrop", ctx.Mode === "dialog");
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.Mode === "slide" ? 1 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.Mode === "dialog" ? 2 : -1);
-        } }, styles: ["\n\n\n\n\n\n\n.sp-backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: transparent;\n    z-index: 1000;\n    transition: background 0.3s ease;\n    pointer-events: none;\n}\n\n.sp-backdrop.visible[_ngcontent-%COMP%] {\n    background: var(--mj-bg-overlay);\n    pointer-events: auto;\n}\n\n.sp-dialog-backdrop.visible[_ngcontent-%COMP%] {\n    background: var(--mj-bg-overlay);\n}\n\n\n\n\n\n\n\n\n.sp-panel[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    height: 100vh;\n    background: var(--mj-bg-surface);\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n    min-width: 400px;\n    max-width: 92vw;\n}\n\n.sp-panel.visible[_ngcontent-%COMP%] {\n    \n\n\n\n\n\n    transform: none;\n}\n\n\n\n\n\n\n\n\n.sp-dialog[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.95);\n    max-height: 85vh;\n    background: var(--mj-bg-surface);\n    border-radius: 16px;\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    opacity: 0;\n    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n    min-width: 360px;\n    max-width: 95vw;\n}\n\n.sp-dialog.visible[_ngcontent-%COMP%] {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n}\n\n\n\n\n\n\n\n\n.sp-resize-handle[_ngcontent-%COMP%] {\n    position: absolute;\n    left: -4px;\n    top: 0;\n    width: 8px;\n    height: 100%;\n    cursor: col-resize;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.sp-resize-handle[_ngcontent-%COMP%]:hover   .sp-resize-grip[_ngcontent-%COMP%], \n.sp-resize-handle[_ngcontent-%COMP%]:active   .sp-resize-grip[_ngcontent-%COMP%] {\n    opacity: 1;\n    background: var(--mj-brand-primary);\n}\n\n.sp-resize-grip[_ngcontent-%COMP%] {\n    width: 3px;\n    height: 40px;\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n    opacity: 0;\n    transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.sp-resize-handle[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n\n\n\n\n\n\n\n.sp-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.sp-title[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex: 1;\n}\n\n.sp-close-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: none;\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.sp-close-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n\n\n\n\n\n\n\n.sp-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n.sp-dialog-body[_ngcontent-%COMP%] {\n    padding: 0;\n}\n\n\n\n\n\n\n\n\n@media (max-width: 768px) {\n    .sp-panel[_ngcontent-%COMP%] {\n        width: 100% !important;\n        min-width: unset;\n    }\n\n    .sp-resize-handle[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .sp-dialog[_ngcontent-%COMP%] {\n        width: 95vw !important;\n        max-height: 90vh;\n    }\n}"], changeDetection: 0 });
+        } }, styles: ["\n\n\n\n\n\n\n.sp-backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: transparent;\n    z-index: 1000;\n    transition: background 0.3s ease;\n    pointer-events: none;\n}\n\n\n\n\n\n\n\n.sp-backdrop.sp-open[_ngcontent-%COMP%] {\n    background: var(--mj-bg-overlay);\n    pointer-events: auto;\n}\n\n.sp-dialog-backdrop.sp-open[_ngcontent-%COMP%] {\n    background: var(--mj-bg-overlay);\n}\n\n\n\n\n\n\n\n\n.sp-panel[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    height: 100vh;\n    background: var(--mj-bg-surface);\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n    min-width: 400px;\n    max-width: 92vw;\n}\n\n.sp-panel.sp-open[_ngcontent-%COMP%] {\n    \n\n\n\n\n\n    transform: none;\n}\n\n\n\n\n\n\n\n\n.sp-dialog[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.95);\n    max-height: 85vh;\n    background: var(--mj-bg-surface);\n    border-radius: 16px;\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    opacity: 0;\n    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n    min-width: 360px;\n    max-width: 95vw;\n}\n\n.sp-dialog.sp-open[_ngcontent-%COMP%] {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n}\n\n\n\n\n\n\n\n\n.sp-resize-handle[_ngcontent-%COMP%] {\n    position: absolute;\n    left: -4px;\n    top: 0;\n    width: 8px;\n    height: 100%;\n    cursor: col-resize;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.sp-resize-handle[_ngcontent-%COMP%]:hover   .sp-resize-grip[_ngcontent-%COMP%], \n.sp-resize-handle[_ngcontent-%COMP%]:active   .sp-resize-grip[_ngcontent-%COMP%] {\n    opacity: 1;\n    background: var(--mj-brand-primary);\n}\n\n.sp-resize-grip[_ngcontent-%COMP%] {\n    width: 3px;\n    height: 40px;\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n    opacity: 0;\n    transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.sp-resize-handle[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n\n\n\n\n\n\n\n.sp-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.sp-title[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex: 1;\n}\n\n.sp-close-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: none;\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.sp-close-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n\n\n\n\n\n\n\n.sp-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n.sp-dialog-body[_ngcontent-%COMP%] {\n    padding: 0;\n}\n\n\n\n\n\n\n\n\n@media (max-width: 768px) {\n    .sp-panel[_ngcontent-%COMP%] {\n        width: 100% !important;\n        min-width: unset;\n    }\n\n    .sp-resize-handle[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .sp-dialog[_ngcontent-%COMP%] {\n        width: 95vw !important;\n        max-height: 90vh;\n    }\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjSlidePanelComponent, [{
         type: Component,
-        args: [{ standalone: true, selector: 'mj-slide-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Backdrop overlay -->\n<div class=\"sp-backdrop\"\n  [class.visible]=\"IsVisible\"\n  [class.sp-dialog-backdrop]=\"Mode === 'dialog'\"\n  (click)=\"OnBackdropClick()\">\n</div>\n\n<!-- Panel (slide-in from right) -->\n@if (Mode === 'slide') {\n  <div\n    class=\"sp-panel\"\n    [class.visible]=\"IsVisible\"\n    [style.width.px]=\"WidthPx\"\n    [style.max-width]=\"(MaxWidthRatio * 100) + 'vw'\">\n    <!-- Resize handle -->\n    @if (Resizable) {\n      <div class=\"sp-resize-handle\" (mousedown)=\"OnResizeStart($event)\">\n        <div class=\"sp-resize-grip\"></div>\n      </div>\n    }\n    <!-- Header (if Title provided) -->\n    @if (Title) {\n      <div class=\"sp-header\">\n        <h2 class=\"sp-title\">{{Title}}</h2>\n        <button class=\"sp-close-btn\" (click)=\"OnClose()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n    }\n    <!-- Content projection -->\n    <div class=\"sp-body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n\n<!-- Dialog (centered modal) -->\n@if (Mode === 'dialog') {\n  <div\n    class=\"sp-dialog\"\n    [class.visible]=\"IsVisible\"\n    [style.width.px]=\"WidthPx\">\n    <!-- Header (if Title provided) -->\n    @if (Title) {\n      <div class=\"sp-header\">\n        <h2 class=\"sp-title\">{{Title}}</h2>\n        <button class=\"sp-close-btn\" (click)=\"OnClose()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n    }\n    <!-- Content projection -->\n    <div class=\"sp-body sp-dialog-body\">\n      <ng-content select=\"[dialog-content]\"></ng-content>\n    </div>\n  </div>\n}\n", styles: ["/* ================================================================= */\n/* BACKDROP */\n/* ================================================================= */\n\n.sp-backdrop {\n    position: fixed;\n    inset: 0;\n    background: transparent;\n    z-index: 1000;\n    transition: background 0.3s ease;\n    pointer-events: none;\n}\n\n.sp-backdrop.visible {\n    background: var(--mj-bg-overlay);\n    pointer-events: auto;\n}\n\n.sp-dialog-backdrop.visible {\n    background: var(--mj-bg-overlay);\n}\n\n/* ================================================================= */\n/* SLIDE PANEL */\n/* ================================================================= */\n\n.sp-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    height: 100vh;\n    background: var(--mj-bg-surface);\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n    min-width: 400px;\n    max-width: 92vw;\n}\n\n.sp-panel.visible {\n    /* `none` (not translateX(0)) on purpose: a non-none transform makes this panel\n       the containing block for position:fixed DESCENDANTS (dropdown panels, popovers\n       that position via getBoundingClientRect viewport math), displacing them\n       offscreen. `none` interpolates as the identity matrix, so the slide-in\n       animation is unaffected while open-state descendants get the real viewport. */\n    transform: none;\n}\n\n/* ================================================================= */\n/* DIALOG (centered modal) */\n/* ================================================================= */\n\n.sp-dialog {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.95);\n    max-height: 85vh;\n    background: var(--mj-bg-surface);\n    border-radius: 16px;\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    opacity: 0;\n    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n    min-width: 360px;\n    max-width: 95vw;\n}\n\n.sp-dialog.visible {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n}\n\n/* ================================================================= */\n/* RESIZE HANDLE */\n/* ================================================================= */\n\n.sp-resize-handle {\n    position: absolute;\n    left: -4px;\n    top: 0;\n    width: 8px;\n    height: 100%;\n    cursor: col-resize;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.sp-resize-handle:hover .sp-resize-grip,\n.sp-resize-handle:active .sp-resize-grip {\n    opacity: 1;\n    background: var(--mj-brand-primary);\n}\n\n.sp-resize-grip {\n    width: 3px;\n    height: 40px;\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n    opacity: 0;\n    transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.sp-resize-handle:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n/* ================================================================= */\n/* HEADER */\n/* ================================================================= */\n\n.sp-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.sp-title {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex: 1;\n}\n\n.sp-close-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: none;\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.sp-close-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n/* ================================================================= */\n/* BODY */\n/* ================================================================= */\n\n.sp-body {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n.sp-dialog-body {\n    padding: 0;\n}\n\n/* ================================================================= */\n/* RESPONSIVE */\n/* ================================================================= */\n\n@media (max-width: 768px) {\n    .sp-panel {\n        width: 100% !important;\n        min-width: unset;\n    }\n\n    .sp-resize-handle {\n        display: none;\n    }\n\n    .sp-dialog {\n        width: 95vw !important;\n        max-height: 90vh;\n    }\n}\n"] }]
+        args: [{ standalone: true, selector: 'mj-slide-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Backdrop overlay -->\n<div class=\"sp-backdrop\"\n  [class.sp-open]=\"IsVisible\"\n  [class.sp-dialog-backdrop]=\"Mode === 'dialog'\"\n  (click)=\"OnBackdropClick()\">\n</div>\n\n<!-- Panel (slide-in from right) -->\n@if (Mode === 'slide') {\n  <div\n    class=\"sp-panel\"\n    [class.sp-open]=\"IsVisible\"\n    [style.width.px]=\"WidthPx\"\n    [style.max-width]=\"(MaxWidthRatio * 100) + 'vw'\">\n    <!-- Resize handle -->\n    @if (Resizable) {\n      <div class=\"sp-resize-handle\" (mousedown)=\"OnResizeStart($event)\">\n        <div class=\"sp-resize-grip\"></div>\n      </div>\n    }\n    <!-- Header (if Title provided) -->\n    @if (Title) {\n      <div class=\"sp-header\">\n        <h2 class=\"sp-title\">{{Title}}</h2>\n        <button class=\"sp-close-btn\" (click)=\"OnClose()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n    }\n    <!-- Content projection -->\n    <div class=\"sp-body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n\n<!-- Dialog (centered modal) -->\n@if (Mode === 'dialog') {\n  <div\n    class=\"sp-dialog\"\n    [class.sp-open]=\"IsVisible\"\n    [style.width.px]=\"WidthPx\">\n    <!-- Header (if Title provided) -->\n    @if (Title) {\n      <div class=\"sp-header\">\n        <h2 class=\"sp-title\">{{Title}}</h2>\n        <button class=\"sp-close-btn\" (click)=\"OnClose()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n    }\n    <!-- Content projection -->\n    <div class=\"sp-body sp-dialog-body\">\n      <ng-content select=\"[dialog-content]\"></ng-content>\n    </div>\n  </div>\n}\n", styles: ["/* ================================================================= */\n/* BACKDROP */\n/* ================================================================= */\n\n.sp-backdrop {\n    position: fixed;\n    inset: 0;\n    background: transparent;\n    z-index: 1000;\n    transition: background 0.3s ease;\n    pointer-events: none;\n}\n\n/* State class is sp-open, NEVER `visible`: explorer-app ships a global\n   `.visible { visibility: visible !important }` utility, and a state class\n   named `visible` accidentally matches it \u2014 forcing the panel to punch\n   through ancestors hidden with visibility:hidden (e.g. the shell's\n   region-hidden main area). */\n.sp-backdrop.sp-open {\n    background: var(--mj-bg-overlay);\n    pointer-events: auto;\n}\n\n.sp-dialog-backdrop.sp-open {\n    background: var(--mj-bg-overlay);\n}\n\n/* ================================================================= */\n/* SLIDE PANEL */\n/* ================================================================= */\n\n.sp-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    height: 100vh;\n    background: var(--mj-bg-surface);\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n    min-width: 400px;\n    max-width: 92vw;\n}\n\n.sp-panel.sp-open {\n    /* `none` (not translateX(0)) on purpose: a non-none transform makes this panel\n       the containing block for position:fixed DESCENDANTS (dropdown panels, popovers\n       that position via getBoundingClientRect viewport math), displacing them\n       offscreen. `none` interpolates as the identity matrix, so the slide-in\n       animation is unaffected while open-state descendants get the real viewport. */\n    transform: none;\n}\n\n/* ================================================================= */\n/* DIALOG (centered modal) */\n/* ================================================================= */\n\n.sp-dialog {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.95);\n    max-height: 85vh;\n    background: var(--mj-bg-surface);\n    border-radius: 16px;\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    opacity: 0;\n    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n    min-width: 360px;\n    max-width: 95vw;\n}\n\n.sp-dialog.sp-open {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n}\n\n/* ================================================================= */\n/* RESIZE HANDLE */\n/* ================================================================= */\n\n.sp-resize-handle {\n    position: absolute;\n    left: -4px;\n    top: 0;\n    width: 8px;\n    height: 100%;\n    cursor: col-resize;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.sp-resize-handle:hover .sp-resize-grip,\n.sp-resize-handle:active .sp-resize-grip {\n    opacity: 1;\n    background: var(--mj-brand-primary);\n}\n\n.sp-resize-grip {\n    width: 3px;\n    height: 40px;\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n    opacity: 0;\n    transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.sp-resize-handle:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n/* ================================================================= */\n/* HEADER */\n/* ================================================================= */\n\n.sp-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.sp-title {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex: 1;\n}\n\n.sp-close-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: none;\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.sp-close-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n/* ================================================================= */\n/* BODY */\n/* ================================================================= */\n\n.sp-body {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n.sp-dialog-body {\n    padding: 0;\n}\n\n/* ================================================================= */\n/* RESPONSIVE */\n/* ================================================================= */\n\n@media (max-width: 768px) {\n    .sp-panel {\n        width: 100% !important;\n        min-width: unset;\n    }\n\n    .sp-resize-handle {\n        display: none;\n    }\n\n    .sp-dialog {\n        width: 95vw !important;\n        max-height: 90vh;\n    }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }], { Mode: [{
             type: Input
         }], Title: [{

package/dist/lib/slide-panel/slide-panel.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"slide-panel.component.js","sourceRoot":"","sources":["../../../src/lib/slide-panel/slide-panel.component.ts","../../../src/lib/slide-panel/slide-panel.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component, Input, Output, EventEmitter, OnInit, OnDestroy,\n  ChangeDetectorRef, ChangeDetectionStrategy, HostListener, ElementRef, NgZone\n} from '@angular/core';\n\n/** Display mode for the slide panel container. */\nexport type SlidePanelMode = 'slide' | 'dialog';\n\n/**\n * Generic slide-in / centered-dialog panel primitive.\n *\n * - `Mode='slide'` → slides in from the right edge, full viewport height, optionally resizable.\n * - `Mode='dialog'` → centered modal card.\n *\n * Pure chrome: it owns the backdrop, open/close animation, resize handle, optional\n * title bar, and content projection. It performs no data work and has no routing.\n * Consumers project their content and handle Save/close via the projected UI and the\n * `Closed` output.\n *\n * @example\n * ```html\n * <mj-slide-panel [Visible]=\"open\" Title=\"Details\" (Closed)=\"open = false\">\n *   <my-content></my-content>\n * </mj-slide-panel>\n * ```\n */\n@Component({\n  standalone: true,\n  selector: 'mj-slide-panel',\n  templateUrl: './slide-panel.component.html',\n  styleUrls: ['./slide-panel.component.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MjSlidePanelComponent implements OnInit, OnDestroy {\n  @Input() Mode: SlidePanelMode = 'slide';\n  @Input() Title = '';\n  @Input()\n  set Visible(value: boolean) {\n    const changed = this._visible !== value;\n    this._visible = value;\n    if (changed && this.initialized) {\n      if (value) {\n        // Opening: animate in on next microtask\n        Promise.resolve().then(() => {\n          this.IsVisible = true;\n          this.cdr.markForCheck();\n        });\n      } else {\n        this.IsVisible = false;\n        this.cdr.markForCheck();\n      }\n    }\n  }\n  get Visible(): boolean {\n    return this._visible;\n  }\n  private _visible = true;\n  private initialized = false;\n\n  @Input() Resizable = true;\n  @Input() MinWidthPx = 400;\n  @Input() MaxWidthRatio = 0.92;\n\n  /** Initial width in pixels. Defaults to 65% of viewport for slide, 800px for dialog. */\n  @Input()\n  set WidthPx(value: number) {\n    this._widthPx = value;\n  }\n  get WidthPx(): number {\n    return this._widthPx;\n  }\n\n  @Output() Closed = new EventEmitter<void>();\n  @Output() WidthChanged = new EventEmitter<number>();\n\n  /**\n   * Optional guard called before any close gesture (X button, backdrop click, Escape).\n   * Return `false` to cancel the close — e.g., when an in-progress operation is running.\n   * The panel itself never shows a dialog; the consumer is responsible for any confirmation UI.\n   */\n  @Input() CanClose: (() => boolean) | null = null;\n\n  public IsVisible = false;\n  private _widthPx = 0;\n  private isResizing = false;\n\n  private boundOnResizeMove = this.onResizeMove.bind(this);\n  private boundOnResizeEnd = this.onResizeEnd.bind(this);\n\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private ngZone: NgZone,\n    private elRef: ElementRef\n  ) {}\n\n  ngOnInit(): void {\n    if (this._widthPx === 0) {\n      this._widthPx = this.Mode === 'dialog'\n        ? 800\n        : Math.max(this.MinWidthPx, Math.min(window.innerWidth * 0.65, 1000));\n    }\n\n    this.initialized = true;\n\n    // Animate in on next microtask if initially visible\n    if (this._visible) {\n      Promise.resolve().then(() => {\n        this.IsVisible = true;\n        this.cdr.markForCheck();\n      });\n    }\n  }\n\n  ngOnDestroy(): void {\n    document.removeEventListener('mousemove', this.boundOnResizeMove);\n    document.removeEventListener('mouseup', this.boundOnResizeEnd);\n  }\n\n  @HostListener('document:keydown.escape')\n  public OnEscapeKey(): void {\n    this.OnClose();\n  }\n\n  public OnClose(): void {\n    if (this.CanClose && !this.CanClose()) return;\n    this.IsVisible = false;\n    this._visible = false;\n    this.cdr.markForCheck();\n    // Wait for CSS transition to complete\n    setTimeout(() => this.Closed.emit(), 300);\n  }\n\n  public OnBackdropClick(): void {\n    this.OnClose();\n  }\n\n  // =========================================================================\n  // Resize\n  // =========================================================================\n\n  public OnResizeStart(event: MouseEvent): void {\n    if (!this.Resizable || this.Mode === 'dialog') return;\n    event.preventDefault();\n    this.isResizing = true;\n    document.body.style.cursor = 'col-resize';\n    document.body.style.userSelect = 'none';\n\n    this.ngZone.runOutsideAngular(() => {\n      document.addEventListener('mousemove', this.boundOnResizeMove);\n      document.addEventListener('mouseup', this.boundOnResizeEnd);\n    });\n  }\n\n  private onResizeMove(event: MouseEvent): void {\n    if (!this.isResizing) return;\n    const viewportWidth = window.innerWidth;\n    const maxWidth = viewportWidth * this.MaxWidthRatio;\n    this._widthPx = Math.max(this.MinWidthPx, Math.min(maxWidth, viewportWidth - event.clientX));\n    this.ngZone.run(() => this.cdr.markForCheck());\n  }\n\n  private onResizeEnd(): void {\n    if (!this.isResizing) return;\n    this.isResizing = false;\n    document.body.style.cursor = '';\n    document.body.style.userSelect = '';\n    document.removeEventListener('mousemove', this.boundOnResizeMove);\n    document.removeEventListener('mouseup', this.boundOnResizeEnd);\n    this.WidthChanged.emit(this._widthPx);\n  }\n}\n","<!-- Backdrop overlay -->\n<div class=\"sp-backdrop\"\n  [class.visible]=\"IsVisible\"\n  [class.sp-dialog-backdrop]=\"Mode === 'dialog'\"\n  (click)=\"OnBackdropClick()\">\n</div>\n\n<!-- Panel (slide-in from right) -->\n@if (Mode === 'slide') {\n  <div\n    class=\"sp-panel\"\n    [class.visible]=\"IsVisible\"\n    [style.width.px]=\"WidthPx\"\n    [style.max-width]=\"(MaxWidthRatio * 100) + 'vw'\">\n    <!-- Resize handle -->\n    @if (Resizable) {\n      <div class=\"sp-resize-handle\" (mousedown)=\"OnResizeStart($event)\">\n        <div class=\"sp-resize-grip\"></div>\n      </div>\n    }\n    <!-- Header (if Title provided) -->\n    @if (Title) {\n      <div class=\"sp-header\">\n        <h2 class=\"sp-title\">{{Title}}</h2>\n        <button class=\"sp-close-btn\" (click)=\"OnClose()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n    }\n    <!-- Content projection -->\n    <div class=\"sp-body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n\n<!-- Dialog (centered modal) -->\n@if (Mode === 'dialog') {\n  <div\n    class=\"sp-dialog\"\n    [class.visible]=\"IsVisible\"\n    [style.width.px]=\"WidthPx\">\n    <!-- Header (if Title provided) -->\n    @if (Title) {\n      <div class=\"sp-header\">\n        <h2 class=\"sp-title\">{{Title}}</h2>\n        <button class=\"sp-close-btn\" (click)=\"OnClose()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n    }\n    <!-- Content projection -->\n    <div class=\"sp-body sp-dialog-body\">\n      <ng-content select=\"[dialog-content]\"></ng-content>\n    </div>\n  </div>\n}\n"]}
+{"version":3,"file":"slide-panel.component.js","sourceRoot":"","sources":["../../../src/lib/slide-panel/slide-panel.component.ts","../../../src/lib/slide-panel/slide-panel.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component, Input, Output, EventEmitter, OnInit, OnDestroy,\n  ChangeDetectorRef, ChangeDetectionStrategy, HostListener, ElementRef, NgZone\n} from '@angular/core';\n\n/** Display mode for the slide panel container. */\nexport type SlidePanelMode = 'slide' | 'dialog';\n\n/**\n * Generic slide-in / centered-dialog panel primitive.\n *\n * - `Mode='slide'` → slides in from the right edge, full viewport height, optionally resizable.\n * - `Mode='dialog'` → centered modal card.\n *\n * Pure chrome: it owns the backdrop, open/close animation, resize handle, optional\n * title bar, and content projection. It performs no data work and has no routing.\n * Consumers project their content and handle Save/close via the projected UI and the\n * `Closed` output.\n *\n * @example\n * ```html\n * <mj-slide-panel [Visible]=\"open\" Title=\"Details\" (Closed)=\"open = false\">\n *   <my-content></my-content>\n * </mj-slide-panel>\n * ```\n */\n@Component({\n  standalone: true,\n  selector: 'mj-slide-panel',\n  templateUrl: './slide-panel.component.html',\n  styleUrls: ['./slide-panel.component.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MjSlidePanelComponent implements OnInit, OnDestroy {\n  @Input() Mode: SlidePanelMode = 'slide';\n  @Input() Title = '';\n  @Input()\n  set Visible(value: boolean) {\n    const changed = this._visible !== value;\n    this._visible = value;\n    if (changed && this.initialized) {\n      if (value) {\n        // Opening: animate in on next microtask\n        Promise.resolve().then(() => {\n          this.IsVisible = true;\n          this.cdr.markForCheck();\n        });\n      } else {\n        this.IsVisible = false;\n        this.cdr.markForCheck();\n      }\n    }\n  }\n  get Visible(): boolean {\n    return this._visible;\n  }\n  private _visible = true;\n  private initialized = false;\n\n  @Input() Resizable = true;\n  @Input() MinWidthPx = 400;\n  @Input() MaxWidthRatio = 0.92;\n\n  /** Initial width in pixels. Defaults to 65% of viewport for slide, 800px for dialog. */\n  @Input()\n  set WidthPx(value: number) {\n    this._widthPx = value;\n  }\n  get WidthPx(): number {\n    return this._widthPx;\n  }\n\n  @Output() Closed = new EventEmitter<void>();\n  @Output() WidthChanged = new EventEmitter<number>();\n\n  /**\n   * Optional guard called before any close gesture (X button, backdrop click, Escape).\n   * Return `false` to cancel the close — e.g., when an in-progress operation is running.\n   * The panel itself never shows a dialog; the consumer is responsible for any confirmation UI.\n   */\n  @Input() CanClose: (() => boolean) | null = null;\n\n  public IsVisible = false;\n  private _widthPx = 0;\n  private isResizing = false;\n\n  private boundOnResizeMove = this.onResizeMove.bind(this);\n  private boundOnResizeEnd = this.onResizeEnd.bind(this);\n\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private ngZone: NgZone,\n    private elRef: ElementRef\n  ) {}\n\n  ngOnInit(): void {\n    if (this._widthPx === 0) {\n      this._widthPx = this.Mode === 'dialog'\n        ? 800\n        : Math.max(this.MinWidthPx, Math.min(window.innerWidth * 0.65, 1000));\n    }\n\n    this.initialized = true;\n\n    // Animate in on next microtask if initially visible\n    if (this._visible) {\n      Promise.resolve().then(() => {\n        this.IsVisible = true;\n        this.cdr.markForCheck();\n      });\n    }\n  }\n\n  ngOnDestroy(): void {\n    document.removeEventListener('mousemove', this.boundOnResizeMove);\n    document.removeEventListener('mouseup', this.boundOnResizeEnd);\n  }\n\n  @HostListener('document:keydown.escape')\n  public OnEscapeKey(): void {\n    this.OnClose();\n  }\n\n  public OnClose(): void {\n    if (this.CanClose && !this.CanClose()) return;\n    this.IsVisible = false;\n    this._visible = false;\n    this.cdr.markForCheck();\n    // Wait for CSS transition to complete\n    setTimeout(() => this.Closed.emit(), 300);\n  }\n\n  public OnBackdropClick(): void {\n    this.OnClose();\n  }\n\n  // =========================================================================\n  // Resize\n  // =========================================================================\n\n  public OnResizeStart(event: MouseEvent): void {\n    if (!this.Resizable || this.Mode === 'dialog') return;\n    event.preventDefault();\n    this.isResizing = true;\n    document.body.style.cursor = 'col-resize';\n    document.body.style.userSelect = 'none';\n\n    this.ngZone.runOutsideAngular(() => {\n      document.addEventListener('mousemove', this.boundOnResizeMove);\n      document.addEventListener('mouseup', this.boundOnResizeEnd);\n    });\n  }\n\n  private onResizeMove(event: MouseEvent): void {\n    if (!this.isResizing) return;\n    const viewportWidth = window.innerWidth;\n    const maxWidth = viewportWidth * this.MaxWidthRatio;\n    this._widthPx = Math.max(this.MinWidthPx, Math.min(maxWidth, viewportWidth - event.clientX));\n    this.ngZone.run(() => this.cdr.markForCheck());\n  }\n\n  private onResizeEnd(): void {\n    if (!this.isResizing) return;\n    this.isResizing = false;\n    document.body.style.cursor = '';\n    document.body.style.userSelect = '';\n    document.removeEventListener('mousemove', this.boundOnResizeMove);\n    document.removeEventListener('mouseup', this.boundOnResizeEnd);\n    this.WidthChanged.emit(this._widthPx);\n  }\n}\n","<!-- Backdrop overlay -->\n<div class=\"sp-backdrop\"\n  [class.sp-open]=\"IsVisible\"\n  [class.sp-dialog-backdrop]=\"Mode === 'dialog'\"\n  (click)=\"OnBackdropClick()\">\n</div>\n\n<!-- Panel (slide-in from right) -->\n@if (Mode === 'slide') {\n  <div\n    class=\"sp-panel\"\n    [class.sp-open]=\"IsVisible\"\n    [style.width.px]=\"WidthPx\"\n    [style.max-width]=\"(MaxWidthRatio * 100) + 'vw'\">\n    <!-- Resize handle -->\n    @if (Resizable) {\n      <div class=\"sp-resize-handle\" (mousedown)=\"OnResizeStart($event)\">\n        <div class=\"sp-resize-grip\"></div>\n      </div>\n    }\n    <!-- Header (if Title provided) -->\n    @if (Title) {\n      <div class=\"sp-header\">\n        <h2 class=\"sp-title\">{{Title}}</h2>\n        <button class=\"sp-close-btn\" (click)=\"OnClose()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n    }\n    <!-- Content projection -->\n    <div class=\"sp-body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n\n<!-- Dialog (centered modal) -->\n@if (Mode === 'dialog') {\n  <div\n    class=\"sp-dialog\"\n    [class.sp-open]=\"IsVisible\"\n    [style.width.px]=\"WidthPx\">\n    <!-- Header (if Title provided) -->\n    @if (Title) {\n      <div class=\"sp-header\">\n        <h2 class=\"sp-title\">{{Title}}</h2>\n        <button class=\"sp-close-btn\" (click)=\"OnClose()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n    }\n    <!-- Content projection -->\n    <div class=\"sp-body sp-dialog-body\">\n      <ng-content select=\"[dialog-content]\"></ng-content>\n    </div>\n  </div>\n}\n"]}

package/dist/public-api.d.ts

@@ -15,6 +15,7 @@ export * from './lib/accordion/accordion.component';
 export * from './lib/alert/alert.component';
 export * from './lib/window/window.component';
 export * from './lib/slide-panel/slide-panel.component';
+export * from './lib/bottom-sheet/bottom-sheet.component';
 export * from './lib/combobox/combobox.component';
 export * from './lib/page-header/page-header.component';
 export * from './lib/page-layout/page-layout.component';

package/dist/public-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAGA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC;AACtE,cAAc,yCAAyC,CAAC"}
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAGA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC;AACtE,cAAc,yCAAyC,CAAC"}

package/dist/public-api.js

@@ -17,6 +17,7 @@ export * from './lib/accordion/accordion.component';
 export * from './lib/alert/alert.component';
 export * from './lib/window/window.component';
 export * from './lib/slide-panel/slide-panel.component';
+export * from './lib/bottom-sheet/bottom-sheet.component';
 export * from './lib/combobox/combobox.component';
 export * from './lib/page-header/page-header.component';
 export * from './lib/page-layout/page-layout.component';

package/dist/public-api.js.map

@@ -1 +1 @@
-{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,+DAA+D;AAE/D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC;AACtE,cAAc,yCAAyC,CAAC","sourcesContent":["// @memberjunction/ng-ui-components\n// Reusable standalone Angular UI components for MemberJunction\n\nexport * from './lib/button/button.directive';\nexport * from './lib/clickable/clickable.directive';\nexport * from './lib/dialog/dialog.component';\nexport * from './lib/dialog/dialog.service';\nexport * from './lib/confirm-dialog/confirm-dialog.component';\nexport * from './lib/confirm-dialog/confirm-dialog.service';\nexport * from './lib/dropdown/dropdown.component';\nexport * from './lib/switch/switch.component';\nexport * from './lib/numeric-input/numeric-input.component';\nexport * from './lib/progress-bar/progress-bar.component';\nexport * from './lib/calendar/calendar-utils';\nexport * from './lib/datepicker/datepicker.component';\nexport * from './lib/splitter/splitter.component';\nexport * from './lib/accordion/accordion.component';\nexport * from './lib/alert/alert.component';\nexport * from './lib/window/window.component';\nexport * from './lib/slide-panel/slide-panel.component';\nexport * from './lib/combobox/combobox.component';\nexport * from './lib/page-header/page-header.component';\nexport * from './lib/page-layout/page-layout.component';\nexport * from './lib/page-body/page-body.component';\nexport * from './lib/stat-badge/stat-badge.component';\nexport * from './lib/refresh-button/refresh-button.component';\nexport * from './lib/filter-popover/filter-popover.component';\nexport * from './lib/page-search/page-search.component';\nexport * from './lib/filter-chip/filter-chip.component';\nexport * from './lib/filter-field/filter-field.component';\nexport * from './lib/filter-panel/filter-panel.component';\nexport * from './lib/tab-nav/tab-nav.component';\nexport * from './lib/view-toggle/view-toggle.component';\nexport * from './lib/left-nav/left-nav.component';\nexport * from './lib/left-nav/left-nav-content.component';\nexport * from './lib/page-header-interior/page-header-interior.component';\nexport * from './lib/page-body-interior/page-body-interior.component';\nexport * from './lib/empty-state/empty-state.component';\n"]}
+{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,+DAA+D;AAE/D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC;AACtE,cAAc,yCAAyC,CAAC","sourcesContent":["// @memberjunction/ng-ui-components\n// Reusable standalone Angular UI components for MemberJunction\n\nexport * from './lib/button/button.directive';\nexport * from './lib/clickable/clickable.directive';\nexport * from './lib/dialog/dialog.component';\nexport * from './lib/dialog/dialog.service';\nexport * from './lib/confirm-dialog/confirm-dialog.component';\nexport * from './lib/confirm-dialog/confirm-dialog.service';\nexport * from './lib/dropdown/dropdown.component';\nexport * from './lib/switch/switch.component';\nexport * from './lib/numeric-input/numeric-input.component';\nexport * from './lib/progress-bar/progress-bar.component';\nexport * from './lib/calendar/calendar-utils';\nexport * from './lib/datepicker/datepicker.component';\nexport * from './lib/splitter/splitter.component';\nexport * from './lib/accordion/accordion.component';\nexport * from './lib/alert/alert.component';\nexport * from './lib/window/window.component';\nexport * from './lib/slide-panel/slide-panel.component';\nexport * from './lib/bottom-sheet/bottom-sheet.component';\nexport * from './lib/combobox/combobox.component';\nexport * from './lib/page-header/page-header.component';\nexport * from './lib/page-layout/page-layout.component';\nexport * from './lib/page-body/page-body.component';\nexport * from './lib/stat-badge/stat-badge.component';\nexport * from './lib/refresh-button/refresh-button.component';\nexport * from './lib/filter-popover/filter-popover.component';\nexport * from './lib/page-search/page-search.component';\nexport * from './lib/filter-chip/filter-chip.component';\nexport * from './lib/filter-field/filter-field.component';\nexport * from './lib/filter-panel/filter-panel.component';\nexport * from './lib/tab-nav/tab-nav.component';\nexport * from './lib/view-toggle/view-toggle.component';\nexport * from './lib/left-nav/left-nav.component';\nexport * from './lib/left-nav/left-nav-content.component';\nexport * from './lib/page-header-interior/page-header-interior.component';\nexport * from './lib/page-body-interior/page-body-interior.component';\nexport * from './lib/empty-state/empty-state.component';\n"]}

package/package.json

@@ -1,19 +1,12 @@
 {
   "name": "@memberjunction/ng-ui-components",
-  "version": "5.51.0",
+  "version": "6.1.0-edge.0",
   "description": "MemberJunction: Angular UI Components - reusable standalone components replacing Kendo UI dependencies.",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
   "files": [
     "/dist"
   ],
-  "scripts": {
-    "test": "vitest run",
-    "build": "npm run clean && ngc && npm run copy-assets",
-    "copy-assets": "cpy src/lib/button/button.scss dist/lib/button --flat && cpy src/lib/dialog/dialog.scss dist/lib/dialog --flat && cpy src/lib/dropdown/dropdown.scss dist/lib/dropdown --flat && cpy src/lib/combobox/combobox.scss dist/lib/combobox --flat && cpy src/lib/input/input.scss dist/lib/input --flat && cpy src/lib/input/input-switch-progress.scss dist/lib/input --flat && cpy src/lib/datepicker/datepicker.scss dist/lib/datepicker --flat && cpy src/lib/splitter/splitter.scss dist/lib/splitter --flat && cpy src/lib/accordion/accordion.scss dist/lib/accordion --flat && cpy src/lib/window/window.scss dist/lib/window --flat && cpy src/lib/input/chip.scss dist/lib/input --flat",
-    "clean": "rimraf dist",
-    "test:watch": "vitest"
-  },
   "keywords": [
     "MemberJunction",
     "Angular"
@@ -23,7 +16,7 @@
   "devDependencies": {
     "@angular/compiler": "21.1.3",
     "@angular/compiler-cli": "21.1.3",
-    "@memberjunction/ng-test-utils": "5.51.0",
+    "@memberjunction/ng-test-utils": "6.1.0-edge.0",
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
@@ -41,5 +34,14 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/MemberJunction/MJ"
+  },
+  "mjUILayer": "widgets",
+  "scripts": {
+    "test": "vitest run",
+    "test:types": "tsc --noEmit -p tsconfig.spec.json",
+    "build": "npm run clean && ngc && npm run copy-assets",
+    "copy-assets": "cpy src/lib/button/button.scss dist/lib/button --flat && cpy src/lib/dialog/dialog.scss dist/lib/dialog --flat && cpy src/lib/dropdown/dropdown.scss dist/lib/dropdown --flat && cpy src/lib/combobox/combobox.scss dist/lib/combobox --flat && cpy src/lib/input/input.scss dist/lib/input --flat && cpy src/lib/input/input-switch-progress.scss dist/lib/input --flat && cpy src/lib/datepicker/datepicker.scss dist/lib/datepicker --flat && cpy src/lib/splitter/splitter.scss dist/lib/splitter --flat && cpy src/lib/accordion/accordion.scss dist/lib/accordion --flat && cpy src/lib/window/window.scss dist/lib/window --flat && cpy src/lib/input/chip.scss dist/lib/input --flat",
+    "clean": "rimraf dist",
+    "test:watch": "vitest"
   }
-}
+}