@memberjunction/ng-ui-components 5.34.1 → 5.36.0

package/dist/lib/button/button.scss

@@ -84,17 +84,21 @@
 }
 
 .mj-btn--secondary {
-  background: var(--mj-bg-surface);
+  /* Tinted background so the button is visible on white surfaces (cards, page
+     headers, dialogs). Pre-2026-05-19 secondary used `--mj-bg-surface` which
+     blended into any white container; --mj-bg-surface-sunken gives just enough
+     contrast to read as a button on both white and sunken backgrounds. */
+  background: var(--mj-bg-surface-sunken);
   color: var(--mj-text-primary);
   border-color: var(--mj-border-default);
 
   &:hover:not(:disabled) {
-    background: var(--mj-bg-surface-hover);
+    background: var(--mj-bg-surface-active);
     border-color: var(--mj-border-strong);
   }
 
   &:active:not(:disabled) {
-    background: var(--mj-bg-surface-active);
+    background: color-mix(in srgb, var(--mj-text-primary) 8%, var(--mj-bg-surface-active));
   }
 }
 

package/dist/lib/filter-chip/filter-chip.component.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * mj-filter-chip — Canonical clickable filter chip / segmented option.
+ * Replaces per-page `.filter-chip` rules so styling can't drift.
+ *
+ * Active state highlights with brand-primary. Optional icon + count.
+ *
+ * Example:
+ * ```html
+ * <mj-filter-chip
+ *   Label="Failed"
+ *   Icon="fa-solid fa-times-circle"
+ *   [Active]="statusFilter === 'Failed'"
+ *   (Clicked)="onStatusFilter('Failed')">
+ * </mj-filter-chip>
+ *
+ * <mj-filter-chip Label="All" [Count]="totalCount" [Active]="!categoryFilter"
+ *   (Clicked)="onCategoryFilter('')"></mj-filter-chip>
+ * ```
+ */
+export declare class MJFilterChipComponent {
+    Label: string;
+    Icon: string | null;
+    Count: number | null;
+    Active: boolean;
+    Clicked: EventEmitter<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJFilterChipComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJFilterChipComponent, "mj-filter-chip", never, { "Label": { "alias": "Label"; "required": false; }; "Icon": { "alias": "Icon"; "required": false; }; "Count": { "alias": "Count"; "required": false; }; "Active": { "alias": "Active"; "required": false; }; }, { "Clicked": "Clicked"; }, never, never, true, never>;
+}
+//# sourceMappingURL=filter-chip.component.d.ts.map

package/dist/lib/filter-chip/filter-chip.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-chip.component.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-chip/filter-chip.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;;AAEvE;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAmEa,qBAAqB;IACvB,KAAK,EAAE,MAAM,CAAM;IACnB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC3B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC5B,MAAM,EAAE,OAAO,CAAS;IACvB,OAAO,qBAA4B;yCALlC,qBAAqB;2CAArB,qBAAqB;CAMjC"}

package/dist/lib/filter-chip/filter-chip.component.js

@@ -0,0 +1,94 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+function MJFilterChipComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "i");
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r0.Icon);
+} }
+function MJFilterChipComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("(", ctx_r0.Count, ")");
+} }
+/**
+ * mj-filter-chip — Canonical clickable filter chip / segmented option.
+ * Replaces per-page `.filter-chip` rules so styling can't drift.
+ *
+ * Active state highlights with brand-primary. Optional icon + count.
+ *
+ * Example:
+ * ```html
+ * <mj-filter-chip
+ *   Label="Failed"
+ *   Icon="fa-solid fa-times-circle"
+ *   [Active]="statusFilter === 'Failed'"
+ *   (Clicked)="onStatusFilter('Failed')">
+ * </mj-filter-chip>
+ *
+ * <mj-filter-chip Label="All" [Count]="totalCount" [Active]="!categoryFilter"
+ *   (Clicked)="onCategoryFilter('')"></mj-filter-chip>
+ * ```
+ */
+export class MJFilterChipComponent {
+    Label = '';
+    Icon = null;
+    Count = null;
+    Active = false;
+    Clicked = new EventEmitter();
+    static ɵfac = function MJFilterChipComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJFilterChipComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJFilterChipComponent, selectors: [["mj-filter-chip"]], inputs: { Label: "Label", Icon: "Icon", Count: "Count", Active: "Active" }, outputs: { Clicked: "Clicked" }, decls: 5, vars: 6, consts: [["type", "button", 1, "mj-filter-chip", 3, "click"], [3, "class"], [1, "mj-filter-chip-count"]], template: function MJFilterChipComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "button", 0);
+            i0.ɵɵdomListener("click", function MJFilterChipComponent_Template_button_click_0_listener() { return ctx.Clicked.emit(); });
+            i0.ɵɵconditionalCreate(1, MJFilterChipComponent_Conditional_1_Template, 1, 2, "i", 1);
+            i0.ɵɵdomElementStart(2, "span");
+            i0.ɵɵtext(3);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵconditionalCreate(4, MJFilterChipComponent_Conditional_4_Template, 2, 1, "span", 2);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("mj-filter-chip--active", ctx.Active);
+            i0.ɵɵattribute("aria-pressed", ctx.Active);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Icon ? 1 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.Label);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Count != null ? 4 : -1);
+        } }, styles: ["[_nghost-%COMP%] { display: inline-flex; }\n\n    .mj-filter-chip[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 5px 12px;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 16px;\n      color: var(--mj-text-secondary);\n      font-family: inherit;\n      font-size: 12px;\n      font-weight: 500;\n      line-height: 1.4;\n      cursor: pointer;\n      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;\n      white-space: nowrap;\n    }\n\n    .mj-filter-chip[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-filter-chip--active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-chip--active[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 16%, var(--mj-bg-surface));\n    }\n\n    .mj-filter-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n      flex-shrink: 0;\n    }\n\n    .mj-filter-chip-count[_ngcontent-%COMP%] {\n      opacity: 0.7;\n      font-weight: 400;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJFilterChipComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-filter-chip', standalone: true, template: `
+    <button
+      type="button"
+      class="mj-filter-chip"
+      [class.mj-filter-chip--active]="Active"
+      [attr.aria-pressed]="Active"
+      (click)="Clicked.emit()">
+      @if (Icon) {
+        <i [class]="Icon"></i>
+      }
+      <span>{{ Label }}</span>
+      @if (Count != null) {
+        <span class="mj-filter-chip-count">({{ Count }})</span>
+      }
+    </button>
+  `, styles: ["\n    :host { display: inline-flex; }\n\n    .mj-filter-chip {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 5px 12px;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 16px;\n      color: var(--mj-text-secondary);\n      font-family: inherit;\n      font-size: 12px;\n      font-weight: 500;\n      line-height: 1.4;\n      cursor: pointer;\n      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;\n      white-space: nowrap;\n    }\n\n    .mj-filter-chip:hover {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-filter-chip--active {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-chip--active:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 16%, var(--mj-bg-surface));\n    }\n\n    .mj-filter-chip i {\n      font-size: 10px;\n      flex-shrink: 0;\n    }\n\n    .mj-filter-chip-count {\n      opacity: 0.7;\n      font-weight: 400;\n    }\n  "] }]
+    }], null, { Label: [{
+            type: Input
+        }], Icon: [{
+            type: Input
+        }], Count: [{
+            type: Input
+        }], Active: [{
+            type: Input
+        }], Clicked: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJFilterChipComponent, { className: "MJFilterChipComponent", filePath: "lib/filter-chip/filter-chip.component.ts", lineNumber: 89 }); })();
+//# sourceMappingURL=filter-chip.component.js.map

package/dist/lib/filter-chip/filter-chip.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-chip.component.js","sourceRoot":"","sources":["../../../src/lib/filter-chip/filter-chip.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;;IAgC/D,uBAAsB;;;IAAnB,0BAAc;;;IAIjB,kCAAmC;IAAA,YAAa;IAAA,oBAAO;;;IAApB,cAAa;IAAb,6CAAa;;AAlCxD;;;;;;;;;;;;;;;;;;GAkBG;AAoEH,MAAM,OAAO,qBAAqB;IACvB,KAAK,GAAW,EAAE,CAAC;IACnB,IAAI,GAAkB,IAAI,CAAC;IAC3B,KAAK,GAAkB,IAAI,CAAC;IAC5B,MAAM,GAAY,KAAK,CAAC;IACvB,OAAO,GAAG,IAAI,YAAY,EAAQ,CAAC;+GALlC,qBAAqB;6DAArB,qBAAqB;YA/D9B,oCAK2B;YAAzB,qGAAS,kBAAc,IAAC;YACxB,qFAAY;YAGZ,+BAAM;YAAA,YAAW;YAAA,oBAAO;YACxB,wFAAqB;YAGvB,oBAAS;;YAVP,oDAAuC;;YAGvC,cAEC;YAFD,mCAEC;YACK,eAAW;YAAX,+BAAW;YACjB,cAEC;YAFD,4CAEC;;;iFAmDM,qBAAqB;cAnEjC,SAAS;2BACE,gBAAgB,cACd,IAAI,YACN;;;;;;;;;;;;;;;GAeT;;kBAkDA,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,MAAM;;kFALI,qBAAqB","sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\n\n/**\n * mj-filter-chip — Canonical clickable filter chip / segmented option.\n * Replaces per-page `.filter-chip` rules so styling can't drift.\n *\n * Active state highlights with brand-primary. Optional icon + count.\n *\n * Example:\n * ```html\n * <mj-filter-chip\n *   Label=\"Failed\"\n *   Icon=\"fa-solid fa-times-circle\"\n *   [Active]=\"statusFilter === 'Failed'\"\n *   (Clicked)=\"onStatusFilter('Failed')\">\n * </mj-filter-chip>\n *\n * <mj-filter-chip Label=\"All\" [Count]=\"totalCount\" [Active]=\"!categoryFilter\"\n *   (Clicked)=\"onCategoryFilter('')\"></mj-filter-chip>\n * ```\n */\n@Component({\n  selector: 'mj-filter-chip',\n  standalone: true,\n  template: `\n    <button\n      type=\"button\"\n      class=\"mj-filter-chip\"\n      [class.mj-filter-chip--active]=\"Active\"\n      [attr.aria-pressed]=\"Active\"\n      (click)=\"Clicked.emit()\">\n      @if (Icon) {\n        <i [class]=\"Icon\"></i>\n      }\n      <span>{{ Label }}</span>\n      @if (Count != null) {\n        <span class=\"mj-filter-chip-count\">({{ Count }})</span>\n      }\n    </button>\n  `,\n  styles: [`\n    :host { display: inline-flex; }\n\n    .mj-filter-chip {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 5px 12px;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 16px;\n      color: var(--mj-text-secondary);\n      font-family: inherit;\n      font-size: 12px;\n      font-weight: 500;\n      line-height: 1.4;\n      cursor: pointer;\n      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;\n      white-space: nowrap;\n    }\n\n    .mj-filter-chip:hover {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-filter-chip--active {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-chip--active:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 16%, var(--mj-bg-surface));\n    }\n\n    .mj-filter-chip i {\n      font-size: 10px;\n      flex-shrink: 0;\n    }\n\n    .mj-filter-chip-count {\n      opacity: 0.7;\n      font-weight: 400;\n    }\n  `]\n})\nexport class MJFilterChipComponent {\n  @Input() Label: string = '';\n  @Input() Icon: string | null = null;\n  @Input() Count: number | null = null;\n  @Input() Active: boolean = false;\n  @Output() Clicked = new EventEmitter<void>();\n}\n"]}

package/dist/lib/filter-field/filter-field.component.d.ts

@@ -0,0 +1,22 @@
+import * as i0 from "@angular/core";
+/**
+ * mj-filter-field — Single row inside a filter panel: icon + label above a projected widget.
+ * Used either by `<mj-filter-panel>` internally (for config-driven fields) or directly in
+ * a page template as the escape hatch for custom widgets (tree-dropdown, date-range, etc.).
+ *
+ * Example (standalone usage for a custom widget):
+ * ```html
+ * <mj-filter-panel ...>
+ *   <mj-filter-field Label="Category" Icon="fa-solid fa-folder">
+ *     <mj-tree-dropdown ...></mj-tree-dropdown>
+ *   </mj-filter-field>
+ * </mj-filter-panel>
+ * ```
+ */
+export declare class MJFilterFieldComponent {
+    Label: string;
+    Icon: string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJFilterFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJFilterFieldComponent, "mj-filter-field", never, { "Label": { "alias": "Label"; "required": false; }; "Icon": { "alias": "Icon"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=filter-field.component.d.ts.map

package/dist/lib/filter-field/filter-field.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-field.component.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-field/filter-field.component.ts"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;GAaG;AACH,qBAsCa,sBAAsB;IACxB,KAAK,EAAE,MAAM,CAAM;IACnB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;yCAFzB,sBAAsB;2CAAtB,sBAAsB;CAGlC"}

package/dist/lib/filter-field/filter-field.component.js

@@ -0,0 +1,60 @@
+import { Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+function MJFilterFieldComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "i");
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r0.Icon);
+} }
+/**
+ * mj-filter-field — Single row inside a filter panel: icon + label above a projected widget.
+ * Used either by `<mj-filter-panel>` internally (for config-driven fields) or directly in
+ * a page template as the escape hatch for custom widgets (tree-dropdown, date-range, etc.).
+ *
+ * Example (standalone usage for a custom widget):
+ * ```html
+ * <mj-filter-panel ...>
+ *   <mj-filter-field Label="Category" Icon="fa-solid fa-folder">
+ *     <mj-tree-dropdown ...></mj-tree-dropdown>
+ *   </mj-filter-field>
+ * </mj-filter-panel>
+ * ```
+ */
+export class MJFilterFieldComponent {
+    Label = '';
+    Icon = null;
+    static ɵfac = function MJFilterFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJFilterFieldComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJFilterFieldComponent, selectors: [["mj-filter-field"]], inputs: { Label: "Label", Icon: "Icon" }, ngContentSelectors: _c0, decls: 5, vars: 2, consts: [[1, "mj-filter-field"], [1, "mj-filter-field-label"], [3, "class"]], template: function MJFilterFieldComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵdomElementStart(0, "label", 0)(1, "span", 1);
+            i0.ɵɵconditionalCreate(2, MJFilterFieldComponent_Conditional_2_Template, 1, 2, "i", 2);
+            i0.ɵɵtext(3);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵprojection(4);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.Icon ? 2 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.Label, " ");
+        } }, styles: ["[_nghost-%COMP%] { display: block; }\n\n    .mj-filter-field[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .mj-filter-field-label[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-field-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJFilterFieldComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-filter-field', standalone: true, template: `
+    <label class="mj-filter-field">
+      <span class="mj-filter-field-label">
+        @if (Icon) { <i [class]="Icon"></i> }
+        {{ Label }}
+      </span>
+      <ng-content></ng-content>
+    </label>
+  `, styles: ["\n    :host { display: block; }\n\n    .mj-filter-field {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .mj-filter-field-label {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-field-label i {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n    }\n  "] }]
+    }], null, { Label: [{
+            type: Input
+        }], Icon: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJFilterFieldComponent, { className: "MJFilterFieldComponent", filePath: "lib/filter-field/filter-field.component.ts", lineNumber: 55 }); })();
+//# sourceMappingURL=filter-field.component.js.map

package/dist/lib/filter-field/filter-field.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-field.component.js","sourceRoot":"","sources":["../../../src/lib/filter-field/filter-field.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;;;IAsB5B,uBAAsB;;;IAAnB,0BAAc;;AApBtC;;;;;;;;;;;;;GAaG;AAuCH,MAAM,OAAO,sBAAsB;IACxB,KAAK,GAAW,EAAE,CAAC;IACnB,IAAI,GAAkB,IAAI,CAAC;gHAFzB,sBAAsB;6DAAtB,sBAAsB;;YAjC7B,AADF,mCAA+B,cACO;YAClC,sFAAY;YACZ,YACF;YAAA,oBAAO;YACP,kBAAyB;YAC3B,oBAAQ;;YAJJ,eAAqC;YAArC,mCAAqC;YACrC,cACF;YADE,0CACF;;;iFA8BO,sBAAsB;cAtClC,SAAS;2BACE,iBAAiB,cACf,IAAI,YACN;;;;;;;;GAQT;;kBA4BA,KAAK;;kBACL,KAAK;;kFAFK,sBAAsB","sourcesContent":["import { Component, Input } from '@angular/core';\n\n/**\n * mj-filter-field — Single row inside a filter panel: icon + label above a projected widget.\n * Used either by `<mj-filter-panel>` internally (for config-driven fields) or directly in\n * a page template as the escape hatch for custom widgets (tree-dropdown, date-range, etc.).\n *\n * Example (standalone usage for a custom widget):\n * ```html\n * <mj-filter-panel ...>\n *   <mj-filter-field Label=\"Category\" Icon=\"fa-solid fa-folder\">\n *     <mj-tree-dropdown ...></mj-tree-dropdown>\n *   </mj-filter-field>\n * </mj-filter-panel>\n * ```\n */\n@Component({\n  selector: 'mj-filter-field',\n  standalone: true,\n  template: `\n    <label class=\"mj-filter-field\">\n      <span class=\"mj-filter-field-label\">\n        @if (Icon) { <i [class]=\"Icon\"></i> }\n        {{ Label }}\n      </span>\n      <ng-content></ng-content>\n    </label>\n  `,\n  styles: [`\n    :host { display: block; }\n\n    .mj-filter-field {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .mj-filter-field-label {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-brand-primary);\n    }\n\n    .mj-filter-field-label i {\n      font-size: 11px;\n      color: var(--mj-brand-primary);\n    }\n  `]\n})\nexport class MJFilterFieldComponent {\n  @Input() Label: string = '';\n  @Input() Icon: string | null = null;\n}\n"]}

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

@@ -0,0 +1,69 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/** Field types supported natively by <mj-filter-panel>. */
+export type FilterFieldType = 'text' | 'dropdown' | 'chips';
+/** Per-field config understood by <mj-filter-panel>. */
+export interface FilterFieldConfig {
+    /** State key in the Values record. */
+    key: string;
+    /** Field type — drives which widget is rendered. */
+    type: FilterFieldType;
+    /** Display label. */
+    label: string;
+    /** Optional Font Awesome icon class (e.g. 'fa-solid fa-folder'). */
+    icon?: string;
+    /** Placeholder for text inputs / dropdowns. */
+    placeholder?: string;
+    /** Dropdown options (when type === 'dropdown'). Each option needs text + value. */
+    options?: {
+        text: string;
+        value: string | number | boolean | null;
+    }[];
+    /** Whether the dropdown should show an internal search box. */
+    filterable?: boolean;
+    /** Chip-group options (when type === 'chips'). */
+    chipOptions?: {
+        text: string;
+        value: string | number | boolean | null;
+        icon?: string;
+    }[];
+}
+/**
+ * mj-filter-panel — Single centralized filter panel for all dashboards.
+ *
+ * Config-driven: pass an array of `FilterFieldConfig` plus a `Values` record;
+ * the panel renders each field using the appropriate widget (text input,
+ * `<mj-dropdown>`, or chip group), keeps everything visually consistent, and
+ * emits state changes via `(ValuesChange)`.
+ *
+ * For widgets not covered by the config schema (tree-dropdown, date pickers,
+ * etc.), project `<mj-filter-field>` elements as content — they render below
+ * the config-driven fields with identical chrome.
+ *
+ * Example:
+ * ```html
+ * <mj-filter-panel
+ *   [Fields]="filterFields"
+ *   [(Values)]="filterValues"
+ *   (Reset)="onReset()">
+ *
+ *   <!-- escape hatch for custom widgets -->
+ *   <mj-filter-field Label="Category" Icon="fa-solid fa-folder">
+ *     <mj-tree-dropdown ...></mj-tree-dropdown>
+ *   </mj-filter-field>
+ * </mj-filter-panel>
+ * ```
+ */
+export declare class MJFilterPanelComponent {
+    Fields: FilterFieldConfig[];
+    Values: Record<string, unknown>;
+    ShowReset: boolean;
+    ResetLabel: string;
+    ValuesChange: EventEmitter<Record<string, unknown>>;
+    Reset: EventEmitter<void>;
+    getValue(key: string): unknown;
+    setValue(key: string, value: unknown): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJFilterPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJFilterPanelComponent, "mj-filter-panel", never, { "Fields": { "alias": "Fields"; "required": false; }; "Values": { "alias": "Values"; "required": false; }; "ShowReset": { "alias": "ShowReset"; "required": false; }; "ResetLabel": { "alias": "ResetLabel"; "required": false; }; }, { "ValuesChange": "ValuesChange"; "Reset": "Reset"; }, never, ["*"], true, never>;
+}
+//# sourceMappingURL=filter-panel.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-panel.component.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/filter-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;;AAOvE,2DAA2D;AAC3D,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;AAE5D,wDAAwD;AACxD,MAAM,WAAW,iBAAiB;IAChC,sCAAsC;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,IAAI,EAAE,eAAe,CAAC;IACtB,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mFAAmF;IACnF,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;KAAE,EAAE,CAAC;IACtE,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,WAAW,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC1F;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBA0Ia,sBAAsB;IACxB,MAAM,EAAE,iBAAiB,EAAE,CAAM;IACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;IACrC,SAAS,EAAE,OAAO,CAAQ;IAC1B,UAAU,EAAE,MAAM,CAAmB;IAEpC,YAAY,wCAA+C;IAC3D,KAAK,qBAA4B;IAEpC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAI9B,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;yCAbvC,sBAAsB;2CAAtB,sBAAsB;CAiBlC"}

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

@@ -0,0 +1,203 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MJDropdownComponent } from '../dropdown/dropdown.component';
+import { MJFilterChipComponent } from '../filter-chip/filter-chip.component';
+import { MJFilterFieldComponent } from '../filter-field/filter-field.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+const _c0 = ["*"];
+const _c1 = () => [];
+const _forTrack0 = ($index, $item) => $item.key;
+const _forTrack1 = ($index, $item) => $item.value;
+function MJFilterPanelComponent_For_3_Case_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 7);
+    i0.ɵɵlistener("input", function MJFilterPanelComponent_For_3_Case_1_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r1); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setValue(field_r2.key, $event.target.value)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("value", ctx_r2.getValue(field_r2.key) ?? "")("placeholder", field_r2.placeholder ?? "");
+} }
+function MJFilterPanelComponent_For_3_Case_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dropdown", 8);
+    i0.ɵɵlistener("ngModelChange", function MJFilterPanelComponent_For_3_Case_2_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const field_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setValue(field_r2.key, $event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Data", field_r2.options ?? i0.ɵɵpureFunction0(5, _c1))("ValuePrimitive", true)("Filterable", !!field_r2.filterable)("Placeholder", field_r2.placeholder ?? "")("ngModel", ctx_r2.getValue(field_r2.key));
+} }
+function MJFilterPanelComponent_For_3_Case_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-filter-chip", 10);
+    i0.ɵɵlistener("Clicked", function MJFilterPanelComponent_For_3_Case_3_For_2_Template_mj_filter_chip_Clicked_0_listener() { const opt_r6 = i0.ɵɵrestoreView(_r5).$implicit; const field_r2 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setValue(field_r2.key, opt_r6.value)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const opt_r6 = ctx.$implicit;
+    const field_r2 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Label", opt_r6.text)("Icon", opt_r6.icon ?? null)("Active", ctx_r2.getValue(field_r2.key) === opt_r6.value);
+} }
+function MJFilterPanelComponent_For_3_Case_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵrepeaterCreate(1, MJFilterPanelComponent_For_3_Case_3_For_2_Template, 1, 3, "mj-filter-chip", 9, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(field_r2.chipOptions ?? i0.ɵɵpureFunction0(0, _c1));
+} }
+function MJFilterPanelComponent_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-filter-field", 2);
+    i0.ɵɵconditionalCreate(1, MJFilterPanelComponent_For_3_Case_1_Template, 1, 2, "input", 4)(2, MJFilterPanelComponent_For_3_Case_2_Template, 1, 6, "mj-dropdown", 5)(3, MJFilterPanelComponent_For_3_Case_3_Template, 3, 1, "div", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_12_0;
+    const field_r2 = ctx.$implicit;
+    i0.ɵɵproperty("Label", field_r2.label)("Icon", field_r2.icon ?? null);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_12_0 = field_r2.type) === "text" ? 1 : tmp_12_0 === "dropdown" ? 2 : tmp_12_0 === "chips" ? 3 : -1);
+} }
+function MJFilterPanelComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3)(1, "button", 11);
+    i0.ɵɵlistener("click", function MJFilterPanelComponent_Conditional_5_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.Reset.emit()); });
+    i0.ɵɵelement(2, "i", 12);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.ResetLabel, " ");
+} }
+/**
+ * mj-filter-panel — Single centralized filter panel for all dashboards.
+ *
+ * Config-driven: pass an array of `FilterFieldConfig` plus a `Values` record;
+ * the panel renders each field using the appropriate widget (text input,
+ * `<mj-dropdown>`, or chip group), keeps everything visually consistent, and
+ * emits state changes via `(ValuesChange)`.
+ *
+ * For widgets not covered by the config schema (tree-dropdown, date pickers,
+ * etc.), project `<mj-filter-field>` elements as content — they render below
+ * the config-driven fields with identical chrome.
+ *
+ * Example:
+ * ```html
+ * <mj-filter-panel
+ *   [Fields]="filterFields"
+ *   [(Values)]="filterValues"
+ *   (Reset)="onReset()">
+ *
+ *   <!-- escape hatch for custom widgets -->
+ *   <mj-filter-field Label="Category" Icon="fa-solid fa-folder">
+ *     <mj-tree-dropdown ...></mj-tree-dropdown>
+ *   </mj-filter-field>
+ * </mj-filter-panel>
+ * ```
+ */
+export class MJFilterPanelComponent {
+    Fields = [];
+    Values = {};
+    ShowReset = true;
+    ResetLabel = 'Reset filters';
+    ValuesChange = new EventEmitter();
+    Reset = new EventEmitter();
+    getValue(key) {
+        return this.Values?.[key];
+    }
+    setValue(key, value) {
+        this.Values = { ...this.Values, [key]: value };
+        this.ValuesChange.emit(this.Values);
+    }
+    static ɵfac = function MJFilterPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJFilterPanelComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJFilterPanelComponent, selectors: [["mj-filter-panel"]], inputs: { Fields: "Fields", Values: "Values", ShowReset: "ShowReset", ResetLabel: "ResetLabel" }, outputs: { ValuesChange: "ValuesChange", Reset: "Reset" }, ngContentSelectors: _c0, decls: 6, vars: 1, consts: [[1, "mj-filter-panel"], [1, "mj-filter-panel-body"], [3, "Label", "Icon"], [1, "mj-filter-panel-footer"], ["type", "text", 1, "mj-filter-panel-text-input", 3, "value", "placeholder"], ["TextField", "text", "ValueField", "value", 3, "Data", "ValuePrimitive", "Filterable", "Placeholder", "ngModel"], [1, "mj-filter-panel-chip-group"], ["type", "text", 1, "mj-filter-panel-text-input", 3, "input", "value", "placeholder"], ["TextField", "text", "ValueField", "value", 3, "ngModelChange", "Data", "ValuePrimitive", "Filterable", "Placeholder", "ngModel"], [3, "Label", "Icon", "Active"], [3, "Clicked", "Label", "Icon", "Active"], ["type", "button", 1, "mj-filter-panel-reset", 3, "click"], [1, "fa-solid", "fa-rotate-left"]], template: function MJFilterPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵrepeaterCreate(2, MJFilterPanelComponent_For_3_Template, 4, 3, "mj-filter-field", 2, _forTrack0);
+            i0.ɵɵprojection(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(5, MJFilterPanelComponent_Conditional_5_Template, 4, 1, "div", 3);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.Fields);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.ShowReset ? 5 : -1);
+        } }, dependencies: [CommonModule, FormsModule, i1.NgControlStatus, i1.NgModel, MJDropdownComponent, MJFilterChipComponent, MJFilterFieldComponent], styles: ["[_nghost-%COMP%] {\n      display: block;\n    }\n\n    .mj-filter-panel[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 14px;\n    }\n\n    .mj-filter-panel-body[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 14px;\n    }\n\n    .mj-filter-panel-text-input[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 7px 12px;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      font: inherit;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      transition: border-color 0.15s ease, box-shadow 0.15s ease;\n    }\n\n    .mj-filter-panel-text-input[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    }\n\n    .mj-filter-panel-text-input[_ngcontent-%COMP%]::placeholder {\n      color: var(--mj-text-muted);\n    }\n\n    .mj-filter-panel-chip-group[_ngcontent-%COMP%] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 6px;\n    }\n\n    .mj-filter-panel-footer[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: flex-end;\n      padding-top: 10px;\n      border-top: 1px solid var(--mj-border-subtle);\n    }\n\n    .mj-filter-panel-reset[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: transparent;\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      color: var(--mj-text-secondary);\n      font: inherit;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;\n    }\n\n    .mj-filter-panel-reset[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-filter-panel-reset[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 11px;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJFilterPanelComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-filter-panel', standalone: true, imports: [CommonModule, FormsModule, MJDropdownComponent, MJFilterChipComponent, MJFilterFieldComponent], template: `
+    <div class="mj-filter-panel">
+      <div class="mj-filter-panel-body">
+        @for (field of Fields; track field.key) {
+          <mj-filter-field [Label]="field.label" [Icon]="field.icon ?? null">
+            @switch (field.type) {
+              @case ('text') {
+                <input
+                  type="text"
+                  class="mj-filter-panel-text-input"
+                  [value]="getValue(field.key) ?? ''"
+                  [placeholder]="field.placeholder ?? ''"
+                  (input)="setValue(field.key, $any($event.target).value)" />
+              }
+              @case ('dropdown') {
+                <mj-dropdown
+                  [Data]="field.options ?? []"
+                  TextField="text"
+                  ValueField="value"
+                  [ValuePrimitive]="true"
+                  [Filterable]="!!field.filterable"
+                  [Placeholder]="field.placeholder ?? ''"
+                  [ngModel]="getValue(field.key)"
+                  (ngModelChange)="setValue(field.key, $event)">
+                </mj-dropdown>
+              }
+              @case ('chips') {
+                <div class="mj-filter-panel-chip-group">
+                  @for (opt of field.chipOptions ?? []; track opt.value) {
+                    <mj-filter-chip
+                      [Label]="opt.text"
+                      [Icon]="opt.icon ?? null"
+                      [Active]="getValue(field.key) === opt.value"
+                      (Clicked)="setValue(field.key, opt.value)">
+                    </mj-filter-chip>
+                  }
+                </div>
+              }
+            }
+          </mj-filter-field>
+        }
+
+        <!-- Escape hatch for custom field widgets (e.g. mj-tree-dropdown, date pickers) -->
+        <ng-content></ng-content>
+      </div>
+
+      @if (ShowReset) {
+        <div class="mj-filter-panel-footer">
+          <button type="button" class="mj-filter-panel-reset" (click)="Reset.emit()">
+            <i class="fa-solid fa-rotate-left"></i> {{ ResetLabel }}
+          </button>
+        </div>
+      }
+    </div>
+  `, styles: ["\n    :host {\n      display: block;\n    }\n\n    .mj-filter-panel {\n      display: flex;\n      flex-direction: column;\n      gap: 14px;\n    }\n\n    .mj-filter-panel-body {\n      display: flex;\n      flex-direction: column;\n      gap: 14px;\n    }\n\n    .mj-filter-panel-text-input {\n      width: 100%;\n      padding: 7px 12px;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      font: inherit;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      transition: border-color 0.15s ease, box-shadow 0.15s ease;\n    }\n\n    .mj-filter-panel-text-input:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    }\n\n    .mj-filter-panel-text-input::placeholder {\n      color: var(--mj-text-muted);\n    }\n\n    .mj-filter-panel-chip-group {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 6px;\n    }\n\n    .mj-filter-panel-footer {\n      display: flex;\n      justify-content: flex-end;\n      padding-top: 10px;\n      border-top: 1px solid var(--mj-border-subtle);\n    }\n\n    .mj-filter-panel-reset {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: transparent;\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      color: var(--mj-text-secondary);\n      font: inherit;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;\n    }\n\n    .mj-filter-panel-reset:hover {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-filter-panel-reset i {\n      font-size: 11px;\n    }\n  "] }]
+    }], null, { Fields: [{
+            type: Input
+        }], Values: [{
+            type: Input
+        }], ShowReset: [{
+            type: Input
+        }], ResetLabel: [{
+            type: Input
+        }], ValuesChange: [{
+            type: Output
+        }], Reset: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJFilterPanelComponent, { className: "MJFilterPanelComponent", filePath: "lib/filter-panel/filter-panel.component.ts", lineNumber: 195 }); })();
+//# sourceMappingURL=filter-panel.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-panel.component.js","sourceRoot":"","sources":["../../../src/lib/filter-panel/filter-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;;;;;;;;;IA8DhE,gCAK6D;IAA3D,6OAAS,kDAA8C,KAAC;IAL1D,iBAK6D;;;;IAD3D,AADA,2DAAmC,2CACI;;;;IAIzC,sCAQgD;IAA9C,mQAAiB,qCAA2B,KAAC;IAC/C,iBAAc;;;;IAFZ,AADA,AADA,AADA,AAHA,qEAA4B,wBAGL,qCACU,2CACM,0CACR;;;;IAO7B,0CAI6C;IAA3C,oRAAW,2CAA8B,KAAC;IAC5C,iBAAiB;;;;;IAFf,AADA,AADA,mCAAkB,6BACO,0DACmB;;;IALlD,8BAAwC;IACtC,iHAOC;IACH,iBAAM;;;IARJ,cAOC;IAPD,iEAOC;;;IA/BT,0CAAmE;IAsB/D,AAZA,AARA,yFAAgB,yEAQI,iEAYH;IAarB,iBAAkB;;;;IAnCqB,AAAtB,sCAAqB,+BAA4B;IAChE,cAiCC;IAjCD,gDAAA,MAAM,oBAAN,UAAU,oBAAV,OAAO,UAiCN;;;;IAUH,AADF,8BAAoC,iBACyC;IAAvB,0LAAS,mBAAY,KAAC;IACxE,wBAAuC;IAAC,YAC1C;IACF,AADE,iBAAS,EACL;;;IAFsC,eAC1C;IAD0C,kDAC1C;;AAhFV;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AA2IH,MAAM,OAAO,sBAAsB;IACxB,MAAM,GAAwB,EAAE,CAAC;IACjC,MAAM,GAA4B,EAAE,CAAC;IACrC,SAAS,GAAY,IAAI,CAAC;IAC1B,UAAU,GAAW,eAAe,CAAC;IAEpC,YAAY,GAAG,IAAI,YAAY,EAA2B,CAAC;IAC3D,KAAK,GAAG,IAAI,YAAY,EAAQ,CAAC;IAEpC,QAAQ,CAAC,GAAW;QACzB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC;IAC5B,CAAC;IAEM,QAAQ,CAAC,GAAW,EAAE,KAAc;QACzC,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;QAC/C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACtC,CAAC;gHAhBU,sBAAsB;6DAAtB,sBAAsB;;YApI7B,AADF,8BAA6B,aACO;YAChC,qGAqCC;YAGD,kBAAyB;YAC3B,iBAAM;YAEN,wFAAiB;YAOnB,iBAAM;;YAlDF,eAqCC;YArCD,yBAqCC;YAMH,eAMC;YAND,wCAMC;4BArDK,YAAY,EAAE,WAAW,kCAAE,mBAAmB,EAAE,qBAAqB,EAAE,sBAAsB;;iFAuI5F,sBAAsB;cA1IlC,SAAS;2BACE,iBAAiB,cACf,IAAI,WACP,CAAC,YAAY,EAAE,WAAW,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,sBAAsB,CAAC,YAC9F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDT;;kBAiFA,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBAEL,MAAM;;kBACN,MAAM;;kFAPI,sBAAsB","sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MJDropdownComponent } from '../dropdown/dropdown.component';\nimport { MJFilterChipComponent } from '../filter-chip/filter-chip.component';\nimport { MJFilterFieldComponent } from '../filter-field/filter-field.component';\n\n/** Field types supported natively by <mj-filter-panel>. */\nexport type FilterFieldType = 'text' | 'dropdown' | 'chips';\n\n/** Per-field config understood by <mj-filter-panel>. */\nexport interface FilterFieldConfig {\n  /** State key in the Values record. */\n  key: string;\n  /** Field type — drives which widget is rendered. */\n  type: FilterFieldType;\n  /** Display label. */\n  label: string;\n  /** Optional Font Awesome icon class (e.g. 'fa-solid fa-folder'). */\n  icon?: string;\n  /** Placeholder for text inputs / dropdowns. */\n  placeholder?: string;\n  /** Dropdown options (when type === 'dropdown'). Each option needs text + value. */\n  options?: { text: string; value: string | number | boolean | null }[];\n  /** Whether the dropdown should show an internal search box. */\n  filterable?: boolean;\n  /** Chip-group options (when type === 'chips'). */\n  chipOptions?: { text: string; value: string | number | boolean | null; icon?: string }[];\n}\n\n/**\n * mj-filter-panel — Single centralized filter panel for all dashboards.\n *\n * Config-driven: pass an array of `FilterFieldConfig` plus a `Values` record;\n * the panel renders each field using the appropriate widget (text input,\n * `<mj-dropdown>`, or chip group), keeps everything visually consistent, and\n * emits state changes via `(ValuesChange)`.\n *\n * For widgets not covered by the config schema (tree-dropdown, date pickers,\n * etc.), project `<mj-filter-field>` elements as content — they render below\n * the config-driven fields with identical chrome.\n *\n * Example:\n * ```html\n * <mj-filter-panel\n *   [Fields]=\"filterFields\"\n *   [(Values)]=\"filterValues\"\n *   (Reset)=\"onReset()\">\n *\n *   <!-- escape hatch for custom widgets -->\n *   <mj-filter-field Label=\"Category\" Icon=\"fa-solid fa-folder\">\n *     <mj-tree-dropdown ...></mj-tree-dropdown>\n *   </mj-filter-field>\n * </mj-filter-panel>\n * ```\n */\n@Component({\n  selector: 'mj-filter-panel',\n  standalone: true,\n  imports: [CommonModule, FormsModule, MJDropdownComponent, MJFilterChipComponent, MJFilterFieldComponent],\n  template: `\n    <div class=\"mj-filter-panel\">\n      <div class=\"mj-filter-panel-body\">\n        @for (field of Fields; track field.key) {\n          <mj-filter-field [Label]=\"field.label\" [Icon]=\"field.icon ?? null\">\n            @switch (field.type) {\n              @case ('text') {\n                <input\n                  type=\"text\"\n                  class=\"mj-filter-panel-text-input\"\n                  [value]=\"getValue(field.key) ?? ''\"\n                  [placeholder]=\"field.placeholder ?? ''\"\n                  (input)=\"setValue(field.key, $any($event.target).value)\" />\n              }\n              @case ('dropdown') {\n                <mj-dropdown\n                  [Data]=\"field.options ?? []\"\n                  TextField=\"text\"\n                  ValueField=\"value\"\n                  [ValuePrimitive]=\"true\"\n                  [Filterable]=\"!!field.filterable\"\n                  [Placeholder]=\"field.placeholder ?? ''\"\n                  [ngModel]=\"getValue(field.key)\"\n                  (ngModelChange)=\"setValue(field.key, $event)\">\n                </mj-dropdown>\n              }\n              @case ('chips') {\n                <div class=\"mj-filter-panel-chip-group\">\n                  @for (opt of field.chipOptions ?? []; track opt.value) {\n                    <mj-filter-chip\n                      [Label]=\"opt.text\"\n                      [Icon]=\"opt.icon ?? null\"\n                      [Active]=\"getValue(field.key) === opt.value\"\n                      (Clicked)=\"setValue(field.key, opt.value)\">\n                    </mj-filter-chip>\n                  }\n                </div>\n              }\n            }\n          </mj-filter-field>\n        }\n\n        <!-- Escape hatch for custom field widgets (e.g. mj-tree-dropdown, date pickers) -->\n        <ng-content></ng-content>\n      </div>\n\n      @if (ShowReset) {\n        <div class=\"mj-filter-panel-footer\">\n          <button type=\"button\" class=\"mj-filter-panel-reset\" (click)=\"Reset.emit()\">\n            <i class=\"fa-solid fa-rotate-left\"></i> {{ ResetLabel }}\n          </button>\n        </div>\n      }\n    </div>\n  `,\n  styles: [`\n    :host {\n      display: block;\n    }\n\n    .mj-filter-panel {\n      display: flex;\n      flex-direction: column;\n      gap: 14px;\n    }\n\n    .mj-filter-panel-body {\n      display: flex;\n      flex-direction: column;\n      gap: 14px;\n    }\n\n    .mj-filter-panel-text-input {\n      width: 100%;\n      padding: 7px 12px;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      font: inherit;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      transition: border-color 0.15s ease, box-shadow 0.15s ease;\n    }\n\n    .mj-filter-panel-text-input:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    }\n\n    .mj-filter-panel-text-input::placeholder {\n      color: var(--mj-text-muted);\n    }\n\n    .mj-filter-panel-chip-group {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 6px;\n    }\n\n    .mj-filter-panel-footer {\n      display: flex;\n      justify-content: flex-end;\n      padding-top: 10px;\n      border-top: 1px solid var(--mj-border-subtle);\n    }\n\n    .mj-filter-panel-reset {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: transparent;\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      color: var(--mj-text-secondary);\n      font: inherit;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;\n    }\n\n    .mj-filter-panel-reset:hover {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n      color: var(--mj-text-primary);\n    }\n\n    .mj-filter-panel-reset i {\n      font-size: 11px;\n    }\n  `]\n})\nexport class MJFilterPanelComponent {\n  @Input() Fields: FilterFieldConfig[] = [];\n  @Input() Values: Record<string, unknown> = {};\n  @Input() ShowReset: boolean = true;\n  @Input() ResetLabel: string = 'Reset filters';\n\n  @Output() ValuesChange = new EventEmitter<Record<string, unknown>>();\n  @Output() Reset = new EventEmitter<void>();\n\n  public getValue(key: string): unknown {\n    return this.Values?.[key];\n  }\n\n  public setValue(key: string, value: unknown): void {\n    this.Values = { ...this.Values, [key]: value };\n    this.ValuesChange.emit(this.Values);\n  }\n}\n"]}

package/dist/lib/filter-popover/filter-popover.component.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter } from '@angular/core';
+import { ConnectedPosition } from '@angular/cdk/overlay';
+import * as i0 from "@angular/core";
+/**
+ * mj-filter-popover — Compact "Filters" trigger button that opens a popover
+ * containing arbitrary filter UI. Use this in a dashboard's page-header to
+ * keep the header chrome consistent regardless of filter density.
+ *
+ * Pass the popover content via `<ng-content>`. Drive the active-count badge
+ * via the `ActiveCount` input.
+ *
+ * Example:
+ * ```html
+ * <mj-filter-popover [ActiveCount]="activeFilters.length">
+ *   <div class="my-filter-grid">
+ *     <mj-dropdown ...></mj-dropdown>
+ *     <mj-dropdown ...></mj-dropdown>
+ *   </div>
+ * </mj-filter-popover>
+ * ```
+ */
+export declare class MJFilterPopoverComponent {
+    Label: string;
+    Icon: string;
+    ActiveCount: number;
+    ShowClearAll: boolean;
+    IsOpen: boolean;
+    readonly Positions: ConnectedPosition[];
+    Toggle(): void;
+    Open(): void;
+    Close(): void;
+    /** Emitted when the user clicks the "Clear all" link inside the popover header. */
+    ClearAllRequested: EventEmitter<void>;
+    ClearAll(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJFilterPopoverComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJFilterPopoverComponent, "mj-filter-popover", never, { "Label": { "alias": "Label"; "required": false; }; "Icon": { "alias": "Icon"; "required": false; }; "ActiveCount": { "alias": "ActiveCount"; "required": false; }; "ShowClearAll": { "alias": "ShowClearAll"; "required": false; }; }, { "ClearAllRequested": "ClearAllRequested"; }, never, ["*"], true, never>;
+}
+//# sourceMappingURL=filter-popover.component.d.ts.map

package/dist/lib/filter-popover/filter-popover.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-popover.component.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-popover/filter-popover.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;AACvE,OAAO,EAAiB,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;;AAExE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAuKa,wBAAwB;IAC1B,KAAK,EAAE,MAAM,CAAa;IAC1B,IAAI,EAAE,MAAM,CAAwB;IACpC,WAAW,EAAE,MAAM,CAAK;IACxB,YAAY,EAAE,OAAO,CAAS;IAEhC,MAAM,EAAE,OAAO,CAAS;IAM/B,SAAgB,SAAS,EAAE,iBAAiB,EAAE,CAI5C;IAEK,MAAM,IAAI,IAAI;IACd,IAAI,IAAI,IAAI;IACZ,KAAK,IAAI,IAAI;IAEpB,mFAAmF;IAClE,iBAAiB,qBAA4B;IAEvD,QAAQ,IAAI,IAAI;yCAzBZ,wBAAwB;2CAAxB,wBAAwB;CA4BpC"}