@memberjunction/ng-ui-components 6.1.0-edge.1 → 6.1.0-edge.3

package/dist/lib/card-grid/card-grid.component.js

@@ -0,0 +1,640 @@
+import { Component, Directive, Input, Output, EventEmitter, ContentChild, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BehaviorSubject } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+const _c0 = ["*"];
+function MJCardComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 6);
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.Icon);
+} }
+function MJCardComponent_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 7);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.TitleTemplate.templateRef);
+} }
+function MJCardComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "h3", 8);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.Title);
+} }
+function MJCardComponent_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 9);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.Subtitle);
+} }
+function MJCardComponent_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 7);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.ToolsTemplate.templateRef);
+} }
+function MJCardComponent_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 7);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.ActionsTemplate.templateRef);
+} }
+function MJCardComponent_Conditional_1_Conditional_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 13);
+} }
+function MJCardComponent_Conditional_1_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 14);
+} }
+function MJCardComponent_Conditional_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 12);
+    i0.ɵɵlistener("click", function MJCardComponent_Conditional_1_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.ToggleMaximize($event)); });
+    i0.ɵɵconditionalCreate(1, MJCardComponent_Conditional_1_Conditional_10_Conditional_1_Template, 1, 0, "i", 13)(2, MJCardComponent_Conditional_1_Conditional_10_Conditional_2_Template, 1, 0, "i", 14);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("title", ctx_r0.IsMaximized ? ctx_r0.RestoreTooltip : ctx_r0.MaximizeTooltip);
+    i0.ɵɵattribute("aria-label", ctx_r0.IsMaximized ? ctx_r0.RestoreTooltip : ctx_r0.MaximizeTooltip);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.IsMaximized ? 1 : 2);
+} }
+function MJCardComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 4)(2, "div", 5);
+    i0.ɵɵconditionalCreate(3, MJCardComponent_Conditional_1_Conditional_3_Template, 2, 2, "span", 6);
+    i0.ɵɵconditionalCreate(4, MJCardComponent_Conditional_1_Conditional_4_Template, 1, 1, "ng-container", 7)(5, MJCardComponent_Conditional_1_Conditional_5_Template, 2, 1, "h3", 8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, MJCardComponent_Conditional_1_Conditional_6_Template, 2, 1, "span", 9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 10);
+    i0.ɵɵconditionalCreate(8, MJCardComponent_Conditional_1_Conditional_8_Template, 1, 1, "ng-container", 7);
+    i0.ɵɵconditionalCreate(9, MJCardComponent_Conditional_1_Conditional_9_Template, 1, 1, "ng-container", 7);
+    i0.ɵɵconditionalCreate(10, MJCardComponent_Conditional_1_Conditional_10_Template, 3, 3, "button", 11);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.Icon ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.TitleTemplate ? 4 : ctx_r0.Title ? 5 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.Subtitle ? 6 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.ToolsTemplate ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.ActionsTemplate ? 9 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.AllowMaximize ? 10 : -1);
+} }
+function MJCardComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵelementContainer(1, 7);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.FooterTemplate.templateRef);
+} }
+const _c1 = "[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    box-sizing: border-box;\n}\n\n.mj-card-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    align-items: stretch;\n    gap: var(--mj-card-grid-gap, var(--mj-space-4, 16px));\n    width: 100%;\n    position: relative;\n    box-sizing: border-box;\n    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.mj-card-grid--has-maximized[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr !important;\n}\n\n@media (max-width: 640px) {\n    .mj-card-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr !important;\n    }\n}\n\nmj-card[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-width: 0;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.mj-card[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 100%;\n    height: 100%;\n    min-height: 290px;\n    background: var(--mj-bg-surface-card, var(--mj-bg-surface, #141f33));\n    border: 1px solid var(--mj-border-default, #2a3852);\n    border-radius: var(--mj-radius-xl, 16px);\n    box-shadow: var(--mj-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));\n    padding: var(--mj-space-4, 16px) var(--mj-space-5, 20px);\n    box-sizing: border-box;\n    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;\n    position: relative;\n    min-width: 0;\n}\n\n.mj-card[_ngcontent-%COMP%]:hover {\n    border-color: color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 40%, var(--mj-border-default, #2a3852));\n}\n\n.mj-card--maximized[_ngcontent-%COMP%] {\n    grid-column: 1 / -1;\n    width: 100%;\n    min-height: 480px;\n    box-shadow: var(--mj-shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.25));\n    border-color: var(--mj-brand-primary, #38bdf8);\n    z-index: 10;\n}\n\n.mj-card--hidden[_ngcontent-%COMP%] {\n    display: none !important;\n}\n\n.mj-card__header[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--mj-space-3, 12px);\n    margin-bottom: var(--mj-space-3, 12px);\n    min-height: 28px;\n    width: 100%;\n}\n\n.mj-card__title-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n    flex: 1 1 auto;\n}\n\n.mj-card__title-row[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--mj-space-2, 8px);\n    min-width: 0;\n}\n\n.mj-card__icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary, #38bdf8);\n    font-size: 14px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.mj-card__title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--mj-text-primary, #ffffff);\n    letter-spacing: -0.01em;\n    margin: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.mj-card__subtitle[_ngcontent-%COMP%] {\n    font-size: 11.5px;\n    font-weight: 500;\n    color: var(--mj-text-muted, #94a3b8);\n    margin: 0;\n    padding-left: 22px;\n}\n\n.mj-card__actions[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--mj-space-2, 8px);\n    flex-shrink: 0;\n    margin-left: auto;\n}\n\n.mj-card__toggle-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border-radius: var(--mj-radius-sm, 6px);\n    background: transparent;\n    border: 1px solid transparent;\n    color: var(--mj-text-muted, #94a3b8);\n    cursor: pointer;\n    padding: 0;\n    font-size: 12px;\n    transition: all 0.15s ease;\n}\n\n.mj-card__toggle-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary, #ffffff);\n    background: var(--mj-bg-surface-sunken, rgba(255, 255, 255, 0.06));\n    border-color: var(--mj-border-default, #2a3852);\n}\n\n.mj-card__toggle-btn[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--mj-brand-primary, #38bdf8);\n    outline-offset: 1px;\n}\n\n.mj-card__body[_ngcontent-%COMP%] {\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    min-width: 0;\n}\n\n.mj-card__footer[_ngcontent-%COMP%] {\n    margin-top: auto;\n    padding-top: var(--mj-space-3, 12px);\n    border-top: 1px solid var(--mj-border-default, #2a3852);\n}";
+let nextCardId = 0;
+/**
+ * Directive to provide a custom template for the Card Title.
+ */
+export class MJCardTitleDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = function MJCardTitleDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJCardTitleDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef)); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MJCardTitleDirective, selectors: [["", "mjCardTitle", ""]] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJCardTitleDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[mjCardTitle]',
+                standalone: true,
+            }]
+    }], () => [{ type: i0.TemplateRef }], null); })();
+/**
+ * Directive to provide custom action controls in the Card Header.
+ */
+export class MJCardActionsDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = function MJCardActionsDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJCardActionsDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef)); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MJCardActionsDirective, selectors: [["", "mjCardActions", ""]] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJCardActionsDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[mjCardActions]',
+                standalone: true,
+            }]
+    }], () => [{ type: i0.TemplateRef }], null); })();
+/**
+ * Directive to provide custom tools/badges in the Card Header.
+ */
+export class MJCardToolsDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = function MJCardToolsDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJCardToolsDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef)); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MJCardToolsDirective, selectors: [["", "mjCardTools", ""]] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJCardToolsDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[mjCardTools]',
+                standalone: true,
+            }]
+    }], () => [{ type: i0.TemplateRef }], null); })();
+/**
+ * Directive to provide a custom template for the Card Footer.
+ */
+export class MJCardFooterDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = function MJCardFooterDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJCardFooterDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef)); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MJCardFooterDirective, selectors: [["", "mjCardFooter", ""]] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJCardFooterDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[mjCardFooter]',
+                standalone: true,
+            }]
+    }], () => [{ type: i0.TemplateRef }], null); })();
+const CARD_GRID_CSS = `
+:host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+}
+
+.mj-card-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: stretch;
+    gap: var(--mj-card-grid-gap, var(--mj-space-4, 16px));
+    width: 100%;
+    position: relative;
+    box-sizing: border-box;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.mj-card-grid--has-maximized {
+    grid-template-columns: 1fr !important;
+}
+
+@media (max-width: 640px) {
+    .mj-card-grid {
+        grid-template-columns: 1fr !important;
+    }
+}
+
+mj-card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-width: 0;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.mj-card {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 100%;
+    height: 100%;
+    min-height: 290px;
+    background: var(--mj-bg-surface-card, var(--mj-bg-surface, #141f33));
+    border: 1px solid var(--mj-border-default, #2a3852);
+    border-radius: var(--mj-radius-xl, 16px);
+    box-shadow: var(--mj-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
+    padding: var(--mj-space-4, 16px) var(--mj-space-5, 20px);
+    box-sizing: border-box;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+    position: relative;
+    min-width: 0;
+}
+
+.mj-card:hover {
+    border-color: color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 40%, var(--mj-border-default, #2a3852));
+}
+
+.mj-card--maximized {
+    grid-column: 1 / -1;
+    width: 100%;
+    min-height: 480px;
+    box-shadow: var(--mj-shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.25));
+    border-color: var(--mj-brand-primary, #38bdf8);
+    z-index: 10;
+}
+
+.mj-card--hidden {
+    display: none !important;
+}
+
+.mj-card__header {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--mj-space-3, 12px);
+    margin-bottom: var(--mj-space-3, 12px);
+    min-height: 28px;
+    width: 100%;
+}
+
+.mj-card__title-group {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+.mj-card__title-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--mj-space-2, 8px);
+    min-width: 0;
+}
+
+.mj-card__icon {
+    color: var(--mj-brand-primary, #38bdf8);
+    font-size: 14px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.mj-card__title {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--mj-text-primary, #ffffff);
+    letter-spacing: -0.01em;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mj-card__subtitle {
+    font-size: 11.5px;
+    font-weight: 500;
+    color: var(--mj-text-muted, #94a3b8);
+    margin: 0;
+    padding-left: 22px;
+}
+
+.mj-card__actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--mj-space-2, 8px);
+    flex-shrink: 0;
+    margin-left: auto;
+}
+
+.mj-card__toggle-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--mj-radius-sm, 6px);
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--mj-text-muted, #94a3b8);
+    cursor: pointer;
+    padding: 0;
+    font-size: 12px;
+    transition: all 0.15s ease;
+}
+
+.mj-card__toggle-btn:hover {
+    color: var(--mj-text-primary, #ffffff);
+    background: var(--mj-bg-surface-sunken, rgba(255, 255, 255, 0.06));
+    border-color: var(--mj-border-default, #2a3852);
+}
+
+.mj-card__toggle-btn:focus-visible {
+    outline: 2px solid var(--mj-brand-primary, #38bdf8);
+    outline-offset: 1px;
+}
+
+.mj-card__body {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-width: 0;
+}
+
+.mj-card__footer {
+    margin-top: auto;
+    padding-top: var(--mj-space-3, 12px);
+    border-top: 1px solid var(--mj-border-default, #2a3852);
+}
+`;
+/**
+ * Responsive Card Grid container that manages responsive layout and card maximization state.
+ */
+export class MJCardGridComponent {
+    cdr = inject(ChangeDetectorRef);
+    /** Stream of the currently maximized card ID across all children. */
+    maximizedCard$ = new BehaviorSubject(null);
+    /** Number of columns for standard layout (defaults to 2). */
+    Columns = 2;
+    /** CSS gap between cards (defaults to var(--mj-space-4)). */
+    Gap = 'var(--mj-space-4, 16px)';
+    /** Currently maximized card ID. When set, only this card is shown full-width. */
+    MaximizedCardId = null;
+    /** Emits when the maximized card ID changes (two-way binding support). */
+    MaximizedCardIdChange = new EventEmitter();
+    /** Emits the card ID when a card is maximized. */
+    CardMaximized = new EventEmitter();
+    /** Emits when the maximized card is restored back to the grid view. */
+    CardRestored = new EventEmitter();
+    ngOnChanges(changes) {
+        if (changes['MaximizedCardId'] && !changes['MaximizedCardId'].firstChange) {
+            this.maximizedCard$.next(this.MaximizedCardId);
+        }
+    }
+    /** Pressing Escape restores the grid view if a card is maximized. */
+    OnEscape() {
+        if (this.MaximizedCardId) {
+            this.Restore();
+        }
+    }
+    MaximizeCard(cardId) {
+        this.MaximizedCardId = cardId;
+        this.maximizedCard$.next(cardId);
+        this.MaximizedCardIdChange.emit(cardId);
+        this.CardMaximized.emit(cardId);
+        this.cdr.markForCheck();
+    }
+    Restore() {
+        if (!this.MaximizedCardId)
+            return;
+        this.MaximizedCardId = null;
+        this.maximizedCard$.next(null);
+        this.MaximizedCardIdChange.emit(null);
+        this.CardRestored.emit();
+        this.cdr.markForCheck();
+    }
+    IsCardMaximized(cardId) {
+        return this.MaximizedCardId === cardId;
+    }
+    IsCardHidden(cardId) {
+        return !!this.MaximizedCardId && this.MaximizedCardId !== cardId;
+    }
+    static ɵfac = function MJCardGridComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJCardGridComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJCardGridComponent, selectors: [["mj-card-grid"]], hostBindings: function MJCardGridComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown.escape", function MJCardGridComponent_keydown_escape_HostBindingHandler() { return ctx.OnEscape(); }, i0.ɵɵresolveWindow);
+        } }, inputs: { Columns: "Columns", Gap: "Gap", MaximizedCardId: "MaximizedCardId" }, outputs: { MaximizedCardIdChange: "MaximizedCardIdChange", CardMaximized: "CardMaximized", CardRestored: "CardRestored" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 2, vars: 6, consts: [[1, "mj-card-grid"]], template: function MJCardGridComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵprojection(1);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵstyleProp("--mj-card-grid-columns", ctx.Columns)("--mj-card-grid-gap", ctx.Gap);
+            i0.ɵɵclassProp("mj-card-grid--has-maximized", !!ctx.MaximizedCardId);
+        } }, dependencies: [CommonModule], styles: [_c1], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJCardGridComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-card-grid', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        <div class="mj-card-grid"
+             [class.mj-card-grid--has-maximized]="!!MaximizedCardId"
+             [style.--mj-card-grid-columns]="Columns"
+             [style.--mj-card-grid-gap]="Gap">
+            <ng-content></ng-content>
+        </div>
+    `, styles: ["\n:host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    box-sizing: border-box;\n}\n\n.mj-card-grid {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    align-items: stretch;\n    gap: var(--mj-card-grid-gap, var(--mj-space-4, 16px));\n    width: 100%;\n    position: relative;\n    box-sizing: border-box;\n    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.mj-card-grid--has-maximized {\n    grid-template-columns: 1fr !important;\n}\n\n@media (max-width: 640px) {\n    .mj-card-grid {\n        grid-template-columns: 1fr !important;\n    }\n}\n\nmj-card {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-width: 0;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.mj-card {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 100%;\n    height: 100%;\n    min-height: 290px;\n    background: var(--mj-bg-surface-card, var(--mj-bg-surface, #141f33));\n    border: 1px solid var(--mj-border-default, #2a3852);\n    border-radius: var(--mj-radius-xl, 16px);\n    box-shadow: var(--mj-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));\n    padding: var(--mj-space-4, 16px) var(--mj-space-5, 20px);\n    box-sizing: border-box;\n    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;\n    position: relative;\n    min-width: 0;\n}\n\n.mj-card:hover {\n    border-color: color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 40%, var(--mj-border-default, #2a3852));\n}\n\n.mj-card--maximized {\n    grid-column: 1 / -1;\n    width: 100%;\n    min-height: 480px;\n    box-shadow: var(--mj-shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.25));\n    border-color: var(--mj-brand-primary, #38bdf8);\n    z-index: 10;\n}\n\n.mj-card--hidden {\n    display: none !important;\n}\n\n.mj-card__header {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--mj-space-3, 12px);\n    margin-bottom: var(--mj-space-3, 12px);\n    min-height: 28px;\n    width: 100%;\n}\n\n.mj-card__title-group {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n    flex: 1 1 auto;\n}\n\n.mj-card__title-row {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--mj-space-2, 8px);\n    min-width: 0;\n}\n\n.mj-card__icon {\n    color: var(--mj-brand-primary, #38bdf8);\n    font-size: 14px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.mj-card__title {\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--mj-text-primary, #ffffff);\n    letter-spacing: -0.01em;\n    margin: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.mj-card__subtitle {\n    font-size: 11.5px;\n    font-weight: 500;\n    color: var(--mj-text-muted, #94a3b8);\n    margin: 0;\n    padding-left: 22px;\n}\n\n.mj-card__actions {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--mj-space-2, 8px);\n    flex-shrink: 0;\n    margin-left: auto;\n}\n\n.mj-card__toggle-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border-radius: var(--mj-radius-sm, 6px);\n    background: transparent;\n    border: 1px solid transparent;\n    color: var(--mj-text-muted, #94a3b8);\n    cursor: pointer;\n    padding: 0;\n    font-size: 12px;\n    transition: all 0.15s ease;\n}\n\n.mj-card__toggle-btn:hover {\n    color: var(--mj-text-primary, #ffffff);\n    background: var(--mj-bg-surface-sunken, rgba(255, 255, 255, 0.06));\n    border-color: var(--mj-border-default, #2a3852);\n}\n\n.mj-card__toggle-btn:focus-visible {\n    outline: 2px solid var(--mj-brand-primary, #38bdf8);\n    outline-offset: 1px;\n}\n\n.mj-card__body {\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    min-width: 0;\n}\n\n.mj-card__footer {\n    margin-top: auto;\n    padding-top: var(--mj-space-3, 12px);\n    border-top: 1px solid var(--mj-border-default, #2a3852);\n}\n"] }]
+    }], null, { Columns: [{
+            type: Input
+        }], Gap: [{
+            type: Input
+        }], MaximizedCardId: [{
+            type: Input
+        }], MaximizedCardIdChange: [{
+            type: Output
+        }], CardMaximized: [{
+            type: Output
+        }], CardRestored: [{
+            type: Output
+        }], OnEscape: [{
+            type: HostListener,
+            args: ['window:keydown.escape']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJCardGridComponent, { className: "MJCardGridComponent", filePath: "lib/card-grid/card-grid.component.ts", lineNumber: 265 }); })();
+/**
+ * Modular card component with header title, icon, actions, and maximize/restore capability.
+ */
+export class MJCardComponent {
+    grid = inject(MJCardGridComponent, { optional: true });
+    cdr = inject(ChangeDetectorRef);
+    sub;
+    CardId = `mj-card-${++nextCardId}`;
+    Title;
+    Subtitle;
+    Icon;
+    AllowMaximize = true;
+    MaximizeTooltip = 'Expand card';
+    RestoreTooltip = 'Restore view';
+    ShowHeader = true;
+    Maximize = new EventEmitter();
+    Restore = new EventEmitter();
+    TitleTemplate;
+    ActionsTemplate;
+    ToolsTemplate;
+    FooterTemplate;
+    get IsMaximized() {
+        if (this.grid) {
+            return this.grid.IsCardMaximized(this.CardId);
+        }
+        return false;
+    }
+    get IsHidden() {
+        if (this.grid) {
+            return this.grid.IsCardHidden(this.CardId);
+        }
+        return false;
+    }
+    ngOnInit() {
+        if (!this.CardId) {
+            this.CardId = `mj-card-${++nextCardId}`;
+        }
+        if (this.grid) {
+            this.sub = this.grid.maximizedCard$.subscribe(() => {
+                this.cdr.markForCheck();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    ToggleMaximize(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (this.IsMaximized) {
+            this.grid?.Restore();
+            this.Restore.emit();
+        }
+        else {
+            this.grid?.MaximizeCard(this.CardId);
+            this.Maximize.emit();
+        }
+        this.cdr.markForCheck();
+    }
+    static ɵfac = function MJCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJCardComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJCardComponent, selectors: [["mj-card"]], contentQueries: function MJCardComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuery(dirIndex, MJCardTitleDirective, 5)(dirIndex, MJCardActionsDirective, 5)(dirIndex, MJCardToolsDirective, 5)(dirIndex, MJCardFooterDirective, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.TitleTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ActionsTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ToolsTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.FooterTemplate = _t.first);
+        } }, inputs: { CardId: "CardId", Title: "Title", Subtitle: "Subtitle", Icon: "Icon", AllowMaximize: "AllowMaximize", MaximizeTooltip: "MaximizeTooltip", RestoreTooltip: "RestoreTooltip", ShowHeader: "ShowHeader" }, outputs: { Maximize: "Maximize", Restore: "Restore" }, ngContentSelectors: _c0, decls: 5, vars: 7, consts: [["role", "region", 1, "mj-card"], [1, "mj-card__header"], [1, "mj-card__body"], [1, "mj-card__footer"], [1, "mj-card__title-group"], [1, "mj-card__title-row"], ["aria-hidden", "true", 1, "mj-card__icon"], [3, "ngTemplateOutlet"], [1, "mj-card__title"], [1, "mj-card__subtitle"], [1, "mj-card__actions"], ["type", "button", 1, "mj-card__toggle-btn", 3, "title"], ["type", "button", 1, "mj-card__toggle-btn", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-compress"], ["aria-hidden", "true", 1, "fa-solid", "fa-expand"]], template: function MJCardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, MJCardComponent_Conditional_1_Template, 11, 6, "div", 1);
+            i0.ɵɵelementStart(2, "div", 2);
+            i0.ɵɵprojection(3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(4, MJCardComponent_Conditional_4_Template, 2, 1, "div", 3);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("mj-card--maximized", ctx.IsMaximized)("mj-card--hidden", ctx.IsHidden);
+            i0.ɵɵattribute("aria-label", ctx.Title || "Card");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowHeader ? 1 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.FooterTemplate ? 4 : -1);
+        } }, dependencies: [CommonModule, i1.NgTemplateOutlet], styles: [_c1], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJCardComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        <div class="mj-card"
+             [class.mj-card--maximized]="IsMaximized"
+             [class.mj-card--hidden]="IsHidden"
+             role="region"
+             [attr.aria-label]="Title || 'Card'">
+            
+            <!-- Card Header -->
+            @if (ShowHeader) {
+                <div class="mj-card__header">
+                    <div class="mj-card__title-group">
+                        <div class="mj-card__title-row">
+                            @if (Icon) {
+                                <span class="mj-card__icon" aria-hidden="true">
+                                    <i [class]="Icon"></i>
+                                </span>
+                            }
+                            @if (TitleTemplate) {
+                                <ng-container [ngTemplateOutlet]="TitleTemplate.templateRef"></ng-container>
+                            } @else if (Title) {
+                                <h3 class="mj-card__title">{{ Title }}</h3>
+                            }
+                        </div>
+                        @if (Subtitle) {
+                            <span class="mj-card__subtitle">{{ Subtitle }}</span>
+                        }
+                    </div>
+
+                    <div class="mj-card__actions">
+                        @if (ToolsTemplate) {
+                            <ng-container [ngTemplateOutlet]="ToolsTemplate.templateRef"></ng-container>
+                        }
+                        @if (ActionsTemplate) {
+                            <ng-container [ngTemplateOutlet]="ActionsTemplate.templateRef"></ng-container>
+                        }
+                        @if (AllowMaximize) {
+                            <button type="button"
+                                    class="mj-card__toggle-btn"
+                                    [title]="IsMaximized ? RestoreTooltip : MaximizeTooltip"
+                                    [attr.aria-label]="IsMaximized ? RestoreTooltip : MaximizeTooltip"
+                                    (click)="ToggleMaximize($event)">
+                                @if (IsMaximized) {
+                                    <i class="fa-solid fa-compress" aria-hidden="true"></i>
+                                } @else {
+                                    <i class="fa-solid fa-expand" aria-hidden="true"></i>
+                                }
+                            </button>
+                        }
+                    </div>
+                </div>
+            }
+
+            <!-- Card Body -->
+            <div class="mj-card__body">
+                <ng-content></ng-content>
+            </div>
+
+            <!-- Card Footer -->
+            @if (FooterTemplate) {
+                <div class="mj-card__footer">
+                    <ng-container [ngTemplateOutlet]="FooterTemplate.templateRef"></ng-container>
+                </div>
+            }
+        </div>
+    `, styles: ["\n:host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    box-sizing: border-box;\n}\n\n.mj-card-grid {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    align-items: stretch;\n    gap: var(--mj-card-grid-gap, var(--mj-space-4, 16px));\n    width: 100%;\n    position: relative;\n    box-sizing: border-box;\n    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.mj-card-grid--has-maximized {\n    grid-template-columns: 1fr !important;\n}\n\n@media (max-width: 640px) {\n    .mj-card-grid {\n        grid-template-columns: 1fr !important;\n    }\n}\n\nmj-card {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-width: 0;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.mj-card {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 100%;\n    height: 100%;\n    min-height: 290px;\n    background: var(--mj-bg-surface-card, var(--mj-bg-surface, #141f33));\n    border: 1px solid var(--mj-border-default, #2a3852);\n    border-radius: var(--mj-radius-xl, 16px);\n    box-shadow: var(--mj-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));\n    padding: var(--mj-space-4, 16px) var(--mj-space-5, 20px);\n    box-sizing: border-box;\n    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;\n    position: relative;\n    min-width: 0;\n}\n\n.mj-card:hover {\n    border-color: color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 40%, var(--mj-border-default, #2a3852));\n}\n\n.mj-card--maximized {\n    grid-column: 1 / -1;\n    width: 100%;\n    min-height: 480px;\n    box-shadow: var(--mj-shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.25));\n    border-color: var(--mj-brand-primary, #38bdf8);\n    z-index: 10;\n}\n\n.mj-card--hidden {\n    display: none !important;\n}\n\n.mj-card__header {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--mj-space-3, 12px);\n    margin-bottom: var(--mj-space-3, 12px);\n    min-height: 28px;\n    width: 100%;\n}\n\n.mj-card__title-group {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n    flex: 1 1 auto;\n}\n\n.mj-card__title-row {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--mj-space-2, 8px);\n    min-width: 0;\n}\n\n.mj-card__icon {\n    color: var(--mj-brand-primary, #38bdf8);\n    font-size: 14px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.mj-card__title {\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--mj-text-primary, #ffffff);\n    letter-spacing: -0.01em;\n    margin: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.mj-card__subtitle {\n    font-size: 11.5px;\n    font-weight: 500;\n    color: var(--mj-text-muted, #94a3b8);\n    margin: 0;\n    padding-left: 22px;\n}\n\n.mj-card__actions {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--mj-space-2, 8px);\n    flex-shrink: 0;\n    margin-left: auto;\n}\n\n.mj-card__toggle-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border-radius: var(--mj-radius-sm, 6px);\n    background: transparent;\n    border: 1px solid transparent;\n    color: var(--mj-text-muted, #94a3b8);\n    cursor: pointer;\n    padding: 0;\n    font-size: 12px;\n    transition: all 0.15s ease;\n}\n\n.mj-card__toggle-btn:hover {\n    color: var(--mj-text-primary, #ffffff);\n    background: var(--mj-bg-surface-sunken, rgba(255, 255, 255, 0.06));\n    border-color: var(--mj-border-default, #2a3852);\n}\n\n.mj-card__toggle-btn:focus-visible {\n    outline: 2px solid var(--mj-brand-primary, #38bdf8);\n    outline-offset: 1px;\n}\n\n.mj-card__body {\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    min-width: 0;\n}\n\n.mj-card__footer {\n    margin-top: auto;\n    padding-top: var(--mj-space-3, 12px);\n    border-top: 1px solid var(--mj-border-default, #2a3852);\n}\n"] }]
+    }], null, { CardId: [{
+            type: Input
+        }], Title: [{
+            type: Input
+        }], Subtitle: [{
+            type: Input
+        }], Icon: [{
+            type: Input
+        }], AllowMaximize: [{
+            type: Input
+        }], MaximizeTooltip: [{
+            type: Input
+        }], RestoreTooltip: [{
+            type: Input
+        }], ShowHeader: [{
+            type: Input
+        }], Maximize: [{
+            type: Output
+        }], Restore: [{
+            type: Output
+        }], TitleTemplate: [{
+            type: ContentChild,
+            args: [MJCardTitleDirective]
+        }], ActionsTemplate: [{
+            type: ContentChild,
+            args: [MJCardActionsDirective]
+        }], ToolsTemplate: [{
+            type: ContentChild,
+            args: [MJCardToolsDirective]
+        }], FooterTemplate: [{
+            type: ContentChild,
+            args: [MJCardFooterDirective]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJCardComponent, { className: "MJCardComponent", filePath: "lib/card-grid/card-grid.component.ts", lineNumber: 404 }); })();
+//# sourceMappingURL=card-grid.component.js.map