@syndew/oluso-admin-ui 0.0.0-stage → 1.30.1

package/fesm2022/syndew-oluso-admin-ui-webhook-detail-page.component-Bh5dZwt-.mjs

@@ -0,0 +1,728 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, signal, computed, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { HttpClient, HttpContext } from '@angular/common/http';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { ToastService, extractErrorMessage, SKIP_ERROR_TOAST, CardComponent, ButtonComponent, BadgeComponent, ModalComponent, ConfirmDialogComponent, IconComponent, InputComponent } from '@syndew/oluso-ui-core';
+import { W as WebhookAuthType, S as STATIC_WEBHOOK_AUTH_TYPES, f as ApiService, h as WebhookService, C as ClientService, D as DEFAULT_WEBHOOK_API_VERSION } from './syndew-oluso-admin-ui-syndew-oluso-admin-ui-BVs_bAxm.mjs';
+
+/**
+ * Hands a newly created endpoint's signing secret to the page it navigates to, in memory only: the secret is
+ * shown once and must not land in the URL or the browser history.
+ */
+class WebhookSecretHandoff {
+    pending = null;
+    put(endpointId, secret) {
+        this.pending = { endpointId, secret };
+    }
+    take(endpointId) {
+        if (this.pending?.endpointId !== endpointId)
+            return null;
+        const secret = this.pending.secret;
+        this.pending = null;
+        return secret;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WebhookSecretHandoff, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WebhookSecretHandoff, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WebhookSecretHandoff, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/** A header name as HTTP allows it (RFC 9110 token). */
+const HEADER_NAME = /^[!#$%&'*+\-.^_`|~0-9A-Za-z]+$/;
+/** Headers the dispatcher sets itself; a custom header with one of these names would be overwritten or clash. */
+const RESERVED_HEADERS = ['authorization', 'content-type', 'x-api-key'];
+function emptyForm() {
+    return {
+        name: '',
+        description: '',
+        url: '',
+        enabled: true,
+        eventTypes: [],
+        authType: WebhookAuthType.None,
+        credential: '',
+        basicUsername: '',
+        basicPassword: '',
+        clientId: '',
+        skipOwnClientEvents: true,
+        authorizeSensitiveData: false,
+        headers: [],
+    };
+}
+/** Why the form can't be saved, per field; empty when it can. */
+function validateWebhookForm(form, credentialStored) {
+    const errors = {};
+    if (!form.name.trim())
+        errors.name = 'Enter a name.';
+    const url = form.url.trim();
+    if (!url) {
+        errors.url = 'Enter the URL that receives deliveries.';
+    }
+    else {
+        try {
+            const parsed = new URL(url);
+            if (parsed.protocol !== 'https:' && parsed.protocol !== 'http:')
+                errors.url = 'Use an http or https URL.';
+        }
+        catch {
+            errors.url = 'Enter a full URL, for example https://api.example.com/webhooks.';
+        }
+    }
+    if (form.eventTypes.length === 0)
+        errors.eventTypes = 'Choose at least one event.';
+    if (STATIC_WEBHOOK_AUTH_TYPES.includes(form.authType) && !credentialStored) {
+        if (form.authType === WebhookAuthType.BasicAuth) {
+            if (!form.basicUsername.trim() || !form.basicPassword)
+                errors.credential = 'Enter a username and password.';
+            else if (form.basicUsername.includes(':'))
+                errors.credential = 'The username cannot contain a colon.';
+        }
+        else if (!form.credential.trim()) {
+            errors.credential = form.authType === WebhookAuthType.BearerToken ? 'Enter the token.' : 'Enter the API key.';
+        }
+    }
+    else if (form.authType === WebhookAuthType.BasicAuth && (form.basicUsername || form.basicPassword)) {
+        // Replacing a stored Basic credential needs both halves.
+        if (!form.basicUsername.trim() || !form.basicPassword)
+            errors.credential = 'Enter both the username and the password to replace them.';
+        else if (form.basicUsername.includes(':'))
+            errors.credential = 'The username cannot contain a colon.';
+    }
+    const seen = new Set();
+    for (const row of form.headers) {
+        const name = row.name.trim();
+        if (!name && !row.value)
+            continue;
+        if (!name) {
+            errors.headers = 'Every header needs a name.';
+            break;
+        }
+        if (!HEADER_NAME.test(name)) {
+            errors.headers = `"${name}" is not a valid header name.`;
+            break;
+        }
+        const lower = name.toLowerCase();
+        if (RESERVED_HEADERS.includes(lower) || lower.startsWith('x-webhook-')) {
+            errors.headers = `${name} is set by the delivery itself.`;
+            break;
+        }
+        if (seen.has(lower)) {
+            errors.headers = `${name} is listed twice.`;
+            break;
+        }
+        seen.add(lower);
+    }
+    return errors;
+}
+class WebhookDetailPageComponent {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    http = inject(HttpClient);
+    api = inject(ApiService);
+    webhookService = inject(WebhookService);
+    clientService = inject(ClientService);
+    toast = inject(ToastService);
+    secretHandoff = inject(WebhookSecretHandoff);
+    AuthType = WebhookAuthType;
+    defaultApiVersion = DEFAULT_WEBHOOK_API_VERSION;
+    staticAuthOptions = [
+        { type: WebhookAuthType.BearerToken, label: 'Bearer token', hint: 'Sent as Authorization: Bearer <token>' },
+        { type: WebhookAuthType.BasicAuth, label: 'Basic auth', hint: 'Sent as Authorization: Basic <username:password>' },
+        { type: WebhookAuthType.ApiKeyHeader, label: 'API key header', hint: 'Sent as X-API-Key: <key>' },
+    ];
+    sections = [
+        { id: 'basics', label: 'Basics' },
+        { id: 'events', label: 'Events' },
+        { id: 'authentication', label: 'Authentication' },
+        { id: 'client', label: 'Owning client' },
+        { id: 'sensitive', label: 'Sensitive data' },
+        { id: 'advanced', label: 'Headers and version' },
+    ];
+    isNew = signal(true, ...(ngDevMode ? [{ debugName: "isNew" }] : /* istanbul ignore next */ []));
+    loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    saving = signal(false, ...(ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []));
+    submitted = signal(false, ...(ngDevMode ? [{ debugName: "submitted" }] : /* istanbul ignore next */ []));
+    endpoint = signal(null, ...(ngDevMode ? [{ debugName: "endpoint" }] : /* istanbul ignore next */ []));
+    clients = signal([], ...(ngDevMode ? [{ debugName: "clients" }] : /* istanbul ignore next */ []));
+    eventsGrouped = signal({}, ...(ngDevMode ? [{ debugName: "eventsGrouped" }] : /* istanbul ignore next */ []));
+    activeTab = signal('settings', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    deliveries = signal([], ...(ngDevMode ? [{ debugName: "deliveries" }] : /* istanbul ignore next */ []));
+    deliveriesLoading = signal(false, ...(ngDevMode ? [{ debugName: "deliveriesLoading" }] : /* istanbul ignore next */ []));
+    deliveriesLoaded = signal(false, ...(ngDevMode ? [{ debugName: "deliveriesLoaded" }] : /* istanbul ignore next */ []));
+    retryingId = signal(null, ...(ngDevMode ? [{ debugName: "retryingId" }] : /* istanbul ignore next */ []));
+    testing = signal(false, ...(ngDevMode ? [{ debugName: "testing" }] : /* istanbul ignore next */ []));
+    showDeleteConfirm = signal(false, ...(ngDevMode ? [{ debugName: "showDeleteConfirm" }] : /* istanbul ignore next */ []));
+    deleting = signal(false, ...(ngDevMode ? [{ debugName: "deleting" }] : /* istanbul ignore next */ []));
+    showRotateConfirm = signal(false, ...(ngDevMode ? [{ debugName: "showRotateConfirm" }] : /* istanbul ignore next */ []));
+    rotating = signal(false, ...(ngDevMode ? [{ debugName: "rotating" }] : /* istanbul ignore next */ []));
+    showSecretModal = signal(false, ...(ngDevMode ? [{ debugName: "showSecretModal" }] : /* istanbul ignore next */ []));
+    newSecret = signal('', ...(ngDevMode ? [{ debugName: "newSecret" }] : /* istanbul ignore next */ []));
+    secretCopied = signal(false, ...(ngDevMode ? [{ debugName: "secretCopied" }] : /* istanbul ignore next */ []));
+    showSensitiveDataConfirm = signal(false, ...(ngDevMode ? [{ debugName: "showSensitiveDataConfirm" }] : /* istanbul ignore next */ []));
+    /** The tenant issuer's JWKS URL, for issuer-signed delivery. */
+    jwksUrl = signal(null, ...(ngDevMode ? [{ debugName: "jwksUrl" }] : /* istanbul ignore next */ []));
+    jwksFromDiscovery = signal(false, ...(ngDevMode ? [{ debugName: "jwksFromDiscovery" }] : /* istanbul ignore next */ []));
+    jwksRequested = false;
+    collapsedGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "collapsedGroups" }] : /* istanbul ignore next */ []));
+    eventSearchTerm = '';
+    formData = emptyForm();
+    eventsByType = computed(() => {
+        const byType = new Map();
+        for (const events of Object.values(this.eventsGrouped())) {
+            for (const event of events)
+                byType.set(event.eventType, event);
+        }
+        return byType;
+    }, ...(ngDevMode ? [{ debugName: "eventsByType" }] : /* istanbul ignore next */ []));
+    tabs = computed(() => this.isNew()
+        ? []
+        : [
+            { id: 'settings', label: 'Settings' },
+            { id: 'deliveries', label: 'Deliveries' },
+        ], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        const id = this.route.snapshot.paramMap.get('id');
+        this.loadEvents();
+        this.loadClients();
+        if (id && id !== 'new') {
+            this.isNew.set(false);
+            this.loadEndpoint(id, true);
+        }
+        else {
+            this.isNew.set(true);
+            this.formData = emptyForm();
+            this.loading.set(false);
+        }
+    }
+    // --- Loading ---
+    loadEndpoint(id, first = false) {
+        if (first)
+            this.loading.set(true);
+        this.webhookService.getEndpoint(id).subscribe({
+            next: (endpoint) => {
+                this.endpoint.set(endpoint);
+                if (first) {
+                    this.resetForm(endpoint);
+                    const secret = this.secretHandoff.take(endpoint.id);
+                    if (secret) {
+                        this.newSecret.set(secret);
+                        this.showSecretModal.set(true);
+                    }
+                }
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('Failed to load webhook:', error);
+                this.loading.set(false);
+            },
+        });
+    }
+    loadEvents() {
+        this.webhookService.getEventsGrouped().subscribe({
+            next: (grouped) => this.eventsGrouped.set(grouped),
+            error: (error) => console.error('Failed to load events:', error),
+        });
+    }
+    loadClients() {
+        this.clientService.getClients().subscribe({
+            next: (clients) => this.clients.set(clients),
+            error: (error) => console.error('Failed to load clients:', error),
+        });
+    }
+    resetForm(endpoint) {
+        this.formData = {
+            ...emptyForm(),
+            name: endpoint.name,
+            description: endpoint.description ?? '',
+            url: endpoint.url,
+            enabled: endpoint.enabled,
+            eventTypes: [...endpoint.eventTypes],
+            authType: endpoint.authType ?? WebhookAuthType.None,
+            clientId: endpoint.clientId ?? '',
+            skipOwnClientEvents: endpoint.skipOwnClientEvents,
+            authorizeSensitiveData: !!endpoint.sensitiveDataAuthorizedAt,
+            headers: Object.entries(endpoint.headers ?? {}).map(([name, value]) => ({ name, value })),
+        };
+        if (this.formData.authType === WebhookAuthType.IssuerSigned)
+            this.loadJwksUrl();
+    }
+    // --- Header, tabs, navigation ---
+    pageTitle() {
+        return this.isNew() ? 'New webhook' : this.endpoint()?.name || 'Webhook';
+    }
+    setActiveTab(tab) {
+        this.activeTab.set(tab);
+        if (tab === 'deliveries' && !this.deliveriesLoaded())
+            this.loadDeliveries();
+    }
+    scrollToSection(id) {
+        if (typeof document === 'undefined')
+            return;
+        document.getElementById(`webhook-${id}`)?.scrollIntoView?.({ behavior: 'smooth', block: 'start' });
+    }
+    onCancel() {
+        this.router.navigate(['/webhooks']);
+    }
+    // --- Validation and saving ---
+    /** A static credential of the selected type is already stored, so leaving the field blank keeps it. */
+    credentialStored() {
+        const endpoint = this.endpoint();
+        return !!endpoint && endpoint.authType === this.formData.authType && STATIC_WEBHOOK_AUTH_TYPES.includes(this.formData.authType);
+    }
+    errors() {
+        return validateWebhookForm(this.formData, this.credentialStored());
+    }
+    /** The error to show for a field, once the admin has tried to save. */
+    fieldError(field) {
+        return this.submitted() ? this.errors()[field] : undefined;
+    }
+    onSave() {
+        this.submitted.set(true);
+        const errors = this.errors();
+        const firstInvalid = Object.keys(errors)[0];
+        if (firstInvalid) {
+            this.activeTab.set('settings');
+            this.toast.error('Check the highlighted fields.');
+            const section = { name: 'basics', url: 'basics', eventTypes: 'events', credential: 'authentication', headers: 'advanced' }[firstInvalid];
+            setTimeout(() => this.scrollToSection(section));
+            return;
+        }
+        const endpoint = this.endpoint();
+        if (this.isNew() || !endpoint)
+            this.create();
+        else
+            this.update(endpoint);
+    }
+    headersMap() {
+        const map = {};
+        for (const row of this.formData.headers) {
+            if (row.name.trim())
+                map[row.name.trim()] = row.value;
+        }
+        return map;
+    }
+    /** The credential the form holds for the selected static type, or undefined to keep (or not set) one. */
+    credentialValue() {
+        switch (this.formData.authType) {
+            case WebhookAuthType.BearerToken:
+            case WebhookAuthType.ApiKeyHeader:
+                return this.formData.credential.trim() || undefined;
+            case WebhookAuthType.BasicAuth:
+                return this.formData.basicUsername.trim() && this.formData.basicPassword
+                    ? `${this.formData.basicUsername.trim()}:${this.formData.basicPassword}`
+                    : undefined;
+            default:
+                return undefined;
+        }
+    }
+    buildCreateRequest() {
+        const headers = this.headersMap();
+        return {
+            name: this.formData.name.trim(),
+            description: this.formData.description.trim() || undefined,
+            url: this.formData.url.trim(),
+            enabled: this.formData.enabled,
+            eventTypes: this.formData.eventTypes,
+            headers: Object.keys(headers).length ? headers : undefined,
+            authType: this.formData.authType,
+            authCredential: this.credentialValue(),
+            apiVersion: DEFAULT_WEBHOOK_API_VERSION,
+            clientId: this.formData.clientId || undefined,
+            skipOwnClientEvents: this.formData.skipOwnClientEvents,
+            authorizeSensitiveData: this.formData.authorizeSensitiveData,
+        };
+    }
+    buildUpdateRequest(endpoint) {
+        const request = {
+            name: this.formData.name.trim(),
+            description: this.formData.description.trim(),
+            url: this.formData.url.trim(),
+            enabled: this.formData.enabled,
+            eventTypes: this.formData.eventTypes,
+            headers: this.headersMap(),
+            clientId: this.formData.clientId,
+            skipOwnClientEvents: this.formData.skipOwnClientEvents,
+            authorizeSensitiveData: this.formData.authorizeSensitiveData,
+        };
+        // The type is sent only when it changes, so an endpoint whose type the server didn't report keeps it.
+        if (this.formData.authType !== (endpoint.authType ?? WebhookAuthType.None)) {
+            request.authType = this.formData.authType;
+        }
+        const credential = this.credentialValue();
+        if (credential !== undefined)
+            request.authCredential = credential;
+        return request;
+    }
+    create() {
+        this.saving.set(true);
+        this.webhookService.createEndpoint(this.buildCreateRequest()).subscribe({
+            next: (created) => {
+                this.saving.set(false);
+                if (created.secret && this.formData.authType !== WebhookAuthType.IssuerSigned) {
+                    this.secretHandoff.put(created.id, created.secret);
+                }
+                this.toast.success('Webhook created');
+                this.router.navigate(['/webhooks', created.id]);
+            },
+            error: (error) => {
+                this.toast.error(extractErrorMessage(error, 'Failed to create webhook'));
+                this.saving.set(false);
+            },
+        });
+    }
+    update(endpoint) {
+        this.saving.set(true);
+        this.webhookService.updateEndpoint(endpoint.id, this.buildUpdateRequest(endpoint)).subscribe({
+            next: (updated) => {
+                this.saving.set(false);
+                this.submitted.set(false);
+                // Keep stats and anything the update response leaves out.
+                const merged = { ...endpoint, ...updated, authType: updated?.authType ?? this.formData.authType };
+                this.endpoint.set(merged);
+                this.resetForm(merged);
+                this.toast.success('Changes saved');
+            },
+            error: (error) => {
+                this.toast.error(extractErrorMessage(error, 'Failed to update webhook'));
+                this.saving.set(false);
+            },
+        });
+    }
+    // --- Delete ---
+    confirmDelete() {
+        const endpoint = this.endpoint();
+        if (!endpoint)
+            return;
+        this.deleting.set(true);
+        this.webhookService.deleteEndpoint(endpoint.id).subscribe({
+            next: () => {
+                this.deleting.set(false);
+                this.showDeleteConfirm.set(false);
+                this.toast.success('Webhook deleted');
+                this.router.navigate(['/webhooks']);
+            },
+            error: (error) => {
+                this.toast.error(extractErrorMessage(error, 'Failed to delete webhook'));
+                this.deleting.set(false);
+            },
+        });
+    }
+    // --- Authentication ---
+    isStaticAuth(type = this.formData.authType) {
+        return STATIC_WEBHOOK_AUTH_TYPES.includes(type);
+    }
+    selectAuthMode(mode) {
+        if (mode === 'hmac')
+            this.formData.authType = WebhookAuthType.None;
+        else if (mode === 'issuer') {
+            this.formData.authType = WebhookAuthType.IssuerSigned;
+            this.loadJwksUrl();
+        }
+        else if (!this.isStaticAuth()) {
+            const stored = this.endpoint()?.authType;
+            this.formData.authType = stored !== undefined && this.isStaticAuth(stored) ? stored : WebhookAuthType.BearerToken;
+        }
+    }
+    authMode() {
+        if (this.formData.authType === WebhookAuthType.IssuerSigned)
+            return 'issuer';
+        return this.isStaticAuth() ? 'static' : 'hmac';
+    }
+    /** Deliveries carry the HMAC signature, so the secret exists and can be rotated. */
+    usesSigningSecret() {
+        return this.formData.authType !== WebhookAuthType.IssuerSigned;
+    }
+    /** The endpoint was saved as issuer-signed and is being switched to a secret-based type. */
+    leavingIssuerSigned() {
+        return this.endpoint()?.authType === WebhookAuthType.IssuerSigned && this.usesSigningSecret();
+    }
+    /**
+     * Resolves the JWKS URL the tenant's discovery document advertises: the tenant's issuer comes from the admin
+     * API's server info, then jwks_uri from that issuer's discovery document. Falls back to the default path.
+     */
+    loadJwksUrl() {
+        if (this.jwksRequested)
+            return;
+        this.jwksRequested = true;
+        const quiet = { context: new HttpContext().set(SKIP_ERROR_TOAST, true) };
+        const fallbackFor = (issuer) => `${issuer.replace(/\/$/, '')}/.well-known/jwks`;
+        this.http.get(`${this.api.baseUrl}/identity-providers/server-info`, quiet).subscribe({
+            next: (info) => {
+                const issuer = (info?.issuerUri || this.api.absoluteUrl('')).replace(/\/$/, '');
+                this.jwksUrl.set(fallbackFor(issuer));
+                this.http.get(`${issuer}/.well-known/openid-configuration`, quiet).subscribe({
+                    next: (discovery) => {
+                        if (discovery?.jwks_uri) {
+                            this.jwksUrl.set(discovery.jwks_uri);
+                            this.jwksFromDiscovery.set(true);
+                        }
+                    },
+                    error: () => undefined,
+                });
+            },
+            error: () => this.jwksUrl.set(fallbackFor(this.api.absoluteUrl(''))),
+        });
+    }
+    copy(value) {
+        if (!value)
+            return;
+        navigator.clipboard.writeText(value).then(() => this.toast.success('Copied'), () => this.toast.error('Could not copy to the clipboard'));
+    }
+    confirmRotateSecret() {
+        const endpoint = this.endpoint();
+        if (!endpoint)
+            return;
+        this.rotating.set(true);
+        this.webhookService.rotateSecret(endpoint.id).subscribe({
+            next: (response) => {
+                this.rotating.set(false);
+                this.showRotateConfirm.set(false);
+                this.newSecret.set(response.secret);
+                this.showSecretModal.set(true);
+            },
+            error: (error) => {
+                this.toast.error(extractErrorMessage(error, 'Failed to rotate the secret'));
+                this.rotating.set(false);
+            },
+        });
+    }
+    async copySecret() {
+        await navigator.clipboard.writeText(this.newSecret());
+        this.secretCopied.set(true);
+        setTimeout(() => this.secretCopied.set(false), 2000);
+    }
+    closeSecretModal() {
+        this.showSecretModal.set(false);
+        this.newSecret.set('');
+    }
+    // --- Owning client ---
+    clientLabel(clientId) {
+        const client = this.clients().find((c) => c.clientId === clientId);
+        return client?.clientName ? `${client.clientName} (${clientId})` : clientId;
+    }
+    // --- Custom headers ---
+    addHeader() {
+        this.formData.headers = [...this.formData.headers, { name: '', value: '' }];
+    }
+    removeHeader(index) {
+        this.formData.headers = this.formData.headers.filter((_, i) => i !== index);
+    }
+    // --- Events ---
+    toggleEventType(eventType) {
+        if (this.formData.eventTypes.includes(eventType)) {
+            this.formData.eventTypes = this.formData.eventTypes.filter((e) => e !== eventType);
+        }
+        else if (this.canSelect(this.eventsByType().get(eventType))) {
+            this.formData.eventTypes = [...this.formData.eventTypes, eventType];
+        }
+    }
+    isSelected(eventType) {
+        return this.formData.eventTypes.includes(eventType);
+    }
+    filteredGroups() {
+        const grouped = this.eventsGrouped();
+        const groups = Object.keys(grouped).map((name) => ({ name, events: grouped[name] }));
+        const term = this.eventSearchTerm.trim().toLowerCase();
+        if (!term)
+            return groups;
+        return groups
+            .map((group) => ({
+            ...group,
+            events: group.events.filter((e) => e.eventType.toLowerCase().includes(term) ||
+                e.displayName.toLowerCase().includes(term) ||
+                (e.description?.toLowerCase().includes(term) ?? false) ||
+                group.name.toLowerCase().includes(term)),
+        }))
+            .filter((group) => group.events.length > 0);
+    }
+    /** Groups start open; a search always shows its matches. */
+    isGroupExpanded(name) {
+        return !!this.eventSearchTerm.trim() || !this.collapsedGroups().has(name);
+    }
+    toggleGroup(name) {
+        const next = new Set(this.collapsedGroups());
+        if (next.has(name))
+            next.delete(name);
+        else
+            next.add(name);
+        this.collapsedGroups.set(next);
+    }
+    expandAllGroups() {
+        this.collapsedGroups.set(new Set());
+    }
+    collapseAllGroups() {
+        this.collapsedGroups.set(new Set(Object.keys(this.eventsGrouped())));
+    }
+    selectedCount(group) {
+        return group.events.filter((e) => this.isSelected(e.eventType)).length;
+    }
+    /** The events in the group the admin can toggle: subscribable ones, plus ones already selected. */
+    toggleable(group) {
+        return group.events.filter((e) => this.canSelect(e) || this.isSelected(e.eventType)).map((e) => e.eventType);
+    }
+    isGroupFullySelected(group) {
+        const types = this.toggleable(group);
+        return types.length > 0 && types.every((t) => this.isSelected(t));
+    }
+    isGroupPartlySelected(group) {
+        const count = this.selectedCount(group);
+        return count > 0 && !this.isGroupFullySelected(group);
+    }
+    toggleGroupSelection(group) {
+        const types = this.toggleable(group);
+        if (types.every((t) => this.isSelected(t))) {
+            this.formData.eventTypes = this.formData.eventTypes.filter((e) => !types.includes(e));
+        }
+        else {
+            this.formData.eventTypes = [...new Set([...this.formData.eventTypes, ...types])];
+        }
+    }
+    clearEvents() {
+        this.formData.eventTypes = [];
+    }
+    // --- Restricted events and sensitive data ---
+    /** A restricted event can only be newly subscribed by an administrator holding its permission. */
+    canSelect(event) {
+        return event?.canSubscribe !== false;
+    }
+    carriesSensitiveData(event) {
+        return !!event && (!!event.restricted || (event.sensitiveProperties?.length ?? 0) > 0);
+    }
+    sensitiveEventsOf(eventTypes) {
+        return eventTypes
+            .map((type) => this.eventsByType().get(type))
+            .filter((event) => this.carriesSensitiveData(event));
+    }
+    /** Authorising needs the permission of every restricted event the endpoint will subscribe to. */
+    canAuthorizeSensitiveData() {
+        return this.sensitiveEventsOf(this.formData.eventTypes).every((event) => this.canSelect(event));
+    }
+    restrictionTitle(event) {
+        const parts = [
+            event.classificationPurpose,
+            event.requiredPermission ? `Requires the ${event.requiredPermission} permission.` : undefined,
+            event.sensitiveProperties?.length ? `Withheld unless authorised: ${event.sensitiveProperties.join(', ')}` : undefined,
+        ];
+        return parts.filter(Boolean).join(' ');
+    }
+    authorizationTitle(endpoint) {
+        if (!endpoint.sensitiveDataAuthorizedAt)
+            return '';
+        const by = endpoint.sensitiveDataAuthorizedByName || endpoint.sensitiveDataAuthorizedBy;
+        return `Authorised by ${by} on ${this.formatDate(endpoint.sensitiveDataAuthorizedAt)}`;
+    }
+    onAuthorizeSensitiveDataChange(checked) {
+        this.formData.authorizeSensitiveData = false;
+        if (checked)
+            this.showSensitiveDataConfirm.set(true);
+    }
+    confirmSensitiveData() {
+        this.formData.authorizeSensitiveData = true;
+        this.showSensitiveDataConfirm.set(false);
+    }
+    cancelSensitiveData() {
+        this.formData.authorizeSensitiveData = false;
+        this.showSensitiveDataConfirm.set(false);
+    }
+    sensitiveDataConfirmMessage() {
+        const names = this.sensitiveEventsOf(this.formData.eventTypes).map((e) => e.displayName);
+        return (`Deliveries to ${this.formData.url || 'this endpoint'} will include the confidential fields of ${names.join(', ')}. ` +
+            'This data leaves the platform and is then governed by the receiving system. ' +
+            'Only authorise endpoints your organisation is permitted to share this data with. ' +
+            'Your name and the time are recorded against this authorisation.');
+    }
+    // --- Deliveries and testing ---
+    loadDeliveries() {
+        const endpoint = this.endpoint();
+        if (!endpoint)
+            return;
+        this.deliveriesLoading.set(true);
+        this.webhookService.getDeliveries(endpoint.id).subscribe({
+            next: (deliveries) => {
+                this.deliveries.set(deliveries);
+                this.deliveriesLoading.set(false);
+                this.deliveriesLoaded.set(true);
+            },
+            error: (error) => {
+                console.error('Failed to load deliveries:', error);
+                this.deliveriesLoading.set(false);
+            },
+        });
+    }
+    testEndpoint() {
+        const endpoint = this.endpoint();
+        if (!endpoint)
+            return;
+        this.testing.set(true);
+        this.webhookService.testEndpoint(endpoint.id).subscribe({
+            next: (result) => {
+                this.testing.set(false);
+                if (result?.success === false)
+                    this.toast.error(result.error || 'The test delivery failed');
+                else
+                    this.toast.success('Test event sent');
+                this.loadEndpoint(endpoint.id);
+                if (this.deliveriesLoaded() || this.activeTab() === 'deliveries')
+                    this.loadDeliveries();
+            },
+            error: (error) => {
+                this.toast.error(extractErrorMessage(error, 'Failed to send the test event'));
+                this.testing.set(false);
+            },
+        });
+    }
+    retryDelivery(delivery) {
+        this.retryingId.set(delivery.id);
+        this.webhookService.retryDelivery(delivery.id).subscribe({
+            next: () => {
+                this.retryingId.set(null);
+                this.loadDeliveries();
+            },
+            error: (error) => {
+                this.toast.error(extractErrorMessage(error, 'Failed to retry the delivery'));
+                this.retryingId.set(null);
+            },
+        });
+    }
+    canRetry(status) {
+        return status === 'Failed' || status === 'Exhausted';
+    }
+    getStatusVariant(status) {
+        switch (status) {
+            case 'Success':
+                return 'success';
+            case 'Failed':
+                return 'danger';
+            case 'Pending':
+                return 'warning';
+            default:
+                return 'default';
+        }
+    }
+    formatDate(dateString) {
+        return dateString ? new Date(dateString).toLocaleString() : 'Never';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WebhookDetailPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: WebhookDetailPageComponent, isStandalone: true, selector: "admin-webhook-detail-page", ngImport: i0, template: "@if (loading()) {\n  <div class=\"flex justify-center py-12\" role=\"status\" aria-label=\"Loading\">\n    <svg class=\"animate-spin h-8 w-8 text-primary-600\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n      <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n      <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n    </svg>\n  </div>\n} @else if (!isNew() && !endpoint()) {\n  <div class=\"flex flex-col items-center justify-center py-16 text-gray-500\">\n    <ui-icon name=\"link\" class=\"h-12 w-12 mb-4\" />\n    <p>This webhook could not be found.</p>\n    <a routerLink=\"/webhooks\" class=\"mt-2 text-sm text-primary-600 hover:text-primary-700\">Back to webhooks</a>\n  </div>\n} @else {\n  <div class=\"space-y-6\">\n    <!-- Breadcrumb -->\n    <nav aria-label=\"Breadcrumb\" class=\"text-sm\">\n      <ol class=\"flex items-center gap-1 text-gray-500\">\n        <li><a routerLink=\"/webhooks\" class=\"hover:text-gray-700\">Webhooks</a></li>\n        <li aria-hidden=\"true\"><ui-icon name=\"chevron-right\" class=\"h-4 w-4\" /></li>\n        <li class=\"text-gray-900 truncate\" aria-current=\"page\">{{ pageTitle() }}</li>\n      </ol>\n    </nav>\n\n    <!-- Page header -->\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\">\n      <div class=\"min-w-0\">\n        <h1 class=\"text-2xl font-bold text-gray-900 truncate\">{{ pageTitle() }}</h1>\n        @if (isNew()) {\n          <p class=\"mt-1 text-sm text-gray-500\">Send events from this tenant to a URL you control.</p>\n        } @else if (endpoint(); as ep) {\n          <div class=\"mt-1 flex flex-wrap items-center gap-2\">\n            <span class=\"font-mono text-xs text-gray-600 break-all\">{{ ep.url }}</span>\n            <ui-badge [variant]=\"ep.enabled ? 'success' : 'default'\">{{ ep.enabled ? 'Active' : 'Disabled' }}</ui-badge>\n          </div>\n          <div class=\"mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500\">\n            <span>Created: <span class=\"text-gray-700\">{{ formatDate(ep.createdAt) }}</span></span>\n            @if (ep.updatedAt) {\n              <span>Updated: <span class=\"text-gray-700\">{{ formatDate(ep.updatedAt) }}</span></span>\n            }\n            <span>Last delivery: <span class=\"text-gray-700\">{{ formatDate(ep.stats?.lastDeliveryAt) }}</span></span>\n          </div>\n        }\n      </div>\n      <div class=\"flex flex-wrap items-center gap-2 shrink-0\">\n        @if (!isNew()) {\n          <ui-button variant=\"secondary\" [loading]=\"testing()\" (clicked)=\"testEndpoint()\">\n            <ui-icon name=\"beaker\" class=\"h-4 w-4 mr-1.5\" />\n            Send test event\n          </ui-button>\n          <ui-button variant=\"danger\" (clicked)=\"showDeleteConfirm.set(true)\">Delete</ui-button>\n        }\n        <ui-button variant=\"secondary\" (clicked)=\"onCancel()\">Cancel</ui-button>\n        <ui-button [loading]=\"saving()\" (clicked)=\"onSave()\">{{ isNew() ? 'Create webhook' : 'Save changes' }}</ui-button>\n      </div>\n    </div>\n\n    <!-- Tabs (existing endpoints) -->\n    @if (tabs().length) {\n      <div class=\"border-b border-gray-200\">\n        <nav class=\"-mb-px flex space-x-6 overflow-x-auto\" role=\"tablist\" aria-label=\"Webhook sections\">\n          @for (tab of tabs(); track tab.id) {\n            <button\n              type=\"button\"\n              role=\"tab\"\n              [attr.aria-selected]=\"activeTab() === tab.id\"\n              [class]=\"activeTab() === tab.id\n                ? 'border-primary-500 text-primary-600'\n                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\"\n              class=\"whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm\"\n              (click)=\"setActiveTab(tab.id)\"\n            >\n              {{ tab.label }}\n              @if (tab.id === 'deliveries' && endpoint()?.stats; as stats) {\n                <span class=\"ml-1 text-xs text-gray-400\">{{ stats.totalDeliveries }}</span>\n              }\n            </button>\n          }\n        </nav>\n      </div>\n    }\n\n    @if (activeTab() === 'settings') {\n      <form (ngSubmit)=\"onSave()\" novalidate class=\"grid gap-6 lg:grid-cols-[12rem_minmax(0,1fr)]\">\n        <!-- Section index -->\n        <aside class=\"hidden lg:block\" aria-label=\"On this page\">\n          <ul class=\"sticky top-4 space-y-1 text-sm\">\n            @for (s of sections; track s.id) {\n              <li>\n                <a\n                  [href]=\"'#webhook-' + s.id\"\n                  (click)=\"$event.preventDefault(); scrollToSection(s.id)\"\n                  class=\"block rounded px-2 py-1 text-gray-600 hover:bg-gray-100 hover:text-gray-900\"\n                >{{ s.label }}</a>\n              </li>\n            }\n          </ul>\n        </aside>\n\n        <div class=\"space-y-6 min-w-0 max-w-4xl\">\n          <!-- 1. Basics -->\n          <section id=\"webhook-basics\" class=\"scroll-mt-4\">\n            <ui-card title=\"Basics\" subtitle=\"What this endpoint is and where deliveries go.\">\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <ui-input\n                  label=\"Name\"\n                  inputId=\"webhook-name\"\n                  [required]=\"true\"\n                  placeholder=\"Order sync\"\n                  [error]=\"fieldError('name')\"\n                  [(ngModel)]=\"formData.name\"\n                  name=\"name\"\n                />\n                <ui-input\n                  label=\"Description\"\n                  inputId=\"webhook-description\"\n                  placeholder=\"Optional\"\n                  [(ngModel)]=\"formData.description\"\n                  name=\"description\"\n                />\n                <div class=\"md:col-span-2\">\n                  <ui-input\n                    label=\"Endpoint URL\"\n                    inputId=\"webhook-url\"\n                    type=\"url\"\n                    [required]=\"true\"\n                    placeholder=\"https://api.example.com/webhooks\"\n                    hint=\"Deliveries are POST requests with a JSON body. Use HTTPS outside development.\"\n                    [error]=\"fieldError('url')\"\n                    [(ngModel)]=\"formData.url\"\n                    name=\"url\"\n                  />\n                </div>\n                <div class=\"md:col-span-2 flex items-start gap-3\">\n                  <input\n                    type=\"checkbox\"\n                    id=\"webhook-enabled\"\n                    name=\"enabled\"\n                    [(ngModel)]=\"formData.enabled\"\n                    class=\"mt-0.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500\"\n                  />\n                  <label for=\"webhook-enabled\" class=\"text-sm text-gray-700\">\n                    Endpoint is active\n                    <span class=\"block text-xs text-gray-500\">Turn this off to pause deliveries without losing the configuration.</span>\n                  </label>\n                </div>\n              </div>\n            </ui-card>\n          </section>\n\n          <!-- 2. Events -->\n          <section id=\"webhook-events\" class=\"scroll-mt-4\">\n            <ui-card title=\"Events\" subtitle=\"Choose which events are delivered to this endpoint, grouped by module.\">\n              <div class=\"space-y-3\">\n                <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center\">\n                  <div class=\"relative flex-1\">\n                    <label for=\"webhook-event-search\" class=\"sr-only\">Search events</label>\n                    <ui-icon name=\"search\" class=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400\" />\n                    <input\n                      id=\"webhook-event-search\"\n                      type=\"search\"\n                      [(ngModel)]=\"eventSearchTerm\"\n                      [ngModelOptions]=\"{ standalone: true }\"\n                      placeholder=\"Search events\"\n                      class=\"pl-9 w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm\"\n                    />\n                  </div>\n                  <div class=\"flex items-center gap-1 text-sm\">\n                    <button type=\"button\" (click)=\"expandAllGroups()\" class=\"rounded px-2 py-1.5 text-gray-600 hover:bg-gray-100\">Expand all</button>\n                    <button type=\"button\" (click)=\"collapseAllGroups()\" class=\"rounded px-2 py-1.5 text-gray-600 hover:bg-gray-100\">Collapse all</button>\n                    @if (formData.eventTypes.length) {\n                      <button type=\"button\" (click)=\"clearEvents()\" class=\"rounded px-2 py-1.5 text-gray-600 hover:bg-gray-100\">Clear</button>\n                    }\n                  </div>\n                </div>\n\n                <p class=\"text-sm\" [class.text-gray-600]=\"!fieldError('eventTypes')\" [class.text-red-600]=\"!!fieldError('eventTypes')\" aria-live=\"polite\">\n                  @if (fieldError('eventTypes'); as err) {\n                    {{ err }}\n                  } @else {\n                    {{ formData.eventTypes.length }} {{ formData.eventTypes.length === 1 ? 'event' : 'events' }} selected\n                  }\n                </p>\n\n                <div class=\"rounded-md border border-gray-200 divide-y divide-gray-200\">\n                  @for (group of filteredGroups(); track group.name) {\n                    <div>\n                      <div class=\"flex items-center gap-3 bg-gray-50 px-3 py-2\">\n                        <button\n                          type=\"button\"\n                          class=\"flex items-center text-gray-500 hover:text-gray-700\"\n                          [attr.aria-expanded]=\"isGroupExpanded(group.name)\"\n                          [attr.aria-label]=\"(isGroupExpanded(group.name) ? 'Collapse ' : 'Expand ') + group.name\"\n                          (click)=\"toggleGroup(group.name)\"\n                        >\n                          <ui-icon [name]=\"isGroupExpanded(group.name) ? 'chevron-down' : 'chevron-right'\" class=\"h-4 w-4\" />\n                        </button>\n                        <input\n                          type=\"checkbox\"\n                          [id]=\"'group-' + group.name\"\n                          [checked]=\"isGroupFullySelected(group)\"\n                          [indeterminate]=\"isGroupPartlySelected(group)\"\n                          (change)=\"toggleGroupSelection(group)\"\n                          [attr.aria-label]=\"'Select all ' + group.name + ' events'\"\n                          class=\"h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500\"\n                        />\n                        <button type=\"button\" class=\"flex-1 text-left text-sm font-medium text-gray-800\" (click)=\"toggleGroup(group.name)\">\n                          {{ group.name }}\n                        </button>\n                        <span class=\"text-xs text-gray-500\">{{ selectedCount(group) }} of {{ group.events.length }}</span>\n                      </div>\n                      @if (isGroupExpanded(group.name)) {\n                        <div class=\"grid gap-1 p-2 md:grid-cols-2\">\n                          @for (event of group.events; track event.eventType) {\n                            <label\n                              class=\"flex items-start gap-2 rounded px-2 py-2 text-sm hover:bg-gray-50\"\n                              [class.cursor-pointer]=\"canSelect(event) || isSelected(event.eventType)\"\n                              [class.opacity-60]=\"!canSelect(event) && !isSelected(event.eventType)\"\n                              [title]=\"carriesSensitiveData(event) ? restrictionTitle(event) : ''\"\n                            >\n                              <input\n                                type=\"checkbox\"\n                                [checked]=\"isSelected(event.eventType)\"\n                                [disabled]=\"!canSelect(event) && !isSelected(event.eventType)\"\n                                (change)=\"toggleEventType(event.eventType)\"\n                                class=\"mt-0.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500\"\n                              />\n                              <span class=\"min-w-0 flex-1\">\n                                <span class=\"flex flex-wrap items-center gap-2 font-medium text-gray-900\">\n                                  {{ event.displayName }}\n                                  @if (event.restricted) {\n                                    <ui-badge variant=\"danger\">Restricted</ui-badge>\n                                  } @else if (carriesSensitiveData(event)) {\n                                    <ui-badge variant=\"warning\">Sensitive fields</ui-badge>\n                                  }\n                                </span>\n                                <span class=\"block font-mono text-xs text-gray-500 break-all\">{{ event.eventType }}</span>\n                                @if (!canSelect(event)) {\n                                  <span class=\"block text-xs text-red-600\">Requires the {{ event.requiredPermission }} permission</span>\n                                }\n                                @if (event.description) {\n                                  <span class=\"block text-xs text-gray-500\">{{ event.description }}</span>\n                                }\n                              </span>\n                            </label>\n                          }\n                        </div>\n                      }\n                    </div>\n                  } @empty {\n                    <div class=\"py-8 text-center text-sm text-gray-500\">\n                      @if (eventSearchTerm) {\n                        No events match \"{{ eventSearchTerm }}\"\n                      } @else {\n                        No events are available for this tenant.\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </ui-card>\n          </section>\n\n          <!-- 3. Authentication -->\n          <section id=\"webhook-authentication\" class=\"scroll-mt-4\">\n            <ui-card title=\"Authentication\" subtitle=\"How each delivery proves it comes from Olu\u1E63\u1ECD.\">\n              <fieldset class=\"space-y-3\">\n                <legend class=\"sr-only\">Delivery authentication</legend>\n\n                <!-- HMAC -->\n                <label\n                  class=\"block cursor-pointer rounded-lg border p-4\"\n                  [class.border-primary-500]=\"authMode() === 'hmac'\"\n                  [class.ring-1]=\"authMode() === 'hmac'\"\n                  [class.ring-primary-500]=\"authMode() === 'hmac'\"\n                  [class.border-gray-200]=\"authMode() !== 'hmac'\"\n                >\n                  <span class=\"flex items-start gap-3\">\n                    <input\n                      type=\"radio\"\n                      name=\"authMode\"\n                      value=\"hmac\"\n                      [checked]=\"authMode() === 'hmac'\"\n                      (change)=\"selectAuthMode('hmac')\"\n                      class=\"mt-0.5 h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500\"\n                    />\n                    <span class=\"flex-1\">\n                      <span class=\"block text-sm font-medium text-gray-900\">HMAC signature (shared secret)</span>\n                      <span class=\"block text-xs text-gray-500\">\n                        Each delivery is signed with a <code class=\"font-mono\">whsec_</code> secret that you give the receiver. The signature\n                        is sent in the X-Webhook-Signature header with the time in X-Webhook-Timestamp.\n                      </span>\n                    </span>\n                  </span>\n                </label>\n\n                <!-- Issuer-signed -->\n                <label\n                  class=\"block cursor-pointer rounded-lg border p-4\"\n                  [class.border-primary-500]=\"authMode() === 'issuer'\"\n                  [class.ring-1]=\"authMode() === 'issuer'\"\n                  [class.ring-primary-500]=\"authMode() === 'issuer'\"\n                  [class.border-gray-200]=\"authMode() !== 'issuer'\"\n                >\n                  <span class=\"flex items-start gap-3\">\n                    <input\n                      type=\"radio\"\n                      name=\"authMode\"\n                      value=\"issuer\"\n                      [checked]=\"authMode() === 'issuer'\"\n                      (change)=\"selectAuthMode('issuer')\"\n                      class=\"mt-0.5 h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500\"\n                    />\n                    <span class=\"flex-1\">\n                      <span class=\"flex flex-wrap items-center gap-2 text-sm font-medium text-gray-900\">\n                        Signed by this tenant's issuer (no shared secret)\n                        <ui-badge variant=\"info\">New</ui-badge>\n                      </span>\n                      <span class=\"block text-xs text-gray-500\">\n                        Each delivery carries a short-lived token signed with this tenant's issuer key. The receiver checks it against the\n                        issuer's public keys (its JWKS); nothing secret is shared.\n                      </span>\n                    </span>\n                  </span>\n                </label>\n\n                <!-- Static credential -->\n                <label\n                  class=\"block cursor-pointer rounded-lg border p-4\"\n                  [class.border-primary-500]=\"authMode() === 'static'\"\n                  [class.ring-1]=\"authMode() === 'static'\"\n                  [class.ring-primary-500]=\"authMode() === 'static'\"\n                  [class.border-gray-200]=\"authMode() !== 'static'\"\n                >\n                  <span class=\"flex items-start gap-3\">\n                    <input\n                      type=\"radio\"\n                      name=\"authMode\"\n                      value=\"static\"\n                      [checked]=\"authMode() === 'static'\"\n                      (change)=\"selectAuthMode('static')\"\n                      class=\"mt-0.5 h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500\"\n                    />\n                    <span class=\"flex-1\">\n                      <span class=\"block text-sm font-medium text-gray-900\">Static credential</span>\n                      <span class=\"block text-xs text-gray-500\">\n                        A fixed bearer token, username and password, or API key, sent with every delivery for receivers that only check a\n                        header. Deliveries are also HMAC signed.\n                      </span>\n                    </span>\n                  </span>\n                </label>\n              </fieldset>\n\n              <!-- Details of the chosen option -->\n              <div class=\"mt-4 rounded-md bg-gray-50 p-4 space-y-3\">\n                @switch (authMode()) {\n                  @case ('hmac') {\n                    @if (isNew()) {\n                      <p class=\"text-sm text-gray-600\">\n                        A <code class=\"font-mono\">whsec_</code> secret is generated when you create the webhook. It is shown once, so copy it then.\n                      </p>\n                    } @else {\n                      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n                        <div>\n                          <p class=\"text-sm font-medium text-gray-700\">Signing secret</p>\n                          <p class=\"font-mono text-sm text-gray-500\">whsec_\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022</p>\n                          <p class=\"text-xs text-gray-500\">Secrets are shown only when created or rotated.</p>\n                        </div>\n                        <ui-button variant=\"secondary\" (clicked)=\"showRotateConfirm.set(true)\">\n                          <ui-icon name=\"key\" class=\"h-4 w-4 mr-1.5\" />\n                          Rotate secret\n                        </ui-button>\n                      </div>\n                    }\n                  }\n                  @case ('issuer') {\n                    <div>\n                      <p class=\"text-sm font-medium text-gray-700\" id=\"webhook-jwks-label\">Issuer public keys (JWKS)</p>\n                      <div class=\"mt-1 flex items-center gap-2\">\n                        <code class=\"flex-1 min-w-0 break-all rounded border border-gray-200 bg-white px-2 py-1.5 font-mono text-xs text-gray-800\" aria-labelledby=\"webhook-jwks-label\">\n                          {{ jwksUrl() || 'Resolving the issuer...' }}\n                        </code>\n                        <button\n                          type=\"button\"\n                          class=\"rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 disabled:opacity-50\"\n                          [disabled]=\"!jwksUrl()\"\n                          (click)=\"copy(jwksUrl())\"\n                          aria-label=\"Copy the JWKS URL\"\n                          title=\"Copy\"\n                        >\n                          <ui-icon name=\"document-duplicate\" class=\"h-4 w-4\" />\n                        </button>\n                      </div>\n                      <p class=\"mt-1 text-xs text-gray-500\">\n                        @if (jwksFromDiscovery()) {\n                          From this tenant's discovery document.\n                        } @else {\n                          The default location for this tenant's issuer; check it against the issuer's discovery document if the receiver\n                          cannot fetch it.\n                        }\n                        Give the receiver this URL. Keys rotate with the tenant's signing keys, so the receiver should refetch it when it meets an\n                        unknown key.\n                      </p>\n                    </div>\n                    @if (!formData.clientId) {\n                      <p class=\"text-xs text-amber-700\">Choose an owning client below; the token names it as its subject.</p>\n                    }\n                  }\n                  @case ('static') {\n                    <div class=\"grid gap-4 md:grid-cols-2\">\n                      <div class=\"md:col-span-2\">\n                        <span class=\"block text-sm font-medium text-gray-700 mb-2\" id=\"webhook-static-type\">Credential type</span>\n                        <div class=\"flex flex-wrap gap-2\" role=\"radiogroup\" aria-labelledby=\"webhook-static-type\">\n                          @for (option of staticAuthOptions; track option.type) {\n                            <label\n                              class=\"flex cursor-pointer items-center gap-2 rounded-md border bg-white px-3 py-2 text-sm\"\n                              [class.border-primary-500]=\"formData.authType === option.type\"\n                              [class.border-gray-300]=\"formData.authType !== option.type\"\n                            >\n                              <input\n                                type=\"radio\"\n                                name=\"staticAuthType\"\n                                [checked]=\"formData.authType === option.type\"\n                                (change)=\"formData.authType = option.type\"\n                                class=\"h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500\"\n                              />\n                              {{ option.label }}\n                            </label>\n                          }\n                        </div>\n                        @for (option of staticAuthOptions; track option.type) {\n                          @if (formData.authType === option.type) {\n                            <p class=\"mt-1 font-mono text-xs text-gray-500\">{{ option.hint }}</p>\n                          }\n                        }\n                      </div>\n\n                      @if (formData.authType === AuthType.BasicAuth) {\n                        <ui-input\n                          label=\"Username\"\n                          inputId=\"webhook-basic-username\"\n                          [placeholder]=\"credentialStored() ? 'Leave blank to keep the current one' : ''\"\n                          [(ngModel)]=\"formData.basicUsername\"\n                          name=\"basicUsername\"\n                        />\n                        <ui-input\n                          label=\"Password\"\n                          inputId=\"webhook-basic-password\"\n                          type=\"password\"\n                          [placeholder]=\"credentialStored() ? 'Leave blank to keep the current one' : ''\"\n                          [(ngModel)]=\"formData.basicPassword\"\n                          name=\"basicPassword\"\n                        />\n                      } @else {\n                        <div class=\"md:col-span-2\">\n                          <ui-input\n                            [label]=\"formData.authType === AuthType.BearerToken ? 'Token' : 'API key'\"\n                            inputId=\"webhook-credential\"\n                            type=\"password\"\n                            [placeholder]=\"credentialStored() ? 'Leave blank to keep the current one' : ''\"\n                            [(ngModel)]=\"formData.credential\"\n                            name=\"credential\"\n                          />\n                        </div>\n                      }\n                      <div class=\"md:col-span-2\">\n                        @if (fieldError('credential'); as err) {\n                          <p class=\"text-sm text-red-600\">{{ err }}</p>\n                        } @else {\n                          <p class=\"text-xs text-gray-500\">Stored encrypted and never shown again.</p>\n                        }\n                      </div>\n                    </div>\n                    @if (!isNew()) {\n                      <div class=\"flex flex-col gap-2 border-t border-gray-200 pt-3 sm:flex-row sm:items-center sm:justify-between\">\n                        <p class=\"text-xs text-gray-500\">The HMAC signing secret is also sent with each delivery.</p>\n                        <ui-button variant=\"secondary\" size=\"sm\" (clicked)=\"showRotateConfirm.set(true)\">\n                          <ui-icon name=\"key\" class=\"h-4 w-4 mr-1.5\" />\n                          Rotate secret\n                        </ui-button>\n                      </div>\n                    }\n                  }\n                }\n                @if (leavingIssuerSigned()) {\n                  <p class=\"text-xs text-amber-700\">After saving, rotate the secret to get a signing secret for the receiver.</p>\n                }\n              </div>\n            </ui-card>\n          </section>\n\n          <!-- 4. Owning client -->\n          <section id=\"webhook-client\" class=\"scroll-mt-4\">\n            <ui-card\n              title=\"Owning client\"\n              subtitle=\"The client this endpoint belongs to. Events this client causes itself (for example comments it writes through the Service API) are not sent back to it. With issuer-signed delivery, the token names this client as its subject.\"\n            >\n              <div class=\"space-y-4\">\n                <div class=\"max-w-xl\">\n                  <label for=\"webhook-client-id\" class=\"block text-sm font-medium text-gray-700 mb-1\">Client</label>\n                  <select\n                    id=\"webhook-client-id\"\n                    name=\"clientId\"\n                    [(ngModel)]=\"formData.clientId\"\n                    class=\"w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm\"\n                  >\n                    <option value=\"\">None</option>\n                    @for (client of clients(); track client.clientId) {\n                      <option [value]=\"client.clientId\">{{ clientLabel(client.clientId) }}</option>\n                    }\n                  </select>\n                </div>\n\n                @if (formData.clientId) {\n                  <div class=\"flex items-start gap-3\">\n                    <input\n                      type=\"checkbox\"\n                      id=\"webhook-skip-own\"\n                      name=\"skipOwnClientEvents\"\n                      [(ngModel)]=\"formData.skipOwnClientEvents\"\n                      class=\"mt-0.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500\"\n                    />\n                    <label for=\"webhook-skip-own\" class=\"text-sm text-gray-700\">\n                      Skip own client events\n                      <span class=\"block text-xs text-gray-500\">\n                        Don't send changes this client made itself. This stops the receiver being notified about its own updates, which can\n                        otherwise loop.\n                      </span>\n                    </label>\n                  </div>\n                }\n              </div>\n            </ui-card>\n          </section>\n\n          <!-- 5. Sensitive data -->\n          <section id=\"webhook-sensitive\" class=\"scroll-mt-4\">\n            <ui-card title=\"Sensitive data\" subtitle=\"Confidential fields of restricted events are withheld unless you authorise this endpoint.\">\n              @if (sensitiveEventsOf(formData.eventTypes).length > 0) {\n                <div class=\"rounded-md border border-amber-300 bg-amber-50 p-3\">\n                  <div class=\"flex items-start gap-3\">\n                    <input\n                      type=\"checkbox\"\n                      id=\"webhook-authorize-sensitive\"\n                      name=\"authorizeSensitiveData\"\n                      [checked]=\"formData.authorizeSensitiveData\"\n                      [disabled]=\"!canAuthorizeSensitiveData()\"\n                      (change)=\"onAuthorizeSensitiveDataChange($any($event.target).checked)\"\n                      class=\"mt-0.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500\"\n                    />\n                    <label for=\"webhook-authorize-sensitive\" class=\"text-sm text-gray-800\">\n                      Send sensitive data to this endpoint\n                      <span class=\"block text-xs text-gray-600\">\n                        Without this, the confidential fields of restricted events are withheld from deliveries and listed in\n                        <code>redacted_fields</code>.\n                        @if (!canAuthorizeSensitiveData()) {\n                          You need the permission each restricted event declares to authorise this.\n                        }\n                      </span>\n                      @if (endpoint()?.sensitiveDataAuthorizedAt) {\n                        <span class=\"block text-xs text-gray-600\">{{ authorizationTitle(endpoint()!) }}</span>\n                      }\n                    </label>\n                  </div>\n                  <ul class=\"mt-2 ml-7 list-disc text-xs text-gray-600\">\n                    @for (event of sensitiveEventsOf(formData.eventTypes); track event.eventType) {\n                      <li>{{ event.displayName }}</li>\n                    }\n                  </ul>\n                </div>\n              } @else {\n                <p class=\"text-sm text-gray-500\">None of the selected events carry sensitive fields.</p>\n              }\n            </ui-card>\n          </section>\n\n          <!-- 6. Headers and API version -->\n          <section id=\"webhook-advanced\" class=\"scroll-mt-4\">\n            <ui-card title=\"Headers and version\" subtitle=\"Extra headers sent with every delivery, and the payload format.\">\n              <div class=\"space-y-4\">\n                <div>\n                  <span class=\"block text-sm font-medium text-gray-700 mb-2\">Custom headers</span>\n                  @if (formData.headers.length) {\n                    <div class=\"space-y-2\">\n                      @for (row of formData.headers; track $index; let i = $index) {\n                        <div class=\"grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] items-center gap-2\">\n                          <input\n                            type=\"text\"\n                            [(ngModel)]=\"row.name\"\n                            [name]=\"'headerName' + i\"\n                            placeholder=\"X-Header-Name\"\n                            [attr.aria-label]=\"'Header ' + (i + 1) + ' name'\"\n                            class=\"w-full rounded-md border-gray-300 shadow-sm font-mono focus:border-primary-500 focus:ring-primary-500 sm:text-sm\"\n                          />\n                          <input\n                            type=\"text\"\n                            [(ngModel)]=\"row.value\"\n                            [name]=\"'headerValue' + i\"\n                            placeholder=\"Value\"\n                            [attr.aria-label]=\"'Header ' + (i + 1) + ' value'\"\n                            class=\"w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm\"\n                          />\n                          <button\n                            type=\"button\"\n                            (click)=\"removeHeader(i)\"\n                            class=\"rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-red-600\"\n                            [attr.aria-label]=\"'Remove header ' + (i + 1)\"\n                          >\n                            <ui-icon name=\"trash\" class=\"h-4 w-4\" />\n                          </button>\n                        </div>\n                      }\n                    </div>\n                  } @else {\n                    <p class=\"text-sm text-gray-500\">No custom headers.</p>\n                  }\n                  @if (fieldError('headers'); as err) {\n                    <p class=\"mt-2 text-sm text-red-600\">{{ err }}</p>\n                  }\n                  <button type=\"button\" (click)=\"addHeader()\" class=\"mt-2 inline-flex items-center gap-1 text-sm text-primary-600 hover:text-primary-700\">\n                    <ui-icon name=\"plus\" class=\"h-4 w-4\" />\n                    Add header\n                  </button>\n                  <p class=\"mt-1 text-xs text-gray-500\">Don't put secrets here; header values are stored and shown as plain text.</p>\n                </div>\n                <div>\n                  <span class=\"block text-sm font-medium text-gray-700\">API version</span>\n                  <p class=\"mt-1 font-mono text-sm text-gray-800\">{{ endpoint()?.apiVersion || defaultApiVersion }}</p>\n                  <p class=\"text-xs text-gray-500\">The payload format deliveries use.</p>\n                </div>\n              </div>\n            </ui-card>\n          </section>\n\n          <!-- Save bar -->\n          <div class=\"sticky bottom-0 z-10 -mx-4 flex justify-end gap-2 border-t border-gray-200 bg-white/95 px-4 py-3 backdrop-blur sm:mx-0 sm:rounded-lg sm:border sm:shadow-sm\">\n            <ui-button variant=\"secondary\" (clicked)=\"onCancel()\">Cancel</ui-button>\n            <ui-button type=\"submit\" [loading]=\"saving()\">{{ isNew() ? 'Create webhook' : 'Save changes' }}</ui-button>\n          </div>\n        </div>\n      </form>\n    }\n\n    @if (activeTab() === 'deliveries' && endpoint(); as ep) {\n      <div class=\"space-y-6\">\n        <div class=\"grid gap-4 sm:grid-cols-3\">\n          <ui-card>\n            <p class=\"text-sm text-gray-500\">Total deliveries</p>\n            <p class=\"mt-1 text-2xl font-semibold text-gray-900\">{{ ep.stats?.totalDeliveries || 0 }}</p>\n          </ui-card>\n          <ui-card>\n            <p class=\"text-sm text-gray-500\">Succeeded</p>\n            <p class=\"mt-1 text-2xl font-semibold text-green-600\">{{ ep.stats?.successfulDeliveries || 0 }}</p>\n            <p class=\"text-xs text-gray-500\">Last: {{ formatDate(ep.stats?.lastSuccessAt) }}</p>\n          </ui-card>\n          <ui-card>\n            <p class=\"text-sm text-gray-500\">Failed</p>\n            <p class=\"mt-1 text-2xl font-semibold text-red-600\">{{ ep.stats?.failedDeliveries || 0 }}</p>\n            <p class=\"text-xs text-gray-500\">Last: {{ formatDate(ep.stats?.lastFailureAt) }}</p>\n          </ui-card>\n        </div>\n\n        <ui-card [padding]=\"false\">\n          <div class=\"flex items-center justify-between border-b border-gray-200 px-4 py-3 sm:px-6\">\n            <h2 class=\"text-lg font-medium text-gray-900\">Delivery history</h2>\n            <ui-button variant=\"secondary\" size=\"sm\" [loading]=\"deliveriesLoading()\" (clicked)=\"loadDeliveries()\">\n              <ui-icon name=\"arrow-path\" class=\"h-4 w-4 mr-1.5\" />\n              Refresh\n            </ui-button>\n          </div>\n          @if (deliveriesLoading() && !deliveriesLoaded()) {\n            <div class=\"py-8 text-center text-gray-500\">Loading...</div>\n          } @else if (deliveries().length > 0) {\n            <div class=\"overflow-x-auto\">\n              <table class=\"min-w-full divide-y divide-gray-200\">\n                <thead class=\"bg-gray-50\">\n                  <tr>\n                    <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase text-gray-500\">Event</th>\n                    <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase text-gray-500\">Status</th>\n                    <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase text-gray-500\">HTTP</th>\n                    <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase text-gray-500\">Attempts</th>\n                    <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase text-gray-500\">Time</th>\n                    <th scope=\"col\" class=\"px-4 py-2\"><span class=\"sr-only\">Actions</span></th>\n                  </tr>\n                </thead>\n                <tbody class=\"divide-y divide-gray-200 bg-white\">\n                  @for (delivery of deliveries(); track delivery.id) {\n                    <tr>\n                      <td class=\"px-4 py-2 font-mono text-sm\">{{ delivery.eventType }}</td>\n                      <td class=\"px-4 py-2\">\n                        <ui-badge [variant]=\"getStatusVariant(delivery.status)\">{{ delivery.status }}</ui-badge>\n                        @if (delivery.errorMessage) {\n                          <span class=\"mt-0.5 block max-w-xs truncate text-xs text-red-600\" [title]=\"delivery.errorMessage\">{{ delivery.errorMessage }}</span>\n                        }\n                      </td>\n                      <td class=\"px-4 py-2 text-sm\">{{ delivery.httpStatus || '-' }}</td>\n                      <td class=\"px-4 py-2 text-sm\">{{ delivery.retryCount + 1 }}</td>\n                      <td class=\"px-4 py-2 text-sm text-gray-500 whitespace-nowrap\">{{ formatDate(delivery.createdAt) }}</td>\n                      <td class=\"px-4 py-2 text-right\">\n                        @if (canRetry(delivery.status)) {\n                          <button\n                            type=\"button\"\n                            (click)=\"retryDelivery(delivery)\"\n                            [disabled]=\"retryingId() === delivery.id\"\n                            class=\"rounded p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50\"\n                            aria-label=\"Retry delivery\"\n                            title=\"Retry\"\n                          >\n                            <ui-icon name=\"refresh\" class=\"h-4 w-4\" />\n                          </button>\n                        }\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          } @else {\n            <p class=\"py-8 text-center text-gray-500\">No deliveries yet. Send a test event to try the endpoint.</p>\n          }\n        </ui-card>\n      </div>\n    }\n  </div>\n\n  <!-- Dialogs -->\n  <ui-confirm-dialog\n    [open]=\"showSensitiveDataConfirm()\"\n    title=\"Send sensitive data outside the platform?\"\n    [message]=\"sensitiveDataConfirmMessage()\"\n    confirmText=\"Authorise\"\n    cancelText=\"Cancel\"\n    variant=\"danger\"\n    [closeOnBackdrop]=\"false\"\n    (confirmed)=\"confirmSensitiveData()\"\n    (cancelled)=\"cancelSensitiveData()\"\n  />\n\n  <ui-confirm-dialog\n    [open]=\"showDeleteConfirm()\"\n    title=\"Delete webhook\"\n    [message]=\"'Delete the webhook \\'' + (endpoint()?.name || '') + '\\'? Deliveries stop immediately and this cannot be undone.'\"\n    confirmText=\"Delete\"\n    cancelText=\"Cancel\"\n    variant=\"danger\"\n    [loading]=\"deleting()\"\n    [closeOnBackdrop]=\"false\"\n    (confirmed)=\"confirmDelete()\"\n    (cancelled)=\"showDeleteConfirm.set(false)\"\n  />\n\n  <ui-confirm-dialog\n    [open]=\"showRotateConfirm()\"\n    title=\"Rotate signing secret\"\n    [message]=\"'Rotate the secret for \\'' + (endpoint()?.name || '') + '\\'? The current secret stops working immediately, so update the receiver with the new one.'\"\n    confirmText=\"Rotate secret\"\n    cancelText=\"Cancel\"\n    variant=\"warning\"\n    [loading]=\"rotating()\"\n    [closeOnBackdrop]=\"false\"\n    (confirmed)=\"confirmRotateSecret()\"\n    (cancelled)=\"showRotateConfirm.set(false)\"\n  />\n\n  <ui-modal [open]=\"showSecretModal()\" title=\"Signing secret\" [closeOnBackdrop]=\"false\" (closed)=\"closeSecretModal()\">\n    <div class=\"space-y-4\">\n      <p class=\"text-sm text-amber-700\">This is the only time this secret is shown. Copy it now.</p>\n      <div class=\"flex items-center gap-2\">\n        <code class=\"flex-1 break-all rounded bg-gray-100 px-3 py-2 font-mono text-sm\">{{ newSecret() }}</code>\n        <ui-button variant=\"secondary\" (clicked)=\"copySecret()\" [attr.aria-label]=\"'Copy secret'\">\n          @if (secretCopied()) {\n            <ui-icon name=\"check-circle\" class=\"h-5 w-5 text-green-500\" />\n          } @else {\n            <ui-icon name=\"document-duplicate\" class=\"h-5 w-5\" />\n          }\n        </ui-button>\n      </div>\n      <p class=\"text-xs text-gray-500\">\n        Use this secret to verify webhook signatures. The signature is sent in the X-Webhook-Signature header as\n        sha256=&lt;hex-signature&gt;.\n      </p>\n      <div class=\"flex justify-end\">\n        <ui-button (clicked)=\"closeSecretModal()\">Done</ui-button>\n      </div>\n    </div>\n  </ui-modal>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CardComponent, selector: "ui-card", inputs: ["title", "subtitle", "padding", "shadow"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clicked"] }, { kind: "component", type: BadgeComponent, selector: "ui-badge", inputs: ["variant", "size"] }, { kind: "component", type: ModalComponent, selector: "ui-modal", inputs: ["open", "title", "size", "showCloseButton", "closeOnBackdrop", "closeOnEscape", "scrollable"], outputs: ["closed"] }, { kind: "component", type: ConfirmDialogComponent, selector: "ui-confirm-dialog", inputs: ["open", "title", "message", "confirmText", "cancelText", "variant", "loading", "closeOnBackdrop", "closeOnEscape"], outputs: ["confirmed", "cancelled"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["name", "strokeWidth"] }, { kind: "component", type: InputComponent, selector: "ui-input", inputs: ["type", "label", "placeholder", "disabled", "readonly", "required", "error", "hint", "inputId", "prefixIcon", "suffixIcon"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: WebhookDetailPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'admin-webhook-detail-page', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        RouterLink,
+                        CardComponent,
+                        ButtonComponent,
+                        BadgeComponent,
+                        ModalComponent,
+                        ConfirmDialogComponent,
+                        IconComponent,
+                        InputComponent,
+                    ], template: "@if (loading()) {\n  <div class=\"flex justify-center py-12\" role=\"status\" aria-label=\"Loading\">\n    <svg class=\"animate-spin h-8 w-8 text-primary-600\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n      <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n      <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n    </svg>\n  </div>\n} @else if (!isNew() && !endpoint()) {\n  <div class=\"flex flex-col items-center justify-center py-16 text-gray-500\">\n    <ui-icon name=\"link\" class=\"h-12 w-12 mb-4\" />\n    <p>This webhook could not be found.</p>\n    <a routerLink=\"/webhooks\" class=\"mt-2 text-sm text-primary-600 hover:text-primary-700\">Back to webhooks</a>\n  </div>\n} @else {\n  <div class=\"space-y-6\">\n    <!-- Breadcrumb -->\n    <nav aria-label=\"Breadcrumb\" class=\"text-sm\">\n      <ol class=\"flex items-center gap-1 text-gray-500\">\n        <li><a routerLink=\"/webhooks\" class=\"hover:text-gray-700\">Webhooks</a></li>\n        <li aria-hidden=\"true\"><ui-icon name=\"chevron-right\" class=\"h-4 w-4\" /></li>\n        <li class=\"text-gray-900 truncate\" aria-current=\"page\">{{ pageTitle() }}</li>\n      </ol>\n    </nav>\n\n    <!-- Page header -->\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\">\n      <div class=\"min-w-0\">\n        <h1 class=\"text-2xl font-bold text-gray-900 truncate\">{{ pageTitle() }}</h1>\n        @if (isNew()) {\n          <p class=\"mt-1 text-sm text-gray-500\">Send events from this tenant to a URL you control.</p>\n        } @else if (endpoint(); as ep) {\n          <div class=\"mt-1 flex flex-wrap items-center gap-2\">\n            <span class=\"font-mono text-xs text-gray-600 break-all\">{{ ep.url }}</span>\n            <ui-badge [variant]=\"ep.enabled ? 'success' : 'default'\">{{ ep.enabled ? 'Active' : 'Disabled' }}</ui-badge>\n          </div>\n          <div class=\"mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500\">\n            <span>Created: <span class=\"text-gray-700\">{{ formatDate(ep.createdAt) }}</span></span>\n            @if (ep.updatedAt) {\n              <span>Updated: <span class=\"text-gray-700\">{{ formatDate(ep.updatedAt) }}</span></span>\n            }\n            <span>Last delivery: <span class=\"text-gray-700\">{{ formatDate(ep.stats?.lastDeliveryAt) }}</span></span>\n          </div>\n        }\n      </div>\n      <div class=\"flex flex-wrap items-center gap-2 shrink-0\">\n        @if (!isNew()) {\n          <ui-button variant=\"secondary\" [loading]=\"testing()\" (clicked)=\"testEndpoint()\">\n            <ui-icon name=\"beaker\" class=\"h-4 w-4 mr-1.5\" />\n            Send test event\n          </ui-button>\n          <ui-button variant=\"danger\" (clicked)=\"showDeleteConfirm.set(true)\">Delete</ui-button>\n        }\n        <ui-button variant=\"secondary\" (clicked)=\"onCancel()\">Cancel</ui-button>\n        <ui-button [loading]=\"saving()\" (clicked)=\"onSave()\">{{ isNew() ? 'Create webhook' : 'Save changes' }}</ui-button>\n      </div>\n    </div>\n\n    <!-- Tabs (existing endpoints) -->\n    @if (tabs().length) {\n      <div class=\"border-b border-gray-200\">\n        <nav class=\"-mb-px flex space-x-6 overflow-x-auto\" role=\"tablist\" aria-label=\"Webhook sections\">\n          @for (tab of tabs(); track tab.id) {\n            <button\n              type=\"button\"\n              role=\"tab\"\n              [attr.aria-selected]=\"activeTab() === tab.id\"\n              [class]=\"activeTab() === tab.id\n                ? 'border-primary-500 text-primary-600'\n                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\"\n              class=\"whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm\"\n              (click)=\"setActiveTab(tab.id)\"\n            >\n              {{ tab.label }}\n              @if (tab.id === 'deliveries' && endpoint()?.stats; as stats) {\n                <span class=\"ml-1 text-xs text-gray-400\">{{ stats.totalDeliveries }}</span>\n              }\n            </button>\n          }\n        </nav>\n      </div>\n    }\n\n    @if (activeTab() === 'settings') {\n      <form (ngSubmit)=\"onSave()\" novalidate class=\"grid gap-6 lg:grid-cols-[12rem_minmax(0,1fr)]\">\n        <!-- Section index -->\n        <aside class=\"hidden lg:block\" aria-label=\"On this page\">\n          <ul class=\"sticky top-4 space-y-1 text-sm\">\n            @for (s of sections; track s.id) {\n              <li>\n                <a\n                  [href]=\"'#webhook-' + s.id\"\n                  (click)=\"$event.preventDefault(); scrollToSection(s.id)\"\n                  class=\"block rounded px-2 py-1 text-gray-600 hover:bg-gray-100 hover:text-gray-900\"\n                >{{ s.label }}</a>\n              </li>\n            }\n          </ul>\n        </aside>\n\n        <div class=\"space-y-6 min-w-0 max-w-4xl\">\n          <!-- 1. Basics -->\n          <section id=\"webhook-basics\" class=\"scroll-mt-4\">\n            <ui-card title=\"Basics\" subtitle=\"What this endpoint is and where deliveries go.\">\n              <div class=\"grid gap-4 md:grid-cols-2\">\n                <ui-input\n                  label=\"Name\"\n                  inputId=\"webhook-name\"\n                  [required]=\"true\"\n                  placeholder=\"Order sync\"\n                  [error]=\"fieldError('name')\"\n                  [(ngModel)]=\"formData.name\"\n                  name=\"name\"\n                />\n                <ui-input\n                  label=\"Description\"\n                  inputId=\"webhook-description\"\n                  placeholder=\"Optional\"\n                  [(ngModel)]=\"formData.description\"\n                  name=\"description\"\n                />\n                <div class=\"md:col-span-2\">\n                  <ui-input\n                    label=\"Endpoint URL\"\n                    inputId=\"webhook-url\"\n                    type=\"url\"\n                    [required]=\"true\"\n                    placeholder=\"https://api.example.com/webhooks\"\n                    hint=\"Deliveries are POST requests with a JSON body. Use HTTPS outside development.\"\n                    [error]=\"fieldError('url')\"\n                    [(ngModel)]=\"formData.url\"\n                    name=\"url\"\n                  />\n                </div>\n                <div class=\"md:col-span-2 flex items-start gap-3\">\n                  <input\n                    type=\"checkbox\"\n                    id=\"webhook-enabled\"\n                    name=\"enabled\"\n                    [(ngModel)]=\"formData.enabled\"\n                    class=\"mt-0.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500\"\n                  />\n                  <label for=\"webhook-enabled\" class=\"text-sm text-gray-700\">\n                    Endpoint is active\n                    <span class=\"block text-xs text-gray-500\">Turn this off to pause deliveries without losing the configuration.</span>\n                  </label>\n                </div>\n              </div>\n            </ui-card>\n          </section>\n\n          <!-- 2. Events -->\n          <section id=\"webhook-events\" class=\"scroll-mt-4\">\n            <ui-card title=\"Events\" subtitle=\"Choose which events are delivered to this endpoint, grouped by module.\">\n              <div class=\"space-y-3\">\n                <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center\">\n                  <div class=\"relative flex-1\">\n                    <label for=\"webhook-event-search\" class=\"sr-only\">Search events</label>\n                    <ui-icon name=\"search\" class=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400\" />\n                    <input\n                      id=\"webhook-event-search\"\n                      type=\"search\"\n                      [(ngModel)]=\"eventSearchTerm\"\n                      [ngModelOptions]=\"{ standalone: true }\"\n                      placeholder=\"Search events\"\n                      class=\"pl-9 w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm\"\n                    />\n                  </div>\n                  <div class=\"flex items-center gap-1 text-sm\">\n                    <button type=\"button\" (click)=\"expandAllGroups()\" class=\"rounded px-2 py-1.5 text-gray-600 hover:bg-gray-100\">Expand all</button>\n                    <button type=\"button\" (click)=\"collapseAllGroups()\" class=\"rounded px-2 py-1.5 text-gray-600 hover:bg-gray-100\">Collapse all</button>\n                    @if (formData.eventTypes.length) {\n                      <button type=\"button\" (click)=\"clearEvents()\" class=\"rounded px-2 py-1.5 text-gray-600 hover:bg-gray-100\">Clear</button>\n                    }\n                  </div>\n                </div>\n\n                <p class=\"text-sm\" [class.text-gray-600]=\"!fieldError('eventTypes')\" [class.text-red-600]=\"!!fieldError('eventTypes')\" aria-live=\"polite\">\n                  @if (fieldError('eventTypes'); as err) {\n                    {{ err }}\n                  } @else {\n                    {{ formData.eventTypes.length }} {{ formData.eventTypes.length === 1 ? 'event' : 'events' }} selected\n                  }\n                </p>\n\n                <div class=\"rounded-md border border-gray-200 divide-y divide-gray-200\">\n                  @for (group of filteredGroups(); track group.name) {\n                    <div>\n                      <div class=\"flex items-center gap-3 bg-gray-50 px-3 py-2\">\n                        <button\n                          type=\"button\"\n                          class=\"flex items-center text-gray-500 hover:text-gray-700\"\n                          [attr.aria-expanded]=\"isGroupExpanded(group.name)\"\n                          [attr.aria-label]=\"(isGroupExpanded(group.name) ? 'Collapse ' : 'Expand ') + group.name\"\n                          (click)=\"toggleGroup(group.name)\"\n                        >\n                          <ui-icon [name]=\"isGroupExpanded(group.name) ? 'chevron-down' : 'chevron-right'\" class=\"h-4 w-4\" />\n                        </button>\n                        <input\n                          type=\"checkbox\"\n                          [id]=\"'group-' + group.name\"\n                          [checked]=\"isGroupFullySelected(group)\"\n                          [indeterminate]=\"isGroupPartlySelected(group)\"\n                          (change)=\"toggleGroupSelection(group)\"\n                          [attr.aria-label]=\"'Select all ' + group.name + ' events'\"\n                          class=\"h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500\"\n                        />\n                        <button type=\"button\" class=\"flex-1 text-left text-sm font-medium text-gray-800\" (click)=\"toggleGroup(group.name)\">\n                          {{ group.name }}\n                        </button>\n                        <span class=\"text-xs text-gray-500\">{{ selectedCount(group) }} of {{ group.events.length }}</span>\n                      </div>\n                      @if (isGroupExpanded(group.name)) {\n                        <div class=\"grid gap-1 p-2 md:grid-cols-2\">\n                          @for (event of group.events; track event.eventType) {\n                            <label\n                              class=\"flex items-start gap-2 rounded px-2 py-2 text-sm hover:bg-gray-50\"\n                              [class.cursor-pointer]=\"canSelect(event) || isSelected(event.eventType)\"\n                              [class.opacity-60]=\"!canSelect(event) && !isSelected(event.eventType)\"\n                              [title]=\"carriesSensitiveData(event) ? restrictionTitle(event) : ''\"\n                            >\n                              <input\n                                type=\"checkbox\"\n                                [checked]=\"isSelected(event.eventType)\"\n                                [disabled]=\"!canSelect(event) && !isSelected(event.eventType)\"\n                                (change)=\"toggleEventType(event.eventType)\"\n                                class=\"mt-0.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500\"\n                              />\n                              <span class=\"min-w-0 flex-1\">\n                                <span class=\"flex flex-wrap items-center gap-2 font-medium text-gray-900\">\n                                  {{ event.displayName }}\n                                  @if (event.restricted) {\n                                    <ui-badge variant=\"danger\">Restricted</ui-badge>\n                                  } @else if (carriesSensitiveData(event)) {\n                                    <ui-badge variant=\"warning\">Sensitive fields</ui-badge>\n                                  }\n                                </span>\n                                <span class=\"block font-mono text-xs text-gray-500 break-all\">{{ event.eventType }}</span>\n                                @if (!canSelect(event)) {\n                                  <span class=\"block text-xs text-red-600\">Requires the {{ event.requiredPermission }} permission</span>\n                                }\n                                @if (event.description) {\n                                  <span class=\"block text-xs text-gray-500\">{{ event.description }}</span>\n                                }\n                              </span>\n                            </label>\n                          }\n                        </div>\n                      }\n                    </div>\n                  } @empty {\n                    <div class=\"py-8 text-center text-sm text-gray-500\">\n                      @if (eventSearchTerm) {\n                        No events match \"{{ eventSearchTerm }}\"\n                      } @else {\n                        No events are available for this tenant.\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </ui-card>\n          </section>\n\n          <!-- 3. Authentication -->\n          <section id=\"webhook-authentication\" class=\"scroll-mt-4\">\n            <ui-card title=\"Authentication\" subtitle=\"How each delivery proves it comes from Olu\u1E63\u1ECD.\">\n              <fieldset class=\"space-y-3\">\n                <legend class=\"sr-only\">Delivery authentication</legend>\n\n                <!-- HMAC -->\n                <label\n                  class=\"block cursor-pointer rounded-lg border p-4\"\n                  [class.border-primary-500]=\"authMode() === 'hmac'\"\n                  [class.ring-1]=\"authMode() === 'hmac'\"\n                  [class.ring-primary-500]=\"authMode() === 'hmac'\"\n                  [class.border-gray-200]=\"authMode() !== 'hmac'\"\n                >\n                  <span class=\"flex items-start gap-3\">\n                    <input\n                      type=\"radio\"\n                      name=\"authMode\"\n                      value=\"hmac\"\n                      [checked]=\"authMode() === 'hmac'\"\n                      (change)=\"selectAuthMode('hmac')\"\n                      class=\"mt-0.5 h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500\"\n                    />\n                    <span class=\"flex-1\">\n                      <span class=\"block text-sm font-medium text-gray-900\">HMAC signature (shared secret)</span>\n                      <span class=\"block text-xs text-gray-500\">\n                        Each delivery is signed with a <code class=\"font-mono\">whsec_</code> secret that you give the receiver. The signature\n                        is sent in the X-Webhook-Signature header with the time in X-Webhook-Timestamp.\n                      </span>\n                    </span>\n                  </span>\n                </label>\n\n                <!-- Issuer-signed -->\n                <label\n                  class=\"block cursor-pointer rounded-lg border p-4\"\n                  [class.border-primary-500]=\"authMode() === 'issuer'\"\n                  [class.ring-1]=\"authMode() === 'issuer'\"\n                  [class.ring-primary-500]=\"authMode() === 'issuer'\"\n                  [class.border-gray-200]=\"authMode() !== 'issuer'\"\n                >\n                  <span class=\"flex items-start gap-3\">\n                    <input\n                      type=\"radio\"\n                      name=\"authMode\"\n                      value=\"issuer\"\n                      [checked]=\"authMode() === 'issuer'\"\n                      (change)=\"selectAuthMode('issuer')\"\n                      class=\"mt-0.5 h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500\"\n                    />\n                    <span class=\"flex-1\">\n                      <span class=\"flex flex-wrap items-center gap-2 text-sm font-medium text-gray-900\">\n                        Signed by this tenant's issuer (no shared secret)\n                        <ui-badge variant=\"info\">New</ui-badge>\n                      </span>\n                      <span class=\"block text-xs text-gray-500\">\n                        Each delivery carries a short-lived token signed with this tenant's issuer key. The receiver checks it against the\n                        issuer's public keys (its JWKS); nothing secret is shared.\n                      </span>\n                    </span>\n                  </span>\n                </label>\n\n                <!-- Static credential -->\n                <label\n                  class=\"block cursor-pointer rounded-lg border p-4\"\n                  [class.border-primary-500]=\"authMode() === 'static'\"\n                  [class.ring-1]=\"authMode() === 'static'\"\n                  [class.ring-primary-500]=\"authMode() === 'static'\"\n                  [class.border-gray-200]=\"authMode() !== 'static'\"\n                >\n                  <span class=\"flex items-start gap-3\">\n                    <input\n                      type=\"radio\"\n                      name=\"authMode\"\n                      value=\"static\"\n                      [checked]=\"authMode() === 'static'\"\n                      (change)=\"selectAuthMode('static')\"\n                      class=\"mt-0.5 h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500\"\n                    />\n                    <span class=\"flex-1\">\n                      <span class=\"block text-sm font-medium text-gray-900\">Static credential</span>\n                      <span class=\"block text-xs text-gray-500\">\n                        A fixed bearer token, username and password, or API key, sent with every delivery for receivers that only check a\n                        header. Deliveries are also HMAC signed.\n                      </span>\n                    </span>\n                  </span>\n                </label>\n              </fieldset>\n\n              <!-- Details of the chosen option -->\n              <div class=\"mt-4 rounded-md bg-gray-50 p-4 space-y-3\">\n                @switch (authMode()) {\n                  @case ('hmac') {\n                    @if (isNew()) {\n                      <p class=\"text-sm text-gray-600\">\n                        A <code class=\"font-mono\">whsec_</code> secret is generated when you create the webhook. It is shown once, so copy it then.\n                      </p>\n                    } @else {\n                      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n                        <div>\n                          <p class=\"text-sm font-medium text-gray-700\">Signing secret</p>\n                          <p class=\"font-mono text-sm text-gray-500\">whsec_\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022</p>\n                          <p class=\"text-xs text-gray-500\">Secrets are shown only when created or rotated.</p>\n                        </div>\n                        <ui-button variant=\"secondary\" (clicked)=\"showRotateConfirm.set(true)\">\n                          <ui-icon name=\"key\" class=\"h-4 w-4 mr-1.5\" />\n                          Rotate secret\n                        </ui-button>\n                      </div>\n                    }\n                  }\n                  @case ('issuer') {\n                    <div>\n                      <p class=\"text-sm font-medium text-gray-700\" id=\"webhook-jwks-label\">Issuer public keys (JWKS)</p>\n                      <div class=\"mt-1 flex items-center gap-2\">\n                        <code class=\"flex-1 min-w-0 break-all rounded border border-gray-200 bg-white px-2 py-1.5 font-mono text-xs text-gray-800\" aria-labelledby=\"webhook-jwks-label\">\n                          {{ jwksUrl() || 'Resolving the issuer...' }}\n                        </code>\n                        <button\n                          type=\"button\"\n                          class=\"rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 disabled:opacity-50\"\n                          [disabled]=\"!jwksUrl()\"\n                          (click)=\"copy(jwksUrl())\"\n                          aria-label=\"Copy the JWKS URL\"\n                          title=\"Copy\"\n                        >\n                          <ui-icon name=\"document-duplicate\" class=\"h-4 w-4\" />\n                        </button>\n                      </div>\n                      <p class=\"mt-1 text-xs text-gray-500\">\n                        @if (jwksFromDiscovery()) {\n                          From this tenant's discovery document.\n                        } @else {\n                          The default location for this tenant's issuer; check it against the issuer's discovery document if the receiver\n                          cannot fetch it.\n                        }\n                        Give the receiver this URL. Keys rotate with the tenant's signing keys, so the receiver should refetch it when it meets an\n                        unknown key.\n                      </p>\n                    </div>\n                    @if (!formData.clientId) {\n                      <p class=\"text-xs text-amber-700\">Choose an owning client below; the token names it as its subject.</p>\n                    }\n                  }\n                  @case ('static') {\n                    <div class=\"grid gap-4 md:grid-cols-2\">\n                      <div class=\"md:col-span-2\">\n                        <span class=\"block text-sm font-medium text-gray-700 mb-2\" id=\"webhook-static-type\">Credential type</span>\n                        <div class=\"flex flex-wrap gap-2\" role=\"radiogroup\" aria-labelledby=\"webhook-static-type\">\n                          @for (option of staticAuthOptions; track option.type) {\n                            <label\n                              class=\"flex cursor-pointer items-center gap-2 rounded-md border bg-white px-3 py-2 text-sm\"\n                              [class.border-primary-500]=\"formData.authType === option.type\"\n                              [class.border-gray-300]=\"formData.authType !== option.type\"\n                            >\n                              <input\n                                type=\"radio\"\n                                name=\"staticAuthType\"\n                                [checked]=\"formData.authType === option.type\"\n                                (change)=\"formData.authType = option.type\"\n                                class=\"h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500\"\n                              />\n                              {{ option.label }}\n                            </label>\n                          }\n                        </div>\n                        @for (option of staticAuthOptions; track option.type) {\n                          @if (formData.authType === option.type) {\n                            <p class=\"mt-1 font-mono text-xs text-gray-500\">{{ option.hint }}</p>\n                          }\n                        }\n                      </div>\n\n                      @if (formData.authType === AuthType.BasicAuth) {\n                        <ui-input\n                          label=\"Username\"\n                          inputId=\"webhook-basic-username\"\n                          [placeholder]=\"credentialStored() ? 'Leave blank to keep the current one' : ''\"\n                          [(ngModel)]=\"formData.basicUsername\"\n                          name=\"basicUsername\"\n                        />\n                        <ui-input\n                          label=\"Password\"\n                          inputId=\"webhook-basic-password\"\n                          type=\"password\"\n                          [placeholder]=\"credentialStored() ? 'Leave blank to keep the current one' : ''\"\n                          [(ngModel)]=\"formData.basicPassword\"\n                          name=\"basicPassword\"\n                        />\n                      } @else {\n                        <div class=\"md:col-span-2\">\n                          <ui-input\n                            [label]=\"formData.authType === AuthType.BearerToken ? 'Token' : 'API key'\"\n                            inputId=\"webhook-credential\"\n                            type=\"password\"\n                            [placeholder]=\"credentialStored() ? 'Leave blank to keep the current one' : ''\"\n                            [(ngModel)]=\"formData.credential\"\n                            name=\"credential\"\n                          />\n                        </div>\n                      }\n                      <div class=\"md:col-span-2\">\n                        @if (fieldError('credential'); as err) {\n                          <p class=\"text-sm text-red-600\">{{ err }}</p>\n                        } @else {\n                          <p class=\"text-xs text-gray-500\">Stored encrypted and never shown again.</p>\n                        }\n                      </div>\n                    </div>\n                    @if (!isNew()) {\n                      <div class=\"flex flex-col gap-2 border-t border-gray-200 pt-3 sm:flex-row sm:items-center sm:justify-between\">\n                        <p class=\"text-xs text-gray-500\">The HMAC signing secret is also sent with each delivery.</p>\n                        <ui-button variant=\"secondary\" size=\"sm\" (clicked)=\"showRotateConfirm.set(true)\">\n                          <ui-icon name=\"key\" class=\"h-4 w-4 mr-1.5\" />\n                          Rotate secret\n                        </ui-button>\n                      </div>\n                    }\n                  }\n                }\n                @if (leavingIssuerSigned()) {\n                  <p class=\"text-xs text-amber-700\">After saving, rotate the secret to get a signing secret for the receiver.</p>\n                }\n              </div>\n            </ui-card>\n          </section>\n\n          <!-- 4. Owning client -->\n          <section id=\"webhook-client\" class=\"scroll-mt-4\">\n            <ui-card\n              title=\"Owning client\"\n              subtitle=\"The client this endpoint belongs to. Events this client causes itself (for example comments it writes through the Service API) are not sent back to it. With issuer-signed delivery, the token names this client as its subject.\"\n            >\n              <div class=\"space-y-4\">\n                <div class=\"max-w-xl\">\n                  <label for=\"webhook-client-id\" class=\"block text-sm font-medium text-gray-700 mb-1\">Client</label>\n                  <select\n                    id=\"webhook-client-id\"\n                    name=\"clientId\"\n                    [(ngModel)]=\"formData.clientId\"\n                    class=\"w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm\"\n                  >\n                    <option value=\"\">None</option>\n                    @for (client of clients(); track client.clientId) {\n                      <option [value]=\"client.clientId\">{{ clientLabel(client.clientId) }}</option>\n                    }\n                  </select>\n                </div>\n\n                @if (formData.clientId) {\n                  <div class=\"flex items-start gap-3\">\n                    <input\n                      type=\"checkbox\"\n                      id=\"webhook-skip-own\"\n                      name=\"skipOwnClientEvents\"\n                      [(ngModel)]=\"formData.skipOwnClientEvents\"\n                      class=\"mt-0.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500\"\n                    />\n                    <label for=\"webhook-skip-own\" class=\"text-sm text-gray-700\">\n                      Skip own client events\n                      <span class=\"block text-xs text-gray-500\">\n                        Don't send changes this client made itself. This stops the receiver being notified about its own updates, which can\n                        otherwise loop.\n                      </span>\n                    </label>\n                  </div>\n                }\n              </div>\n            </ui-card>\n          </section>\n\n          <!-- 5. Sensitive data -->\n          <section id=\"webhook-sensitive\" class=\"scroll-mt-4\">\n            <ui-card title=\"Sensitive data\" subtitle=\"Confidential fields of restricted events are withheld unless you authorise this endpoint.\">\n              @if (sensitiveEventsOf(formData.eventTypes).length > 0) {\n                <div class=\"rounded-md border border-amber-300 bg-amber-50 p-3\">\n                  <div class=\"flex items-start gap-3\">\n                    <input\n                      type=\"checkbox\"\n                      id=\"webhook-authorize-sensitive\"\n                      name=\"authorizeSensitiveData\"\n                      [checked]=\"formData.authorizeSensitiveData\"\n                      [disabled]=\"!canAuthorizeSensitiveData()\"\n                      (change)=\"onAuthorizeSensitiveDataChange($any($event.target).checked)\"\n                      class=\"mt-0.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500\"\n                    />\n                    <label for=\"webhook-authorize-sensitive\" class=\"text-sm text-gray-800\">\n                      Send sensitive data to this endpoint\n                      <span class=\"block text-xs text-gray-600\">\n                        Without this, the confidential fields of restricted events are withheld from deliveries and listed in\n                        <code>redacted_fields</code>.\n                        @if (!canAuthorizeSensitiveData()) {\n                          You need the permission each restricted event declares to authorise this.\n                        }\n                      </span>\n                      @if (endpoint()?.sensitiveDataAuthorizedAt) {\n                        <span class=\"block text-xs text-gray-600\">{{ authorizationTitle(endpoint()!) }}</span>\n                      }\n                    </label>\n                  </div>\n                  <ul class=\"mt-2 ml-7 list-disc text-xs text-gray-600\">\n                    @for (event of sensitiveEventsOf(formData.eventTypes); track event.eventType) {\n                      <li>{{ event.displayName }}</li>\n                    }\n                  </ul>\n                </div>\n              } @else {\n                <p class=\"text-sm text-gray-500\">None of the selected events carry sensitive fields.</p>\n              }\n            </ui-card>\n          </section>\n\n          <!-- 6. Headers and API version -->\n          <section id=\"webhook-advanced\" class=\"scroll-mt-4\">\n            <ui-card title=\"Headers and version\" subtitle=\"Extra headers sent with every delivery, and the payload format.\">\n              <div class=\"space-y-4\">\n                <div>\n                  <span class=\"block text-sm font-medium text-gray-700 mb-2\">Custom headers</span>\n                  @if (formData.headers.length) {\n                    <div class=\"space-y-2\">\n                      @for (row of formData.headers; track $index; let i = $index) {\n                        <div class=\"grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] items-center gap-2\">\n                          <input\n                            type=\"text\"\n                            [(ngModel)]=\"row.name\"\n                            [name]=\"'headerName' + i\"\n                            placeholder=\"X-Header-Name\"\n                            [attr.aria-label]=\"'Header ' + (i + 1) + ' name'\"\n                            class=\"w-full rounded-md border-gray-300 shadow-sm font-mono focus:border-primary-500 focus:ring-primary-500 sm:text-sm\"\n                          />\n                          <input\n                            type=\"text\"\n                            [(ngModel)]=\"row.value\"\n                            [name]=\"'headerValue' + i\"\n                            placeholder=\"Value\"\n                            [attr.aria-label]=\"'Header ' + (i + 1) + ' value'\"\n                            class=\"w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm\"\n                          />\n                          <button\n                            type=\"button\"\n                            (click)=\"removeHeader(i)\"\n                            class=\"rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-red-600\"\n                            [attr.aria-label]=\"'Remove header ' + (i + 1)\"\n                          >\n                            <ui-icon name=\"trash\" class=\"h-4 w-4\" />\n                          </button>\n                        </div>\n                      }\n                    </div>\n                  } @else {\n                    <p class=\"text-sm text-gray-500\">No custom headers.</p>\n                  }\n                  @if (fieldError('headers'); as err) {\n                    <p class=\"mt-2 text-sm text-red-600\">{{ err }}</p>\n                  }\n                  <button type=\"button\" (click)=\"addHeader()\" class=\"mt-2 inline-flex items-center gap-1 text-sm text-primary-600 hover:text-primary-700\">\n                    <ui-icon name=\"plus\" class=\"h-4 w-4\" />\n                    Add header\n                  </button>\n                  <p class=\"mt-1 text-xs text-gray-500\">Don't put secrets here; header values are stored and shown as plain text.</p>\n                </div>\n                <div>\n                  <span class=\"block text-sm font-medium text-gray-700\">API version</span>\n                  <p class=\"mt-1 font-mono text-sm text-gray-800\">{{ endpoint()?.apiVersion || defaultApiVersion }}</p>\n                  <p class=\"text-xs text-gray-500\">The payload format deliveries use.</p>\n                </div>\n              </div>\n            </ui-card>\n          </section>\n\n          <!-- Save bar -->\n          <div class=\"sticky bottom-0 z-10 -mx-4 flex justify-end gap-2 border-t border-gray-200 bg-white/95 px-4 py-3 backdrop-blur sm:mx-0 sm:rounded-lg sm:border sm:shadow-sm\">\n            <ui-button variant=\"secondary\" (clicked)=\"onCancel()\">Cancel</ui-button>\n            <ui-button type=\"submit\" [loading]=\"saving()\">{{ isNew() ? 'Create webhook' : 'Save changes' }}</ui-button>\n          </div>\n        </div>\n      </form>\n    }\n\n    @if (activeTab() === 'deliveries' && endpoint(); as ep) {\n      <div class=\"space-y-6\">\n        <div class=\"grid gap-4 sm:grid-cols-3\">\n          <ui-card>\n            <p class=\"text-sm text-gray-500\">Total deliveries</p>\n            <p class=\"mt-1 text-2xl font-semibold text-gray-900\">{{ ep.stats?.totalDeliveries || 0 }}</p>\n          </ui-card>\n          <ui-card>\n            <p class=\"text-sm text-gray-500\">Succeeded</p>\n            <p class=\"mt-1 text-2xl font-semibold text-green-600\">{{ ep.stats?.successfulDeliveries || 0 }}</p>\n            <p class=\"text-xs text-gray-500\">Last: {{ formatDate(ep.stats?.lastSuccessAt) }}</p>\n          </ui-card>\n          <ui-card>\n            <p class=\"text-sm text-gray-500\">Failed</p>\n            <p class=\"mt-1 text-2xl font-semibold text-red-600\">{{ ep.stats?.failedDeliveries || 0 }}</p>\n            <p class=\"text-xs text-gray-500\">Last: {{ formatDate(ep.stats?.lastFailureAt) }}</p>\n          </ui-card>\n        </div>\n\n        <ui-card [padding]=\"false\">\n          <div class=\"flex items-center justify-between border-b border-gray-200 px-4 py-3 sm:px-6\">\n            <h2 class=\"text-lg font-medium text-gray-900\">Delivery history</h2>\n            <ui-button variant=\"secondary\" size=\"sm\" [loading]=\"deliveriesLoading()\" (clicked)=\"loadDeliveries()\">\n              <ui-icon name=\"arrow-path\" class=\"h-4 w-4 mr-1.5\" />\n              Refresh\n            </ui-button>\n          </div>\n          @if (deliveriesLoading() && !deliveriesLoaded()) {\n            <div class=\"py-8 text-center text-gray-500\">Loading...</div>\n          } @else if (deliveries().length > 0) {\n            <div class=\"overflow-x-auto\">\n              <table class=\"min-w-full divide-y divide-gray-200\">\n                <thead class=\"bg-gray-50\">\n                  <tr>\n                    <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase text-gray-500\">Event</th>\n                    <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase text-gray-500\">Status</th>\n                    <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase text-gray-500\">HTTP</th>\n                    <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase text-gray-500\">Attempts</th>\n                    <th scope=\"col\" class=\"px-4 py-2 text-left text-xs font-medium uppercase text-gray-500\">Time</th>\n                    <th scope=\"col\" class=\"px-4 py-2\"><span class=\"sr-only\">Actions</span></th>\n                  </tr>\n                </thead>\n                <tbody class=\"divide-y divide-gray-200 bg-white\">\n                  @for (delivery of deliveries(); track delivery.id) {\n                    <tr>\n                      <td class=\"px-4 py-2 font-mono text-sm\">{{ delivery.eventType }}</td>\n                      <td class=\"px-4 py-2\">\n                        <ui-badge [variant]=\"getStatusVariant(delivery.status)\">{{ delivery.status }}</ui-badge>\n                        @if (delivery.errorMessage) {\n                          <span class=\"mt-0.5 block max-w-xs truncate text-xs text-red-600\" [title]=\"delivery.errorMessage\">{{ delivery.errorMessage }}</span>\n                        }\n                      </td>\n                      <td class=\"px-4 py-2 text-sm\">{{ delivery.httpStatus || '-' }}</td>\n                      <td class=\"px-4 py-2 text-sm\">{{ delivery.retryCount + 1 }}</td>\n                      <td class=\"px-4 py-2 text-sm text-gray-500 whitespace-nowrap\">{{ formatDate(delivery.createdAt) }}</td>\n                      <td class=\"px-4 py-2 text-right\">\n                        @if (canRetry(delivery.status)) {\n                          <button\n                            type=\"button\"\n                            (click)=\"retryDelivery(delivery)\"\n                            [disabled]=\"retryingId() === delivery.id\"\n                            class=\"rounded p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50\"\n                            aria-label=\"Retry delivery\"\n                            title=\"Retry\"\n                          >\n                            <ui-icon name=\"refresh\" class=\"h-4 w-4\" />\n                          </button>\n                        }\n                      </td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          } @else {\n            <p class=\"py-8 text-center text-gray-500\">No deliveries yet. Send a test event to try the endpoint.</p>\n          }\n        </ui-card>\n      </div>\n    }\n  </div>\n\n  <!-- Dialogs -->\n  <ui-confirm-dialog\n    [open]=\"showSensitiveDataConfirm()\"\n    title=\"Send sensitive data outside the platform?\"\n    [message]=\"sensitiveDataConfirmMessage()\"\n    confirmText=\"Authorise\"\n    cancelText=\"Cancel\"\n    variant=\"danger\"\n    [closeOnBackdrop]=\"false\"\n    (confirmed)=\"confirmSensitiveData()\"\n    (cancelled)=\"cancelSensitiveData()\"\n  />\n\n  <ui-confirm-dialog\n    [open]=\"showDeleteConfirm()\"\n    title=\"Delete webhook\"\n    [message]=\"'Delete the webhook \\'' + (endpoint()?.name || '') + '\\'? Deliveries stop immediately and this cannot be undone.'\"\n    confirmText=\"Delete\"\n    cancelText=\"Cancel\"\n    variant=\"danger\"\n    [loading]=\"deleting()\"\n    [closeOnBackdrop]=\"false\"\n    (confirmed)=\"confirmDelete()\"\n    (cancelled)=\"showDeleteConfirm.set(false)\"\n  />\n\n  <ui-confirm-dialog\n    [open]=\"showRotateConfirm()\"\n    title=\"Rotate signing secret\"\n    [message]=\"'Rotate the secret for \\'' + (endpoint()?.name || '') + '\\'? The current secret stops working immediately, so update the receiver with the new one.'\"\n    confirmText=\"Rotate secret\"\n    cancelText=\"Cancel\"\n    variant=\"warning\"\n    [loading]=\"rotating()\"\n    [closeOnBackdrop]=\"false\"\n    (confirmed)=\"confirmRotateSecret()\"\n    (cancelled)=\"showRotateConfirm.set(false)\"\n  />\n\n  <ui-modal [open]=\"showSecretModal()\" title=\"Signing secret\" [closeOnBackdrop]=\"false\" (closed)=\"closeSecretModal()\">\n    <div class=\"space-y-4\">\n      <p class=\"text-sm text-amber-700\">This is the only time this secret is shown. Copy it now.</p>\n      <div class=\"flex items-center gap-2\">\n        <code class=\"flex-1 break-all rounded bg-gray-100 px-3 py-2 font-mono text-sm\">{{ newSecret() }}</code>\n        <ui-button variant=\"secondary\" (clicked)=\"copySecret()\" [attr.aria-label]=\"'Copy secret'\">\n          @if (secretCopied()) {\n            <ui-icon name=\"check-circle\" class=\"h-5 w-5 text-green-500\" />\n          } @else {\n            <ui-icon name=\"document-duplicate\" class=\"h-5 w-5\" />\n          }\n        </ui-button>\n      </div>\n      <p class=\"text-xs text-gray-500\">\n        Use this secret to verify webhook signatures. The signature is sent in the X-Webhook-Signature header as\n        sha256=&lt;hex-signature&gt;.\n      </p>\n      <div class=\"flex justify-end\">\n        <ui-button (clicked)=\"closeSecretModal()\">Done</ui-button>\n      </div>\n    </div>\n  </ui-modal>\n}\n" }]
+        }] });
+
+export { WebhookDetailPageComponent, WebhookSecretHandoff, validateWebhookForm };
+//# sourceMappingURL=syndew-oluso-admin-ui-webhook-detail-page.component-Bh5dZwt-.mjs.map