@memberjunction/ng-ui-components 5.34.0 → 5.35.0

package/dist/lib/page-header/page-header.scss

@@ -0,0 +1,139 @@
+:host {
+  display: block;
+  /* External consumers using <mj-page-header> outside <mj-page-layout> get a
+     24px bottom margin so the header has breathing room from whatever follows.
+     This preserves backward compatibility with the published v5.x contract. */
+  margin-bottom: var(--mj-space-6);
+}
+
+/* When nested inside <mj-page-layout>, the spacing between header and body is
+   owned by <mj-page-body>'s padding-top — so the header sits flush against the
+   body. This lets pages using <mj-page-body [Padding]="false"> (e.g. AI
+   Analytics flush sidebar) render truly flush against the header. */
+:host-context(mj-page-layout) {
+  margin-bottom: 0;
+}
+
+/* Slot-wrapper passthrough — any element a consumer projects with the `meta`,
+   `actions`, or `toolbar` attribute (regardless of class name) becomes a
+   transparent container so its children become direct flex children of the
+   page-header row and inherit the row's gap. Eliminates the per-page
+   `.{section}-header-meta { display: contents }` rules that pages had to
+   declare in their own CSS files. */
+:host ::ng-deep [meta],
+:host ::ng-deep [actions],
+:host ::ng-deep [toolbar] {
+  display: contents;
+}
+
+.mj-page-header {
+  display: flex;
+  flex-direction: column;
+  background: var(--mj-bg-surface);
+  box-shadow: var(--mj-shadow-sm);
+}
+
+.mj-page-header-row {
+  display: flex;
+  align-items: center;
+  gap: var(--mj-space-3);
+  padding: 0 var(--mj-space-6);
+}
+
+.mj-page-header-row--primary {
+  justify-content: space-between;
+  gap: var(--mj-space-4);
+  padding-top: var(--mj-space-4);
+  padding-bottom: var(--mj-space-4);
+}
+
+.mj-page-header-row--toolbar {
+  flex-wrap: wrap;
+  padding-top: 0;
+  padding-bottom: var(--mj-space-4);
+  border-top: 1px solid var(--mj-border-subtle);
+  margin-top: 0;
+  padding-top: var(--mj-space-3);
+}
+
+.mj-page-header-row--toolbar:empty {
+  display: none;
+  border-top: 0;
+  padding: 0;
+}
+
+.mj-page-header-titlebar {
+  display: flex;
+  align-items: center;
+  gap: var(--mj-space-3);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.mj-page-header-icon {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);
+  color: var(--mj-brand-primary);
+  border-radius: var(--mj-radius-md);
+  font-size: var(--mj-text-lg);
+}
+
+.mj-page-header-text {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.mj-page-header-title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--mj-space-3);
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.mj-page-header-title {
+  margin: 0;
+  font-size: var(--mj-text-xl);
+  font-weight: var(--mj-font-semibold);
+  color: var(--mj-text-primary);
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mj-page-header-subtitle {
+  margin: var(--mj-space-1) 0 0;
+  font-size: var(--mj-text-sm);
+  color: var(--mj-text-secondary);
+  line-height: 1.4;
+}
+
+.mj-page-header-meta,
+.mj-page-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--mj-space-3);
+  flex-shrink: 0;
+}
+
+.mj-page-header-meta:empty,
+.mj-page-header-actions:empty {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .mj-page-header-row--primary {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--mj-space-3);
+  }
+  .mj-page-header-actions {
+    justify-content: flex-end;
+  }
+}

package/dist/lib/page-layout/page-layout.component.d.ts

@@ -0,0 +1,20 @@
+import * as i0 from "@angular/core";
+/**
+ * mj-page-layout — Canonical outer shell for MJ Explorer dashboards/resource pages.
+ *
+ * Provides the standard flex-column / full-height / page-background container.
+ * Place a `<mj-page-header>` and the page body inside.
+ *
+ * Example:
+ * ```html
+ * <mj-page-layout>
+ *   <mj-page-header Title="Agents" Icon="fa-solid fa-robot">...</mj-page-header>
+ *   <!-- page content -->
+ * </mj-page-layout>
+ * ```
+ */
+export declare class MJPageLayoutComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJPageLayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJPageLayoutComponent, "mj-page-layout", never, {}, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=page-layout.component.d.ts.map

package/dist/lib/page-layout/page-layout.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-layout.component.d.ts","sourceRoot":"","sources":["../../../src/lib/page-layout/page-layout.component.ts"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;GAaG;AACH,qBAca,qBAAqB;yCAArB,qBAAqB;2CAArB,qBAAqB;CAAG"}

package/dist/lib/page-layout/page-layout.component.js

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * mj-page-layout — Canonical outer shell for MJ Explorer dashboards/resource pages.
+ *
+ * Provides the standard flex-column / full-height / page-background container.
+ * Place a `<mj-page-header>` and the page body inside.
+ *
+ * Example:
+ * ```html
+ * <mj-page-layout>
+ *   <mj-page-header Title="Agents" Icon="fa-solid fa-robot">...</mj-page-header>
+ *   <!-- page content -->
+ * </mj-page-layout>
+ * ```
+ */
+export class MJPageLayoutComponent {
+    static ɵfac = function MJPageLayoutComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJPageLayoutComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJPageLayoutComponent, selectors: [["mj-page-layout"]], ngContentSelectors: _c0, decls: 1, vars: 0, template: function MJPageLayoutComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, styles: ["[_nghost-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-page);\n      overflow: hidden;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJPageLayoutComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-page-layout', standalone: true, template: `<ng-content></ng-content>`, styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-page);\n      overflow: hidden;\n    }\n  "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJPageLayoutComponent, { className: "MJPageLayoutComponent", filePath: "lib/page-layout/page-layout.component.ts", lineNumber: 31 }); })();
+//# sourceMappingURL=page-layout.component.js.map

package/dist/lib/page-layout/page-layout.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-layout.component.js","sourceRoot":"","sources":["../../../src/lib/page-layout/page-layout.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;;AAE1C;;;;;;;;;;;;;GAaG;AAeH,MAAM,OAAO,qBAAqB;+GAArB,qBAAqB;6DAArB,qBAAqB;;YAXrB,kBAAyB;;;iFAWzB,qBAAqB;cAdjC,SAAS;2BACE,gBAAgB,cACd,IAAI,YACN,2BAA2B;;kFAW1B,qBAAqB","sourcesContent":["import { Component } from '@angular/core';\n\n/**\n * mj-page-layout — Canonical outer shell for MJ Explorer dashboards/resource pages.\n *\n * Provides the standard flex-column / full-height / page-background container.\n * Place a `<mj-page-header>` and the page body inside.\n *\n * Example:\n * ```html\n * <mj-page-layout>\n *   <mj-page-header Title=\"Agents\" Icon=\"fa-solid fa-robot\">...</mj-page-header>\n *   <!-- page content -->\n * </mj-page-layout>\n * ```\n */\n@Component({\n  selector: 'mj-page-layout',\n  standalone: true,\n  template: `<ng-content></ng-content>`,\n  styles: [`\n    :host {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-page);\n      overflow: hidden;\n    }\n  `]\n})\nexport class MJPageLayoutComponent {}\n"]}

package/dist/lib/page-search/page-search.component.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * mj-page-search — Canonical in-page search input for dashboard headers and toolbars.
+ * Replaces per-page `.search-input-wrapper` rules so styling can't drift.
+ *
+ * Distinct from `mj-search-input` (the navbar/global search in `@memberjunction/ng-search`)
+ * — this one is a simple text input used for filtering page content.
+ *
+ * Example:
+ * ```html
+ * <mj-page-search
+ *   Placeholder="Search templates..."
+ *   [Value]="searchTerm"
+ *   (ValueChange)="onSearch($event)">
+ * </mj-page-search>
+ * ```
+ */
+export declare class MJPageSearchComponent {
+    Placeholder: string;
+    Value: string;
+    Icon: string;
+    ValueChange: EventEmitter<string>;
+    focused: boolean;
+    onInput(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJPageSearchComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJPageSearchComponent, "mj-page-search", never, { "Placeholder": { "alias": "Placeholder"; "required": false; }; "Value": { "alias": "Value"; "required": false; }; "Icon": { "alias": "Icon"; "required": false; }; }, { "ValueChange": "ValueChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=page-search.component.d.ts.map

package/dist/lib/page-search/page-search.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-search.component.d.ts","sourceRoot":"","sources":["../../../src/lib/page-search/page-search.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;;AAEvE;;;;;;;;;;;;;;;GAeG;AACH,qBA0Ea,qBAAqB;IACvB,WAAW,EAAE,MAAM,CAAe;IAClC,KAAK,EAAE,MAAM,CAAM;IACnB,IAAI,EAAE,MAAM,CAAwB;IACnC,WAAW,uBAA8B;IAE5C,OAAO,EAAE,OAAO,CAAS;IAEzB,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;yCARvB,qBAAqB;2CAArB,qBAAqB;CAajC"}

package/dist/lib/page-search/page-search.component.js

@@ -0,0 +1,69 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * mj-page-search — Canonical in-page search input for dashboard headers and toolbars.
+ * Replaces per-page `.search-input-wrapper` rules so styling can't drift.
+ *
+ * Distinct from `mj-search-input` (the navbar/global search in `@memberjunction/ng-search`)
+ * — this one is a simple text input used for filtering page content.
+ *
+ * Example:
+ * ```html
+ * <mj-page-search
+ *   Placeholder="Search templates..."
+ *   [Value]="searchTerm"
+ *   (ValueChange)="onSearch($event)">
+ * </mj-page-search>
+ * ```
+ */
+export class MJPageSearchComponent {
+    Placeholder = 'Search...';
+    Value = '';
+    Icon = 'fa-solid fa-search';
+    ValueChange = new EventEmitter();
+    focused = false;
+    onInput(event) {
+        const v = event.target.value;
+        this.Value = v;
+        this.ValueChange.emit(v);
+    }
+    static ɵfac = function MJPageSearchComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJPageSearchComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJPageSearchComponent, selectors: [["mj-page-search"]], inputs: { Placeholder: "Placeholder", Value: "Value", Icon: "Icon" }, outputs: { ValueChange: "ValueChange" }, decls: 3, vars: 6, consts: [[1, "mj-page-search"], ["type", "text", 3, "input", "focus", "blur", "placeholder", "value"]], template: function MJPageSearchComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵdomElement(1, "i");
+            i0.ɵɵdomElementStart(2, "input", 1);
+            i0.ɵɵdomListener("input", function MJPageSearchComponent_Template_input_input_2_listener($event) { return ctx.onInput($event); })("focus", function MJPageSearchComponent_Template_input_focus_2_listener() { return ctx.focused = true; })("blur", function MJPageSearchComponent_Template_input_blur_2_listener() { return ctx.focused = false; });
+            i0.ɵɵdomElementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("mj-page-search--focused", ctx.focused);
+            i0.ɵɵadvance();
+            i0.ɵɵclassMap(ctx.Icon);
+            i0.ɵɵadvance();
+            i0.ɵɵdomProperty("placeholder", ctx.Placeholder)("value", ctx.Value);
+        } }, styles: ["[_nghost-%COMP%] {\n      display: inline-flex;\n      min-width: 220px;\n    }\n\n    \n\n\n\n\n\n    .mj-page-search[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: var(--mj-space-2);\n      width: 100%;\n      padding: var(--mj-space-1) var(--mj-space-3);\n      font-family: var(--mj-font-family);\n      font-size: var(--mj-text-sm);\n      line-height: 1.5;\n      color: var(--mj-text-primary);\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-sm);\n      transition: var(--mj-transition-colors), box-shadow var(--mj-transition-base);\n      min-height: 32px;\n      box-sizing: border-box;\n    }\n\n    .mj-page-search[_ngcontent-%COMP%]:hover {\n      border-color: var(--mj-border-strong);\n    }\n\n    .mj-page-search--focused[_ngcontent-%COMP%] {\n      border-color: var(--mj-brand-primary);\n      box-shadow: var(--mj-focus-ring);\n    }\n\n    .mj-page-search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      font-size: 13px;\n      flex-shrink: 0;\n    }\n\n    .mj-page-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n      flex: 1;\n      border: none;\n      outline: none;\n      background: transparent;\n      font: inherit;\n      color: var(--mj-text-primary);\n      min-width: 0;\n    }\n\n    .mj-page-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n      color: var(--mj-text-disabled);\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJPageSearchComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-page-search', standalone: true, template: `
+    <div class="mj-page-search" [class.mj-page-search--focused]="focused">
+      <i [class]="Icon"></i>
+      <input
+        type="text"
+        [placeholder]="Placeholder"
+        [value]="Value"
+        (input)="onInput($event)"
+        (focus)="focused = true"
+        (blur)="focused = false" />
+    </div>
+  `, styles: ["\n    :host {\n      display: inline-flex;\n      min-width: 220px;\n    }\n\n    /* Compact toolbar density (32px) to match mjButton size=\"sm\" and other\n       header widgets. White background + border-default for visual differentiation\n       on both the page-header (white) and body (sunken) surfaces.\n       Note: this is intentionally tighter than .mj-input (38px) because\n       mj-page-search is a toolbar widget, not a form field. */\n    .mj-page-search {\n      display: flex;\n      align-items: center;\n      gap: var(--mj-space-2);\n      width: 100%;\n      padding: var(--mj-space-1) var(--mj-space-3);\n      font-family: var(--mj-font-family);\n      font-size: var(--mj-text-sm);\n      line-height: 1.5;\n      color: var(--mj-text-primary);\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-sm);\n      transition: var(--mj-transition-colors), box-shadow var(--mj-transition-base);\n      min-height: 32px;\n      box-sizing: border-box;\n    }\n\n    .mj-page-search:hover {\n      border-color: var(--mj-border-strong);\n    }\n\n    .mj-page-search--focused {\n      border-color: var(--mj-brand-primary);\n      box-shadow: var(--mj-focus-ring);\n    }\n\n    .mj-page-search i {\n      color: var(--mj-text-muted);\n      font-size: 13px;\n      flex-shrink: 0;\n    }\n\n    .mj-page-search input {\n      flex: 1;\n      border: none;\n      outline: none;\n      background: transparent;\n      font: inherit;\n      color: var(--mj-text-primary);\n      min-width: 0;\n    }\n\n    .mj-page-search input::placeholder {\n      color: var(--mj-text-disabled);\n    }\n  "] }]
+    }], null, { Placeholder: [{
+            type: Input
+        }], Value: [{
+            type: Input
+        }], Icon: [{
+            type: Input
+        }], ValueChange: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJPageSearchComponent, { className: "MJPageSearchComponent", filePath: "lib/page-search/page-search.component.ts", lineNumber: 93 }); })();
+//# sourceMappingURL=page-search.component.js.map

package/dist/lib/page-search/page-search.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-search.component.js","sourceRoot":"","sources":["../../../src/lib/page-search/page-search.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;AAEvE;;;;;;;;;;;;;;;GAeG;AA2EH,MAAM,OAAO,qBAAqB;IACvB,WAAW,GAAW,WAAW,CAAC;IAClC,KAAK,GAAW,EAAE,CAAC;IACnB,IAAI,GAAW,oBAAoB,CAAC;IACnC,WAAW,GAAG,IAAI,YAAY,EAAU,CAAC;IAE5C,OAAO,GAAY,KAAK,CAAC;IAEzB,OAAO,CAAC,KAAY;QACzB,MAAM,CAAC,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;QACnD,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC;+GAZU,qBAAqB;6DAArB,qBAAqB;YAtE9B,iCAAsE;YACpE,uBAAsB;YACtB,mCAM6B;YAA3B,AADA,AADA,0GAAS,mBAAe,IAAC,kGACN,IAAI,IAAC,gGACN,KAAK,IAAC;YAC5B,AAPE,oBAM6B,EACzB;;YATsB,sDAAyC;YAChE,cAAc;YAAd,uBAAc;YAGf,cAA2B;YAC3B,AADA,gDAA2B,oBACZ;;;iFAiEV,qBAAqB;cA1EjC,SAAS;2BACE,gBAAgB,cACd,IAAI,YACN;;;;;;;;;;;GAWT;;kBA6DA,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,MAAM;;kFAJI,qBAAqB","sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\n\n/**\n * mj-page-search — Canonical in-page search input for dashboard headers and toolbars.\n * Replaces per-page `.search-input-wrapper` rules so styling can't drift.\n *\n * Distinct from `mj-search-input` (the navbar/global search in `@memberjunction/ng-search`)\n * — this one is a simple text input used for filtering page content.\n *\n * Example:\n * ```html\n * <mj-page-search\n *   Placeholder=\"Search templates...\"\n *   [Value]=\"searchTerm\"\n *   (ValueChange)=\"onSearch($event)\">\n * </mj-page-search>\n * ```\n */\n@Component({\n  selector: 'mj-page-search',\n  standalone: true,\n  template: `\n    <div class=\"mj-page-search\" [class.mj-page-search--focused]=\"focused\">\n      <i [class]=\"Icon\"></i>\n      <input\n        type=\"text\"\n        [placeholder]=\"Placeholder\"\n        [value]=\"Value\"\n        (input)=\"onInput($event)\"\n        (focus)=\"focused = true\"\n        (blur)=\"focused = false\" />\n    </div>\n  `,\n  styles: [`\n    :host {\n      display: inline-flex;\n      min-width: 220px;\n    }\n\n    /* Compact toolbar density (32px) to match mjButton size=\"sm\" and other\n       header widgets. White background + border-default for visual differentiation\n       on both the page-header (white) and body (sunken) surfaces.\n       Note: this is intentionally tighter than .mj-input (38px) because\n       mj-page-search is a toolbar widget, not a form field. */\n    .mj-page-search {\n      display: flex;\n      align-items: center;\n      gap: var(--mj-space-2);\n      width: 100%;\n      padding: var(--mj-space-1) var(--mj-space-3);\n      font-family: var(--mj-font-family);\n      font-size: var(--mj-text-sm);\n      line-height: 1.5;\n      color: var(--mj-text-primary);\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-sm);\n      transition: var(--mj-transition-colors), box-shadow var(--mj-transition-base);\n      min-height: 32px;\n      box-sizing: border-box;\n    }\n\n    .mj-page-search:hover {\n      border-color: var(--mj-border-strong);\n    }\n\n    .mj-page-search--focused {\n      border-color: var(--mj-brand-primary);\n      box-shadow: var(--mj-focus-ring);\n    }\n\n    .mj-page-search i {\n      color: var(--mj-text-muted);\n      font-size: 13px;\n      flex-shrink: 0;\n    }\n\n    .mj-page-search input {\n      flex: 1;\n      border: none;\n      outline: none;\n      background: transparent;\n      font: inherit;\n      color: var(--mj-text-primary);\n      min-width: 0;\n    }\n\n    .mj-page-search input::placeholder {\n      color: var(--mj-text-disabled);\n    }\n  `]\n})\nexport class MJPageSearchComponent {\n  @Input() Placeholder: string = 'Search...';\n  @Input() Value: string = '';\n  @Input() Icon: string = 'fa-solid fa-search';\n  @Output() ValueChange = new EventEmitter<string>();\n\n  public focused: boolean = false;\n\n  public onInput(event: Event): void {\n    const v = (event.target as HTMLInputElement).value;\n    this.Value = v;\n    this.ValueChange.emit(v);\n  }\n}\n"]}

package/dist/lib/refresh-button/refresh-button.component.d.ts

@@ -0,0 +1,46 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * mj-refresh-button — Canonical Refresh button for the `[actions]` slot of
+ * `<mj-page-header>`. Encapsulates the icon + spin-on-loading behavior so
+ * pages don't reinvent it every time.
+ *
+ * Replaces the repeated:
+ * ```html
+ * <button mjButton variant="secondary" size="sm" (click)="LoadData()" [disabled]="IsLoading" title="Refresh">
+ *   <i class="fa-solid fa-arrows-rotate" [class.fa-spin]="IsLoading"></i> Refresh
+ * </button>
+ * ```
+ *
+ * Usage:
+ * ```html
+ * <mj-refresh-button [Loading]="IsLoading" (Clicked)="LoadData()" />
+ *
+ * <mj-refresh-button [Loading]="IsLoading" (Clicked)="Refresh()" [ShowLabel]="false" />   <!-- icon-only -->
+ * ```
+ *
+ * The `Loading` input drives both the spinner AND the disabled state — pass
+ * the page's `IsLoading` flag and you're done.
+ */
+export declare class MJRefreshButtonComponent {
+    /** When true, the icon spins and the button is disabled. Pass `IsLoading` from the page. */
+    Loading: boolean;
+    /** Force-disable independently of `Loading`. */
+    Disabled: boolean;
+    /** Visible button text. Defaults to "Refresh". Use `[ShowLabel]="false"` for icon-only. */
+    Label: string;
+    /** Hover/aria tooltip. Defaults to "Refresh". */
+    Title: string;
+    /** Show the text label next to the icon. Defaults to true. */
+    ShowLabel: boolean;
+    /** Button variant passed to mjButton. Defaults to 'secondary'. */
+    Variant: 'primary' | 'secondary' | 'outline' | 'flat' | 'icon';
+    /** Button size passed to mjButton. Defaults to 'sm' to match page-header density. */
+    Size: 'sm' | 'md' | 'lg';
+    /** Emitted when the button is clicked AND the button isn't disabled/loading. */
+    Clicked: EventEmitter<MouseEvent>;
+    OnClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJRefreshButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJRefreshButtonComponent, "mj-refresh-button", never, { "Loading": { "alias": "Loading"; "required": false; }; "Disabled": { "alias": "Disabled"; "required": false; }; "Label": { "alias": "Label"; "required": false; }; "Title": { "alias": "Title"; "required": false; }; "ShowLabel": { "alias": "ShowLabel"; "required": false; }; "Variant": { "alias": "Variant"; "required": false; }; "Size": { "alias": "Size"; "required": false; }; }, { "Clicked": "Clicked"; }, never, never, true, never>;
+}
+//# sourceMappingURL=refresh-button.component.d.ts.map

package/dist/lib/refresh-button/refresh-button.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"refresh-button.component.d.ts","sourceRoot":"","sources":["../../../src/lib/refresh-button/refresh-button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;;AAGvE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAwBa,wBAAwB;IACnC,4FAA4F;IACnF,OAAO,EAAE,OAAO,CAAS;IAElC,gDAAgD;IACvC,QAAQ,EAAE,OAAO,CAAS;IAEnC,2FAA2F;IAClF,KAAK,EAAE,MAAM,CAAa;IAEnC,iDAAiD;IACxC,KAAK,EAAE,MAAM,CAAa;IAEnC,8DAA8D;IACrD,SAAS,EAAE,OAAO,CAAQ;IAEnC,kEAAkE;IACzD,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAe;IAEtF,qFAAqF;IAC5E,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEzC,gFAAgF;IACtE,OAAO,2BAAkC;IAEnD,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;yCAzBrB,wBAAwB;2CAAxB,wBAAwB;CA6BpC"}

package/dist/lib/refresh-button/refresh-button.component.js

@@ -0,0 +1,106 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MJButtonDirective } from '../button/button.directive';
+import * as i0 from "@angular/core";
+function MJRefreshButtonComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.Label, " ");
+} }
+/**
+ * mj-refresh-button — Canonical Refresh button for the `[actions]` slot of
+ * `<mj-page-header>`. Encapsulates the icon + spin-on-loading behavior so
+ * pages don't reinvent it every time.
+ *
+ * Replaces the repeated:
+ * ```html
+ * <button mjButton variant="secondary" size="sm" (click)="LoadData()" [disabled]="IsLoading" title="Refresh">
+ *   <i class="fa-solid fa-arrows-rotate" [class.fa-spin]="IsLoading"></i> Refresh
+ * </button>
+ * ```
+ *
+ * Usage:
+ * ```html
+ * <mj-refresh-button [Loading]="IsLoading" (Clicked)="LoadData()" />
+ *
+ * <mj-refresh-button [Loading]="IsLoading" (Clicked)="Refresh()" [ShowLabel]="false" />   <!-- icon-only -->
+ * ```
+ *
+ * The `Loading` input drives both the spinner AND the disabled state — pass
+ * the page's `IsLoading` flag and you're done.
+ */
+export class MJRefreshButtonComponent {
+    /** When true, the icon spins and the button is disabled. Pass `IsLoading` from the page. */
+    Loading = false;
+    /** Force-disable independently of `Loading`. */
+    Disabled = false;
+    /** Visible button text. Defaults to "Refresh". Use `[ShowLabel]="false"` for icon-only. */
+    Label = 'Refresh';
+    /** Hover/aria tooltip. Defaults to "Refresh". */
+    Title = 'Refresh';
+    /** Show the text label next to the icon. Defaults to true. */
+    ShowLabel = true;
+    /** Button variant passed to mjButton. Defaults to 'secondary'. */
+    Variant = 'secondary';
+    /** Button size passed to mjButton. Defaults to 'sm' to match page-header density. */
+    Size = 'sm';
+    /** Emitted when the button is clicked AND the button isn't disabled/loading. */
+    Clicked = new EventEmitter();
+    OnClick(event) {
+        if (this.Disabled || this.Loading)
+            return;
+        this.Clicked.emit(event);
+    }
+    static ɵfac = function MJRefreshButtonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJRefreshButtonComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJRefreshButtonComponent, selectors: [["mj-refresh-button"]], inputs: { Loading: "Loading", Disabled: "Disabled", Label: "Label", Title: "Title", ShowLabel: "ShowLabel", Variant: "Variant", Size: "Size" }, outputs: { Clicked: "Clicked" }, decls: 3, vars: 8, consts: [["type", "button", "mjButton", "", 3, "click", "variant", "size", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrows-rotate"]], template: function MJRefreshButtonComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "button", 0);
+            i0.ɵɵlistener("click", function MJRefreshButtonComponent_Template_button_click_0_listener($event) { return ctx.OnClick($event); });
+            i0.ɵɵelement(1, "i", 1);
+            i0.ɵɵconditionalCreate(2, MJRefreshButtonComponent_Conditional_2_Template, 1, 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("variant", ctx.Variant)("size", ctx.Size)("disabled", ctx.Disabled || ctx.Loading);
+            i0.ɵɵattribute("title", ctx.Title)("aria-label", !ctx.ShowLabel ? ctx.Title : null);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("fa-spin", ctx.Loading);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowLabel ? 2 : -1);
+        } }, dependencies: [MJButtonDirective], styles: ["[_nghost-%COMP%] { display: inline-flex; }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJRefreshButtonComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-refresh-button', standalone: true, imports: [MJButtonDirective], template: `
+    <button
+      type="button"
+      mjButton
+      [variant]="Variant"
+      [size]="Size"
+      [disabled]="Disabled || Loading"
+      [attr.title]="Title"
+      [attr.aria-label]="!ShowLabel ? Title : null"
+      (click)="OnClick($event)">
+      <i class="fa-solid fa-arrows-rotate" [class.fa-spin]="Loading" aria-hidden="true"></i>
+      @if (ShowLabel) {
+        {{ Label }}
+      }
+    </button>
+  `, styles: ["\n    :host { display: inline-flex; }\n  "] }]
+    }], null, { Loading: [{
+            type: Input
+        }], Disabled: [{
+            type: Input
+        }], Label: [{
+            type: Input
+        }], Title: [{
+            type: Input
+        }], ShowLabel: [{
+            type: Input
+        }], Variant: [{
+            type: Input
+        }], Size: [{
+            type: Input
+        }], Clicked: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJRefreshButtonComponent, { className: "MJRefreshButtonComponent", filePath: "lib/refresh-button/refresh-button.component.ts", lineNumber: 50 }); })();
+//# sourceMappingURL=refresh-button.component.js.map

package/dist/lib/refresh-button/refresh-button.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"refresh-button.component.js","sourceRoot":"","sources":["../../../src/lib/refresh-button/refresh-button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;;;IAwCvD,YACF;;;IADE,6CACF;;AAvCN;;;;;;;;;;;;;;;;;;;;;GAqBG;AAyBH,MAAM,OAAO,wBAAwB;IACnC,4FAA4F;IACnF,OAAO,GAAY,KAAK,CAAC;IAElC,gDAAgD;IACvC,QAAQ,GAAY,KAAK,CAAC;IAEnC,2FAA2F;IAClF,KAAK,GAAW,SAAS,CAAC;IAEnC,iDAAiD;IACxC,KAAK,GAAW,SAAS,CAAC;IAEnC,8DAA8D;IACrD,SAAS,GAAY,IAAI,CAAC;IAEnC,kEAAkE;IACzD,OAAO,GAA0D,WAAW,CAAC;IAEtF,qFAAqF;IAC5E,IAAI,GAAuB,IAAI,CAAC;IAEzC,gFAAgF;IACtE,OAAO,GAAG,IAAI,YAAY,EAAc,CAAC;IAEnD,OAAO,CAAC,KAAiB;QACvB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO;QAC1C,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;kHA5BU,wBAAwB;6DAAxB,wBAAwB;YAnBjC,iCAQ4B;YAA1B,2GAAS,mBAAe,IAAC;YACzB,uBAAsF;YACtF,gFAAiB;YAGnB,iBAAS;;YARP,AADA,AADA,qCAAmB,kBACN,yCACmB;;YAIK,cAAyB;YAAzB,sCAAyB;YAC9D,cAEC;YAFD,wCAEC;4BAdK,iBAAiB;;iFAqBhB,wBAAwB;cAxBpC,SAAS;2BACE,mBAAmB,cACjB,IAAI,WACP,CAAC,iBAAiB,CAAC,YAClB;;;;;;;;;;;;;;;GAeT;;kBAOA,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,MAAM;;kFAvBI,wBAAwB","sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { MJButtonDirective } from '../button/button.directive';\n\n/**\n * mj-refresh-button — Canonical Refresh button for the `[actions]` slot of\n * `<mj-page-header>`. Encapsulates the icon + spin-on-loading behavior so\n * pages don't reinvent it every time.\n *\n * Replaces the repeated:\n * ```html\n * <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"LoadData()\" [disabled]=\"IsLoading\" title=\"Refresh\">\n *   <i class=\"fa-solid fa-arrows-rotate\" [class.fa-spin]=\"IsLoading\"></i> Refresh\n * </button>\n * ```\n *\n * Usage:\n * ```html\n * <mj-refresh-button [Loading]=\"IsLoading\" (Clicked)=\"LoadData()\" />\n *\n * <mj-refresh-button [Loading]=\"IsLoading\" (Clicked)=\"Refresh()\" [ShowLabel]=\"false\" />   <!-- icon-only -->\n * ```\n *\n * The `Loading` input drives both the spinner AND the disabled state — pass\n * the page's `IsLoading` flag and you're done.\n */\n@Component({\n  selector: 'mj-refresh-button',\n  standalone: true,\n  imports: [MJButtonDirective],\n  template: `\n    <button\n      type=\"button\"\n      mjButton\n      [variant]=\"Variant\"\n      [size]=\"Size\"\n      [disabled]=\"Disabled || Loading\"\n      [attr.title]=\"Title\"\n      [attr.aria-label]=\"!ShowLabel ? Title : null\"\n      (click)=\"OnClick($event)\">\n      <i class=\"fa-solid fa-arrows-rotate\" [class.fa-spin]=\"Loading\" aria-hidden=\"true\"></i>\n      @if (ShowLabel) {\n        {{ Label }}\n      }\n    </button>\n  `,\n  styles: [`\n    :host { display: inline-flex; }\n  `]\n})\nexport class MJRefreshButtonComponent {\n  /** When true, the icon spins and the button is disabled. Pass `IsLoading` from the page. */\n  @Input() Loading: boolean = false;\n\n  /** Force-disable independently of `Loading`. */\n  @Input() Disabled: boolean = false;\n\n  /** Visible button text. Defaults to \"Refresh\". Use `[ShowLabel]=\"false\"` for icon-only. */\n  @Input() Label: string = 'Refresh';\n\n  /** Hover/aria tooltip. Defaults to \"Refresh\". */\n  @Input() Title: string = 'Refresh';\n\n  /** Show the text label next to the icon. Defaults to true. */\n  @Input() ShowLabel: boolean = true;\n\n  /** Button variant passed to mjButton. Defaults to 'secondary'. */\n  @Input() Variant: 'primary' | 'secondary' | 'outline' | 'flat' | 'icon' = 'secondary';\n\n  /** Button size passed to mjButton. Defaults to 'sm' to match page-header density. */\n  @Input() Size: 'sm' | 'md' | 'lg' = 'sm';\n\n  /** Emitted when the button is clicked AND the button isn't disabled/loading. */\n  @Output() Clicked = new EventEmitter<MouseEvent>();\n\n  OnClick(event: MouseEvent): void {\n    if (this.Disabled || this.Loading) return;\n    this.Clicked.emit(event);\n  }\n}\n"]}

package/dist/lib/stat-badge/stat-badge.component.d.ts

@@ -0,0 +1,54 @@
+import * as i0 from "@angular/core";
+/** Visual variant for `<mj-stat-badge>`. */
+export type MJStatBadgeVariant = 'default' | 'success' | 'error' | 'warning' | 'running' | 'info';
+/**
+ * mj-stat-badge — Small read-only pill for the `[meta]` slot of
+ * `<mj-page-header>`. Used to surface counts, status pills, and other
+ * informational chips next to the page title.
+ *
+ * Replaces the per-section `.{section}-stat-badge` / `.X-header-meta-badge`
+ * CSS that pages were duplicating after the chrome migration.
+ *
+ * Examples:
+ * ```html
+ * <mj-stat-badge [Count]="42" Label="integrations" />
+ *
+ * <mj-stat-badge [Count]="failedRuns" Label="failed" Variant="error" />
+ *
+ * <mj-stat-badge Icon="fa-solid fa-spinner fa-spin" Label="running" Variant="running" />
+ *
+ * <!-- Result-count style: render "X of Y label" when Total is set -->
+ * <mj-stat-badge [Count]="filteredCount" [Total]="totalCount" Label="agents" />
+ *
+ * <mj-stat-badge Variant="success">All clear</mj-stat-badge>   <!-- arbitrary projected content -->
+ * ```
+ *
+ * Note: this component absorbed the former `mj-result-count` (deleted in the
+ * organizational refactor). When `Total` is set, the badge renders the
+ * "X of Y label" pattern; otherwise it renders "X label" — same shape, same
+ * styling, one component.
+ */
+export declare class MJStatBadgeComponent {
+    /** Numeric or text value rendered as `<strong>`. Omit if using `Label` only. */
+    Count: number | string | null;
+    /**
+     * Optional total when the badge represents a filtered subset (e.g. "12 of 50 prompts").
+     * When set together with `Count`, the badge renders "{Count} of {Total} {Label}".
+     * Replaces the old `mj-result-count` component.
+     */
+    Total: number | string | null;
+    /** Descriptive text after the count (e.g. "integrations", "failed"). */
+    Label: string;
+    /** Optional Font Awesome icon prefixed before the count/label. */
+    Icon: string;
+    /** Color treatment. Defaults to neutral surface-card. */
+    Variant: MJStatBadgeVariant;
+    get IsSuccess(): boolean;
+    get IsError(): boolean;
+    get IsWarning(): boolean;
+    get IsRunning(): boolean;
+    get IsInfo(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJStatBadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJStatBadgeComponent, "mj-stat-badge", never, { "Count": { "alias": "Count"; "required": false; }; "Total": { "alias": "Total"; "required": false; }; "Label": { "alias": "Label"; "required": false; }; "Icon": { "alias": "Icon"; "required": false; }; "Variant": { "alias": "Variant"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+//# sourceMappingURL=stat-badge.component.d.ts.map

package/dist/lib/stat-badge/stat-badge.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-badge.component.d.ts","sourceRoot":"","sources":["../../../src/lib/stat-badge/stat-badge.component.ts"],"names":[],"mappings":";AAEA,4CAA4C;AAC5C,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,SAAS,GACT,MAAM,CAAC;AAEX;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAkFa,oBAAoB;IAC/B,gFAAgF;IACvE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAQ;IAE9C;;;;OAIG;IACM,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAQ;IAE9C,wEAAwE;IAC/D,KAAK,EAAE,MAAM,CAAM;IAE5B,kEAAkE;IACzD,IAAI,EAAE,MAAM,CAAM;IAE3B,yDAAyD;IAChD,OAAO,EAAE,kBAAkB,CAAa;IAEjD,IACI,SAAS,IAAI,OAAO,CAAuC;IAE/D,IACI,OAAO,IAAI,OAAO,CAAqC;IAE3D,IACI,SAAS,IAAI,OAAO,CAAuC;IAE/D,IACI,SAAS,IAAI,OAAO,CAAuC;IAE/D,IACI,MAAM,IAAI,OAAO,CAAoC;yCAjC9C,oBAAoB;2CAApB,oBAAoB;CAkChC"}