@juice-js/audit 0.0.0-stage → 1.0.0-alpha.2

package/fesm2022/juice-js-audit-ui-DnfhiB6p.mjs

@@ -0,0 +1,1123 @@
+import { AUDIT_RANGES, AuditContextService, AuditLinkPipe, AuditLinks } from "./juice-js-audit.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Pipe, computed, inject, input, isSignal } from "@angular/core";
+import { rxResource } from "@angular/core/rxjs-interop";
+import { Router, RouterLink } from "@angular/router";
+import { DatePipe } from "@angular/common";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import * as i3 from "@angular/material/icon";
+import { MatIconModule } from "@angular/material/icon";
+import * as i2 from "@angular/material/select";
+import { MatSelectModule } from "@angular/material/select";
+function apiResource(options) {
+	const ref = rxResource(options);
+	const value = computed(() => ref.hasValue() ? ref.value() : void 0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	return new Proxy(ref, { get(target, prop) {
+		if (prop === "value") return value;
+		const member = Reflect.get(target, prop, target);
+		return typeof member === "function" && !isSignal(member) ? member.bind(target) : member;
+	} });
+}
+function formatDuration(ms) {
+	if (ms === null || ms === void 0 || Number.isNaN(ms)) return "—";
+	if (ms < 1e3) return `${Math.round(ms)} ms`;
+	if (ms < 6e4) return `${(ms / 1e3).toFixed(2)} s`;
+	const s = Math.round(ms / 1e3);
+	return `${Math.floor(s / 60)} m ${String(s % 60).padStart(2, "0")} s`;
+}
+function formatValue(value) {
+	if (value === void 0) return "";
+	if (value === null) return "null";
+	return typeof value === "string" ? value : JSON.stringify(value);
+}
+function formatKeys(keys) {
+	if (keys && typeof keys === "object" && !Array.isArray(keys)) return Object.entries(keys).map(([k, v]) => `${k}=${formatValue(v)}`).join(", ");
+	return formatValue(keys);
+}
+function prettyJson(text) {
+	if (!text) return "";
+	try {
+		return JSON.stringify(JSON.parse(text), null, 2);
+	} catch {
+		return text;
+	}
+}
+function statusClass(status) {
+	if (!status) return "ja-tone-none";
+	return status >= 500 ? "ja-tone-bad" : status >= 400 ? "ja-tone-warn" : "ja-tone-ok";
+}
+function actionClass(action) {
+	const a = action.toLowerCase();
+	return a.startsWith("insert") || a === "added" ? "ja-tone-ok" : a.startsWith("delete") ? "ja-tone-bad" : a.startsWith("modif") || a.startsWith("update") ? "ja-tone-info" : "ja-tone-none";
+}
+var DurationPipe = class DurationPipe {
+	transform(ms) {
+		return formatDuration(ms);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: DurationPipe,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Pipe
+	});
+	static ɵpipe = i0.ɵɵngDeclarePipe({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: DurationPipe,
+		isStandalone: true,
+		name: "jaDuration"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: DurationPipe,
+	decorators: [{
+		type: Pipe,
+		args: [{ name: "jaDuration" }]
+	}]
+});
+var KeysPipe = class KeysPipe {
+	transform(keys) {
+		return formatKeys(keys);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: KeysPipe,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Pipe
+	});
+	static ɵpipe = i0.ɵɵngDeclarePipe({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: KeysPipe,
+		isStandalone: true,
+		name: "jaKeys"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: KeysPipe,
+	decorators: [{
+		type: Pipe,
+		args: [{ name: "jaKeys" }]
+	}]
+});
+var PrettyJsonPipe = class PrettyJsonPipe {
+	transform(text) {
+		return prettyJson(text);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: PrettyJsonPipe,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Pipe
+	});
+	static ɵpipe = i0.ɵɵngDeclarePipe({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: PrettyJsonPipe,
+		isStandalone: true,
+		name: "jaPretty"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: PrettyJsonPipe,
+	decorators: [{
+		type: Pipe,
+		args: [{ name: "jaPretty" }]
+	}]
+});
+function problemText(error) {
+	const e = error;
+	if (!e) return "";
+	if (e.status === 0) return "The audit API cannot be reached.";
+	if (e.status === 401 || e.status === 403) return "You are not allowed to read the audit records.";
+	return [e.error?.title, e.error?.detail].filter(Boolean).join(": ") || `Request failed (${e.status}).`;
+}
+var AuditContextBar = class AuditContextBar {
+	ctx = inject(AuditContextService);
+	router = inject(Router);
+	links = inject(AuditLinks);
+	showRange = input(true, ...ngDevMode ? [{ debugName: "showRange" }] : /* istanbul ignore next */ []);
+	ranges = Object.keys(AUDIT_RANGES);
+	trace = "";
+	lookup() {
+		const id = this.trace.trim();
+		if (id) this.router.navigate(this.links.to("traces", id), { queryParams: this.ctx.keep() });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: AuditContextBar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: AuditContextBar,
+		isStandalone: true,
+		selector: "ja-context-bar",
+		inputs: { showRange: {
+			classPropertyName: "showRange",
+			publicName: "showRange",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: `
+    <div class="ja-context">
+      <ng-content />
+      <span class="ja-spacer"></span>
+      @if (showRange()) {
+        <mat-form-field subscriptSizing="dynamic" class="ja-field-sm">
+          <mat-label>Time range</mat-label>
+          <mat-select [value]="ctx.range()" (valueChange)="ctx.set({ range: $event })">
+            @for (r of ranges; track r) { <mat-option [value]="r">Last {{ r }}</mat-option> }
+            @if (ctx.range() === 'custom') { <mat-option value="custom" disabled>Custom window</mat-option> }
+          </mat-select>
+        </mat-form-field>
+      }
+      <form class="ja-lookup" (ngSubmit)="lookup()">
+        <mat-icon>search</mat-icon>
+        <input name="trace" [(ngModel)]="trace" placeholder="Trace ID" aria-label="Open the audit records of a trace">
+      </form>
+    </div>`,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "directive",
+				type: i1.NgForm,
+				selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]",
+				inputs: ["ngFormOptions"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatSelectModule
+			},
+			{
+				kind: "component",
+				type: i2.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i2.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "component",
+				type: i2.MatSelect,
+				selector: "mat-select",
+				inputs: [
+					"aria-describedby",
+					"panelClass",
+					"disabled",
+					"disableRipple",
+					"tabIndex",
+					"hideSingleSelectionIndicator",
+					"placeholder",
+					"required",
+					"multiple",
+					"disableOptionCentering",
+					"compareWith",
+					"value",
+					"aria-label",
+					"aria-labelledby",
+					"errorStateMatcher",
+					"typeaheadDebounceInterval",
+					"sortComparator",
+					"id",
+					"panelWidth",
+					"canSelectNullableOptions"
+				],
+				outputs: [
+					"openedChange",
+					"opened",
+					"closed",
+					"selectionChange",
+					"valueChange"
+				],
+				exportAs: ["matSelect"]
+			},
+			{
+				kind: "component",
+				type: i2.MatOption,
+				selector: "mat-option",
+				inputs: [
+					"value",
+					"id",
+					"disabled"
+				],
+				outputs: ["onSelectionChange"],
+				exportAs: ["matOption"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatIconModule
+			},
+			{
+				kind: "component",
+				type: i3.MatIcon,
+				selector: "mat-icon",
+				inputs: [
+					"color",
+					"inline",
+					"svgIcon",
+					"fontSet",
+					"fontIcon"
+				],
+				exportAs: ["matIcon"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: AuditContextBar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ja-context-bar",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				FormsModule,
+				MatSelectModule,
+				MatIconModule
+			],
+			template: `
+    <div class="ja-context">
+      <ng-content />
+      <span class="ja-spacer"></span>
+      @if (showRange()) {
+        <mat-form-field subscriptSizing="dynamic" class="ja-field-sm">
+          <mat-label>Time range</mat-label>
+          <mat-select [value]="ctx.range()" (valueChange)="ctx.set({ range: $event })">
+            @for (r of ranges; track r) { <mat-option [value]="r">Last {{ r }}</mat-option> }
+            @if (ctx.range() === 'custom') { <mat-option value="custom" disabled>Custom window</mat-option> }
+          </mat-select>
+        </mat-form-field>
+      }
+      <form class="ja-lookup" (ngSubmit)="lookup()">
+        <mat-icon>search</mat-icon>
+        <input name="trace" [(ngModel)]="trace" placeholder="Trace ID" aria-label="Open the audit records of a trace">
+      </form>
+    </div>`
+		}]
+	}],
+	propDecorators: { showRange: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "showRange",
+			required: false
+		}]
+	}] }
+});
+var StatusBadge = class StatusBadge {
+	status = input(...ngDevMode ? [void 0, { debugName: "status" }] : /* istanbul ignore next */ []);
+	tone = computed(() => statusClass(this.status()), ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: StatusBadge,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.4",
+		type: StatusBadge,
+		isStandalone: true,
+		selector: "ja-status",
+		inputs: { status: {
+			classPropertyName: "status",
+			publicName: "status",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: `<span class="ja-badge" [class]="tone()">{{ status() || '—' }}</span>`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: StatusBadge,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ja-status",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<span class="ja-badge" [class]="tone()">{{ status() || '—' }}</span>`
+		}]
+	}],
+	propDecorators: { status: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "status",
+			required: false
+		}]
+	}] }
+});
+var ActionBadge = class ActionBadge {
+	action = input.required(...ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []);
+	tone = computed(() => actionClass(this.action()), ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ActionBadge,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.4",
+		type: ActionBadge,
+		isStandalone: true,
+		selector: "ja-action",
+		inputs: { action: {
+			classPropertyName: "action",
+			publicName: "action",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: `<span class="ja-badge" [class]="tone()">{{ action() }}</span>`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ActionBadge,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ja-action",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<span class="ja-badge" [class]="tone()">{{ action() }}</span>`
+		}]
+	}],
+	propDecorators: { action: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "action",
+			required: true
+		}]
+	}] }
+});
+var TraceRef = class TraceRef {
+	ctx = inject(AuditContextService);
+	links = inject(AuditLinks);
+	traceId = input(...ngDevMode ? [void 0, { debugName: "traceId" }] : /* istanbul ignore next */ []);
+	short = input(true, ...ngDevMode ? [{ debugName: "short" }] : /* istanbul ignore next */ []);
+	external = computed(() => this.links.externalTrace(this.traceId()), ...ngDevMode ? [{ debugName: "external" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: TraceRef,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: TraceRef,
+		isStandalone: true,
+		selector: "ja-trace-ref",
+		inputs: {
+			traceId: {
+				classPropertyName: "traceId",
+				publicName: "traceId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			short: {
+				classPropertyName: "short",
+				publicName: "short",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    @if (traceId(); as id) {
+      <a class="ja-mono" [routerLink]="['traces', id] | jaLink" [queryParams]="ctx.keep()" [attr.title]="'Everything audited under trace ' + id">{{ short() ? id.slice(0, 12) + '…' : id }}</a>
+      @if (external(); as x) {
+        @if ('href' in x) { <a class="ja-external" [href]="x.href" target="_blank" rel="noopener" title="Open the trace">spans ↗</a> }
+        @else { <a class="ja-external" [routerLink]="x.route" title="Open the trace">spans ↗</a> }
+      }
+    } @else { <span class="ja-muted">—</span> }`,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: RouterLink,
+			selector: "[routerLink]",
+			inputs: [
+				"target",
+				"queryParams",
+				"fragment",
+				"queryParamsHandling",
+				"state",
+				"info",
+				"relativeTo",
+				"preserveFragment",
+				"skipLocationChange",
+				"replaceUrl",
+				"browserUrl",
+				"routerLink"
+			]
+		}, {
+			kind: "pipe",
+			type: AuditLinkPipe,
+			name: "jaLink"
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: TraceRef,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ja-trace-ref",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [RouterLink, AuditLinkPipe],
+			template: `
+    @if (traceId(); as id) {
+      <a class="ja-mono" [routerLink]="['traces', id] | jaLink" [queryParams]="ctx.keep()" [attr.title]="'Everything audited under trace ' + id">{{ short() ? id.slice(0, 12) + '…' : id }}</a>
+      @if (external(); as x) {
+        @if ('href' in x) { <a class="ja-external" [href]="x.href" target="_blank" rel="noopener" title="Open the trace">spans ↗</a> }
+        @else { <a class="ja-external" [routerLink]="x.route" title="Open the trace">spans ↗</a> }
+      }
+    } @else { <span class="ja-muted">—</span> }`
+		}]
+	}],
+	propDecorators: {
+		traceId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "traceId",
+				required: false
+			}]
+		}],
+		short: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "short",
+				required: false
+			}]
+		}]
+	}
+});
+var AccessLogTable = class AccessLogTable {
+	ctx = inject(AuditContextService);
+	rows = input.required(...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	compact = input(false, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+	longest = computed(() => Math.max(0, ...this.rows().map((r) => r.elapsedMs ?? 0)), ...ngDevMode ? [{ debugName: "longest" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: AccessLogTable,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: AccessLogTable,
+		isStandalone: true,
+		selector: "ja-access-log-table",
+		inputs: {
+			rows: {
+				classPropertyName: "rows",
+				publicName: "rows",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			compact: {
+				classPropertyName: "compact",
+				publicName: "compact",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    <table class="ja-table">
+      <thead><tr><th>Time</th><th>User</th><th>Action</th><th>Status</th><th>Duration</th>@if (!compact()) { <th>App</th><th>Trace</th> }</tr></thead>
+      <tbody>
+        @for (r of rows(); track r.id) {
+          <tr>
+            <td class="ja-nowrap">{{ r.dateTime | date: 'MMM d, HH:mm:ss' }}</td>
+            <td>{{ r.user || '—' }}@if (r.tenantId) { <div class="ja-muted ja-small">{{ r.tenantId }}</div> }</td>
+            <td><a [routerLink]="['access-logs', r.id] | jaLink" [queryParams]="ctx.keep()">{{ r.action }}</a>
+              @if (r.method || r.path) { <div class="ja-muted ja-small ja-mono">{{ r.method }} {{ r.path }}</div> }
+              @if (r.isRestricted) { <span class="ja-badge ja-tone-warn">restricted</span> }</td>
+            <td><ja-status [status]="r.status" /></td>
+            <td class="ja-nowrap">@if (longest() > 0 && r.elapsedMs !== null) { <span class="ja-bar" [style.width.px]="60 * r.elapsedMs / longest()"></span> }{{ r.elapsedMs | jaDuration }}</td>
+            @if (!compact()) {
+              <td class="ja-muted">{{ r.app || '—' }}</td>
+              <td class="ja-nowrap"><ja-trace-ref [traceId]="r.traceId" /></td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>`,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "component",
+				type: StatusBadge,
+				selector: "ja-status",
+				inputs: ["status"]
+			},
+			{
+				kind: "component",
+				type: TraceRef,
+				selector: "ja-trace-ref",
+				inputs: ["traceId", "short"]
+			},
+			{
+				kind: "pipe",
+				type: DatePipe,
+				name: "date"
+			},
+			{
+				kind: "pipe",
+				type: AuditLinkPipe,
+				name: "jaLink"
+			},
+			{
+				kind: "pipe",
+				type: DurationPipe,
+				name: "jaDuration"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: AccessLogTable,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ja-access-log-table",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				RouterLink,
+				DatePipe,
+				AuditLinkPipe,
+				DurationPipe,
+				StatusBadge,
+				TraceRef
+			],
+			template: `
+    <table class="ja-table">
+      <thead><tr><th>Time</th><th>User</th><th>Action</th><th>Status</th><th>Duration</th>@if (!compact()) { <th>App</th><th>Trace</th> }</tr></thead>
+      <tbody>
+        @for (r of rows(); track r.id) {
+          <tr>
+            <td class="ja-nowrap">{{ r.dateTime | date: 'MMM d, HH:mm:ss' }}</td>
+            <td>{{ r.user || '—' }}@if (r.tenantId) { <div class="ja-muted ja-small">{{ r.tenantId }}</div> }</td>
+            <td><a [routerLink]="['access-logs', r.id] | jaLink" [queryParams]="ctx.keep()">{{ r.action }}</a>
+              @if (r.method || r.path) { <div class="ja-muted ja-small ja-mono">{{ r.method }} {{ r.path }}</div> }
+              @if (r.isRestricted) { <span class="ja-badge ja-tone-warn">restricted</span> }</td>
+            <td><ja-status [status]="r.status" /></td>
+            <td class="ja-nowrap">@if (longest() > 0 && r.elapsedMs !== null) { <span class="ja-bar" [style.width.px]="60 * r.elapsedMs / longest()"></span> }{{ r.elapsedMs | jaDuration }}</td>
+            @if (!compact()) {
+              <td class="ja-muted">{{ r.app || '—' }}</td>
+              <td class="ja-nowrap"><ja-trace-ref [traceId]="r.traceId" /></td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>`
+		}]
+	}],
+	propDecorators: {
+		rows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rows",
+				required: true
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}]
+	}
+});
+var DataChangeTable = class DataChangeTable {
+	ctx = inject(AuditContextService);
+	rows = input.required(...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	compact = input(false, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: DataChangeTable,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: DataChangeTable,
+		isStandalone: true,
+		selector: "ja-data-change-table",
+		inputs: {
+			rows: {
+				classPropertyName: "rows",
+				publicName: "rows",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			compact: {
+				classPropertyName: "compact",
+				publicName: "compact",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    <table class="ja-table">
+      <thead><tr><th>Time</th><th>User</th><th>Change</th><th>Table</th><th>Keys</th>@if (!compact()) { <th>Trace</th> }</tr></thead>
+      <tbody>
+        @for (c of rows(); track c.id) {
+          <tr>
+            <td class="ja-nowrap"><a [routerLink]="['data-changes', c.id] | jaLink" [queryParams]="ctx.keep()">{{ c.dateTime | date: 'MMM d, HH:mm:ss' }}</a></td>
+            <td>{{ c.user || '—' }}@if (c.tenantId) { <div class="ja-muted ja-small">{{ c.tenantId }}</div> }</td>
+            <td><ja-action [action]="c.action" /></td>
+            <td class="ja-mono">{{ c.schema ? c.schema + '.' : '' }}{{ c.table }}@if (c.database) { <div class="ja-muted ja-small">{{ c.database }}</div> }</td>
+            <td class="ja-mono ja-small">{{ c.keys | jaKeys }}</td>
+            @if (!compact()) { <td class="ja-nowrap"><ja-trace-ref [traceId]="c.traceId" /></td> }
+          </tr>
+        }
+      </tbody>
+    </table>`,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "component",
+				type: ActionBadge,
+				selector: "ja-action",
+				inputs: ["action"]
+			},
+			{
+				kind: "component",
+				type: TraceRef,
+				selector: "ja-trace-ref",
+				inputs: ["traceId", "short"]
+			},
+			{
+				kind: "pipe",
+				type: DatePipe,
+				name: "date"
+			},
+			{
+				kind: "pipe",
+				type: AuditLinkPipe,
+				name: "jaLink"
+			},
+			{
+				kind: "pipe",
+				type: KeysPipe,
+				name: "jaKeys"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: DataChangeTable,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ja-data-change-table",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				RouterLink,
+				DatePipe,
+				AuditLinkPipe,
+				KeysPipe,
+				ActionBadge,
+				TraceRef
+			],
+			template: `
+    <table class="ja-table">
+      <thead><tr><th>Time</th><th>User</th><th>Change</th><th>Table</th><th>Keys</th>@if (!compact()) { <th>Trace</th> }</tr></thead>
+      <tbody>
+        @for (c of rows(); track c.id) {
+          <tr>
+            <td class="ja-nowrap"><a [routerLink]="['data-changes', c.id] | jaLink" [queryParams]="ctx.keep()">{{ c.dateTime | date: 'MMM d, HH:mm:ss' }}</a></td>
+            <td>{{ c.user || '—' }}@if (c.tenantId) { <div class="ja-muted ja-small">{{ c.tenantId }}</div> }</td>
+            <td><ja-action [action]="c.action" /></td>
+            <td class="ja-mono">{{ c.schema ? c.schema + '.' : '' }}{{ c.table }}@if (c.database) { <div class="ja-muted ja-small">{{ c.database }}</div> }</td>
+            <td class="ja-mono ja-small">{{ c.keys | jaKeys }}</td>
+            @if (!compact()) { <td class="ja-nowrap"><ja-trace-ref [traceId]="c.traceId" /></td> }
+          </tr>
+        }
+      </tbody>
+    </table>`
+		}]
+	}],
+	propDecorators: {
+		rows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rows",
+				required: true
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}]
+	}
+});
+var ChangeDiff = class ChangeDiff {
+	changes = input.required(...ngDevMode ? [{ debugName: "changes" }] : /* istanbul ignore next */ []);
+	rows = computed(() => {
+		const changes = asObject(this.changes());
+		const before = asObject(changes["OriginalValues"] ?? changes["originalValues"] ?? null);
+		const after = asObject(changes["CurrentValues"] ?? changes["currentValues"] ?? null);
+		const rows = [.../* @__PURE__ */ new Set([...Object.keys(before), ...Object.keys(after)])].map((field) => {
+			const hasBefore = field in before;
+			const hasAfter = field in after;
+			const b = formatValue(before[field]);
+			const a = formatValue(after[field]);
+			return {
+				field,
+				before: b,
+				after: a,
+				hasBefore,
+				hasAfter,
+				changed: hasBefore !== hasAfter || b !== a
+			};
+		});
+		return [...rows.filter((r) => r.changed), ...rows.filter((r) => !r.changed)];
+	}, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	unchanged = computed(() => this.rows().filter((r) => !r.changed).length, ...ngDevMode ? [{ debugName: "unchanged" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ChangeDiff,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: ChangeDiff,
+		isStandalone: true,
+		selector: "ja-change-diff",
+		inputs: { changes: {
+			classPropertyName: "changes",
+			publicName: "changes",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: `
+    @if (rows().length === 0) { <p class="ja-muted">No values were recorded.</p> }
+    @else {
+      <table class="ja-table ja-diff">
+        <thead><tr><th>Field</th><th>Before</th><th>After</th></tr></thead>
+        <tbody>
+          @for (r of rows(); track r.field) {
+            <tr [class.ja-changed]="r.changed">
+              <th class="ja-mono">{{ r.field }}</th>
+              <td class="ja-mono" [class.ja-old]="r.changed && r.hasBefore">@if (r.hasBefore) { {{ r.before }} } @else { <span class="ja-muted">—</span> }</td>
+              <td class="ja-mono" [class.ja-new]="r.changed && r.hasAfter">@if (r.hasAfter) { {{ r.after }} } @else { <span class="ja-muted">—</span> }</td>
+            </tr>
+          }
+        </tbody>
+      </table>
+      @if (unchanged() > 0) { <p class="ja-muted ja-small">{{ unchanged() }} field{{ unchanged() === 1 ? '' : 's' }} unchanged, shown after the changed ones.</p> }
+    }`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ChangeDiff,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ja-change-diff",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    @if (rows().length === 0) { <p class="ja-muted">No values were recorded.</p> }
+    @else {
+      <table class="ja-table ja-diff">
+        <thead><tr><th>Field</th><th>Before</th><th>After</th></tr></thead>
+        <tbody>
+          @for (r of rows(); track r.field) {
+            <tr [class.ja-changed]="r.changed">
+              <th class="ja-mono">{{ r.field }}</th>
+              <td class="ja-mono" [class.ja-old]="r.changed && r.hasBefore">@if (r.hasBefore) { {{ r.before }} } @else { <span class="ja-muted">—</span> }</td>
+              <td class="ja-mono" [class.ja-new]="r.changed && r.hasAfter">@if (r.hasAfter) { {{ r.after }} } @else { <span class="ja-muted">—</span> }</td>
+            </tr>
+          }
+        </tbody>
+      </table>
+      @if (unchanged() > 0) { <p class="ja-muted ja-small">{{ unchanged() }} field{{ unchanged() === 1 ? '' : 's' }} unchanged, shown after the changed ones.</p> }
+    }`
+		}]
+	}],
+	propDecorators: { changes: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "changes",
+			required: true
+		}]
+	}] }
+});
+function asObject(value) {
+	return value && typeof value === "object" && !Array.isArray(value) ? value : {};
+}
+var KeyValueTable = class KeyValueTable {
+	values = input({}, ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
+	empty = input("None", ...ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []);
+	entries = computed(() => Object.entries(this.values()).filter((e) => e[1] !== null && e[1] !== void 0 && e[1] !== "").sort((a, b) => a[0].localeCompare(b[0])), ...ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: KeyValueTable,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: KeyValueTable,
+		isStandalone: true,
+		selector: "ja-kv",
+		inputs: {
+			values: {
+				classPropertyName: "values",
+				publicName: "values",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			empty: {
+				classPropertyName: "empty",
+				publicName: "empty",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    @if (entries().length === 0) { <p class="ja-muted">{{ empty() }}</p> }
+    @else {
+      <table class="ja-kv"><tbody>
+        @for (e of entries(); track e[0]) { <tr><th>{{ e[0] }}</th><td>{{ e[1] }}</td></tr> }
+      </tbody></table>
+    }`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: KeyValueTable,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ja-kv",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    @if (entries().length === 0) { <p class="ja-muted">{{ empty() }}</p> }
+    @else {
+      <table class="ja-kv"><tbody>
+        @for (e of entries(); track e[0]) { <tr><th>{{ e[0] }}</th><td>{{ e[1] }}</td></tr> }
+      </tbody></table>
+    }`
+		}]
+	}],
+	propDecorators: {
+		values: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "values",
+				required: false
+			}]
+		}],
+		empty: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "empty",
+				required: false
+			}]
+		}]
+	}
+});
+export { DataChangeTable as a, TraceRef as c, PrettyJsonPipe as d, formatValue as f, ChangeDiff as i, DurationPipe as l, apiResource as m, ActionBadge as n, KeyValueTable as o, problemText as p, AuditContextBar as r, StatusBadge as s, AccessLogTable as t, KeysPipe as u };
+
+//# sourceMappingURL=juice-js-audit-ui-DnfhiB6p.mjs.map