@lenne.tech/ng-base 18.1.3 → 22.0.1

package/fesm2022/lenne.tech-ng-base-bug-bug-report-dialog-BRzVmKJr.mjs

@@ -0,0 +1,825 @@
+import { t as LtBugReportService } from "./lenne.tech-ng-base-bug-bug-report-service-DWoTb_iw.mjs";
+import { registerLtBugMessages } from "./lenne.tech-ng-base-bug-messages-BsP4fRQU.mjs";
+import { emptyLtBugReportForm, formatLtBugFileSize, ltBugPrefillFromError, ltDataUrlSize } from "./lenne.tech-ng-base-bug-report-Tzlhe1Cm.mjs";
+import * as i0 from "@angular/core";
+import { Component, ElementRef, Injector, afterNextRender, computed, inject, input, output, signal } from "@angular/core";
+import { LT_I18N_OPTIONS, LtI18nService } from "@lenne.tech/ng-base";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { lucideAppWindow, lucideArrowUpDown, lucideChevronDown, lucideCircleAlert, lucideCircleArrowRight, lucideClock, lucideFileText, lucideHand, lucideInfo, lucideKeyboard, lucideMousePointerClick, lucidePaperclip, lucidePencil, lucideSend, lucideUpload, lucideX } from "@ng-icons/lucide";
+import { FormField, disabled, form, maxLength, required, submit } from "@angular/forms/signals";
+import * as i1 from "@lenne.tech/ng-base/ui";
+import { HlmBadgeImports, HlmButtonImports, HlmCollapsibleImports, HlmDialogImports, HlmNativeSelectImports, HlmSpinnerImports, HlmSwitchImports, HlmTextareaImports, LtFormField, LtNotice, LtOverlayService, LtSelect, LtTextField, injectLtOverlayRef } from "@lenne.tech/ng-base/ui";
+import { ltFocusFirstInvalid } from "@lenne.tech/ng-base/utils";
+let nextId$1 = 0;
+var LtBugAttachments = class LtBugAttachments {
+	accept = input("image/*,.pdf,.doc,.docx,.txt,.log", ...ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []);
+	attachments = input.required(...ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	maxFiles = input(10, ...ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []);
+	maxFileSize = input(10, ...ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []);
+	added = output();
+	removed = output();
+	i18n = inject(LtI18nService);
+	hintId = `lt-bug-attachments-${nextId$1++}-hint`;
+	dragging = signal(false, ...ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []);
+	rejections = signal([], ...ngDevMode ? [{ debugName: "rejections" }] : /* istanbul ignore next */ []);
+	formatSize = formatLtBugFileSize;
+	dragDepth = 0;
+	openFileDialog(fileInput) {
+		if (!this.disabled()) fileInput.click();
+	}
+	onInputChange(fileInput) {
+		const files = Array.from(fileInput.files ?? []);
+		fileInput.value = "";
+		this.addFiles(files);
+	}
+	onDragEnter(event) {
+		event.preventDefault();
+		if (!this.disabled()) {
+			this.dragDepth++;
+			this.dragging.set(true);
+		}
+	}
+	onDragOver(event) {
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = this.disabled() ? "none" : "copy";
+	}
+	onDragLeave(event) {
+		event.preventDefault();
+		this.dragDepth = Math.max(0, this.dragDepth - 1);
+		if (this.dragDepth === 0) this.dragging.set(false);
+	}
+	onDrop(event) {
+		event.preventDefault();
+		this.dragDepth = 0;
+		this.dragging.set(false);
+		if (!this.disabled()) this.addFiles(Array.from(event.dataTransfer?.files ?? []));
+	}
+	async addFiles(files) {
+		if (!files.length) return [];
+		const messages = [];
+		const accepted = [];
+		const maxBytes = this.maxFileSize() * 1024 * 1024;
+		let count = this.attachments().length;
+		for (const file of files) {
+			if (file.size > maxBytes) {
+				messages.push(this.i18n.t("lt.bug.fileTooLarge", {
+					max: this.maxFileSize(),
+					name: file.name
+				}));
+				continue;
+			}
+			if (count >= this.maxFiles()) {
+				messages.push(this.i18n.t("lt.bug.tooManyFiles", {
+					max: this.maxFiles(),
+					name: file.name
+				}));
+				continue;
+			}
+			try {
+				const data = await readAsDataUrl(file);
+				accepted.push({
+					data,
+					id: `attachment-${Date.now()}-${nextId$1++}`,
+					name: file.name,
+					size: file.size,
+					type: file.type || "application/octet-stream",
+					...file.type.startsWith("image/") ? { preview: data } : {}
+				});
+				count++;
+			} catch {
+				messages.push(this.i18n.t("lt.bug.fileReadFailed", { name: file.name }));
+			}
+		}
+		this.rejections.set(messages);
+		if (accepted.length) this.added.emit(accepted);
+		return accepted;
+	}
+	removeLabel(attachment) {
+		return this.i18n.t("lt.bug.removeAttachment", { name: attachment.name });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: LtBugAttachments,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: LtBugAttachments,
+		isStandalone: true,
+		selector: "lt-bug-attachments",
+		inputs: {
+			accept: {
+				classPropertyName: "accept",
+				publicName: "accept",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			attachments: {
+				classPropertyName: "attachments",
+				publicName: "attachments",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxFiles: {
+				classPropertyName: "maxFiles",
+				publicName: "maxFiles",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxFileSize: {
+				classPropertyName: "maxFileSize",
+				publicName: "maxFileSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			added: "added",
+			removed: "removed"
+		},
+		host: { classAttribute: "flex flex-col gap-3" },
+		providers: [provideIcons({
+			lucideFileText,
+			lucidePaperclip,
+			lucideUpload,
+			lucideX
+		})],
+		ngImport: i0,
+		template: "<div\n  class=\"border-border flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-4 text-center transition-colors data-[disabled=true]:opacity-50 data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/5\"\n  data-slot=\"dropzone\"\n  [attr.data-dragging]=\"dragging() || null\"\n  [attr.data-disabled]=\"disabled() || null\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <ng-icon name=\"lucideUpload\" class=\"text-muted-foreground text-2xl\" aria-hidden=\"true\" />\n  <button hlmBtn type=\"button\" variant=\"outline\" size=\"sm\" [disabled]=\"disabled()\" [attr.aria-describedby]=\"hintId\" (click)=\"openFileDialog(fileInput)\">\n    {{ i18n.t('lt.bug.selectFiles') }}\n  </button>\n  <p [id]=\"hintId\" class=\"text-muted-foreground text-xs\">{{ i18n.t('lt.bug.dropHint') }} · {{ i18n.t('lt.bug.maxFileSize', { max: maxFileSize() }) }}</p>\n  <input\n    #fileInput\n    type=\"file\"\n    multiple\n    class=\"sr-only\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    data-slot=\"file-input\"\n    [accept]=\"accept()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onInputChange(fileInput)\"\n  />\n</div>\n\n@if (rejections().length > 0) {\n  <ul class=\"text-error flex flex-col gap-1 text-sm\" role=\"alert\" data-slot=\"rejections\">\n    @for (message of rejections(); track $index) {\n      <li>{{ message }}</li>\n    }\n  </ul>\n}\n\n@if (attachments().length > 0) {\n  <div class=\"flex flex-col gap-2\">\n    <p class=\"text-sm font-medium\" [id]=\"hintId + '-list'\">{{ i18n.t('lt.bug.attachmentsCount', { count: attachments().length }) }}</p>\n    <ul class=\"flex flex-col gap-1\" data-slot=\"attachment-list\" [attr.aria-labelledby]=\"hintId + '-list'\">\n      @for (attachment of attachments(); track attachment.id) {\n        <li class=\"bg-muted/50 flex items-center gap-3 rounded-lg p-2\" data-slot=\"attachment\" [attr.data-screenshot]=\"attachment.isScreenshot || null\">\n          @if (attachment.preview) {\n            <img class=\"size-10 shrink-0 rounded object-cover\" [src]=\"attachment.preview\" [alt]=\"attachment.name\" />\n          } @else {\n            <ng-icon\n              class=\"text-muted-foreground shrink-0 text-2xl\"\n              aria-hidden=\"true\"\n              [name]=\"attachment.type.startsWith('text/') || attachment.type.includes('pdf') ? 'lucideFileText' : 'lucidePaperclip'\"\n            />\n          }\n          <div class=\"flex min-w-0 flex-1 flex-col\">\n            <div class=\"flex min-w-0 items-center gap-2\">\n              <span class=\"truncate text-sm font-medium\" [title]=\"attachment.name\">{{ attachment.name }}</span>\n              @if (attachment.isScreenshot) {\n                <span hlmBadge variant=\"secondary\">{{ i18n.t('lt.bug.screenshot') }}</span>\n              }\n            </div>\n            <span class=\"text-muted-foreground text-xs\">{{ formatSize(attachment.size) }}</span>\n          </div>\n          <button\n            hlmBtn\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            data-action=\"remove\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"removeLabel(attachment)\"\n            (click)=\"removed.emit(attachment.id)\"\n          >\n            <ng-icon name=\"lucideX\" aria-hidden=\"true\" />\n          </button>\n        </li>\n      }\n    </ul>\n  </div>\n}\n",
+		dependencies: [
+			{
+				kind: "directive",
+				type: i1.HlmBadge,
+				selector: "[hlmBadge],hlm-badge",
+				inputs: ["variant"],
+				exportAs: ["hlmBadge"]
+			},
+			{
+				kind: "directive",
+				type: i1.HlmButton,
+				selector: "button[hlmBtn], a[hlmBtn]",
+				inputs: ["variant", "size"],
+				exportAs: ["hlmBtn"]
+			},
+			{
+				kind: "component",
+				type: NgIcon,
+				selector: "ng-icon",
+				inputs: [
+					"name",
+					"svg",
+					"size",
+					"strokeWidth",
+					"color"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: LtBugAttachments,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lt-bug-attachments",
+			imports: [
+				HlmBadgeImports,
+				HlmButtonImports,
+				NgIcon
+			],
+			providers: [provideIcons({
+				lucideFileText,
+				lucidePaperclip,
+				lucideUpload,
+				lucideX
+			})],
+			host: { class: "flex flex-col gap-3" },
+			template: "<div\n  class=\"border-border flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-4 text-center transition-colors data-[disabled=true]:opacity-50 data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/5\"\n  data-slot=\"dropzone\"\n  [attr.data-dragging]=\"dragging() || null\"\n  [attr.data-disabled]=\"disabled() || null\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <ng-icon name=\"lucideUpload\" class=\"text-muted-foreground text-2xl\" aria-hidden=\"true\" />\n  <button hlmBtn type=\"button\" variant=\"outline\" size=\"sm\" [disabled]=\"disabled()\" [attr.aria-describedby]=\"hintId\" (click)=\"openFileDialog(fileInput)\">\n    {{ i18n.t('lt.bug.selectFiles') }}\n  </button>\n  <p [id]=\"hintId\" class=\"text-muted-foreground text-xs\">{{ i18n.t('lt.bug.dropHint') }} · {{ i18n.t('lt.bug.maxFileSize', { max: maxFileSize() }) }}</p>\n  <input\n    #fileInput\n    type=\"file\"\n    multiple\n    class=\"sr-only\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    data-slot=\"file-input\"\n    [accept]=\"accept()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onInputChange(fileInput)\"\n  />\n</div>\n\n@if (rejections().length > 0) {\n  <ul class=\"text-error flex flex-col gap-1 text-sm\" role=\"alert\" data-slot=\"rejections\">\n    @for (message of rejections(); track $index) {\n      <li>{{ message }}</li>\n    }\n  </ul>\n}\n\n@if (attachments().length > 0) {\n  <div class=\"flex flex-col gap-2\">\n    <p class=\"text-sm font-medium\" [id]=\"hintId + '-list'\">{{ i18n.t('lt.bug.attachmentsCount', { count: attachments().length }) }}</p>\n    <ul class=\"flex flex-col gap-1\" data-slot=\"attachment-list\" [attr.aria-labelledby]=\"hintId + '-list'\">\n      @for (attachment of attachments(); track attachment.id) {\n        <li class=\"bg-muted/50 flex items-center gap-3 rounded-lg p-2\" data-slot=\"attachment\" [attr.data-screenshot]=\"attachment.isScreenshot || null\">\n          @if (attachment.preview) {\n            <img class=\"size-10 shrink-0 rounded object-cover\" [src]=\"attachment.preview\" [alt]=\"attachment.name\" />\n          } @else {\n            <ng-icon\n              class=\"text-muted-foreground shrink-0 text-2xl\"\n              aria-hidden=\"true\"\n              [name]=\"attachment.type.startsWith('text/') || attachment.type.includes('pdf') ? 'lucideFileText' : 'lucidePaperclip'\"\n            />\n          }\n          <div class=\"flex min-w-0 flex-1 flex-col\">\n            <div class=\"flex min-w-0 items-center gap-2\">\n              <span class=\"truncate text-sm font-medium\" [title]=\"attachment.name\">{{ attachment.name }}</span>\n              @if (attachment.isScreenshot) {\n                <span hlmBadge variant=\"secondary\">{{ i18n.t('lt.bug.screenshot') }}</span>\n              }\n            </div>\n            <span class=\"text-muted-foreground text-xs\">{{ formatSize(attachment.size) }}</span>\n          </div>\n          <button\n            hlmBtn\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            data-action=\"remove\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"removeLabel(attachment)\"\n            (click)=\"removed.emit(attachment.id)\"\n          >\n            <ng-icon name=\"lucideX\" aria-hidden=\"true\" />\n          </button>\n        </li>\n      }\n    </ul>\n  </div>\n}\n"
+		}]
+	}],
+	propDecorators: {
+		accept: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "accept",
+				required: false
+			}]
+		}],
+		attachments: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "attachments",
+				required: true
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		maxFiles: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxFiles",
+				required: false
+			}]
+		}],
+		maxFileSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxFileSize",
+				required: false
+			}]
+		}],
+		added: [{
+			type: i0.Output,
+			args: ["added"]
+		}],
+		removed: [{
+			type: i0.Output,
+			args: ["removed"]
+		}]
+	}
+});
+function readAsDataUrl(file) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => typeof reader.result === "string" ? resolve(reader.result) : reject(/* @__PURE__ */ new Error("Unexpected FileReader result"));
+		reader.onerror = () => reject(reader.error ?? /* @__PURE__ */ new Error("FileReader error"));
+		reader.onabort = () => reject(/* @__PURE__ */ new Error("FileReader aborted"));
+		reader.readAsDataURL(file);
+	});
+}
+let nextId = 0;
+const ICONS = {
+	click: "lucideMousePointerClick",
+	error: "lucideCircleAlert",
+	form_change: "lucideFileText",
+	form_submit: "lucideSend",
+	hover: "lucideHand",
+	input_change: "lucidePencil",
+	keyboard: "lucideKeyboard",
+	modal_close: "lucideX",
+	modal_open: "lucideAppWindow",
+	navigation: "lucideCircleArrowRight",
+	scroll: "lucideArrowUpDown"
+};
+const COLORS = {
+	error: "text-error",
+	form_change: "text-success",
+	form_submit: "text-success",
+	input_change: "text-warning",
+	keyboard: "text-info",
+	modal_close: "text-error",
+	modal_open: "text-info",
+	navigation: "text-info"
+};
+var LtBugJourneyTimeline = class LtBugJourneyTimeline {
+	events = input.required(...ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []);
+	i18n = inject(LtI18nService);
+	filterId = `lt-bug-journey-${nextId++}-filter`;
+	filter = signal("all", ...ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []);
+	types = computed(() => ["all", ...new Set(this.events().map((event) => event.type))], ...ngDevMode ? [{ debugName: "types" }] : /* istanbul ignore next */ []);
+	filtered = computed(() => {
+		const filter = this.filter();
+		return filter === "all" ? this.events() : this.events().filter((event) => event.type === filter);
+	}, ...ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []);
+	typeLabel(type) {
+		if (type === "all") return this.i18n.t("lt.bug.allEventTypes");
+		const key = `lt.bug.events.${type}`;
+		const label = this.i18n.t(key);
+		return label === key ? type.replace(/_/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase()) : label;
+	}
+	icon(type) {
+		return ICONS[type] ?? "lucideInfo";
+	}
+	color(type) {
+		return COLORS[type] ?? "text-primary";
+	}
+	time(timestamp) {
+		const date = new Date(timestamp);
+		return Number.isNaN(date.getTime()) ? "" : date.toLocaleTimeString(this.i18n.locale() === "en" ? "en-GB" : "de-DE", {
+			hour: "2-digit",
+			minute: "2-digit",
+			second: "2-digit"
+		});
+	}
+	details(event) {
+		const metadata = event.metadata;
+		if (!metadata) return "";
+		const parts = [];
+		if (metadata.text) parts.push(`${this.i18n.t("lt.bug.metaText")}: ${metadata.text.length > 30 ? `${metadata.text.slice(0, 30)}…` : metadata.text}`);
+		if (metadata.value) parts.push(`${this.i18n.t("lt.bug.metaValue")}: ${metadata.value}`);
+		if (metadata.url && metadata.url !== metadata.toUrl) parts.push(`${this.i18n.t("lt.bug.metaUrl")}: ${metadata.url}`);
+		if (metadata.toUrl) parts.push(`→ ${metadata.toUrl}`);
+		if (metadata.scrollPosition !== void 0) parts.push(`${this.i18n.t("lt.bug.metaPosition")}: ${metadata.scrollPosition}px`);
+		if (metadata.key) parts.push(`${this.i18n.t("lt.bug.metaKey")}: ${metadata.key}`);
+		if (metadata.errorMessage) parts.push(`${this.i18n.t("lt.bug.metaError")}: ${metadata.errorMessage}`);
+		return parts.join(" | ");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: LtBugJourneyTimeline,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: LtBugJourneyTimeline,
+		isStandalone: true,
+		selector: "lt-bug-journey-timeline",
+		inputs: { events: {
+			classPropertyName: "events",
+			publicName: "events",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: { classAttribute: "flex flex-col gap-3" },
+		providers: [provideIcons({
+			lucideAppWindow,
+			lucideArrowUpDown,
+			lucideCircleAlert,
+			lucideCircleArrowRight,
+			lucideClock,
+			lucideFileText,
+			lucideHand,
+			lucideInfo,
+			lucideKeyboard,
+			lucideMousePointerClick,
+			lucidePencil,
+			lucideSend,
+			lucideX
+		})],
+		ngImport: i0,
+		template: "<div class=\"flex flex-col gap-1.5\">\n  <label class=\"text-sm font-medium\" [for]=\"filterId\">{{ i18n.t('lt.bug.journeyFilter') }}</label>\n  <hlm-native-select size=\"sm\" [selectId]=\"filterId\" [value]=\"filter()\" (valueChange)=\"filter.set($event || 'all')\">\n    @for (type of types(); track type) {\n      <option hlmNativeSelectOption [value]=\"type\">{{ typeLabel(type) }}</option>\n    }\n  </hlm-native-select>\n</div>\n\n@if (filtered().length > 0) {\n  <ol class=\"flex max-h-96 flex-col gap-2 overflow-y-auto\" data-slot=\"journey-list\" [attr.aria-label]=\"i18n.t('lt.bug.journeyEvents')\">\n    @for (event of filtered(); track $index) {\n      <li class=\"border-border flex items-start gap-3 rounded-lg border p-3\" data-slot=\"journey-event\" [attr.data-type]=\"event.type\">\n        <ng-icon class=\"mt-0.5 shrink-0 text-lg\" aria-hidden=\"true\" [class]=\"color(event.type)\" [name]=\"icon(event.type)\" />\n        <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <span hlmBadge variant=\"outline\">{{ typeLabel(event.type) }}</span>\n            <time class=\"text-muted-foreground text-xs\" [attr.datetime]=\"event.timestamp\">{{ time(event.timestamp) }}</time>\n          </div>\n          <p class=\"truncate text-sm font-medium\" [title]=\"event.target\">{{ event.target }}</p>\n          @if (details(event); as text) {\n            <p class=\"text-muted-foreground truncate text-xs\" [title]=\"text\">{{ text }}</p>\n          }\n        </div>\n      </li>\n    }\n  </ol>\n} @else {\n  <div class=\"text-muted-foreground flex flex-col items-center gap-2 py-8 text-center\" data-slot=\"journey-empty\">\n    <ng-icon name=\"lucideClock\" class=\"text-4xl opacity-50\" aria-hidden=\"true\" />\n    <p class=\"text-sm\">{{ i18n.t('lt.bug.journeyEmpty') }}</p>\n  </div>\n}\n",
+		dependencies: [
+			{
+				kind: "directive",
+				type: i1.HlmBadge,
+				selector: "[hlmBadge],hlm-badge",
+				inputs: ["variant"],
+				exportAs: ["hlmBadge"]
+			},
+			{
+				kind: "component",
+				type: i1.HlmNativeSelect,
+				selector: "hlm-native-select",
+				inputs: [
+					"selectId",
+					"selectClass",
+					"selectIconClass",
+					"size",
+					"disabled",
+					"forceInvalid",
+					"aria-invalid",
+					"value"
+				],
+				outputs: ["valueChange"],
+				exportAs: ["hlmNativeSelect"]
+			},
+			{
+				kind: "directive",
+				type: i1.HlmNativeSelectOption,
+				selector: "option[hlmNativeSelectOption]",
+				exportAs: ["hlmNativeSelectOption"]
+			},
+			{
+				kind: "component",
+				type: NgIcon,
+				selector: "ng-icon",
+				inputs: [
+					"name",
+					"svg",
+					"size",
+					"strokeWidth",
+					"color"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: LtBugJourneyTimeline,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lt-bug-journey-timeline",
+			imports: [
+				HlmBadgeImports,
+				HlmNativeSelectImports,
+				NgIcon
+			],
+			providers: [provideIcons({
+				lucideAppWindow,
+				lucideArrowUpDown,
+				lucideCircleAlert,
+				lucideCircleArrowRight,
+				lucideClock,
+				lucideFileText,
+				lucideHand,
+				lucideInfo,
+				lucideKeyboard,
+				lucideMousePointerClick,
+				lucidePencil,
+				lucideSend,
+				lucideX
+			})],
+			host: { class: "flex flex-col gap-3" },
+			template: "<div class=\"flex flex-col gap-1.5\">\n  <label class=\"text-sm font-medium\" [for]=\"filterId\">{{ i18n.t('lt.bug.journeyFilter') }}</label>\n  <hlm-native-select size=\"sm\" [selectId]=\"filterId\" [value]=\"filter()\" (valueChange)=\"filter.set($event || 'all')\">\n    @for (type of types(); track type) {\n      <option hlmNativeSelectOption [value]=\"type\">{{ typeLabel(type) }}</option>\n    }\n  </hlm-native-select>\n</div>\n\n@if (filtered().length > 0) {\n  <ol class=\"flex max-h-96 flex-col gap-2 overflow-y-auto\" data-slot=\"journey-list\" [attr.aria-label]=\"i18n.t('lt.bug.journeyEvents')\">\n    @for (event of filtered(); track $index) {\n      <li class=\"border-border flex items-start gap-3 rounded-lg border p-3\" data-slot=\"journey-event\" [attr.data-type]=\"event.type\">\n        <ng-icon class=\"mt-0.5 shrink-0 text-lg\" aria-hidden=\"true\" [class]=\"color(event.type)\" [name]=\"icon(event.type)\" />\n        <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <span hlmBadge variant=\"outline\">{{ typeLabel(event.type) }}</span>\n            <time class=\"text-muted-foreground text-xs\" [attr.datetime]=\"event.timestamp\">{{ time(event.timestamp) }}</time>\n          </div>\n          <p class=\"truncate text-sm font-medium\" [title]=\"event.target\">{{ event.target }}</p>\n          @if (details(event); as text) {\n            <p class=\"text-muted-foreground truncate text-xs\" [title]=\"text\">{{ text }}</p>\n          }\n        </div>\n      </li>\n    }\n  </ol>\n} @else {\n  <div class=\"text-muted-foreground flex flex-col items-center gap-2 py-8 text-center\" data-slot=\"journey-empty\">\n    <ng-icon name=\"lucideClock\" class=\"text-4xl opacity-50\" aria-hidden=\"true\" />\n    <p class=\"text-sm\">{{ i18n.t('lt.bug.journeyEmpty') }}</p>\n  </div>\n}\n"
+		}]
+	}],
+	propDecorators: { events: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "events",
+			required: true
+		}]
+	}] }
+});
+const TYPES = [
+	"bug",
+	"feature",
+	"enhancement",
+	"other"
+];
+var LtBugReportDialog = class LtBugReportDialog {
+	bug = inject(LtBugReportService);
+	i18n = registered(inject(LtI18nService), inject(LT_I18N_OPTIONS).messages);
+	ref = injectLtOverlayRef();
+	host = inject(ElementRef);
+	injector = inject(Injector);
+	model = signal(initialForm(this.bug.lastError()), ...ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []);
+	reportForm = form(this.model, (path) => {
+		required(path.title, { message: this.i18n.t("lt.bug.titleRequired") });
+		maxLength(path.title, 255);
+		required(path.type, { message: this.i18n.t("lt.bug.typeRequired") });
+		required(path.description, { message: this.i18n.t("lt.bug.descriptionRequired") });
+		disabled(path, () => this.bug.isSubmitting());
+	});
+	attachments = signal(initialAttachments(this.bug.screenshot()), ...ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []);
+	includes = signal({
+		browserInfo: true,
+		consoleLogs: true,
+		networkRequests: true,
+		userJourney: true
+	}, ...ngDevMode ? [{ debugName: "includes" }] : /* istanbul ignore next */ []);
+	showAdditional = signal(false, ...ngDevMode ? [{ debugName: "showAdditional" }] : /* istanbul ignore next */ []);
+	showJourney = signal(false, ...ngDevMode ? [{ debugName: "showJourney" }] : /* istanbul ignore next */ []);
+	journey = this.bug.getUserJourney();
+	consoleCount = this.bug.getConsoleLogs().length;
+	networkCount = this.bug.getNetworkRequests().length;
+	options = this.bug.options;
+	journeyEnabled = this.options.enableUserJourney && this.options.userJourney.enabled;
+	hasScreenshot = computed(() => this.attachments().some((attachment) => attachment.isScreenshot), ...ngDevMode ? [{ debugName: "hasScreenshot" }] : /* istanbul ignore next */ []);
+	typeOptions = computed(() => TYPES.map((type) => ({
+		label: this.i18n.t(`lt.bug.types.${type}`),
+		value: type
+	})), ...ngDevMode ? [{ debugName: "typeOptions" }] : /* istanbul ignore next */ []);
+	typeError = computed(() => fieldError(this.reportForm.type), ...ngDevMode ? [{ debugName: "typeError" }] : /* istanbul ignore next */ []);
+	descriptionError = computed(() => fieldError(this.reportForm.description), ...ngDevMode ? [{ debugName: "descriptionError" }] : /* istanbul ignore next */ []);
+	setInclude(key, value) {
+		this.includes.update((current) => ({
+			...current,
+			[key]: value
+		}));
+	}
+	addAttachments(added) {
+		this.attachments.update((current) => [...current, ...added]);
+	}
+	removeAttachment(id) {
+		this.attachments.update((current) => current.filter((attachment) => attachment.id !== id));
+	}
+	cancel() {
+		if (!this.bug.isSubmitting()) this.ref.close(false);
+	}
+	async onSubmit(event) {
+		event?.preventDefault();
+		if (this.bug.isSubmitting()) return;
+		await submit(this.reportForm, {
+			action: async () => {
+				try {
+					await this.bug.submit(await this.bug.buildReport(this.model(), this.attachments(), this.includes()));
+					this.bug.reset();
+					this.ref.close(true);
+				} catch {}
+			},
+			onInvalid: () => afterNextRender(() => ltFocusFirstInvalid(this.host.nativeElement, { offset: 0 }), { injector: this.injector })
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: LtBugReportDialog,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: LtBugReportDialog,
+		isStandalone: true,
+		selector: "lt-bug-report-dialog",
+		host: {
+			attributes: { "data-lt-bug-ui": "" },
+			classAttribute: "grid min-w-0 gap-6"
+		},
+		providers: [provideIcons({
+			lucideChevronDown,
+			lucideX
+		})],
+		ngImport: i0,
+		template: "<div hlmDialogHeader>\n  <h2 hlmDialogTitle>{{ i18n.t('lt.bug.dialogTitle') }}</h2>\n  <p hlmDialogDescription>{{ i18n.t('lt.bug.dialogDescription') }}</p>\n</div>\n\n<form id=\"lt-bug-form\" class=\"flex min-w-0 flex-col gap-4\" novalidate data-slot=\"bug-report-form\" (submit)=\"onSubmit($event)\">\n  @if (bug.error(); as message) {\n    <lt-notice variant=\"error\" data-slot=\"bug-report-error\">\n      <div class=\"flex items-start justify-between gap-3\">\n        <span>{{ message }}</span>\n        <button hlmBtn type=\"button\" variant=\"ghost\" size=\"icon-sm\" class=\"-my-1 shrink-0\" [attr.aria-label]=\"i18n.t('lt.bug.dismissError')\" (click)=\"bug.error.set(null)\">\n          <ng-icon name=\"lucideX\" aria-hidden=\"true\" />\n        </button>\n      </div>\n    </lt-notice>\n  }\n\n  <lt-text-field id=\"lt-bug-title\" [label]=\"i18n.t('lt.bug.title')\" [placeholder]=\"i18n.t('lt.bug.titlePlaceholder')\" [formField]=\"reportForm.title\" />\n\n  <lt-form-field for=\"lt-bug-type\" [label]=\"i18n.t('lt.bug.type')\" [required]=\"true\" [error]=\"typeError()\">\n    <lt-select id=\"lt-bug-type\" [options]=\"typeOptions()\" [placeholder]=\"i18n.t('lt.bug.typePlaceholder')\" [formField]=\"reportForm.type\" />\n  </lt-form-field>\n\n  <lt-form-field for=\"lt-bug-description\" [label]=\"i18n.t('lt.bug.description')\" [required]=\"true\" [error]=\"descriptionError()\">\n    <textarea\n      hlmTextarea\n      id=\"lt-bug-description\"\n      rows=\"4\"\n      class=\"max-h-64\"\n      [placeholder]=\"i18n.t('lt.bug.descriptionPlaceholder')\"\n      [forceInvalid]=\"!!descriptionError()\"\n      [formField]=\"reportForm.description\"\n    ></textarea>\n  </lt-form-field>\n\n  <lt-form-field for=\"lt-bug-expected\" [label]=\"i18n.t('lt.bug.expectedBehavior')\">\n    <textarea\n      hlmTextarea\n      id=\"lt-bug-expected\"\n      rows=\"3\"\n      class=\"max-h-48\"\n      [placeholder]=\"i18n.t('lt.bug.expectedBehaviorPlaceholder')\"\n      [formField]=\"reportForm.expectedBehavior\"\n    ></textarea>\n  </lt-form-field>\n\n  <lt-form-field for=\"lt-bug-steps\" [label]=\"i18n.t('lt.bug.stepsToReproduce')\">\n    <textarea\n      hlmTextarea\n      id=\"lt-bug-steps\"\n      rows=\"3\"\n      class=\"max-h-48\"\n      [placeholder]=\"i18n.t('lt.bug.stepsToReproducePlaceholder')\"\n      [formField]=\"reportForm.stepsToReproduce\"\n    ></textarea>\n  </lt-form-field>\n\n  <section class=\"flex flex-col gap-2\" aria-labelledby=\"lt-bug-attachments-title\" data-slot=\"bug-report-attachments\">\n    <h3 id=\"lt-bug-attachments-title\" class=\"text-sm font-medium\">\n      {{ i18n.t('lt.bug.attachments') }}\n      @if (hasScreenshot()) {\n        <span class=\"text-muted-foreground ms-2 text-xs font-normal\">{{ i18n.t('lt.bug.screenshotCaptured') }}</span>\n      }\n    </h3>\n    <lt-bug-attachments [attachments]=\"attachments()\" [disabled]=\"bug.isSubmitting()\" (added)=\"addAttachments($event)\" (removed)=\"removeAttachment($event)\" />\n  </section>\n\n  @if (options.enableBrowserInfo || options.enableConsoleLogs || options.enableNetworkRequests || journeyEnabled) {\n    <div hlmCollapsible class=\"border-border rounded-lg border\" data-slot=\"bug-report-additional\" [expanded]=\"showAdditional()\" (expandedChange)=\"showAdditional.set($event)\">\n      <button hlmCollapsibleTrigger type=\"button\" class=\"hover:bg-muted flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-start text-sm font-medium\">\n        <span>{{ i18n.t('lt.bug.additionalInfo') }}</span>\n        <ng-icon name=\"lucideChevronDown\" class=\"transition-transform duration-200\" aria-hidden=\"true\" [class.rotate-180]=\"showAdditional()\" />\n      </button>\n      <div hlmCollapsibleContent class=\"border-border flex flex-col gap-3 border-t p-3\">\n        @if (options.enableBrowserInfo) {\n          <div class=\"flex items-center justify-between gap-3\">\n            <div class=\"flex min-w-0 flex-col\">\n              <span id=\"lt-bug-include-browser-label\" class=\"text-sm font-medium\">{{ i18n.t('lt.bug.browserInfo') }}</span>\n              <span id=\"lt-bug-include-browser-hint\" class=\"text-muted-foreground text-xs\">{{ i18n.t('lt.bug.browserInfoHint') }}</span>\n            </div>\n            <hlm-switch\n              inputId=\"lt-bug-include-browser\"\n              aria-labelledby=\"lt-bug-include-browser-label\"\n              aria-describedby=\"lt-bug-include-browser-hint\"\n              [checked]=\"includes().browserInfo\"\n              [disabled]=\"bug.isSubmitting()\"\n              (checkedChange)=\"setInclude('browserInfo', $event)\"\n            />\n          </div>\n        }\n        @if (options.enableConsoleLogs) {\n          <div class=\"flex items-center justify-between gap-3\">\n            <div class=\"flex min-w-0 flex-col\">\n              <span id=\"lt-bug-include-console-label\" class=\"text-sm font-medium\">{{ i18n.t('lt.bug.consoleLogs') }}</span>\n              <span id=\"lt-bug-include-console-hint\" class=\"text-muted-foreground text-xs\">{{ i18n.t('lt.bug.consoleLogsHint', { count: consoleCount }) }}</span>\n            </div>\n            <hlm-switch\n              inputId=\"lt-bug-include-console\"\n              aria-labelledby=\"lt-bug-include-console-label\"\n              aria-describedby=\"lt-bug-include-console-hint\"\n              [checked]=\"includes().consoleLogs\"\n              [disabled]=\"bug.isSubmitting()\"\n              (checkedChange)=\"setInclude('consoleLogs', $event)\"\n            />\n          </div>\n        }\n        @if (options.enableNetworkRequests) {\n          <div class=\"flex items-center justify-between gap-3\">\n            <div class=\"flex min-w-0 flex-col\">\n              <span id=\"lt-bug-include-network-label\" class=\"text-sm font-medium\">{{ i18n.t('lt.bug.networkRequests') }}</span>\n              <span id=\"lt-bug-include-network-hint\" class=\"text-muted-foreground text-xs\">{{ i18n.t('lt.bug.networkRequestsHint', { count: networkCount }) }}</span>\n            </div>\n            <hlm-switch\n              inputId=\"lt-bug-include-network\"\n              aria-labelledby=\"lt-bug-include-network-label\"\n              aria-describedby=\"lt-bug-include-network-hint\"\n              [checked]=\"includes().networkRequests\"\n              [disabled]=\"bug.isSubmitting()\"\n              (checkedChange)=\"setInclude('networkRequests', $event)\"\n            />\n          </div>\n        }\n        @if (journeyEnabled) {\n          <div class=\"flex items-center justify-between gap-3\">\n            <div class=\"flex min-w-0 flex-col\">\n              <span id=\"lt-bug-include-journey-label\" class=\"text-sm font-medium\">{{ i18n.t('lt.bug.userJourney') }}</span>\n              <span id=\"lt-bug-include-journey-hint\" class=\"text-muted-foreground text-xs\">{{ i18n.t('lt.bug.userJourneyHint', { count: journey.length }) }}</span>\n            </div>\n            <hlm-switch\n              inputId=\"lt-bug-include-journey\"\n              aria-labelledby=\"lt-bug-include-journey-label\"\n              aria-describedby=\"lt-bug-include-journey-hint\"\n              [checked]=\"includes().userJourney\"\n              [disabled]=\"bug.isSubmitting()\"\n              (checkedChange)=\"setInclude('userJourney', $event)\"\n            />\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @if (journeyEnabled && includes().userJourney && journey.length > 0) {\n    <div hlmCollapsible class=\"border-border rounded-lg border\" data-slot=\"bug-report-journey\" [expanded]=\"showJourney()\" (expandedChange)=\"showJourney.set($event)\">\n      <button hlmCollapsibleTrigger type=\"button\" class=\"hover:bg-muted flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-start text-sm font-medium\">\n        <span>{{ i18n.t('lt.bug.journeyPreview', { count: journey.length }) }}</span>\n        <ng-icon name=\"lucideChevronDown\" class=\"transition-transform duration-200\" aria-hidden=\"true\" [class.rotate-180]=\"showJourney()\" />\n      </button>\n      <div hlmCollapsibleContent class=\"border-border border-t p-3\">\n        <lt-bug-journey-timeline [events]=\"journey\" />\n      </div>\n    </div>\n  }\n</form>\n\n<div hlmDialogFooter>\n  <button hlmBtn type=\"button\" variant=\"outline\" data-action=\"cancel\" [disabled]=\"bug.isSubmitting()\" (click)=\"cancel()\">{{ i18n.t('lt.bug.cancel') }}</button>\n  <button hlmBtn type=\"submit\" form=\"lt-bug-form\" data-action=\"submit\" [attr.aria-busy]=\"bug.isSubmitting() || null\" [attr.aria-disabled]=\"bug.isSubmitting() || null\">\n    @if (bug.isSubmitting()) {\n      <hlm-spinner aria-hidden=\"true\" />\n      {{ i18n.t('lt.bug.submitting') }}\n    } @else {\n      {{ i18n.t('lt.bug.submit') }}\n    }\n  </button>\n</div>\n",
+		dependencies: [
+			{
+				kind: "directive",
+				type: FormField,
+				selector: "[formField]",
+				inputs: ["formField"],
+				exportAs: ["formField"]
+			},
+			{
+				kind: "directive",
+				type: i1.HlmButton,
+				selector: "button[hlmBtn], a[hlmBtn]",
+				inputs: ["variant", "size"],
+				exportAs: ["hlmBtn"]
+			},
+			{
+				kind: "directive",
+				type: i1.HlmCollapsible,
+				selector: "[hlmCollapsible],hlm-collapsible",
+				exportAs: ["hlmCollapsible"]
+			},
+			{
+				kind: "directive",
+				type: i1.HlmCollapsibleContent,
+				selector: "[hlmCollapsibleContent],hlm-collapsible-content",
+				exportAs: ["hlmCollapsibleContent"]
+			},
+			{
+				kind: "directive",
+				type: i1.HlmCollapsibleTrigger,
+				selector: "button[hlmCollapsibleTrigger]",
+				exportAs: ["hlmCollapsibleTrigger"]
+			},
+			{
+				kind: "directive",
+				type: i1.HlmDialogDescription,
+				selector: "[hlmDialogDescription]",
+				exportAs: ["hlmDialogDescription"]
+			},
+			{
+				kind: "directive",
+				type: i1.HlmDialogFooter,
+				selector: "[hlmDialogFooter],hlm-dialog-footer",
+				exportAs: ["hlmDialogFooter"]
+			},
+			{
+				kind: "directive",
+				type: i1.HlmDialogHeader,
+				selector: "[hlmDialogHeader],hlm-dialog-header",
+				exportAs: ["hlmDialogHeader"]
+			},
+			{
+				kind: "directive",
+				type: i1.HlmDialogTitle,
+				selector: "[hlmDialogTitle]",
+				exportAs: ["hlmDialogTitle"]
+			},
+			{
+				kind: "component",
+				type: i1.HlmSpinner,
+				selector: "hlm-spinner",
+				inputs: ["icon", "aria-label"],
+				exportAs: ["hlmSpinner"]
+			},
+			{
+				kind: "component",
+				type: i1.HlmSwitch,
+				selector: "hlm-switch",
+				inputs: [
+					"class",
+					"checked",
+					"disabled",
+					"size",
+					"inputId",
+					"forceInvalid",
+					"aria-label",
+					"aria-labelledby",
+					"aria-describedby"
+				],
+				outputs: ["checkedChange"],
+				exportAs: ["hlmSwitch"]
+			},
+			{
+				kind: "directive",
+				type: i1.HlmTextarea,
+				selector: "[hlmTextarea]",
+				exportAs: ["hlmTextarea"]
+			},
+			{
+				kind: "component",
+				type: LtBugAttachments,
+				selector: "lt-bug-attachments",
+				inputs: [
+					"accept",
+					"attachments",
+					"disabled",
+					"maxFiles",
+					"maxFileSize"
+				],
+				outputs: ["added", "removed"]
+			},
+			{
+				kind: "component",
+				type: LtBugJourneyTimeline,
+				selector: "lt-bug-journey-timeline",
+				inputs: ["events"]
+			},
+			{
+				kind: "component",
+				type: LtFormField,
+				selector: "lt-form-field",
+				inputs: [
+					"describedBy",
+					"error",
+					"for",
+					"hint",
+					"label",
+					"required"
+				]
+			},
+			{
+				kind: "component",
+				type: LtNotice,
+				selector: "lt-notice",
+				inputs: ["title", "variant"]
+			},
+			{
+				kind: "component",
+				type: LtSelect,
+				selector: "lt-select",
+				inputs: [
+					"compareWith",
+					"disabled",
+					"id",
+					"invalid",
+					"label",
+					"options",
+					"placeholder",
+					"searchable",
+					"touched",
+					"value"
+				],
+				outputs: ["valueChange", "touch"]
+			},
+			{
+				kind: "component",
+				type: LtTextField,
+				selector: "lt-text-field",
+				inputs: [
+					"autocomplete",
+					"disabled",
+					"error",
+					"errors",
+					"hint",
+					"id",
+					"invalid",
+					"label",
+					"maxLength",
+					"minLength",
+					"name",
+					"placeholder",
+					"prefix",
+					"readonly",
+					"required",
+					"touched",
+					"type",
+					"unit",
+					"value"
+				],
+				outputs: [
+					"valueChange",
+					"enter",
+					"touch"
+				]
+			},
+			{
+				kind: "component",
+				type: NgIcon,
+				selector: "ng-icon",
+				inputs: [
+					"name",
+					"svg",
+					"size",
+					"strokeWidth",
+					"color"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: LtBugReportDialog,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lt-bug-report-dialog",
+			imports: [
+				FormField,
+				HlmButtonImports,
+				HlmCollapsibleImports,
+				HlmDialogImports,
+				HlmSpinnerImports,
+				HlmSwitchImports,
+				HlmTextareaImports,
+				LtBugAttachments,
+				LtBugJourneyTimeline,
+				LtFormField,
+				LtNotice,
+				LtSelect,
+				LtTextField,
+				NgIcon
+			],
+			providers: [provideIcons({
+				lucideChevronDown,
+				lucideX
+			})],
+			host: {
+				"data-lt-bug-ui": "",
+				class: "grid min-w-0 gap-6"
+			},
+			template: "<div hlmDialogHeader>\n  <h2 hlmDialogTitle>{{ i18n.t('lt.bug.dialogTitle') }}</h2>\n  <p hlmDialogDescription>{{ i18n.t('lt.bug.dialogDescription') }}</p>\n</div>\n\n<form id=\"lt-bug-form\" class=\"flex min-w-0 flex-col gap-4\" novalidate data-slot=\"bug-report-form\" (submit)=\"onSubmit($event)\">\n  @if (bug.error(); as message) {\n    <lt-notice variant=\"error\" data-slot=\"bug-report-error\">\n      <div class=\"flex items-start justify-between gap-3\">\n        <span>{{ message }}</span>\n        <button hlmBtn type=\"button\" variant=\"ghost\" size=\"icon-sm\" class=\"-my-1 shrink-0\" [attr.aria-label]=\"i18n.t('lt.bug.dismissError')\" (click)=\"bug.error.set(null)\">\n          <ng-icon name=\"lucideX\" aria-hidden=\"true\" />\n        </button>\n      </div>\n    </lt-notice>\n  }\n\n  <lt-text-field id=\"lt-bug-title\" [label]=\"i18n.t('lt.bug.title')\" [placeholder]=\"i18n.t('lt.bug.titlePlaceholder')\" [formField]=\"reportForm.title\" />\n\n  <lt-form-field for=\"lt-bug-type\" [label]=\"i18n.t('lt.bug.type')\" [required]=\"true\" [error]=\"typeError()\">\n    <lt-select id=\"lt-bug-type\" [options]=\"typeOptions()\" [placeholder]=\"i18n.t('lt.bug.typePlaceholder')\" [formField]=\"reportForm.type\" />\n  </lt-form-field>\n\n  <lt-form-field for=\"lt-bug-description\" [label]=\"i18n.t('lt.bug.description')\" [required]=\"true\" [error]=\"descriptionError()\">\n    <textarea\n      hlmTextarea\n      id=\"lt-bug-description\"\n      rows=\"4\"\n      class=\"max-h-64\"\n      [placeholder]=\"i18n.t('lt.bug.descriptionPlaceholder')\"\n      [forceInvalid]=\"!!descriptionError()\"\n      [formField]=\"reportForm.description\"\n    ></textarea>\n  </lt-form-field>\n\n  <lt-form-field for=\"lt-bug-expected\" [label]=\"i18n.t('lt.bug.expectedBehavior')\">\n    <textarea\n      hlmTextarea\n      id=\"lt-bug-expected\"\n      rows=\"3\"\n      class=\"max-h-48\"\n      [placeholder]=\"i18n.t('lt.bug.expectedBehaviorPlaceholder')\"\n      [formField]=\"reportForm.expectedBehavior\"\n    ></textarea>\n  </lt-form-field>\n\n  <lt-form-field for=\"lt-bug-steps\" [label]=\"i18n.t('lt.bug.stepsToReproduce')\">\n    <textarea\n      hlmTextarea\n      id=\"lt-bug-steps\"\n      rows=\"3\"\n      class=\"max-h-48\"\n      [placeholder]=\"i18n.t('lt.bug.stepsToReproducePlaceholder')\"\n      [formField]=\"reportForm.stepsToReproduce\"\n    ></textarea>\n  </lt-form-field>\n\n  <section class=\"flex flex-col gap-2\" aria-labelledby=\"lt-bug-attachments-title\" data-slot=\"bug-report-attachments\">\n    <h3 id=\"lt-bug-attachments-title\" class=\"text-sm font-medium\">\n      {{ i18n.t('lt.bug.attachments') }}\n      @if (hasScreenshot()) {\n        <span class=\"text-muted-foreground ms-2 text-xs font-normal\">{{ i18n.t('lt.bug.screenshotCaptured') }}</span>\n      }\n    </h3>\n    <lt-bug-attachments [attachments]=\"attachments()\" [disabled]=\"bug.isSubmitting()\" (added)=\"addAttachments($event)\" (removed)=\"removeAttachment($event)\" />\n  </section>\n\n  @if (options.enableBrowserInfo || options.enableConsoleLogs || options.enableNetworkRequests || journeyEnabled) {\n    <div hlmCollapsible class=\"border-border rounded-lg border\" data-slot=\"bug-report-additional\" [expanded]=\"showAdditional()\" (expandedChange)=\"showAdditional.set($event)\">\n      <button hlmCollapsibleTrigger type=\"button\" class=\"hover:bg-muted flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-start text-sm font-medium\">\n        <span>{{ i18n.t('lt.bug.additionalInfo') }}</span>\n        <ng-icon name=\"lucideChevronDown\" class=\"transition-transform duration-200\" aria-hidden=\"true\" [class.rotate-180]=\"showAdditional()\" />\n      </button>\n      <div hlmCollapsibleContent class=\"border-border flex flex-col gap-3 border-t p-3\">\n        @if (options.enableBrowserInfo) {\n          <div class=\"flex items-center justify-between gap-3\">\n            <div class=\"flex min-w-0 flex-col\">\n              <span id=\"lt-bug-include-browser-label\" class=\"text-sm font-medium\">{{ i18n.t('lt.bug.browserInfo') }}</span>\n              <span id=\"lt-bug-include-browser-hint\" class=\"text-muted-foreground text-xs\">{{ i18n.t('lt.bug.browserInfoHint') }}</span>\n            </div>\n            <hlm-switch\n              inputId=\"lt-bug-include-browser\"\n              aria-labelledby=\"lt-bug-include-browser-label\"\n              aria-describedby=\"lt-bug-include-browser-hint\"\n              [checked]=\"includes().browserInfo\"\n              [disabled]=\"bug.isSubmitting()\"\n              (checkedChange)=\"setInclude('browserInfo', $event)\"\n            />\n          </div>\n        }\n        @if (options.enableConsoleLogs) {\n          <div class=\"flex items-center justify-between gap-3\">\n            <div class=\"flex min-w-0 flex-col\">\n              <span id=\"lt-bug-include-console-label\" class=\"text-sm font-medium\">{{ i18n.t('lt.bug.consoleLogs') }}</span>\n              <span id=\"lt-bug-include-console-hint\" class=\"text-muted-foreground text-xs\">{{ i18n.t('lt.bug.consoleLogsHint', { count: consoleCount }) }}</span>\n            </div>\n            <hlm-switch\n              inputId=\"lt-bug-include-console\"\n              aria-labelledby=\"lt-bug-include-console-label\"\n              aria-describedby=\"lt-bug-include-console-hint\"\n              [checked]=\"includes().consoleLogs\"\n              [disabled]=\"bug.isSubmitting()\"\n              (checkedChange)=\"setInclude('consoleLogs', $event)\"\n            />\n          </div>\n        }\n        @if (options.enableNetworkRequests) {\n          <div class=\"flex items-center justify-between gap-3\">\n            <div class=\"flex min-w-0 flex-col\">\n              <span id=\"lt-bug-include-network-label\" class=\"text-sm font-medium\">{{ i18n.t('lt.bug.networkRequests') }}</span>\n              <span id=\"lt-bug-include-network-hint\" class=\"text-muted-foreground text-xs\">{{ i18n.t('lt.bug.networkRequestsHint', { count: networkCount }) }}</span>\n            </div>\n            <hlm-switch\n              inputId=\"lt-bug-include-network\"\n              aria-labelledby=\"lt-bug-include-network-label\"\n              aria-describedby=\"lt-bug-include-network-hint\"\n              [checked]=\"includes().networkRequests\"\n              [disabled]=\"bug.isSubmitting()\"\n              (checkedChange)=\"setInclude('networkRequests', $event)\"\n            />\n          </div>\n        }\n        @if (journeyEnabled) {\n          <div class=\"flex items-center justify-between gap-3\">\n            <div class=\"flex min-w-0 flex-col\">\n              <span id=\"lt-bug-include-journey-label\" class=\"text-sm font-medium\">{{ i18n.t('lt.bug.userJourney') }}</span>\n              <span id=\"lt-bug-include-journey-hint\" class=\"text-muted-foreground text-xs\">{{ i18n.t('lt.bug.userJourneyHint', { count: journey.length }) }}</span>\n            </div>\n            <hlm-switch\n              inputId=\"lt-bug-include-journey\"\n              aria-labelledby=\"lt-bug-include-journey-label\"\n              aria-describedby=\"lt-bug-include-journey-hint\"\n              [checked]=\"includes().userJourney\"\n              [disabled]=\"bug.isSubmitting()\"\n              (checkedChange)=\"setInclude('userJourney', $event)\"\n            />\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @if (journeyEnabled && includes().userJourney && journey.length > 0) {\n    <div hlmCollapsible class=\"border-border rounded-lg border\" data-slot=\"bug-report-journey\" [expanded]=\"showJourney()\" (expandedChange)=\"showJourney.set($event)\">\n      <button hlmCollapsibleTrigger type=\"button\" class=\"hover:bg-muted flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-start text-sm font-medium\">\n        <span>{{ i18n.t('lt.bug.journeyPreview', { count: journey.length }) }}</span>\n        <ng-icon name=\"lucideChevronDown\" class=\"transition-transform duration-200\" aria-hidden=\"true\" [class.rotate-180]=\"showJourney()\" />\n      </button>\n      <div hlmCollapsibleContent class=\"border-border border-t p-3\">\n        <lt-bug-journey-timeline [events]=\"journey\" />\n      </div>\n    </div>\n  }\n</form>\n\n<div hlmDialogFooter>\n  <button hlmBtn type=\"button\" variant=\"outline\" data-action=\"cancel\" [disabled]=\"bug.isSubmitting()\" (click)=\"cancel()\">{{ i18n.t('lt.bug.cancel') }}</button>\n  <button hlmBtn type=\"submit\" form=\"lt-bug-form\" data-action=\"submit\" [attr.aria-busy]=\"bug.isSubmitting() || null\" [attr.aria-disabled]=\"bug.isSubmitting() || null\">\n    @if (bug.isSubmitting()) {\n      <hlm-spinner aria-hidden=\"true\" />\n      {{ i18n.t('lt.bug.submitting') }}\n    } @else {\n      {{ i18n.t('lt.bug.submit') }}\n    }\n  </button>\n</div>\n"
+		}]
+	}]
+});
+function openLtBugReportDialog(injector) {
+	return injector.get(LtOverlayService).open(LtBugReportDialog, { contentClass: "sm:max-w-2xl" });
+}
+function registered(i18n, appMessages) {
+	registerLtBugMessages(i18n, appMessages);
+	return i18n;
+}
+function initialForm(error) {
+	return error ? {
+		...emptyLtBugReportForm(),
+		...ltBugPrefillFromError(error)
+	} : emptyLtBugReportForm();
+}
+function initialAttachments(screenshot) {
+	if (!screenshot) return [];
+	return [{
+		data: screenshot,
+		id: `screenshot-${Date.now()}`,
+		isScreenshot: true,
+		name: "screenshot.png",
+		preview: screenshot,
+		size: ltDataUrlSize(screenshot),
+		type: "image/png"
+	}];
+}
+function fieldError(field) {
+	const state = field();
+	return state.invalid() && state.touched() ? state.errors().find((error) => !!error.message)?.message ?? null : null;
+}
+export { openLtBugReportDialog };
+
+//# sourceMappingURL=lenne.tech-ng-base-bug-bug-report-dialog-BRzVmKJr.mjs.map