@memberjunction/ng-ui-components 5.38.0 → 5.40.0

package/dist/lib/slide-panel/slide-panel.component.d.ts

@@ -0,0 +1,64 @@
+import { EventEmitter, OnInit, OnDestroy, ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import * as i0 from "@angular/core";
+/** Display mode for the slide panel container. */
+export type SlidePanelMode = 'slide' | 'dialog';
+/**
+ * Generic slide-in / centered-dialog panel primitive.
+ *
+ * - `Mode='slide'` → slides in from the right edge, full viewport height, optionally resizable.
+ * - `Mode='dialog'` → centered modal card.
+ *
+ * Pure chrome: it owns the backdrop, open/close animation, resize handle, optional
+ * title bar, and content projection. It performs no data work and has no routing.
+ * Consumers project their content and handle Save/close via the projected UI and the
+ * `Closed` output.
+ *
+ * @example
+ * ```html
+ * <mj-slide-panel [Visible]="open" Title="Details" (Closed)="open = false">
+ *   <my-content></my-content>
+ * </mj-slide-panel>
+ * ```
+ */
+export declare class MjSlidePanelComponent implements OnInit, OnDestroy {
+    private cdr;
+    private ngZone;
+    private elRef;
+    Mode: SlidePanelMode;
+    Title: string;
+    set Visible(value: boolean);
+    get Visible(): boolean;
+    private _visible;
+    private initialized;
+    Resizable: boolean;
+    MinWidthPx: number;
+    MaxWidthRatio: number;
+    /** Initial width in pixels. Defaults to 65% of viewport for slide, 800px for dialog. */
+    set WidthPx(value: number);
+    get WidthPx(): number;
+    Closed: EventEmitter<void>;
+    WidthChanged: EventEmitter<number>;
+    /**
+     * Optional guard called before any close gesture (X button, backdrop click, Escape).
+     * Return `false` to cancel the close — e.g., when an in-progress operation is running.
+     * The panel itself never shows a dialog; the consumer is responsible for any confirmation UI.
+     */
+    CanClose: (() => boolean) | null;
+    IsVisible: boolean;
+    private _widthPx;
+    private isResizing;
+    private boundOnResizeMove;
+    private boundOnResizeEnd;
+    constructor(cdr: ChangeDetectorRef, ngZone: NgZone, elRef: ElementRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    OnEscapeKey(): void;
+    OnClose(): void;
+    OnBackdropClick(): void;
+    OnResizeStart(event: MouseEvent): void;
+    private onResizeMove;
+    private onResizeEnd;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MjSlidePanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MjSlidePanelComponent, "mj-slide-panel", never, { "Mode": { "alias": "Mode"; "required": false; }; "Title": { "alias": "Title"; "required": false; }; "Visible": { "alias": "Visible"; "required": false; }; "Resizable": { "alias": "Resizable"; "required": false; }; "MinWidthPx": { "alias": "MinWidthPx"; "required": false; }; "MaxWidthRatio": { "alias": "MaxWidthRatio"; "required": false; }; "WidthPx": { "alias": "WidthPx"; "required": false; }; "CanClose": { "alias": "CanClose"; "required": false; }; }, { "Closed": "Closed"; "WidthChanged": "WidthChanged"; }, never, ["*", "[dialog-content]"], true, never>;
+}
+//# sourceMappingURL=slide-panel.component.d.ts.map

package/dist/lib/slide-panel/slide-panel.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide-panel.component.d.ts","sourceRoot":"","sources":["../../../src/lib/slide-panel/slide-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACqB,YAAY,EAAE,MAAM,EAAE,SAAS,EACzD,iBAAiB,EAAyC,UAAU,EAAE,MAAM,EAC7E,MAAM,eAAe,CAAC;;AAEvB,kDAAkD;AAClD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAOa,qBAAsB,YAAW,MAAM,EAAE,SAAS;IAyD3D,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,KAAK;IA1DN,IAAI,EAAE,cAAc,CAAW;IAC/B,KAAK,SAAM;IACpB,IACI,OAAO,CAAC,KAAK,EAAE,OAAO,EAezB;IACD,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,OAAO,CAAC,QAAQ,CAAQ;IACxB,OAAO,CAAC,WAAW,CAAS;IAEnB,SAAS,UAAQ;IACjB,UAAU,SAAO;IACjB,aAAa,SAAQ;IAE9B,wFAAwF;IACxF,IACI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IACD,IAAI,OAAO,IAAI,MAAM,CAEpB;IAES,MAAM,qBAA4B;IAClC,YAAY,uBAA8B;IAEpD;;;;OAIG;IACM,QAAQ,EAAE,CAAC,MAAM,OAAO,CAAC,GAAG,IAAI,CAAQ;IAE1C,SAAS,UAAS;IACzB,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,gBAAgB,CAA+B;gBAG7C,GAAG,EAAE,iBAAiB,EACtB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,UAAU;IAG3B,QAAQ,IAAI,IAAI;IAkBhB,WAAW,IAAI,IAAI;IAMZ,WAAW,IAAI,IAAI;IAInB,OAAO,IAAI,IAAI;IASf,eAAe,IAAI,IAAI;IAQvB,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAa7C,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW;yCAhIR,qBAAqB;2CAArB,qBAAqB;CAyIjC"}

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

@@ -0,0 +1,256 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, HostListener } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["*", [["", "dialog-content", ""]]];
+const _c1 = ["*", "[dialog-content]"];
+function MjSlidePanelComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 7);
+    i0.ɵɵdomListener("mousedown", function MjSlidePanelComponent_Conditional_1_Conditional_1_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnResizeStart($event)); });
+    i0.ɵɵdomElement(1, "div", 8);
+    i0.ɵɵdomElementEnd();
+} }
+function MjSlidePanelComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 5)(1, "h2", 9);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "button", 10);
+    i0.ɵɵdomListener("click", function MjSlidePanelComponent_Conditional_1_Conditional_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnClose()); });
+    i0.ɵɵdomElement(4, "i", 11);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.Title);
+} }
+function MjSlidePanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 3);
+    i0.ɵɵconditionalCreate(1, MjSlidePanelComponent_Conditional_1_Conditional_1_Template, 2, 0, "div", 4);
+    i0.ɵɵconditionalCreate(2, MjSlidePanelComponent_Conditional_1_Conditional_2_Template, 5, 1, "div", 5);
+    i0.ɵɵdomElementStart(3, "div", 6);
+    i0.ɵɵprojection(4);
+    i0.ɵɵdomElementEnd()();
+} 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.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.Resizable ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.Title ? 2 : -1);
+} }
+function MjSlidePanelComponent_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 5)(1, "h2", 9);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "button", 10);
+    i0.ɵɵdomListener("click", function MjSlidePanelComponent_Conditional_2_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnClose()); });
+    i0.ɵɵdomElement(4, "i", 11);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.Title);
+} }
+function MjSlidePanelComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 12);
+    i0.ɵɵconditionalCreate(1, MjSlidePanelComponent_Conditional_2_Conditional_1_Template, 5, 1, "div", 5);
+    i0.ɵɵdomElementStart(2, "div", 13);
+    i0.ɵɵprojection(3, 1);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("width", ctx_r1.WidthPx, "px");
+    i0.ɵɵclassProp("visible", ctx_r1.IsVisible);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.Title ? 1 : -1);
+} }
+/**
+ * Generic slide-in / centered-dialog panel primitive.
+ *
+ * - `Mode='slide'` → slides in from the right edge, full viewport height, optionally resizable.
+ * - `Mode='dialog'` → centered modal card.
+ *
+ * Pure chrome: it owns the backdrop, open/close animation, resize handle, optional
+ * title bar, and content projection. It performs no data work and has no routing.
+ * Consumers project their content and handle Save/close via the projected UI and the
+ * `Closed` output.
+ *
+ * @example
+ * ```html
+ * <mj-slide-panel [Visible]="open" Title="Details" (Closed)="open = false">
+ *   <my-content></my-content>
+ * </mj-slide-panel>
+ * ```
+ */
+export class MjSlidePanelComponent {
+    cdr;
+    ngZone;
+    elRef;
+    Mode = 'slide';
+    Title = '';
+    set Visible(value) {
+        const changed = this._visible !== value;
+        this._visible = value;
+        if (changed && this.initialized) {
+            if (value) {
+                // Opening: animate in on next microtask
+                Promise.resolve().then(() => {
+                    this.IsVisible = true;
+                    this.cdr.markForCheck();
+                });
+            }
+            else {
+                this.IsVisible = false;
+                this.cdr.markForCheck();
+            }
+        }
+    }
+    get Visible() {
+        return this._visible;
+    }
+    _visible = true;
+    initialized = false;
+    Resizable = true;
+    MinWidthPx = 400;
+    MaxWidthRatio = 0.92;
+    /** Initial width in pixels. Defaults to 65% of viewport for slide, 800px for dialog. */
+    set WidthPx(value) {
+        this._widthPx = value;
+    }
+    get WidthPx() {
+        return this._widthPx;
+    }
+    Closed = new EventEmitter();
+    WidthChanged = new EventEmitter();
+    /**
+     * Optional guard called before any close gesture (X button, backdrop click, Escape).
+     * Return `false` to cancel the close — e.g., when an in-progress operation is running.
+     * The panel itself never shows a dialog; the consumer is responsible for any confirmation UI.
+     */
+    CanClose = null;
+    IsVisible = false;
+    _widthPx = 0;
+    isResizing = false;
+    boundOnResizeMove = this.onResizeMove.bind(this);
+    boundOnResizeEnd = this.onResizeEnd.bind(this);
+    constructor(cdr, ngZone, elRef) {
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        this.elRef = elRef;
+    }
+    ngOnInit() {
+        if (this._widthPx === 0) {
+            this._widthPx = this.Mode === 'dialog'
+                ? 800
+                : Math.max(this.MinWidthPx, Math.min(window.innerWidth * 0.65, 1000));
+        }
+        this.initialized = true;
+        // Animate in on next microtask if initially visible
+        if (this._visible) {
+            Promise.resolve().then(() => {
+                this.IsVisible = true;
+                this.cdr.markForCheck();
+            });
+        }
+    }
+    ngOnDestroy() {
+        document.removeEventListener('mousemove', this.boundOnResizeMove);
+        document.removeEventListener('mouseup', this.boundOnResizeEnd);
+    }
+    OnEscapeKey() {
+        this.OnClose();
+    }
+    OnClose() {
+        if (this.CanClose && !this.CanClose())
+            return;
+        this.IsVisible = false;
+        this._visible = false;
+        this.cdr.markForCheck();
+        // Wait for CSS transition to complete
+        setTimeout(() => this.Closed.emit(), 300);
+    }
+    OnBackdropClick() {
+        this.OnClose();
+    }
+    // =========================================================================
+    // Resize
+    // =========================================================================
+    OnResizeStart(event) {
+        if (!this.Resizable || this.Mode === 'dialog')
+            return;
+        event.preventDefault();
+        this.isResizing = true;
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        this.ngZone.runOutsideAngular(() => {
+            document.addEventListener('mousemove', this.boundOnResizeMove);
+            document.addEventListener('mouseup', this.boundOnResizeEnd);
+        });
+    }
+    onResizeMove(event) {
+        if (!this.isResizing)
+            return;
+        const viewportWidth = window.innerWidth;
+        const maxWidth = viewportWidth * this.MaxWidthRatio;
+        this._widthPx = Math.max(this.MinWidthPx, Math.min(maxWidth, viewportWidth - event.clientX));
+        this.ngZone.run(() => this.cdr.markForCheck());
+    }
+    onResizeEnd() {
+        if (!this.isResizing)
+            return;
+        this.isResizing = false;
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        document.removeEventListener('mousemove', this.boundOnResizeMove);
+        document.removeEventListener('mouseup', this.boundOnResizeEnd);
+        this.WidthChanged.emit(this._widthPx);
+    }
+    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) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵdomListener("click", function MjSlidePanelComponent_Template_div_click_0_listener() { return ctx.OnBackdropClick(); });
+            i0.ɵɵdomElementEnd();
+            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.ɵɵ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    transform: translateX(0);\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 });
+}
+(() => { (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    transform: translateX(0);\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"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }], { Mode: [{
+            type: Input
+        }], Title: [{
+            type: Input
+        }], Visible: [{
+            type: Input
+        }], Resizable: [{
+            type: Input
+        }], MinWidthPx: [{
+            type: Input
+        }], MaxWidthRatio: [{
+            type: Input
+        }], WidthPx: [{
+            type: Input
+        }], Closed: [{
+            type: Output
+        }], WidthChanged: [{
+            type: Output
+        }], CanClose: [{
+            type: Input
+        }], OnEscapeKey: [{
+            type: HostListener,
+            args: ['document:keydown.escape']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MjSlidePanelComponent, { className: "MjSlidePanelComponent", filePath: "lib/slide-panel/slide-panel.component.ts", lineNumber: 34 }); })();
+//# sourceMappingURL=slide-panel.component.js.map

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

@@ -0,0 +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"]}

package/dist/public-api.d.ts

@@ -10,6 +10,7 @@ export * from './lib/datepicker/datepicker.component';
 export * from './lib/splitter/splitter.component';
 export * from './lib/accordion/accordion.component';
 export * from './lib/window/window.component';
+export * from './lib/slide-panel/slide-panel.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,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,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,+BAA+B,CAAC;AAC9C,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"}
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAGA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,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,+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"}

package/dist/public-api.js

@@ -12,6 +12,7 @@ export * from './lib/datepicker/datepicker.component';
 export * from './lib/splitter/splitter.component';
 export * from './lib/accordion/accordion.component';
 export * from './lib/window/window.component';
+export * from './lib/slide-panel/slide-panel.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,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,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,+BAA+B,CAAC;AAC9C,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","sourcesContent":["// @memberjunction/ng-ui-components\n// Reusable standalone Angular UI components for MemberJunction\n\nexport * from './lib/button/button.directive';\nexport * from './lib/dialog/dialog.component';\nexport * from './lib/dialog/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/window/window.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';\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,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,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,+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","sourcesContent":["// @memberjunction/ng-ui-components\n// Reusable standalone Angular UI components for MemberJunction\n\nexport * from './lib/button/button.directive';\nexport * from './lib/dialog/dialog.component';\nexport * from './lib/dialog/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/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';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-ui-components",
-  "version": "5.38.0",
+  "version": "5.40.0",
   "description": "MemberJunction: Angular UI Components - reusable standalone components replacing Kendo UI dependencies.",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",