@memberjunction/ng-ui-components 5.43.0 → 5.45.0

package/dist/lib/accordion/accordion.scss

@@ -2,44 +2,287 @@
  * MJ Accordion Panel Styles
  */
 
+/* The host is a custom element (defaults to display:inline); make it block so
+   consumers don't each have to set display/width on the panel. */
+.mj-accordion-panel-host {
+  display: block;
+}
+
 .mj-accordion-panel {
   border: 1px solid var(--mj-border-default);
   border-radius: var(--mj-radius-sm);
-  margin-bottom: 4px;
+  margin-bottom: 8px;
   overflow: hidden;
 }
 
+/* The header ROW owns the background/separator so the toggle button and the
+   optional actions cluster sit on one continuous surface. Hover lives HERE (not on
+   the individual title/chevron buttons) so hovering ANY part of the header — title,
+   actions, or chevron — lights up the whole bar as one unit. */
+.mj-accordion-header-row {
+  display: flex; align-items: stretch;
+  background: var(--mj-bg-surface-sunken);
+  transition: background var(--mj-transition-fast);
+}
+.mj-accordion-panel:not(.mj-accordion-panel--disabled) > .mj-accordion-header-row:hover {
+  background: var(--mj-bg-surface-hover);
+}
+
+/* The toggle button is the disclosure control (title + chevron). Transparent over
+   the row so the row-level hover shows through; the button itself paints nothing on
+   hover (the whole bar reacts together). */
 .mj-accordion-header {
-  display: flex; align-items: center; justify-content: space-between;
-  width: 100%; padding: 12px 16px;
-  background: var(--mj-bg-surface-sunken); border: none; cursor: pointer;
+  flex: 1 1 auto; min-width: 0;
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 12px 16px;
+  background: transparent; border: none; cursor: pointer;
   font-family: var(--mj-font-family); font-size: var(--mj-text-sm);
   font-weight: var(--mj-font-semibold); color: var(--mj-text-primary);
-  text-align: left; transition: background var(--mj-transition-fast);
-  &:hover { background: var(--mj-bg-surface-hover); }
+  text-align: left;
   &:focus-visible { outline: none; box-shadow: var(--mj-focus-ring); }
 }
 
+/* Header actions — interactive controls (edit/copy/run/checkbox) that live in
+   the header but are NOT the toggle. Sibling of the button (no button-in-button).
+   Sits BEFORE the chevron so the chevron stays the rightmost element. */
+.mj-accordion-actions {
+  display: flex; align-items: center; gap: 4px;
+  flex-shrink: 0; padding: 0 4px;
+}
+
+/* Chevron toggle — ALWAYS the rightmost element of the header row (after any
+   actions). Secondary, a11y-hidden affordance; the title button is the announced
+   disclosure control. Stretches the full header height so the whole right edge
+   toggles on click. */
+.mj-accordion-chevron {
+  flex-shrink: 0;
+  align-self: stretch;
+  display: flex; align-items: center; justify-content: center;
+  padding: 0 16px;
+  background: transparent; border: none; cursor: pointer;
+}
+
+/* In dark mode the "sunken" header (near-black) sits much darker than the body
+   and reads as overly bold. Use the elevated surface instead — one step lighter
+   than the body for a subtle raised header. Light mode keeps the sunken look.
+   (Emphasis variants are more specific, so they keep their brand backgrounds.) */
+[data-theme="dark"] .mj-accordion-header-row {
+  background: var(--mj-bg-surface-elevated);
+}
+
 .mj-accordion-icon {
   font-size: 0.75rem; color: var(--mj-text-muted);
   transition: transform var(--mj-transition-base);
-  .mj-accordion-panel--expanded & { transform: rotate(180deg); }
+  /* Scope to THIS panel's own header row (direct child) so a nested accordion's
+     chevron doesn't rotate just because an outer panel is expanded. */
+  .mj-accordion-panel--expanded > .mj-accordion-header-row & { transform: rotate(180deg); }
 }
 
+/* Body animates open/close via grid-template-rows 0fr -> 1fr (smooth auto-height,
+   no JS measuring). The body stays in the DOM when collapsed (inert) so the
+   transition has something to animate. */
+.mj-accordion-body-outer {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--mj-transition-base);
+}
+/* Child combinator (>) is critical: a descendant selector would also match a
+   NESTED accordion's body-outer whenever an OUTER panel is expanded, forcing the
+   nested panel open and breaking its collapse. Scope to this panel's own body. */
+.mj-accordion-panel--expanded > .mj-accordion-body-outer {
+  grid-template-rows: 1fr;
+}
+/* The clip element is what the grid collapses — it must carry NO padding, or a
+   padding-height sliver survives the 0fr collapse. overflow:hidden + min-height:0
+   let it shrink to a true 0. */
+.mj-accordion-body-clip {
+  overflow: hidden;
+  min-height: 0;
+}
+/* Padding lives on the inner element (fully clipped at 0fr). Keeps the
+   .mj-accordion-body name so existing ::ng-deep consumer overrides still apply. */
 .mj-accordion-body {
   padding: 16px;
-  border-top: 1px solid var(--mj-border-default);
   background: var(--mj-bg-surface);
 }
+/* Header/body separator lives on the header row so it only shows while open
+   (a border on the collapsing body would leave a stray line at 0fr). */
+.mj-accordion-panel--expanded > .mj-accordion-header-row {
+  border-bottom: 1px solid var(--mj-border-default);
+}
+
+/* Lay the title slot out as a row so projected content (icon + label + badge/
+   count) spaces consistently without each consumer reinventing it. min-width:0
+   lets long titles truncate instead of shoving the chevron off the edge. */
+.mj-accordion-title {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* The accordion owns the size of icons projected into the title — consumers
+   should NOT set font-size on title icons (inline or otherwise). 1em tracks the
+   header's own font-size, so icons scale with the title text (and with any
+   future Size variant) instead of each form hand-tuning pixels. */
+.mj-accordion-title i {
+  font-size: 1em;
+}
+
+/* Muted title icons — opt in via [TitleIconMuted]="true" instead of per-consumer
+   CSS. (Status/brand-colored icons are still set per-instance inline.) */
+.mj-accordion-panel--muted-icon > .mj-accordion-header-row > .mj-accordion-header .mj-accordion-title i {
+  color: var(--mj-text-muted);
+}
 
-.mj-accordion-title { flex: 1; }
+/* ── Title badge ────────────────────────────────────────────────────────────
+   Standard count/badge for the title slot. Use instead of per-consumer count
+   styling:  <span class="mj-accordion-badge">3</span>
+   Modifiers: --right (push to the far right, before the chevron),
+              --muted (plain muted text, no pill),
+              --success / --error / --warning / --info (status pills).
+   All token-driven, so dark-mode-safe. */
+.mj-accordion-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 2px 8px;
+  border-radius: var(--mj-radius-full);
+  background: var(--mj-bg-surface-card);
+  color: var(--mj-text-secondary);
+  font-size: var(--mj-text-xs);
+  font-weight: var(--mj-font-medium);
+  line-height: 1.4;
+}
+.mj-accordion-badge--right { margin-left: auto; }
+.mj-accordion-badge--muted {
+  padding: 0;
+  background: transparent;
+  color: var(--mj-text-muted);
+  font-weight: var(--mj-font-normal);
+}
+.mj-accordion-badge--success { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }
+.mj-accordion-badge--error   { background: var(--mj-status-error-bg);   color: var(--mj-status-error-text); }
+.mj-accordion-badge--warning { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }
+.mj-accordion-badge--info    { background: var(--mj-status-info-bg);    color: var(--mj-status-info-text); }
+
+.mj-accordion-panel--disabled > .mj-accordion-header-row { opacity: 0.5; }
+.mj-accordion-panel--disabled > .mj-accordion-header-row > .mj-accordion-header,
+.mj-accordion-panel--disabled > .mj-accordion-header-row > .mj-accordion-chevron { cursor: not-allowed; }
+
+/* ── Density (Size="sm") — tighter padding + smaller text for dense contexts.
+   Child-combinator-scoped so a default panel nested inside a Size="sm" panel
+   doesn't inherit the dense styling. ── */
+.mj-accordion-panel--sm {
+  > .mj-accordion-header-row > .mj-accordion-header { padding: 8px 12px; font-size: var(--mj-text-xs); }
+  > .mj-accordion-header-row > .mj-accordion-actions { padding-right: 4px; }
+  > .mj-accordion-header-row > .mj-accordion-chevron { padding: 0 12px; }
+  > .mj-accordion-body-outer > .mj-accordion-body-clip > .mj-accordion-body { padding: 10px 12px; }
+}
+
+/* ── Bare — drop the box (border + header background) so the panel sits cleanly
+   inside a host that already provides chrome (e.g. an expandable card). ── */
+.mj-accordion-panel--bare {
+  border: none;
+  border-radius: 0;
+  > .mj-accordion-header-row { background: transparent; }
+  &.mj-accordion-panel--expanded > .mj-accordion-header-row { border-bottom-color: var(--mj-border-subtle); }
+}
+
+/* ── Flush body — body manages its own padding (code editors, full-bleed grids) ── */
+.mj-accordion-panel--flush-body .mj-accordion-body { padding: 0; }
+
+/* ── Fill — "rail section that owns the leftover height" (entity tree/grid that
+   fills remaining vertical space and scrolls internally), rather than the default
+   content-height disclosure. Requires the panel's parent to be a flex column with
+   min-height:0. The grid-fr open animation is replaced by flex sizing while
+   expanded; a collapsed fill panel falls back to the normal grid-0fr collapse,
+   so it still sits at natural header height and yields the space to its siblings.
+
+   The host only claims flex space when expanded (.mj-accordion-fill-active), so a
+   collapsed fill panel doesn't hog the rail. ── */
+.mj-accordion-panel-host.mj-accordion-fill-active {
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+/* Direct-child (>) chains throughout so a nested accordion inside a fill panel's
+   body is never affected by this panel's fill/expanded state. */
+.mj-accordion-panel--fill.mj-accordion-panel--expanded {
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+
+  > .mj-accordion-header-row { flex: 0 0 auto; }
+
+  /* Override the grid-fr animation: the body region now fills the column. */
+  > .mj-accordion-body-outer {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    min-height: 0;
+
+    > .mj-accordion-body-clip {
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 0;
+      min-height: 0;
+
+      /* The body is a fill region; projected content supplies its own scroll child. */
+      > .mj-accordion-body {
+        flex: 1 1 0;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        /* Fill mode can't tween the height (it fills the leftover pane, not content
+           height), so it gets a reveal instead: a quick fade + slide-in re-triggered
+           each time the --expanded class is applied. The chevron still rotates. */
+        animation: mj-accordion-fill-reveal var(--mj-transition-base) ease;
+      }
+    }
+  }
+}
+
+@keyframes mj-accordion-fill-reveal {
+  from { opacity: 0; transform: translateY(-6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Emphasis variants (visual hierarchy, brand-colored — not status) ───────
+   Make a panel read bolder/quieter. All driven by brand tokens, so they
+   adapt to dark mode + white-labeling. Set via [Variant] on the panel.
+   The header owns its text colour; custom title slots should inherit it
+   (e.g. `color: inherit`) so the bold `primary` reads correctly. */
+
+/* secondary — subtle brand tint */
+.mj-accordion-panel[data-variant='secondary'] {
+  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-default));
+  > .mj-accordion-header-row { background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface)); }
+  &:not(.mj-accordion-panel--disabled) > .mj-accordion-header-row:hover { background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface)); }
+  > .mj-accordion-header-row .mj-accordion-header { color: var(--mj-brand-primary); }
+  > .mj-accordion-header-row .mj-accordion-icon { color: var(--mj-brand-primary); }
+  &.mj-accordion-panel--expanded > .mj-accordion-header-row {
+    border-bottom-color: color-mix(in srgb, var(--mj-brand-primary) 22%, var(--mj-border-default));
+  }
+}
 
-.mj-accordion-panel--disabled .mj-accordion-header {
-  opacity: 0.5;
-  cursor: not-allowed;
-  &:hover { background: var(--mj-bg-surface-sunken); }
+/* primary — bold, solid brand header (its own colour separates it; no extra line) */
+.mj-accordion-panel[data-variant='primary'] {
+  border-color: var(--mj-brand-primary);
+  > .mj-accordion-header-row { background: var(--mj-brand-primary); }
+  &:not(.mj-accordion-panel--disabled) > .mj-accordion-header-row:hover { background: var(--mj-brand-primary-hover); }
+  > .mj-accordion-header-row .mj-accordion-header { color: var(--mj-text-inverse); }
+  > .mj-accordion-header-row .mj-accordion-icon { color: var(--mj-text-inverse); }
+  &.mj-accordion-panel--expanded > .mj-accordion-header-row { border-bottom-color: transparent; }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .mj-accordion-icon { transition: none; }
+  .mj-accordion-body-outer { transition: none; }
+  .mj-accordion-panel--fill.mj-accordion-panel--expanded > .mj-accordion-body-outer > .mj-accordion-body-clip > .mj-accordion-body { animation: none; }
 }

package/dist/lib/alert/alert.component.d.ts

@@ -0,0 +1,97 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Visual intent of an `<mj-alert>`. Drives the color treatment and the default
+ * icon, so callers don't restate either for the common cases.
+ *
+ * - `info`    — neutral informational notice (default).
+ * - `success` — a positive confirmation that stays on screen.
+ * - `warning` — a non-blocking caution.
+ * - `error`   — a failure / blocking problem.
+ */
+export type MJAlertVariant = 'info' | 'success' | 'warning' | 'error';
+/** Density of an `<mj-alert>` — controls padding and font size. */
+export type MJAlertSize = 'sm' | 'md';
+/**
+ * mj-alert — Canonical inline alert / banner. The persistent, in-flow message box
+ * (info / success / warning / error) — NOT the transient corner toast (that's
+ * `NotificationService` from `@memberjunction/ng-notifications`).
+ *
+ * Replaces the ~50 hand-rolled `.error-message` / `.alert` / `.warning-banner`
+ * `<div>`s that pages each style themselves, e.g.:
+ * ```html
+ * <div class="error-message">
+ *   <i class="fa-solid fa-circle-exclamation"></i> Couldn't save changes.
+ * </div>
+ * ```
+ *
+ * Usage:
+ * ```html
+ * <!-- Simplest -->
+ * <mj-alert Variant="error" Message="Couldn't save changes." />
+ *
+ * <!-- Title + message + dismiss -->
+ * <mj-alert Variant="warning" Title="Unsaved changes"
+ *           Message="Leaving now will discard them." Dismissible
+ *           (Dismissed)="onDismiss()" />
+ *
+ * <!-- Rich body + action buttons -->
+ * <mj-alert Variant="info" Title="Read-only mode">
+ *   You don't have edit permission for this record.
+ *   <button mjButton variant="primary" actions (click)="requestAccess()">Request access</button>
+ * </mj-alert>
+ * ```
+ *
+ * Colors come from the `--mj-status-*` design tokens, so it's dark-mode-safe and
+ * themeable. The host gets an ARIA live role (`alert` for error/warning, `status`
+ * for info/success) so dynamically-shown alerts announce themselves.
+ */
+export declare class MJAlertComponent {
+    /** Visual intent — drives color + default icon. Defaults to 'info'. */
+    Variant: MJAlertVariant;
+    /** Density — 'sm' tightens padding/font for inline/dense placements. */
+    Size: MJAlertSize;
+    /** Optional bold lead line. */
+    Title: string;
+    /** Body text. For rich content, project default `<ng-content>` instead. */
+    Message: string;
+    /**
+     * Font Awesome icon class (e.g. "fa-solid fa-key"). When omitted, a sensible
+     * default is chosen from `Variant`. Set to `''` to render no icon.
+     */
+    Icon: string | null;
+    /** Show a dismiss (×) button. Accepts a bare attribute (`Dismissible`) or `[Dismissible]="expr"`. */
+    Dismissible: boolean;
+    /**
+     * ARIA live role on the host. When unset, defaults from `Variant`:
+     * `error`/`warning` → `'alert'` (assertive), `info`/`success` → `'status'`
+     * (polite), so a dynamically-shown alert announces itself. Pass `''` to opt out.
+     */
+    Role: string | null;
+    /** Fired when the user dismisses the alert. */
+    Dismissed: EventEmitter<void>;
+    protected isDismissed: boolean;
+    get IsInfo(): boolean;
+    get IsSuccess(): boolean;
+    get IsWarning(): boolean;
+    get IsError(): boolean;
+    get IsSmall(): boolean;
+    get IsHidden(): boolean;
+    /**
+     * Live-region role applied to the host. Explicit `Role` wins (`''` ⇒ no role);
+     * otherwise error/warning are an assertive `alert`, info/success a polite `status`.
+     */
+    get HostRole(): string | null;
+    /**
+     * Icon actually rendered: the explicit `Icon` when provided (including ""
+     * to suppress the icon), otherwise the per-variant default.
+     */
+    get ResolvedIcon(): string;
+    /** Default Font Awesome icon for each variant. */
+    static DefaultIconForVariant(variant: MJAlertVariant): string;
+    Dismiss(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJAlertComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJAlertComponent, "mj-alert", never, { "Variant": { "alias": "Variant"; "required": false; }; "Size": { "alias": "Size"; "required": false; }; "Title": { "alias": "Title"; "required": false; }; "Message": { "alias": "Message"; "required": false; }; "Icon": { "alias": "Icon"; "required": false; }; "Dismissible": { "alias": "Dismissible"; "required": false; }; "Role": { "alias": "Role"; "required": false; }; }, { "Dismissed": "Dismissed"; }, never, ["*", "[actions]"], true, never>;
+    static ngAcceptInputType_Dismissible: unknown;
+}
+//# sourceMappingURL=alert.component.d.ts.map

package/dist/lib/alert/alert.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.component.d.ts","sourceRoot":"","sources":["../../../src/lib/alert/alert.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,YAAY,EAA8B,MAAM,eAAe,CAAC;;AAEtG;;;;;;;;GAQG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtE,mEAAmE;AACnE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;AAStC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBA0Ha,gBAAgB;IAC3B,uEAAuE;IAC9D,OAAO,EAAE,cAAc,CAAU;IAE1C,wEAAwE;IAC/D,IAAI,EAAE,WAAW,CAAQ;IAElC,+BAA+B;IACtB,KAAK,SAAM;IAEpB,2EAA2E;IAClE,OAAO,SAAM;IAEtB;;;OAGG;IACM,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpC,qGAAqG;IAC7D,WAAW,UAAS;IAE5D;;;;OAIG;IACM,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpC,+CAA+C;IACrC,SAAS,qBAA4B;IAE/C,SAAS,CAAC,WAAW,UAAS;IAI9B,IAAyC,MAAM,IAAI,OAAO,CAAoC;IAC9F,IAA4C,SAAS,IAAI,OAAO,CAAuC;IACvG,IAA4C,SAAS,IAAI,OAAO,CAAuC;IACvG,IAA0C,OAAO,IAAI,OAAO,CAAqC;IACjG,IAAuC,OAAO,IAAI,OAAO,CAA+B;IACxF,IAA8C,QAAQ,IAAI,OAAO,CAA6B;IAE9F;;;OAGG;IACH,IACI,QAAQ,IAAI,MAAM,GAAG,IAAI,CAK5B;IAED;;;OAGG;IACH,IAAI,YAAY,IAAI,MAAM,CAKzB;IAED,kDAAkD;IAClD,MAAM,CAAC,qBAAqB,CAAC,OAAO,EAAE,cAAc,GAAG,MAAM;IAI7D,OAAO,IAAI,IAAI;yCAvEJ,gBAAgB;2CAAhB,gBAAgB;0CA4Ewj3L,OAAQ;CAD5l3L"}

package/dist/lib/alert/alert.component.js

@@ -0,0 +1,235 @@
+import { booleanAttribute, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["*", [["", "actions", ""]]];
+const _c1 = ["*", "[actions]"];
+function MJAlertComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "i", 6);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("mj-alert__icon ", ctx_r0.ResolvedIcon));
+} }
+function MJAlertComponent_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.Title);
+} }
+function MJAlertComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 3);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.Message);
+} }
+function MJAlertComponent_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 7);
+    i0.ɵɵdomListener("click", function MJAlertComponent_Conditional_0_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.Dismiss()); });
+    i0.ɵɵdomElement(1, "i", 8);
+    i0.ɵɵdomElementEnd();
+} }
+function MJAlertComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJAlertComponent_Conditional_0_Conditional_0_Template, 1, 3, "i", 0);
+    i0.ɵɵdomElementStart(1, "div", 1);
+    i0.ɵɵconditionalCreate(2, MJAlertComponent_Conditional_0_Conditional_2_Template, 2, 1, "div", 2);
+    i0.ɵɵconditionalCreate(3, MJAlertComponent_Conditional_0_Conditional_3_Template, 2, 1, "div", 3);
+    i0.ɵɵprojection(4);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "div", 4);
+    i0.ɵɵprojection(6, 1);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(7, MJAlertComponent_Conditional_0_Conditional_7_Template, 2, 0, "button", 5);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r0.ResolvedIcon ? 0 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.Title ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.Message ? 3 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r0.Dismissible ? 7 : -1);
+} }
+const DEFAULT_ICONS = {
+    info: 'fa-solid fa-circle-info',
+    success: 'fa-solid fa-circle-check',
+    warning: 'fa-solid fa-triangle-exclamation',
+    error: 'fa-solid fa-circle-exclamation',
+};
+/**
+ * mj-alert — Canonical inline alert / banner. The persistent, in-flow message box
+ * (info / success / warning / error) — NOT the transient corner toast (that's
+ * `NotificationService` from `@memberjunction/ng-notifications`).
+ *
+ * Replaces the ~50 hand-rolled `.error-message` / `.alert` / `.warning-banner`
+ * `<div>`s that pages each style themselves, e.g.:
+ * ```html
+ * <div class="error-message">
+ *   <i class="fa-solid fa-circle-exclamation"></i> Couldn't save changes.
+ * </div>
+ * ```
+ *
+ * Usage:
+ * ```html
+ * <!-- Simplest -->
+ * <mj-alert Variant="error" Message="Couldn't save changes." />
+ *
+ * <!-- Title + message + dismiss -->
+ * <mj-alert Variant="warning" Title="Unsaved changes"
+ *           Message="Leaving now will discard them." Dismissible
+ *           (Dismissed)="onDismiss()" />
+ *
+ * <!-- Rich body + action buttons -->
+ * <mj-alert Variant="info" Title="Read-only mode">
+ *   You don't have edit permission for this record.
+ *   <button mjButton variant="primary" actions (click)="requestAccess()">Request access</button>
+ * </mj-alert>
+ * ```
+ *
+ * Colors come from the `--mj-status-*` design tokens, so it's dark-mode-safe and
+ * themeable. The host gets an ARIA live role (`alert` for error/warning, `status`
+ * for info/success) so dynamically-shown alerts announce themselves.
+ */
+export class MJAlertComponent {
+    /** Visual intent — drives color + default icon. Defaults to 'info'. */
+    Variant = 'info';
+    /** Density — 'sm' tightens padding/font for inline/dense placements. */
+    Size = 'md';
+    /** Optional bold lead line. */
+    Title = '';
+    /** Body text. For rich content, project default `<ng-content>` instead. */
+    Message = '';
+    /**
+     * Font Awesome icon class (e.g. "fa-solid fa-key"). When omitted, a sensible
+     * default is chosen from `Variant`. Set to `''` to render no icon.
+     */
+    Icon = null;
+    /** Show a dismiss (×) button. Accepts a bare attribute (`Dismissible`) or `[Dismissible]="expr"`. */
+    Dismissible = false;
+    /**
+     * ARIA live role on the host. When unset, defaults from `Variant`:
+     * `error`/`warning` → `'alert'` (assertive), `info`/`success` → `'status'`
+     * (polite), so a dynamically-shown alert announces itself. Pass `''` to opt out.
+     */
+    Role = null;
+    /** Fired when the user dismisses the alert. */
+    Dismissed = new EventEmitter();
+    isDismissed = false;
+    // Host classes — individual ADDITIVE bindings so a consumer's own `class="…"`
+    // on <mj-alert> is never clobbered (a single `@HostBinding('class')` would).
+    get IsInfo() { return this.Variant === 'info'; }
+    get IsSuccess() { return this.Variant === 'success'; }
+    get IsWarning() { return this.Variant === 'warning'; }
+    get IsError() { return this.Variant === 'error'; }
+    get IsSmall() { return this.Size === 'sm'; }
+    get IsHidden() { return this.isDismissed; }
+    /**
+     * Live-region role applied to the host. Explicit `Role` wins (`''` ⇒ no role);
+     * otherwise error/warning are an assertive `alert`, info/success a polite `status`.
+     */
+    get HostRole() {
+        if (this.Role != null) {
+            return this.Role || null;
+        }
+        return this.Variant === 'error' || this.Variant === 'warning' ? 'alert' : 'status';
+    }
+    /**
+     * Icon actually rendered: the explicit `Icon` when provided (including ""
+     * to suppress the icon), otherwise the per-variant default.
+     */
+    get ResolvedIcon() {
+        if (this.Icon != null) {
+            return this.Icon;
+        }
+        return MJAlertComponent.DefaultIconForVariant(this.Variant);
+    }
+    /** Default Font Awesome icon for each variant. */
+    static DefaultIconForVariant(variant) {
+        return DEFAULT_ICONS[variant] ?? DEFAULT_ICONS.info;
+    }
+    Dismiss() {
+        this.isDismissed = true;
+        this.Dismissed.emit();
+    }
+    static ɵfac = function MJAlertComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJAlertComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJAlertComponent, selectors: [["mj-alert"]], hostVars: 13, hostBindings: function MJAlertComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("role", ctx.HostRole);
+            i0.ɵɵclassProp("mj-alert--info", ctx.IsInfo)("mj-alert--success", ctx.IsSuccess)("mj-alert--warning", ctx.IsWarning)("mj-alert--error", ctx.IsError)("mj-alert--sm", ctx.IsSmall)("mj-alert--dismissed", ctx.IsHidden);
+        } }, inputs: { Variant: "Variant", Size: "Size", Title: "Title", Message: "Message", Icon: "Icon", Dismissible: [2, "Dismissible", "Dismissible", booleanAttribute], Role: "Role" }, outputs: { Dismissed: "Dismissed" }, ngContentSelectors: _c1, decls: 1, vars: 1, consts: [["aria-hidden", "true", 3, "class"], [1, "mj-alert__content"], [1, "mj-alert__title"], [1, "mj-alert__message"], [1, "mj-alert__actions"], ["type", "button", "aria-label", "Dismiss", 1, "mj-alert__dismiss"], ["aria-hidden", "true"], ["type", "button", "aria-label", "Dismiss", 1, "mj-alert__dismiss", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"]], template: function MJAlertComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵconditionalCreate(0, MJAlertComponent_Conditional_0_Template, 8, 4);
+        } if (rf & 2) {
+            i0.ɵɵconditional(!ctx.isDismissed ? 0 : -1);
+        } }, styles: ["[_nghost-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--mj-space-3);\n      padding: var(--mj-space-3) var(--mj-space-4);\n      margin-bottom: var(--mj-space-4);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      font-size: var(--mj-text-sm);\n      line-height: 1.45;\n    }\n    \n\n\n\n    [_nghost-%COMP%]:last-child { margin-bottom: 0; }\n    .mj-alert--dismissed[_nghost-%COMP%] { display: none; }\n\n    .mj-alert__icon[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      font-size: 1rem;\n      margin-top: 0.1em;\n    }\n    .mj-alert__content[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n    .mj-alert__title[_ngcontent-%COMP%] { font-weight: var(--mj-font-semibold); }\n    .mj-alert__title[_ngcontent-%COMP%]    + .mj-alert__message[_ngcontent-%COMP%] { margin-top: var(--mj-space-1); }\n    .mj-alert__message[_ngcontent-%COMP%] { color: inherit; opacity: 0.9; }\n\n    .mj-alert__actions[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: var(--mj-space-2);\n      flex-shrink: 0;\n    }\n    .mj-alert__actions[_ngcontent-%COMP%]:empty { display: none; }\n\n    .mj-alert__dismiss[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      border: none;\n      background: transparent;\n      color: inherit;\n      opacity: 0.6;\n      cursor: pointer;\n      padding: 0;\n      width: 20px; height: 20px;\n      display: flex; align-items: center; justify-content: center;\n      border-radius: var(--mj-radius-sm);\n      transition: opacity var(--mj-transition-fast), background var(--mj-transition-fast);\n    }\n    .mj-alert__dismiss[_ngcontent-%COMP%]:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }\n\n    \n\n    .mj-alert--sm[_nghost-%COMP%] {\n      padding: var(--mj-space-2) var(--mj-space-3);\n      font-size: var(--mj-text-xs);\n      gap: var(--mj-space-2);\n    }\n    .mj-alert--sm[_nghost-%COMP%]   .mj-alert__icon[_ngcontent-%COMP%] { font-size: 0.875rem; }\n\n    \n\n\n\n\n\n\n\n    .mj-alert--info[_nghost-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-info) 12%, var(--mj-bg-surface));\n      border-color: var(--mj-status-info-border);\n      color: var(--mj-status-info-text);\n    }\n    .mj-alert--info[_nghost-%COMP%]   .mj-alert__icon[_ngcontent-%COMP%] { color: var(--mj-status-info); }\n\n    .mj-alert--success[_nghost-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n      border-color: var(--mj-status-success-border);\n      color: var(--mj-status-success-text);\n    }\n    .mj-alert--success[_nghost-%COMP%]   .mj-alert__icon[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n\n    .mj-alert--warning[_nghost-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n      border-color: var(--mj-status-warning-border);\n      color: var(--mj-status-warning-text);\n    }\n    .mj-alert--warning[_nghost-%COMP%]   .mj-alert__icon[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n\n    .mj-alert--error[_nghost-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n      border-color: var(--mj-status-error-border);\n      color: var(--mj-status-error-text);\n    }\n    .mj-alert--error[_nghost-%COMP%]   .mj-alert__icon[_ngcontent-%COMP%] { color: var(--mj-status-error); }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAlertComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-alert', standalone: true, template: `
+    @if (!isDismissed) {
+      @if (ResolvedIcon) {
+        <i class="mj-alert__icon {{ ResolvedIcon }}" aria-hidden="true"></i>
+      }
+      <div class="mj-alert__content">
+        @if (Title) {
+          <div class="mj-alert__title">{{ Title }}</div>
+        }
+        @if (Message) {
+          <div class="mj-alert__message">{{ Message }}</div>
+        }
+        <ng-content></ng-content>
+      </div>
+      <div class="mj-alert__actions">
+        <ng-content select="[actions]"></ng-content>
+      </div>
+      @if (Dismissible) {
+        <button type="button" class="mj-alert__dismiss" aria-label="Dismiss" (click)="Dismiss()">
+          <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+        </button>
+      }
+    }
+  `, styles: ["\n    :host {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--mj-space-3);\n      padding: var(--mj-space-3) var(--mj-space-4);\n      margin-bottom: var(--mj-space-4);\n      border: 1px solid var(--mj-border-default);\n      border-radius: var(--mj-radius-md);\n      font-size: var(--mj-text-sm);\n      line-height: 1.45;\n    }\n    /* Alerts are flow content almost always followed by other content, so they\n       carry a default bottom margin (like a <p>; cf. Bootstrap's .alert). When an\n       alert is the only/last child of its container, drop the trailing gap. */\n    :host(:last-child) { margin-bottom: 0; }\n    :host(.mj-alert--dismissed) { display: none; }\n\n    .mj-alert__icon {\n      flex-shrink: 0;\n      font-size: 1rem;\n      margin-top: 0.1em;\n    }\n    .mj-alert__content { flex: 1; min-width: 0; }\n    .mj-alert__title { font-weight: var(--mj-font-semibold); }\n    .mj-alert__title + .mj-alert__message { margin-top: var(--mj-space-1); }\n    .mj-alert__message { color: inherit; opacity: 0.9; }\n\n    .mj-alert__actions {\n      display: flex;\n      align-items: center;\n      gap: var(--mj-space-2);\n      flex-shrink: 0;\n    }\n    .mj-alert__actions:empty { display: none; }\n\n    .mj-alert__dismiss {\n      flex-shrink: 0;\n      border: none;\n      background: transparent;\n      color: inherit;\n      opacity: 0.6;\n      cursor: pointer;\n      padding: 0;\n      width: 20px; height: 20px;\n      display: flex; align-items: center; justify-content: center;\n      border-radius: var(--mj-radius-sm);\n      transition: opacity var(--mj-transition-fast), background var(--mj-transition-fast);\n    }\n    .mj-alert__dismiss:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }\n\n    /* \u2500\u2500 Density \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n    :host(.mj-alert--sm) {\n      padding: var(--mj-space-2) var(--mj-space-3);\n      font-size: var(--mj-text-xs);\n      gap: var(--mj-space-2);\n    }\n    :host(.mj-alert--sm) .mj-alert__icon { font-size: 0.875rem; }\n\n    /* \u2500\u2500 Variants (token-driven, dark-mode-safe) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Background is an OPAQUE tint (status color mixed into the surface), NOT the\n       translucent --mj-status-*-bg token. Translucent backgrounds let whatever\n       sits behind the alert show through, so the same alert rendered on two\n       different dialog backdrops looked different. An opaque tint is identical\n       regardless of what's behind it, and still adapts to light/dark via the\n       surface + status tokens. */\n    :host(.mj-alert--info) {\n      background: color-mix(in srgb, var(--mj-status-info) 12%, var(--mj-bg-surface));\n      border-color: var(--mj-status-info-border);\n      color: var(--mj-status-info-text);\n    }\n    :host(.mj-alert--info) .mj-alert__icon { color: var(--mj-status-info); }\n\n    :host(.mj-alert--success) {\n      background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n      border-color: var(--mj-status-success-border);\n      color: var(--mj-status-success-text);\n    }\n    :host(.mj-alert--success) .mj-alert__icon { color: var(--mj-status-success); }\n\n    :host(.mj-alert--warning) {\n      background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n      border-color: var(--mj-status-warning-border);\n      color: var(--mj-status-warning-text);\n    }\n    :host(.mj-alert--warning) .mj-alert__icon { color: var(--mj-status-warning); }\n\n    :host(.mj-alert--error) {\n      background: color-mix(in srgb, var(--mj-status-error) 12%, var(--mj-bg-surface));\n      border-color: var(--mj-status-error-border);\n      color: var(--mj-status-error-text);\n    }\n    :host(.mj-alert--error) .mj-alert__icon { color: var(--mj-status-error); }\n  "] }]
+    }], null, { Variant: [{
+            type: Input
+        }], Size: [{
+            type: Input
+        }], Title: [{
+            type: Input
+        }], Message: [{
+            type: Input
+        }], Icon: [{
+            type: Input
+        }], Dismissible: [{
+            type: Input,
+            args: [{ transform: booleanAttribute }]
+        }], Role: [{
+            type: Input
+        }], Dismissed: [{
+            type: Output
+        }], IsInfo: [{
+            type: HostBinding,
+            args: ['class.mj-alert--info']
+        }], IsSuccess: [{
+            type: HostBinding,
+            args: ['class.mj-alert--success']
+        }], IsWarning: [{
+            type: HostBinding,
+            args: ['class.mj-alert--warning']
+        }], IsError: [{
+            type: HostBinding,
+            args: ['class.mj-alert--error']
+        }], IsSmall: [{
+            type: HostBinding,
+            args: ['class.mj-alert--sm']
+        }], IsHidden: [{
+            type: HostBinding,
+            args: ['class.mj-alert--dismissed']
+        }], HostRole: [{
+            type: HostBinding,
+            args: ['attr.role']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJAlertComponent, { className: "MJAlertComponent", filePath: "lib/alert/alert.component.ts", lineNumber: 180 }); })();
+//# sourceMappingURL=alert.component.js.map