@memberjunction/ng-ui-components 5.43.0 → 5.44.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/accordion/accordion.component.d.ts +137 -2
- package/dist/lib/accordion/accordion.component.d.ts.map +1 -1
- package/dist/lib/accordion/accordion.component.js +300 -43
- package/dist/lib/accordion/accordion.component.js.map +1 -1
- package/dist/lib/accordion/accordion.scss +256 -13
- package/dist/lib/alert/alert.component.d.ts +97 -0
- package/dist/lib/alert/alert.component.d.ts.map +1 -0
- package/dist/lib/alert/alert.component.js +235 -0
- package/dist/lib/alert/alert.component.js.map +1 -0
- package/dist/lib/empty-state/empty-state.component.d.ts +114 -0
- package/dist/lib/empty-state/empty-state.component.d.ts.map +1 -0
- package/dist/lib/empty-state/empty-state.component.js +268 -0
- package/dist/lib/empty-state/empty-state.component.js.map +1 -0
- package/dist/public-api.d.ts +2 -0
- package/dist/public-api.d.ts.map +1 -1
- package/dist/public-api.js +2 -0
- package/dist/public-api.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert.component.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { booleanAttribute, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\n\n/**\n * Visual intent of an `<mj-alert>`. Drives the color treatment and the default\n * icon, so callers don't restate either for the common cases.\n *\n * - `info` — neutral informational notice (default).\n * - `success` — a positive confirmation that stays on screen.\n * - `warning` — a non-blocking caution.\n * - `error` — a failure / blocking problem.\n */\nexport type MJAlertVariant = 'info' | 'success' | 'warning' | 'error';\n\n/** Density of an `<mj-alert>` — controls padding and font size. */\nexport type MJAlertSize = 'sm' | 'md';\n\nconst DEFAULT_ICONS: Record<MJAlertVariant, string> = {\n info: 'fa-solid fa-circle-info',\n success: 'fa-solid fa-circle-check',\n warning: 'fa-solid fa-triangle-exclamation',\n error: 'fa-solid fa-circle-exclamation',\n};\n\n/**\n * mj-alert — Canonical inline alert / banner. The persistent, in-flow message box\n * (info / success / warning / error) — NOT the transient corner toast (that's\n * `NotificationService` from `@memberjunction/ng-notifications`).\n *\n * Replaces the ~50 hand-rolled `.error-message` / `.alert` / `.warning-banner`\n * `<div>`s that pages each style themselves, e.g.:\n * ```html\n * <div class=\"error-message\">\n * <i class=\"fa-solid fa-circle-exclamation\"></i> Couldn't save changes.\n * </div>\n * ```\n *\n * Usage:\n * ```html\n * <!-- Simplest -->\n * <mj-alert Variant=\"error\" Message=\"Couldn't save changes.\" />\n *\n * <!-- Title + message + dismiss -->\n * <mj-alert Variant=\"warning\" Title=\"Unsaved changes\"\n * Message=\"Leaving now will discard them.\" Dismissible\n * (Dismissed)=\"onDismiss()\" />\n *\n * <!-- Rich body + action buttons -->\n * <mj-alert Variant=\"info\" Title=\"Read-only mode\">\n * You don't have edit permission for this record.\n * <button mjButton variant=\"primary\" actions (click)=\"requestAccess()\">Request access</button>\n * </mj-alert>\n * ```\n *\n * Colors come from the `--mj-status-*` design tokens, so it's dark-mode-safe and\n * themeable. The host gets an ARIA live role (`alert` for error/warning, `status`\n * for info/success) so dynamically-shown alerts announce themselves.\n */\n@Component({\n selector: 'mj-alert',\n standalone: true,\n template: `\n @if (!isDismissed) {\n @if (ResolvedIcon) {\n <i class=\"mj-alert__icon {{ ResolvedIcon }}\" aria-hidden=\"true\"></i>\n }\n <div class=\"mj-alert__content\">\n @if (Title) {\n <div class=\"mj-alert__title\">{{ Title }}</div>\n }\n @if (Message) {\n <div class=\"mj-alert__message\">{{ Message }}</div>\n }\n <ng-content></ng-content>\n </div>\n <div class=\"mj-alert__actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n @if (Dismissible) {\n <button type=\"button\" class=\"mj-alert__dismiss\" aria-label=\"Dismiss\" (click)=\"Dismiss()\">\n <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n </button>\n }\n }\n `,\n 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 /* ── Density ───────────────────────────────────────────────── */\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 /* ── Variants (token-driven, dark-mode-safe) ───────────────────\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 `]\n})\nexport class MJAlertComponent {\n /** Visual intent — drives color + default icon. Defaults to 'info'. */\n @Input() Variant: MJAlertVariant = 'info';\n\n /** Density — 'sm' tightens padding/font for inline/dense placements. */\n @Input() Size: MJAlertSize = 'md';\n\n /** Optional bold lead line. */\n @Input() Title = '';\n\n /** Body text. For rich content, project default `<ng-content>` instead. */\n @Input() Message = '';\n\n /**\n * Font Awesome icon class (e.g. \"fa-solid fa-key\"). When omitted, a sensible\n * default is chosen from `Variant`. Set to `''` to render no icon.\n */\n @Input() Icon: string | null = null;\n\n /** Show a dismiss (×) button. Accepts a bare attribute (`Dismissible`) or `[Dismissible]=\"expr\"`. */\n @Input({ transform: booleanAttribute }) Dismissible = false;\n\n /**\n * ARIA live role on the host. When unset, defaults from `Variant`:\n * `error`/`warning` → `'alert'` (assertive), `info`/`success` → `'status'`\n * (polite), so a dynamically-shown alert announces itself. Pass `''` to opt out.\n */\n @Input() Role: string | null = null;\n\n /** Fired when the user dismisses the alert. */\n @Output() Dismissed = new EventEmitter<void>();\n\n protected isDismissed = false;\n\n // Host classes — individual ADDITIVE bindings so a consumer's own `class=\"…\"`\n // on <mj-alert> is never clobbered (a single `@HostBinding('class')` would).\n @HostBinding('class.mj-alert--info') get IsInfo(): boolean { return this.Variant === 'info'; }\n @HostBinding('class.mj-alert--success') get IsSuccess(): boolean { return this.Variant === 'success'; }\n @HostBinding('class.mj-alert--warning') get IsWarning(): boolean { return this.Variant === 'warning'; }\n @HostBinding('class.mj-alert--error') get IsError(): boolean { return this.Variant === 'error'; }\n @HostBinding('class.mj-alert--sm') get IsSmall(): boolean { return this.Size === 'sm'; }\n @HostBinding('class.mj-alert--dismissed') get IsHidden(): boolean { return this.isDismissed; }\n\n /**\n * Live-region role applied to the host. Explicit `Role` wins (`''` ⇒ no role);\n * otherwise error/warning are an assertive `alert`, info/success a polite `status`.\n */\n @HostBinding('attr.role')\n get HostRole(): string | null {\n if (this.Role != null) {\n return this.Role || null;\n }\n return this.Variant === 'error' || this.Variant === 'warning' ? 'alert' : 'status';\n }\n\n /**\n * Icon actually rendered: the explicit `Icon` when provided (including \"\"\n * to suppress the icon), otherwise the per-variant default.\n */\n get ResolvedIcon(): string {\n if (this.Icon != null) {\n return this.Icon;\n }\n return MJAlertComponent.DefaultIconForVariant(this.Variant);\n }\n\n /** Default Font Awesome icon for each variant. */\n static DefaultIconForVariant(variant: MJAlertVariant): string {\n return DEFAULT_ICONS[variant] ?? DEFAULT_ICONS.info;\n }\n\n Dismiss(): void {\n this.isDismissed = true;\n this.Dismissed.emit();\n }\n}\n"]}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { EventEmitter } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
/**
|
|
4
|
+
* Visual intent of an `<mj-empty-state>`. Drives the default icon and the icon's
|
|
5
|
+
* color treatment so callers don't restate either for the common cases.
|
|
6
|
+
*
|
|
7
|
+
* - `empty` — nothing exists yet (default). Neutral/disabled icon tone.
|
|
8
|
+
* - `no-results` — a search/filter matched nothing. Muted icon tone, magnifier default.
|
|
9
|
+
* - `success` — a positive "all clear" empty (e.g. "No Errors Found"). Success icon tone, check default.
|
|
10
|
+
* - `warning` — a non-error blocking condition (disabled/misconfigured feature). Warning icon tone.
|
|
11
|
+
* - `error` — a load/operation failed. Error icon tone, triangle default.
|
|
12
|
+
*/
|
|
13
|
+
export type MJEmptyStateVariant = 'empty' | 'no-results' | 'success' | 'warning' | 'error';
|
|
14
|
+
/** Density of an `<mj-empty-state>` — controls padding and icon size. */
|
|
15
|
+
export type MJEmptyStateSize = 'compact' | 'default' | 'large';
|
|
16
|
+
/**
|
|
17
|
+
* mj-empty-state — Canonical centered empty/no-results/error placeholder.
|
|
18
|
+
*
|
|
19
|
+
* Replaces the ~213 inline empty-state `<div>`s that pages were each hand-rolling
|
|
20
|
+
* (icon + title + message, optionally a CTA), e.g.:
|
|
21
|
+
* ```html
|
|
22
|
+
* <div class="empty-state">
|
|
23
|
+
* <i class="fa-solid fa-inbox"></i>
|
|
24
|
+
* <h3>No Permissions Found</h3>
|
|
25
|
+
* <p>Try adjusting your filters or refresh the data.</p>
|
|
26
|
+
* <button mjButton variant="primary" (click)="refreshData()">Refresh</button>
|
|
27
|
+
* </div>
|
|
28
|
+
* ```
|
|
29
|
+
*
|
|
30
|
+
* Usage:
|
|
31
|
+
* ```html
|
|
32
|
+
* <!-- Simplest: nothing-here placeholder -->
|
|
33
|
+
* <mj-empty-state Title="No runs found" Message="No runs match the selected filters." />
|
|
34
|
+
*
|
|
35
|
+
* <!-- Search/filter produced nothing -->
|
|
36
|
+
* <mj-empty-state Variant="no-results" Title="No icons found" Message="Try a different search term." />
|
|
37
|
+
*
|
|
38
|
+
* <!-- Load failed, retry CTA -->
|
|
39
|
+
* <mj-empty-state Variant="error" Title="Couldn't load permissions" [Message]="error"
|
|
40
|
+
* ActionText="Try Again" ActionIcon="fa-solid fa-rotate-right" (Action)="loadData()" />
|
|
41
|
+
*
|
|
42
|
+
* <!-- Invitation to create the first record -->
|
|
43
|
+
* <mj-empty-state Icon="fa-solid fa-key" Title="No API keys yet"
|
|
44
|
+
* Message="Generate a key to start calling the API."
|
|
45
|
+
* ActionText="Generate Your First Key" ActionIcon="fa-solid fa-plus"
|
|
46
|
+
* (Action)="requestCreate()" />
|
|
47
|
+
*
|
|
48
|
+
* <!-- Multiple / bespoke CTAs: project them into the [actions] slot -->
|
|
49
|
+
* <mj-empty-state Title="No pinned items yet" Message="Pin dashboards for quick access.">
|
|
50
|
+
* <button mjButton variant="primary" (click)="addPin()">Add your first pin</button>
|
|
51
|
+
* <button mjButton variant="flat" (click)="dismiss()">Don't show again</button>
|
|
52
|
+
* </mj-empty-state>
|
|
53
|
+
* ```
|
|
54
|
+
*
|
|
55
|
+
* For dynamic messages (e.g. "No keys matching X" vs "No keys yet"), compute the
|
|
56
|
+
* string in the parent and bind it to `[Message]`, or project richer body content
|
|
57
|
+
* as default `<ng-content>` (rendered between the message and the actions).
|
|
58
|
+
*/
|
|
59
|
+
export declare class MJEmptyStateComponent {
|
|
60
|
+
/**
|
|
61
|
+
* Font Awesome icon class string (e.g. "fa-solid fa-key"). When omitted, a
|
|
62
|
+
* sensible default is chosen from `Variant`. Pass an empty string AND no
|
|
63
|
+
* variant default applies — set this explicitly to "" to render no icon.
|
|
64
|
+
*/
|
|
65
|
+
Icon: string | null;
|
|
66
|
+
/** Bold heading line (e.g. "No API keys yet"). */
|
|
67
|
+
Title: string;
|
|
68
|
+
/** Supporting/help text below the title. */
|
|
69
|
+
Message: string;
|
|
70
|
+
/** When set, renders a primary CTA button with this label. */
|
|
71
|
+
ActionText: string;
|
|
72
|
+
/** Optional Font Awesome icon shown inside the CTA button. */
|
|
73
|
+
ActionIcon: string;
|
|
74
|
+
/** mjButton variant for the built-in CTA. Defaults to 'primary'. */
|
|
75
|
+
ActionVariant: 'primary' | 'secondary' | 'outline' | 'flat';
|
|
76
|
+
/** Visual intent — drives the default icon and icon color. Defaults to 'empty'. */
|
|
77
|
+
Variant: MJEmptyStateVariant;
|
|
78
|
+
/** Density — controls padding and icon size. Defaults to 'default'. */
|
|
79
|
+
Size: MJEmptyStateSize;
|
|
80
|
+
/**
|
|
81
|
+
* ARIA live-region role on the host. When unset, it defaults from `Variant`:
|
|
82
|
+
* `error` → `'alert'` (assertive), everything else → `'status'` (polite). This
|
|
83
|
+
* makes a dynamically-appearing empty state announce itself to screen readers —
|
|
84
|
+
* the title + message are read together via the role's implicit
|
|
85
|
+
* `aria-live`/`aria-atomic`. (Empty states present at page load are not
|
|
86
|
+
* announced, per the live-region spec, so static placeholders stay quiet.)
|
|
87
|
+
* Pass an explicit role to override, or `''` to opt out of the live region.
|
|
88
|
+
*/
|
|
89
|
+
Role: string | null;
|
|
90
|
+
/** Emitted when the built-in CTA button is clicked. */
|
|
91
|
+
Action: EventEmitter<MouseEvent>;
|
|
92
|
+
get IsCompact(): boolean;
|
|
93
|
+
get IsLarge(): boolean;
|
|
94
|
+
get IsNoResults(): boolean;
|
|
95
|
+
get IsSuccess(): boolean;
|
|
96
|
+
get IsWarning(): boolean;
|
|
97
|
+
get IsError(): boolean;
|
|
98
|
+
/**
|
|
99
|
+
* Live-region role applied to the host. Explicit `Role` wins (`''` ⇒ no role);
|
|
100
|
+
* otherwise an error state is an assertive `alert`, everything else a polite `status`.
|
|
101
|
+
*/
|
|
102
|
+
get HostRole(): string | null;
|
|
103
|
+
/**
|
|
104
|
+
* Icon actually rendered: the explicit `Icon` when provided (including ""
|
|
105
|
+
* to suppress the icon), otherwise the per-variant default.
|
|
106
|
+
*/
|
|
107
|
+
get ResolvedIcon(): string;
|
|
108
|
+
/** Default Font Awesome icon for each variant. */
|
|
109
|
+
static DefaultIconForVariant(variant: MJEmptyStateVariant): string;
|
|
110
|
+
OnAction(event: MouseEvent): void;
|
|
111
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MJEmptyStateComponent, never>;
|
|
112
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MJEmptyStateComponent, "mj-empty-state", never, { "Icon": { "alias": "Icon"; "required": false; }; "Title": { "alias": "Title"; "required": false; }; "Message": { "alias": "Message"; "required": false; }; "ActionText": { "alias": "ActionText"; "required": false; }; "ActionIcon": { "alias": "ActionIcon"; "required": false; }; "ActionVariant": { "alias": "ActionVariant"; "required": false; }; "Variant": { "alias": "Variant"; "required": false; }; "Size": { "alias": "Size"; "required": false; }; "Role": { "alias": "Role"; "required": false; }; }, { "Action": "Action"; }, never, ["*", "[actions]"], true, never>;
|
|
113
|
+
}
|
|
114
|
+
//# sourceMappingURL=empty-state.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"empty-state.component.d.ts","sourceRoot":"","sources":["../../../src/lib/empty-state/empty-state.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAA8B,MAAM,eAAe,CAAC;;AAGpF;;;;;;;;;GASG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3F,yEAAyE;AACzE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBA6Ga,qBAAqB;IAChC;;;;OAIG;IACM,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpC,kDAAkD;IACzC,KAAK,EAAE,MAAM,CAAM;IAE5B,4CAA4C;IACnC,OAAO,EAAE,MAAM,CAAM;IAE9B,8DAA8D;IACrD,UAAU,EAAE,MAAM,CAAM;IAEjC,8DAA8D;IACrD,UAAU,EAAE,MAAM,CAAM;IAEjC,oEAAoE;IAC3D,aAAa,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAAa;IAEjF,mFAAmF;IAC1E,OAAO,EAAE,mBAAmB,CAAW;IAEhD,uEAAuE;IAC9D,IAAI,EAAE,gBAAgB,CAAa;IAE5C;;;;;;;;OAQG;IACM,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpC,uDAAuD;IAC7C,MAAM,2BAAkC;IAElD,IACI,SAAS,IAAI,OAAO,CAAoC;IAE5D,IACI,OAAO,IAAI,OAAO,CAAkC;IAExD,IACI,WAAW,IAAI,OAAO,CAA0C;IAEpE,IACI,SAAS,IAAI,OAAO,CAAuC;IAE/D,IACI,SAAS,IAAI,OAAO,CAAuC;IAE/D,IACI,OAAO,IAAI,OAAO,CAAqC;IAE3D;;;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,mBAAmB,GAAG,MAAM;IAelE,QAAQ,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;yCApGtB,qBAAqB;2CAArB,qBAAqB;CAuGjC"}
|
|
@@ -0,0 +1,268 @@
|
|
|
1
|
+
import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
|
|
2
|
+
import { MJButtonDirective } from '../button/button.directive';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
const _c0 = ["*", [["", "actions", ""]]];
|
|
5
|
+
const _c1 = ["*", "[actions]"];
|
|
6
|
+
function MJEmptyStateComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
7
|
+
i0.ɵɵelement(0, "i", 5);
|
|
8
|
+
} if (rf & 2) {
|
|
9
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
10
|
+
i0.ɵɵclassMap(i0.ɵɵinterpolate1("mj-empty-state__icon ", ctx_r0.ResolvedIcon));
|
|
11
|
+
} }
|
|
12
|
+
function MJEmptyStateComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
13
|
+
i0.ɵɵelementStart(0, "h3", 1);
|
|
14
|
+
i0.ɵɵtext(1);
|
|
15
|
+
i0.ɵɵelementEnd();
|
|
16
|
+
} if (rf & 2) {
|
|
17
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
18
|
+
i0.ɵɵadvance();
|
|
19
|
+
i0.ɵɵtextInterpolate(ctx_r0.Title);
|
|
20
|
+
} }
|
|
21
|
+
function MJEmptyStateComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
22
|
+
i0.ɵɵelementStart(0, "p", 2);
|
|
23
|
+
i0.ɵɵtext(1);
|
|
24
|
+
i0.ɵɵelementEnd();
|
|
25
|
+
} if (rf & 2) {
|
|
26
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
27
|
+
i0.ɵɵadvance();
|
|
28
|
+
i0.ɵɵtextInterpolate(ctx_r0.Message);
|
|
29
|
+
} }
|
|
30
|
+
function MJEmptyStateComponent_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
31
|
+
i0.ɵɵelement(0, "i", 5);
|
|
32
|
+
} if (rf & 2) {
|
|
33
|
+
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
34
|
+
i0.ɵɵclassMap(ctx_r0.ActionIcon);
|
|
35
|
+
} }
|
|
36
|
+
function MJEmptyStateComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
37
|
+
const _r2 = i0.ɵɵgetCurrentView();
|
|
38
|
+
i0.ɵɵelementStart(0, "button", 6);
|
|
39
|
+
i0.ɵɵlistener("click", function MJEmptyStateComponent_Conditional_5_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnAction($event)); });
|
|
40
|
+
i0.ɵɵconditionalCreate(1, MJEmptyStateComponent_Conditional_5_Conditional_1_Template, 1, 2, "i", 0);
|
|
41
|
+
i0.ɵɵtext(2);
|
|
42
|
+
i0.ɵɵelementEnd();
|
|
43
|
+
} if (rf & 2) {
|
|
44
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
45
|
+
i0.ɵɵproperty("variant", ctx_r0.ActionVariant);
|
|
46
|
+
i0.ɵɵadvance();
|
|
47
|
+
i0.ɵɵconditional(ctx_r0.ActionIcon ? 1 : -1);
|
|
48
|
+
i0.ɵɵadvance();
|
|
49
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r0.ActionText, " ");
|
|
50
|
+
} }
|
|
51
|
+
/**
|
|
52
|
+
* mj-empty-state — Canonical centered empty/no-results/error placeholder.
|
|
53
|
+
*
|
|
54
|
+
* Replaces the ~213 inline empty-state `<div>`s that pages were each hand-rolling
|
|
55
|
+
* (icon + title + message, optionally a CTA), e.g.:
|
|
56
|
+
* ```html
|
|
57
|
+
* <div class="empty-state">
|
|
58
|
+
* <i class="fa-solid fa-inbox"></i>
|
|
59
|
+
* <h3>No Permissions Found</h3>
|
|
60
|
+
* <p>Try adjusting your filters or refresh the data.</p>
|
|
61
|
+
* <button mjButton variant="primary" (click)="refreshData()">Refresh</button>
|
|
62
|
+
* </div>
|
|
63
|
+
* ```
|
|
64
|
+
*
|
|
65
|
+
* Usage:
|
|
66
|
+
* ```html
|
|
67
|
+
* <!-- Simplest: nothing-here placeholder -->
|
|
68
|
+
* <mj-empty-state Title="No runs found" Message="No runs match the selected filters." />
|
|
69
|
+
*
|
|
70
|
+
* <!-- Search/filter produced nothing -->
|
|
71
|
+
* <mj-empty-state Variant="no-results" Title="No icons found" Message="Try a different search term." />
|
|
72
|
+
*
|
|
73
|
+
* <!-- Load failed, retry CTA -->
|
|
74
|
+
* <mj-empty-state Variant="error" Title="Couldn't load permissions" [Message]="error"
|
|
75
|
+
* ActionText="Try Again" ActionIcon="fa-solid fa-rotate-right" (Action)="loadData()" />
|
|
76
|
+
*
|
|
77
|
+
* <!-- Invitation to create the first record -->
|
|
78
|
+
* <mj-empty-state Icon="fa-solid fa-key" Title="No API keys yet"
|
|
79
|
+
* Message="Generate a key to start calling the API."
|
|
80
|
+
* ActionText="Generate Your First Key" ActionIcon="fa-solid fa-plus"
|
|
81
|
+
* (Action)="requestCreate()" />
|
|
82
|
+
*
|
|
83
|
+
* <!-- Multiple / bespoke CTAs: project them into the [actions] slot -->
|
|
84
|
+
* <mj-empty-state Title="No pinned items yet" Message="Pin dashboards for quick access.">
|
|
85
|
+
* <button mjButton variant="primary" (click)="addPin()">Add your first pin</button>
|
|
86
|
+
* <button mjButton variant="flat" (click)="dismiss()">Don't show again</button>
|
|
87
|
+
* </mj-empty-state>
|
|
88
|
+
* ```
|
|
89
|
+
*
|
|
90
|
+
* For dynamic messages (e.g. "No keys matching X" vs "No keys yet"), compute the
|
|
91
|
+
* string in the parent and bind it to `[Message]`, or project richer body content
|
|
92
|
+
* as default `<ng-content>` (rendered between the message and the actions).
|
|
93
|
+
*/
|
|
94
|
+
export class MJEmptyStateComponent {
|
|
95
|
+
/**
|
|
96
|
+
* Font Awesome icon class string (e.g. "fa-solid fa-key"). When omitted, a
|
|
97
|
+
* sensible default is chosen from `Variant`. Pass an empty string AND no
|
|
98
|
+
* variant default applies — set this explicitly to "" to render no icon.
|
|
99
|
+
*/
|
|
100
|
+
Icon = null;
|
|
101
|
+
/** Bold heading line (e.g. "No API keys yet"). */
|
|
102
|
+
Title = '';
|
|
103
|
+
/** Supporting/help text below the title. */
|
|
104
|
+
Message = '';
|
|
105
|
+
/** When set, renders a primary CTA button with this label. */
|
|
106
|
+
ActionText = '';
|
|
107
|
+
/** Optional Font Awesome icon shown inside the CTA button. */
|
|
108
|
+
ActionIcon = '';
|
|
109
|
+
/** mjButton variant for the built-in CTA. Defaults to 'primary'. */
|
|
110
|
+
ActionVariant = 'primary';
|
|
111
|
+
/** Visual intent — drives the default icon and icon color. Defaults to 'empty'. */
|
|
112
|
+
Variant = 'empty';
|
|
113
|
+
/** Density — controls padding and icon size. Defaults to 'default'. */
|
|
114
|
+
Size = 'default';
|
|
115
|
+
/**
|
|
116
|
+
* ARIA live-region role on the host. When unset, it defaults from `Variant`:
|
|
117
|
+
* `error` → `'alert'` (assertive), everything else → `'status'` (polite). This
|
|
118
|
+
* makes a dynamically-appearing empty state announce itself to screen readers —
|
|
119
|
+
* the title + message are read together via the role's implicit
|
|
120
|
+
* `aria-live`/`aria-atomic`. (Empty states present at page load are not
|
|
121
|
+
* announced, per the live-region spec, so static placeholders stay quiet.)
|
|
122
|
+
* Pass an explicit role to override, or `''` to opt out of the live region.
|
|
123
|
+
*/
|
|
124
|
+
Role = null;
|
|
125
|
+
/** Emitted when the built-in CTA button is clicked. */
|
|
126
|
+
Action = new EventEmitter();
|
|
127
|
+
get IsCompact() { return this.Size === 'compact'; }
|
|
128
|
+
get IsLarge() { return this.Size === 'large'; }
|
|
129
|
+
get IsNoResults() { return this.Variant === 'no-results'; }
|
|
130
|
+
get IsSuccess() { return this.Variant === 'success'; }
|
|
131
|
+
get IsWarning() { return this.Variant === 'warning'; }
|
|
132
|
+
get IsError() { return this.Variant === 'error'; }
|
|
133
|
+
/**
|
|
134
|
+
* Live-region role applied to the host. Explicit `Role` wins (`''` ⇒ no role);
|
|
135
|
+
* otherwise an error state is an assertive `alert`, everything else a polite `status`.
|
|
136
|
+
*/
|
|
137
|
+
get HostRole() {
|
|
138
|
+
if (this.Role != null) {
|
|
139
|
+
return this.Role || null;
|
|
140
|
+
}
|
|
141
|
+
return this.Variant === 'error' ? 'alert' : 'status';
|
|
142
|
+
}
|
|
143
|
+
/**
|
|
144
|
+
* Icon actually rendered: the explicit `Icon` when provided (including ""
|
|
145
|
+
* to suppress the icon), otherwise the per-variant default.
|
|
146
|
+
*/
|
|
147
|
+
get ResolvedIcon() {
|
|
148
|
+
if (this.Icon != null) {
|
|
149
|
+
return this.Icon;
|
|
150
|
+
}
|
|
151
|
+
return MJEmptyStateComponent.DefaultIconForVariant(this.Variant);
|
|
152
|
+
}
|
|
153
|
+
/** Default Font Awesome icon for each variant. */
|
|
154
|
+
static DefaultIconForVariant(variant) {
|
|
155
|
+
switch (variant) {
|
|
156
|
+
case 'no-results':
|
|
157
|
+
return 'fa-solid fa-magnifying-glass';
|
|
158
|
+
case 'success':
|
|
159
|
+
return 'fa-solid fa-circle-check';
|
|
160
|
+
case 'warning':
|
|
161
|
+
case 'error':
|
|
162
|
+
return 'fa-solid fa-triangle-exclamation';
|
|
163
|
+
case 'empty':
|
|
164
|
+
default:
|
|
165
|
+
return 'fa-solid fa-inbox';
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
OnAction(event) {
|
|
169
|
+
this.Action.emit(event);
|
|
170
|
+
}
|
|
171
|
+
static ɵfac = function MJEmptyStateComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJEmptyStateComponent)(); };
|
|
172
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJEmptyStateComponent, selectors: [["mj-empty-state"]], hostVars: 13, hostBindings: function MJEmptyStateComponent_HostBindings(rf, ctx) { if (rf & 2) {
|
|
173
|
+
i0.ɵɵattribute("role", ctx.HostRole);
|
|
174
|
+
i0.ɵɵclassProp("mj-empty-state--compact", ctx.IsCompact)("mj-empty-state--large", ctx.IsLarge)("mj-empty-state--no-results", ctx.IsNoResults)("mj-empty-state--success", ctx.IsSuccess)("mj-empty-state--warning", ctx.IsWarning)("mj-empty-state--error", ctx.IsError);
|
|
175
|
+
} }, inputs: { Icon: "Icon", Title: "Title", Message: "Message", ActionText: "ActionText", ActionIcon: "ActionIcon", ActionVariant: "ActionVariant", Variant: "Variant", Size: "Size", Role: "Role" }, outputs: { Action: "Action" }, ngContentSelectors: _c1, decls: 7, vars: 4, consts: [["aria-hidden", "true", 3, "class"], [1, "mj-empty-state__title"], [1, "mj-empty-state__message"], [1, "mj-empty-state__actions"], ["type", "button", "mjButton", "", 3, "variant"], ["aria-hidden", "true"], ["type", "button", "mjButton", "", 3, "click", "variant"]], template: function MJEmptyStateComponent_Template(rf, ctx) { if (rf & 1) {
|
|
176
|
+
i0.ɵɵprojectionDef(_c0);
|
|
177
|
+
i0.ɵɵconditionalCreate(0, MJEmptyStateComponent_Conditional_0_Template, 1, 3, "i", 0);
|
|
178
|
+
i0.ɵɵconditionalCreate(1, MJEmptyStateComponent_Conditional_1_Template, 2, 1, "h3", 1);
|
|
179
|
+
i0.ɵɵconditionalCreate(2, MJEmptyStateComponent_Conditional_2_Template, 2, 1, "p", 2);
|
|
180
|
+
i0.ɵɵprojection(3);
|
|
181
|
+
i0.ɵɵelementStart(4, "div", 3);
|
|
182
|
+
i0.ɵɵconditionalCreate(5, MJEmptyStateComponent_Conditional_5_Template, 3, 3, "button", 4);
|
|
183
|
+
i0.ɵɵprojection(6, 1);
|
|
184
|
+
i0.ɵɵelementEnd();
|
|
185
|
+
} if (rf & 2) {
|
|
186
|
+
i0.ɵɵconditional(ctx.ResolvedIcon ? 0 : -1);
|
|
187
|
+
i0.ɵɵadvance();
|
|
188
|
+
i0.ɵɵconditional(ctx.Title ? 1 : -1);
|
|
189
|
+
i0.ɵɵadvance();
|
|
190
|
+
i0.ɵɵconditional(ctx.Message ? 2 : -1);
|
|
191
|
+
i0.ɵɵadvance(3);
|
|
192
|
+
i0.ɵɵconditional(ctx.ActionText ? 5 : -1);
|
|
193
|
+
} }, dependencies: [MJButtonDirective], styles: ["[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: var(--mj-space-12);\n color: var(--mj-text-secondary);\n }\n\n .mj-empty-state__icon[_ngcontent-%COMP%] {\n font-size: 3rem;\n line-height: 1;\n margin-bottom: var(--mj-space-4);\n color: var(--mj-text-disabled);\n }\n\n .mj-empty-state__title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-lg);\n font-weight: 600;\n color: var(--mj-text-primary);\n }\n\n .mj-empty-state__message[_ngcontent-%COMP%] {\n margin: var(--mj-space-2) 0 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n max-width: 420px;\n }\n\n .mj-empty-state__actions[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--mj-space-2);\n margin-top: var(--mj-space-6);\n }\n \n\n\n .mj-empty-state__actions[_ngcontent-%COMP%]:empty {\n display: none;\n }\n\n \n\n .mj-empty-state--compact[_nghost-%COMP%] {\n padding: var(--mj-space-8);\n }\n .mj-empty-state--compact[_nghost-%COMP%] .mj-empty-state__icon[_ngcontent-%COMP%] {\n font-size: 2rem;\n margin-bottom: var(--mj-space-3);\n }\n\n .mj-empty-state--large[_nghost-%COMP%] {\n padding: var(--mj-space-16) var(--mj-space-10);\n }\n .mj-empty-state--large[_nghost-%COMP%] .mj-empty-state__icon[_ngcontent-%COMP%] {\n font-size: 4rem;\n }\n\n \n\n .mj-empty-state--no-results[_nghost-%COMP%] .mj-empty-state__icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n }\n .mj-empty-state--success[_nghost-%COMP%] .mj-empty-state__icon[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n }\n .mj-empty-state--warning[_nghost-%COMP%] .mj-empty-state__icon[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n }\n .mj-empty-state--error[_nghost-%COMP%] .mj-empty-state__icon[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n }"] });
|
|
194
|
+
}
|
|
195
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJEmptyStateComponent, [{
|
|
196
|
+
type: Component,
|
|
197
|
+
args: [{ selector: 'mj-empty-state', standalone: true, imports: [MJButtonDirective], template: `
|
|
198
|
+
@if (ResolvedIcon) {
|
|
199
|
+
<i class="mj-empty-state__icon {{ ResolvedIcon }}" aria-hidden="true"></i>
|
|
200
|
+
}
|
|
201
|
+
@if (Title) {
|
|
202
|
+
<h3 class="mj-empty-state__title">{{ Title }}</h3>
|
|
203
|
+
}
|
|
204
|
+
@if (Message) {
|
|
205
|
+
<p class="mj-empty-state__message">{{ Message }}</p>
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
<!-- Optional richer body content (feature lists, dynamic text, links) -->
|
|
209
|
+
<ng-content></ng-content>
|
|
210
|
+
|
|
211
|
+
<!-- Actions: the built-in single CTA and/or projected [actions] buttons.
|
|
212
|
+
Hidden via :empty when neither is present. -->
|
|
213
|
+
<div class="mj-empty-state__actions">
|
|
214
|
+
@if (ActionText) {
|
|
215
|
+
<button type="button" mjButton [variant]="ActionVariant" (click)="OnAction($event)">
|
|
216
|
+
@if (ActionIcon) {
|
|
217
|
+
<i class="{{ ActionIcon }}" aria-hidden="true"></i>
|
|
218
|
+
}
|
|
219
|
+
{{ ActionText }}
|
|
220
|
+
</button>
|
|
221
|
+
}
|
|
222
|
+
<ng-content select="[actions]"></ng-content>
|
|
223
|
+
</div>
|
|
224
|
+
`, styles: ["\n :host {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: var(--mj-space-12);\n color: var(--mj-text-secondary);\n }\n\n .mj-empty-state__icon {\n font-size: 3rem;\n line-height: 1;\n margin-bottom: var(--mj-space-4);\n color: var(--mj-text-disabled);\n }\n\n .mj-empty-state__title {\n margin: 0;\n font-size: var(--mj-text-lg);\n font-weight: 600;\n color: var(--mj-text-primary);\n }\n\n .mj-empty-state__message {\n margin: var(--mj-space-2) 0 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n max-width: 420px;\n }\n\n .mj-empty-state__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--mj-space-2);\n margin-top: var(--mj-space-6);\n }\n /* Collapse the actions row entirely when no CTA is rendered (modern browsers\n treat an element containing only Angular's @if comment-anchors as :empty). */\n .mj-empty-state__actions:empty {\n display: none;\n }\n\n /* \u2500\u2500 Sizes \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\u2500 */\n :host(.mj-empty-state--compact) {\n padding: var(--mj-space-8);\n }\n :host(.mj-empty-state--compact) .mj-empty-state__icon {\n font-size: 2rem;\n margin-bottom: var(--mj-space-3);\n }\n\n :host(.mj-empty-state--large) {\n padding: var(--mj-space-16) var(--mj-space-10);\n }\n :host(.mj-empty-state--large) .mj-empty-state__icon {\n font-size: 4rem;\n }\n\n /* \u2500\u2500 Variants (icon tone) \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-empty-state--no-results) .mj-empty-state__icon {\n color: var(--mj-text-muted);\n }\n :host(.mj-empty-state--success) .mj-empty-state__icon {\n color: var(--mj-status-success);\n }\n :host(.mj-empty-state--warning) .mj-empty-state__icon {\n color: var(--mj-status-warning);\n }\n :host(.mj-empty-state--error) .mj-empty-state__icon {\n color: var(--mj-status-error);\n }\n "] }]
|
|
225
|
+
}], null, { Icon: [{
|
|
226
|
+
type: Input
|
|
227
|
+
}], Title: [{
|
|
228
|
+
type: Input
|
|
229
|
+
}], Message: [{
|
|
230
|
+
type: Input
|
|
231
|
+
}], ActionText: [{
|
|
232
|
+
type: Input
|
|
233
|
+
}], ActionIcon: [{
|
|
234
|
+
type: Input
|
|
235
|
+
}], ActionVariant: [{
|
|
236
|
+
type: Input
|
|
237
|
+
}], Variant: [{
|
|
238
|
+
type: Input
|
|
239
|
+
}], Size: [{
|
|
240
|
+
type: Input
|
|
241
|
+
}], Role: [{
|
|
242
|
+
type: Input
|
|
243
|
+
}], Action: [{
|
|
244
|
+
type: Output
|
|
245
|
+
}], IsCompact: [{
|
|
246
|
+
type: HostBinding,
|
|
247
|
+
args: ['class.mj-empty-state--compact']
|
|
248
|
+
}], IsLarge: [{
|
|
249
|
+
type: HostBinding,
|
|
250
|
+
args: ['class.mj-empty-state--large']
|
|
251
|
+
}], IsNoResults: [{
|
|
252
|
+
type: HostBinding,
|
|
253
|
+
args: ['class.mj-empty-state--no-results']
|
|
254
|
+
}], IsSuccess: [{
|
|
255
|
+
type: HostBinding,
|
|
256
|
+
args: ['class.mj-empty-state--success']
|
|
257
|
+
}], IsWarning: [{
|
|
258
|
+
type: HostBinding,
|
|
259
|
+
args: ['class.mj-empty-state--warning']
|
|
260
|
+
}], IsError: [{
|
|
261
|
+
type: HostBinding,
|
|
262
|
+
args: ['class.mj-empty-state--error']
|
|
263
|
+
}], HostRole: [{
|
|
264
|
+
type: HostBinding,
|
|
265
|
+
args: ['attr.role']
|
|
266
|
+
}] }); })();
|
|
267
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJEmptyStateComponent, { className: "MJEmptyStateComponent", filePath: "lib/empty-state/empty-state.component.ts", lineNumber: 171 }); })();
|
|
268
|
+
//# sourceMappingURL=empty-state.component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"empty-state.component.js","sourceRoot":"","sources":["../../../src/lib/empty-state/empty-state.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\nimport { MJButtonDirective } from '../button/button.directive';\n\n/**\n * Visual intent of an `<mj-empty-state>`. Drives the default icon and the icon's\n * color treatment so callers don't restate either for the common cases.\n *\n * - `empty` — nothing exists yet (default). Neutral/disabled icon tone.\n * - `no-results` — a search/filter matched nothing. Muted icon tone, magnifier default.\n * - `success` — a positive \"all clear\" empty (e.g. \"No Errors Found\"). Success icon tone, check default.\n * - `warning` — a non-error blocking condition (disabled/misconfigured feature). Warning icon tone.\n * - `error` — a load/operation failed. Error icon tone, triangle default.\n */\nexport type MJEmptyStateVariant = 'empty' | 'no-results' | 'success' | 'warning' | 'error';\n\n/** Density of an `<mj-empty-state>` — controls padding and icon size. */\nexport type MJEmptyStateSize = 'compact' | 'default' | 'large';\n\n/**\n * mj-empty-state — Canonical centered empty/no-results/error placeholder.\n *\n * Replaces the ~213 inline empty-state `<div>`s that pages were each hand-rolling\n * (icon + title + message, optionally a CTA), e.g.:\n * ```html\n * <div class=\"empty-state\">\n * <i class=\"fa-solid fa-inbox\"></i>\n * <h3>No Permissions Found</h3>\n * <p>Try adjusting your filters or refresh the data.</p>\n * <button mjButton variant=\"primary\" (click)=\"refreshData()\">Refresh</button>\n * </div>\n * ```\n *\n * Usage:\n * ```html\n * <!-- Simplest: nothing-here placeholder -->\n * <mj-empty-state Title=\"No runs found\" Message=\"No runs match the selected filters.\" />\n *\n * <!-- Search/filter produced nothing -->\n * <mj-empty-state Variant=\"no-results\" Title=\"No icons found\" Message=\"Try a different search term.\" />\n *\n * <!-- Load failed, retry CTA -->\n * <mj-empty-state Variant=\"error\" Title=\"Couldn't load permissions\" [Message]=\"error\"\n * ActionText=\"Try Again\" ActionIcon=\"fa-solid fa-rotate-right\" (Action)=\"loadData()\" />\n *\n * <!-- Invitation to create the first record -->\n * <mj-empty-state Icon=\"fa-solid fa-key\" Title=\"No API keys yet\"\n * Message=\"Generate a key to start calling the API.\"\n * ActionText=\"Generate Your First Key\" ActionIcon=\"fa-solid fa-plus\"\n * (Action)=\"requestCreate()\" />\n *\n * <!-- Multiple / bespoke CTAs: project them into the [actions] slot -->\n * <mj-empty-state Title=\"No pinned items yet\" Message=\"Pin dashboards for quick access.\">\n * <button mjButton variant=\"primary\" (click)=\"addPin()\">Add your first pin</button>\n * <button mjButton variant=\"flat\" (click)=\"dismiss()\">Don't show again</button>\n * </mj-empty-state>\n * ```\n *\n * For dynamic messages (e.g. \"No keys matching X\" vs \"No keys yet\"), compute the\n * string in the parent and bind it to `[Message]`, or project richer body content\n * as default `<ng-content>` (rendered between the message and the actions).\n */\n@Component({\n selector: 'mj-empty-state',\n standalone: true,\n imports: [MJButtonDirective],\n template: `\n @if (ResolvedIcon) {\n <i class=\"mj-empty-state__icon {{ ResolvedIcon }}\" aria-hidden=\"true\"></i>\n }\n @if (Title) {\n <h3 class=\"mj-empty-state__title\">{{ Title }}</h3>\n }\n @if (Message) {\n <p class=\"mj-empty-state__message\">{{ Message }}</p>\n }\n\n <!-- Optional richer body content (feature lists, dynamic text, links) -->\n <ng-content></ng-content>\n\n <!-- Actions: the built-in single CTA and/or projected [actions] buttons.\n Hidden via :empty when neither is present. -->\n <div class=\"mj-empty-state__actions\">\n @if (ActionText) {\n <button type=\"button\" mjButton [variant]=\"ActionVariant\" (click)=\"OnAction($event)\">\n @if (ActionIcon) {\n <i class=\"{{ ActionIcon }}\" aria-hidden=\"true\"></i>\n }\n {{ ActionText }}\n </button>\n }\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n `,\n styles: [`\n :host {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: var(--mj-space-12);\n color: var(--mj-text-secondary);\n }\n\n .mj-empty-state__icon {\n font-size: 3rem;\n line-height: 1;\n margin-bottom: var(--mj-space-4);\n color: var(--mj-text-disabled);\n }\n\n .mj-empty-state__title {\n margin: 0;\n font-size: var(--mj-text-lg);\n font-weight: 600;\n color: var(--mj-text-primary);\n }\n\n .mj-empty-state__message {\n margin: var(--mj-space-2) 0 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n max-width: 420px;\n }\n\n .mj-empty-state__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--mj-space-2);\n margin-top: var(--mj-space-6);\n }\n /* Collapse the actions row entirely when no CTA is rendered (modern browsers\n treat an element containing only Angular's @if comment-anchors as :empty). */\n .mj-empty-state__actions:empty {\n display: none;\n }\n\n /* ── Sizes ────────────────────────────────────────────────── */\n :host(.mj-empty-state--compact) {\n padding: var(--mj-space-8);\n }\n :host(.mj-empty-state--compact) .mj-empty-state__icon {\n font-size: 2rem;\n margin-bottom: var(--mj-space-3);\n }\n\n :host(.mj-empty-state--large) {\n padding: var(--mj-space-16) var(--mj-space-10);\n }\n :host(.mj-empty-state--large) .mj-empty-state__icon {\n font-size: 4rem;\n }\n\n /* ── Variants (icon tone) ─────────────────────────────────── */\n :host(.mj-empty-state--no-results) .mj-empty-state__icon {\n color: var(--mj-text-muted);\n }\n :host(.mj-empty-state--success) .mj-empty-state__icon {\n color: var(--mj-status-success);\n }\n :host(.mj-empty-state--warning) .mj-empty-state__icon {\n color: var(--mj-status-warning);\n }\n :host(.mj-empty-state--error) .mj-empty-state__icon {\n color: var(--mj-status-error);\n }\n `]\n})\nexport class MJEmptyStateComponent {\n /**\n * Font Awesome icon class string (e.g. \"fa-solid fa-key\"). When omitted, a\n * sensible default is chosen from `Variant`. Pass an empty string AND no\n * variant default applies — set this explicitly to \"\" to render no icon.\n */\n @Input() Icon: string | null = null;\n\n /** Bold heading line (e.g. \"No API keys yet\"). */\n @Input() Title: string = '';\n\n /** Supporting/help text below the title. */\n @Input() Message: string = '';\n\n /** When set, renders a primary CTA button with this label. */\n @Input() ActionText: string = '';\n\n /** Optional Font Awesome icon shown inside the CTA button. */\n @Input() ActionIcon: string = '';\n\n /** mjButton variant for the built-in CTA. Defaults to 'primary'. */\n @Input() ActionVariant: 'primary' | 'secondary' | 'outline' | 'flat' = 'primary';\n\n /** Visual intent — drives the default icon and icon color. Defaults to 'empty'. */\n @Input() Variant: MJEmptyStateVariant = 'empty';\n\n /** Density — controls padding and icon size. Defaults to 'default'. */\n @Input() Size: MJEmptyStateSize = 'default';\n\n /**\n * ARIA live-region role on the host. When unset, it defaults from `Variant`:\n * `error` → `'alert'` (assertive), everything else → `'status'` (polite). This\n * makes a dynamically-appearing empty state announce itself to screen readers —\n * the title + message are read together via the role's implicit\n * `aria-live`/`aria-atomic`. (Empty states present at page load are not\n * announced, per the live-region spec, so static placeholders stay quiet.)\n * Pass an explicit role to override, or `''` to opt out of the live region.\n */\n @Input() Role: string | null = null;\n\n /** Emitted when the built-in CTA button is clicked. */\n @Output() Action = new EventEmitter<MouseEvent>();\n\n @HostBinding('class.mj-empty-state--compact')\n get IsCompact(): boolean { return this.Size === 'compact'; }\n\n @HostBinding('class.mj-empty-state--large')\n get IsLarge(): boolean { return this.Size === 'large'; }\n\n @HostBinding('class.mj-empty-state--no-results')\n get IsNoResults(): boolean { return this.Variant === 'no-results'; }\n\n @HostBinding('class.mj-empty-state--success')\n get IsSuccess(): boolean { return this.Variant === 'success'; }\n\n @HostBinding('class.mj-empty-state--warning')\n get IsWarning(): boolean { return this.Variant === 'warning'; }\n\n @HostBinding('class.mj-empty-state--error')\n get IsError(): boolean { return this.Variant === 'error'; }\n\n /**\n * Live-region role applied to the host. Explicit `Role` wins (`''` ⇒ no role);\n * otherwise an error state is an assertive `alert`, everything else a polite `status`.\n */\n @HostBinding('attr.role')\n get HostRole(): string | null {\n if (this.Role != null) {\n return this.Role || null;\n }\n return this.Variant === 'error' ? 'alert' : 'status';\n }\n\n /**\n * Icon actually rendered: the explicit `Icon` when provided (including \"\"\n * to suppress the icon), otherwise the per-variant default.\n */\n get ResolvedIcon(): string {\n if (this.Icon != null) {\n return this.Icon;\n }\n return MJEmptyStateComponent.DefaultIconForVariant(this.Variant);\n }\n\n /** Default Font Awesome icon for each variant. */\n static DefaultIconForVariant(variant: MJEmptyStateVariant): string {\n switch (variant) {\n case 'no-results':\n return 'fa-solid fa-magnifying-glass';\n case 'success':\n return 'fa-solid fa-circle-check';\n case 'warning':\n case 'error':\n return 'fa-solid fa-triangle-exclamation';\n case 'empty':\n default:\n return 'fa-solid fa-inbox';\n }\n }\n\n OnAction(event: MouseEvent): void {\n this.Action.emit(event);\n }\n}\n"]}
|
package/dist/public-api.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export * from './lib/calendar/calendar-utils';
|
|
|
10
10
|
export * from './lib/datepicker/datepicker.component';
|
|
11
11
|
export * from './lib/splitter/splitter.component';
|
|
12
12
|
export * from './lib/accordion/accordion.component';
|
|
13
|
+
export * from './lib/alert/alert.component';
|
|
13
14
|
export * from './lib/window/window.component';
|
|
14
15
|
export * from './lib/slide-panel/slide-panel.component';
|
|
15
16
|
export * from './lib/combobox/combobox.component';
|
|
@@ -29,4 +30,5 @@ export * from './lib/left-nav/left-nav.component';
|
|
|
29
30
|
export * from './lib/left-nav/left-nav-content.component';
|
|
30
31
|
export * from './lib/page-header-interior/page-header-interior.component';
|
|
31
32
|
export * from './lib/page-body-interior/page-body-interior.component';
|
|
33
|
+
export * from './lib/empty-state/empty-state.component';
|
|
32
34
|
//# sourceMappingURL=public-api.d.ts.map
|
package/dist/public-api.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAGA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC"}
|
|
1
|
+
{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAGA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC;AACtE,cAAc,yCAAyC,CAAC"}
|
package/dist/public-api.js
CHANGED
|
@@ -12,6 +12,7 @@ export * from './lib/calendar/calendar-utils';
|
|
|
12
12
|
export * from './lib/datepicker/datepicker.component';
|
|
13
13
|
export * from './lib/splitter/splitter.component';
|
|
14
14
|
export * from './lib/accordion/accordion.component';
|
|
15
|
+
export * from './lib/alert/alert.component';
|
|
15
16
|
export * from './lib/window/window.component';
|
|
16
17
|
export * from './lib/slide-panel/slide-panel.component';
|
|
17
18
|
export * from './lib/combobox/combobox.component';
|
|
@@ -31,4 +32,5 @@ export * from './lib/left-nav/left-nav.component';
|
|
|
31
32
|
export * from './lib/left-nav/left-nav-content.component';
|
|
32
33
|
export * from './lib/page-header-interior/page-header-interior.component';
|
|
33
34
|
export * from './lib/page-body-interior/page-body-interior.component';
|
|
35
|
+
export * from './lib/empty-state/empty-state.component';
|
|
34
36
|
//# sourceMappingURL=public-api.js.map
|
package/dist/public-api.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,+DAA+D;AAE/D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC","sourcesContent":["// @memberjunction/ng-ui-components\n// Reusable standalone Angular UI components for MemberJunction\n\nexport * from './lib/button/button.directive';\nexport * from './lib/clickable/clickable.directive';\nexport * from './lib/dialog/dialog.component';\nexport * from './lib/dialog/dialog.service';\nexport * from './lib/dropdown/dropdown.component';\nexport * from './lib/switch/switch.component';\nexport * from './lib/numeric-input/numeric-input.component';\nexport * from './lib/progress-bar/progress-bar.component';\nexport * from './lib/calendar/calendar-utils';\nexport * from './lib/datepicker/datepicker.component';\nexport * from './lib/splitter/splitter.component';\nexport * from './lib/accordion/accordion.component';\nexport * from './lib/window/window.component';\nexport * from './lib/slide-panel/slide-panel.component';\nexport * from './lib/combobox/combobox.component';\nexport * from './lib/page-header/page-header.component';\nexport * from './lib/page-layout/page-layout.component';\nexport * from './lib/page-body/page-body.component';\nexport * from './lib/stat-badge/stat-badge.component';\nexport * from './lib/refresh-button/refresh-button.component';\nexport * from './lib/filter-popover/filter-popover.component';\nexport * from './lib/page-search/page-search.component';\nexport * from './lib/filter-chip/filter-chip.component';\nexport * from './lib/filter-field/filter-field.component';\nexport * from './lib/filter-panel/filter-panel.component';\nexport * from './lib/tab-nav/tab-nav.component';\nexport * from './lib/view-toggle/view-toggle.component';\nexport * from './lib/left-nav/left-nav.component';\nexport * from './lib/left-nav/left-nav-content.component';\nexport * from './lib/page-header-interior/page-header-interior.component';\nexport * from './lib/page-body-interior/page-body-interior.component';\n"]}
|
|
1
|
+
{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,+DAA+D;AAE/D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,yCAAyC,CAAC;AACxD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC;AACtE,cAAc,yCAAyC,CAAC","sourcesContent":["// @memberjunction/ng-ui-components\n// Reusable standalone Angular UI components for MemberJunction\n\nexport * from './lib/button/button.directive';\nexport * from './lib/clickable/clickable.directive';\nexport * from './lib/dialog/dialog.component';\nexport * from './lib/dialog/dialog.service';\nexport * from './lib/dropdown/dropdown.component';\nexport * from './lib/switch/switch.component';\nexport * from './lib/numeric-input/numeric-input.component';\nexport * from './lib/progress-bar/progress-bar.component';\nexport * from './lib/calendar/calendar-utils';\nexport * from './lib/datepicker/datepicker.component';\nexport * from './lib/splitter/splitter.component';\nexport * from './lib/accordion/accordion.component';\nexport * from './lib/alert/alert.component';\nexport * from './lib/window/window.component';\nexport * from './lib/slide-panel/slide-panel.component';\nexport * from './lib/combobox/combobox.component';\nexport * from './lib/page-header/page-header.component';\nexport * from './lib/page-layout/page-layout.component';\nexport * from './lib/page-body/page-body.component';\nexport * from './lib/stat-badge/stat-badge.component';\nexport * from './lib/refresh-button/refresh-button.component';\nexport * from './lib/filter-popover/filter-popover.component';\nexport * from './lib/page-search/page-search.component';\nexport * from './lib/filter-chip/filter-chip.component';\nexport * from './lib/filter-field/filter-field.component';\nexport * from './lib/filter-panel/filter-panel.component';\nexport * from './lib/tab-nav/tab-nav.component';\nexport * from './lib/view-toggle/view-toggle.component';\nexport * from './lib/left-nav/left-nav.component';\nexport * from './lib/left-nav/left-nav-content.component';\nexport * from './lib/page-header-interior/page-header-interior.component';\nexport * from './lib/page-body-interior/page-body-interior.component';\nexport * from './lib/empty-state/empty-state.component';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-ui-components",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.44.0",
|
|
4
4
|
"description": "MemberJunction: Angular UI Components - reusable standalone components replacing Kendo UI dependencies.",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"@angular/compiler": "21.1.3",
|
|
25
25
|
"@angular/compiler-cli": "21.1.3",
|
|
26
|
-
"@memberjunction/ng-test-utils": "5.
|
|
26
|
+
"@memberjunction/ng-test-utils": "5.44.0",
|
|
27
27
|
"vitest": "^4.0.18"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|