@forgeroute/ui 0.4.58 → 0.4.59

package/fesm2022/forgeroute-ui.mjs

@@ -29251,7 +29251,7 @@ function defaultLabel(item, index) {
 }
 const DEFAULT_GAP_LIST = "0px";
 const DEFAULT_GAP_GRID = "12px";
-let nextId$2 = 0;
+let nextId$3 = 0;
 var ListComponent = class ListComponent {
 	constructor() {
 		this.host = inject(ElementRef);
@@ -29278,7 +29278,7 @@ var ListComponent = class ListComponent {
 		this.itemsChange = output();
 		this.reorder = output();
 		this.rowTemplate = contentChild(TemplateRef, ...ngDevMode ? [{ debugName: "rowTemplate" }] : /* istanbul ignore next */ []);
-		this.helpId = `ul-help-${nextId$2++}`;
+		this.helpId = `ul-help-${nextId$3++}`;
 		this.announcement = signal("", ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
 		this.movedKey = signal(void 0, ...ngDevMode ? [{ debugName: "movedKey" }] : /* istanbul ignore next */ []);
 		this.dragIndex = signal(null, ...ngDevMode ? [{ debugName: "dragIndex" }] : /* istanbul ignore next */ []);
@@ -35515,7 +35515,7 @@ const STATE_COMMANDS = [
 	"justifyCenter",
 	"justifyRight"
 ];
-let nextId$1 = 0;
+let nextId$2 = 0;
 var RichTextEditorComponent = class RichTextEditorComponent {
 	constructor() {
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
@@ -35536,7 +35536,7 @@ var RichTextEditorComponent = class RichTextEditorComponent {
 		this.disabled = computed(() => this._disabledInput() || this._cvaDisabled(), ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 		this.inert = computed(() => this.disabled() || this.readonly(), ...ngDevMode ? [{ debugName: "inert" }] : /* istanbul ignore next */ []);
 		this.editor = viewChild("editor", ...ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []);
-		this._id = ++nextId$1;
+		this._id = ++nextId$2;
 		this._editorId = `rte-${this._id}`;
 		this._labelId = `rte-${this._id}-label`;
 		this._errorId = `rte-${this._id}-error`;
@@ -38912,14 +38912,14 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-let nextId = 0;
+let nextId$1 = 0;
 var ReadonlyFieldsetComponent = class ReadonlyFieldsetComponent {
 	constructor() {
 		this.readOnly = input(false, ...ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []);
 		this.gap = input("0", ...ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.reason = input("", ...ngDevMode ? [{ debugName: "reason" }] : /* istanbul ignore next */ []);
-		this._reasonId = `rf-reason-${nextId++}`;
+		this._reasonId = `rf-reason-${nextId$1++}`;
 		this._showReason = computed(() => this.readOnly() && !!this.reason().trim(), ...ngDevMode ? [{ debugName: "_showReason" }] : /* istanbul ignore next */ []);
 	}
 	static {
@@ -50179,6 +50179,2479 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BankAccountFormComponent, BarRowComponent, BoardCardDirective, BoardComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CalendarComponent, CardListItemComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_BANK_ACCOUNT_TYPE_OPTIONS, DEFAULT_BANK_HOLDER_TYPE_OPTIONS, DEFAULT_BANK_MANDATE_TEXT, DEFAULT_EMAIL_TEMPLATE_BLOCK_GROUPS, DEFAULT_EMAIL_TEMPLATE_VARIABLE_GROUPS, DEFAULT_PASSWORD_RULES, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DropdownComponent, EMAIL_BLOCK_DRAG_TYPE, EMAIL_TEMPLATE_MAX_BODY, EMAIL_TEMPLATE_MAX_TEXT, EMAIL_TEMPLATE_START_TEXT, EmailTemplateEditorComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FadeComponent, FileInputComponent, FixedFooterComponent, FormColSpanDirective, FormComponent, FormRowComponent, FormSectionComponent, HintComponent, IDX_BEHAVIOR_SIGNALS, INTEGRATION_CATALOG, INTEGRATION_FIELD_DEFS, INTEGRATION_GROUP_ORDER, INTEGRATION_OPTION_DEFS, IconComponent, ImageComponent, ImageGalleryComponent, ImageGalleryDialogComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, ImportSourceGridComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, LiveRegionComponent, MAX_EMAIL_ADDRESS_LENGTH, ModalComponent, MoreMenuComponent, MultiSelectComponent, NOTES_MAX_LENGTH, NotesComponent, OfflineBannerComponent, OptionCardComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PageComponent, PaginationComponent, PanelInfoListComponent, PasswordRequirementsComponent, PdfHotspotComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, RadioOptionContentDirective, ReadonlyFieldsetComponent, ReminderAlertsComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SETUP_DONE_KEY, SETUP_INTEGRATIONS, SearchInputComponent, SectionHeaderComponent, SelectComponent, SetupWizardComponent, SetupWizardStepDirective, SetupWizardStepHeaderDirective, ShareMenuComponent, ShowComponent, SidePanelComponent, SidebarLayoutComponent, SignaturePadComponent, SkeletonComponent, SnackbarComponent, SnackbarService, StackComponent, StarComponent, StepperComponent, TableToolbarComponent, TextComponent, TextInputComponent, TextTemplatePickerComponent, TextareaInputComponent, TimeInputComponent, TimelineComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, acceptLabel, appShellGroupsStorageKey, autoVariant, blockHasContent, buildDefaultSchedule, buildPreviewDocument, buildVideoBlockHtml, builtInActionIcon, businessTimeOptions, createFieldReveal, decodeFilterValues, digitsOnly, downloadBlob, emailShareUrl, encodeFilterValue, encodeFilterValues, errorContextInterceptor, escapeHtml, facebookShareUrl, fileMatchesAccept, formatAddress, formatCategoryLabel, formatCurrency, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, formatVideoDuration, getEligibleIds, getEligibleOptions, getErrorMessage, gmailShareUrl, humanReadableMessage, iconPath, insideEditorBlock, integrationPlainText, integrationsForApp, integrationsOnlyFor, isBlockDrag, isValidEmailAddress, isWebUrl, isoKey, issueToErrors, linkedInShareUrl, maxLengthIssue, mergeDescribedBy, normalizeHexColor, outlookShareUrl, parseBizHours, parseIso, parseTime, passwordMeetsRules, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, serializeBizHours, serializedTextLength, setupIntegrations, splitIntro, xShareUrl };
+function formatConversationPhone(phone) {
+	if (!phone) return "";
+	const digits = phone.replace(/\D/g, "");
+	if (digits.length === 10) return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+	if (digits.length === 11 && digits.startsWith("1")) return `+1 (${digits.slice(1, 4)}) ${digits.slice(4, 7)}-${digits.slice(7)}`;
+	return phone;
+}
+function truncateConversationText(text, len) {
+	if (!text) return "";
+	return text.length > len ? text.substring(0, len) + "..." : text;
+}
+function formatConversationTime(iso, now = /* @__PURE__ */ new Date()) {
+	if (!iso) return "";
+	const d = new Date(iso);
+	if (Number.isNaN(d.getTime())) return "";
+	const mins = Math.floor((now.getTime() - d.getTime()) / 6e4);
+	if (mins < 1) return "now";
+	if (mins < 60) return `${mins}m`;
+	const hrs = Math.floor(mins / 60);
+	if (hrs < 24) return `${hrs}h`;
+	const days = Math.floor(hrs / 24);
+	if (days < 7) return `${days}d`;
+	return d.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric"
+	});
+}
+function formatMessageTime(iso) {
+	const d = new Date(iso);
+	return Number.isNaN(d.getTime()) ? "" : d.toLocaleTimeString("en-US", {
+		hour: "numeric",
+		minute: "2-digit"
+	});
+}
+function conversationDateLabel(iso, now = /* @__PURE__ */ new Date()) {
+	const d = new Date(iso);
+	if (Number.isNaN(d.getTime())) return "";
+	const yesterday = new Date(now);
+	yesterday.setDate(yesterday.getDate() - 1);
+	if (d.toDateString() === now.toDateString()) return "Today";
+	if (d.toDateString() === yesterday.toDateString()) return "Yesterday";
+	return d.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
+}
+function conversationInitial(name) {
+	return (name ?? "").trim().charAt(0).toUpperCase() || "?";
+}
+function groupMessagesByDay(messages, now = /* @__PURE__ */ new Date()) {
+	return messages.map((message, i) => {
+		const label = conversationDateLabel(message.sentAt, now);
+		return {
+			message,
+			separator: i === 0 || conversationDateLabel(messages[i - 1].sentAt, now) !== label ? label : ""
+		};
+	});
+}
+function conversationMessageStatusLabel(status) {
+	switch (status) {
+		case "delivered": return "Delivered";
+		case "sent": return "Sent";
+		case "failed": return "Failed";
+		case "scheduled": return "Scheduled";
+		default: return "";
+	}
+}
+function conversationMessageStatusMark(status) {
+	if (status === "delivered") return "✓✓";
+	if (status === "sent") return "✓";
+	return conversationMessageStatusLabel(status);
+}
+const SINGLE_COLUMN_QUERY = "(max-width: 768px)";
+const NEAR_BOTTOM_PX = 120;
+const PREVIEW_LENGTH = 60;
+let nextId = 0;
+var ConversationsComponent = class ConversationsComponent {
+	constructor() {
+		this.conversations = input([], ...ngDevMode ? [{ debugName: "conversations" }] : /* istanbul ignore next */ []);
+		this.selected = input(null, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+		this.title = input("Messages", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+		this.error = input(null, ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+		this.searchText = model("", ...ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []);
+		this.searchPlaceholder = input("Search by name or phone...", ...ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []);
+		this.searchAriaLabel = input("Search conversations", ...ngDevMode ? [{ debugName: "searchAriaLabel" }] : /* istanbul ignore next */ []);
+		this.showFilters = input(true, ...ngDevMode ? [{ debugName: "showFilters" }] : /* istanbul ignore next */ []);
+		this.filterTabs = input([], ...ngDevMode ? [{ debugName: "filterTabs" }] : /* istanbul ignore next */ []);
+		this.filterCounts = input({}, ...ngDevMode ? [{ debugName: "filterCounts" }] : /* istanbul ignore next */ []);
+		this.activeFilter = input("", ...ngDevMode ? [{ debugName: "activeFilter" }] : /* istanbul ignore next */ []);
+		this.filterAriaLabel = input("Filter conversations", ...ngDevMode ? [{ debugName: "filterAriaLabel" }] : /* istanbul ignore next */ []);
+		this.page = input(1, ...ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []);
+		this.pageSize = input(25, ...ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []);
+		this.totalItems = input(0, ...ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []);
+		this.paginationAriaLabel = input("Conversation pages", ...ngDevMode ? [{ debugName: "paginationAriaLabel" }] : /* istanbul ignore next */ []);
+		this.listAriaLabel = input("Conversations", ...ngDevMode ? [{ debugName: "listAriaLabel" }] : /* istanbul ignore next */ []);
+		this.loadingLabel = input("Loading conversations", ...ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []);
+		this.emptyTitle = input("No conversations yet", ...ngDevMode ? [{ debugName: "emptyTitle" }] : /* istanbul ignore next */ []);
+		this.emptyMessage = input("Click the + button to start messaging", ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
+		this.emptyReadOnlyMessage = input("Conversations will appear here once texting starts.", ...ngDevMode ? [{ debugName: "emptyReadOnlyMessage" }] : /* istanbul ignore next */ []);
+		this.filteredEmptyTitle = input("No conversations found", ...ngDevMode ? [{ debugName: "filteredEmptyTitle" }] : /* istanbul ignore next */ []);
+		this.filteredEmptyMessage = input("No conversation matches your search or filter.", ...ngDevMode ? [{ debugName: "filteredEmptyMessage" }] : /* istanbul ignore next */ []);
+		this.noMessagesText = input("No messages", ...ngDevMode ? [{ debugName: "noMessagesText" }] : /* istanbul ignore next */ []);
+		this.allowNew = input(true, ...ngDevMode ? [{ debugName: "allowNew" }] : /* istanbul ignore next */ []);
+		this.allowDelete = input(true, ...ngDevMode ? [{ debugName: "allowDelete" }] : /* istanbul ignore next */ []);
+		this.newLabel = input("Start new message", ...ngDevMode ? [{ debugName: "newLabel" }] : /* istanbul ignore next */ []);
+		this.newTooltip = input("New message", ...ngDevMode ? [{ debugName: "newTooltip" }] : /* istanbul ignore next */ []);
+		this.deleteRowLabel = input("Delete conversation with", ...ngDevMode ? [{ debugName: "deleteRowLabel" }] : /* istanbul ignore next */ []);
+		this.messages = input([], ...ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []);
+		this.messagesLoading = input(false, ...ngDevMode ? [{ debugName: "messagesLoading" }] : /* istanbul ignore next */ []);
+		this.messagesError = input(null, ...ngDevMode ? [{ debugName: "messagesError" }] : /* istanbul ignore next */ []);
+		this.hasEarlier = input(false, ...ngDevMode ? [{ debugName: "hasEarlier" }] : /* istanbul ignore next */ []);
+		this.loadingEarlier = input(false, ...ngDevMode ? [{ debugName: "loadingEarlier" }] : /* istanbul ignore next */ []);
+		this.loadEarlierLabel = input("Load earlier messages", ...ngDevMode ? [{ debugName: "loadEarlierLabel" }] : /* istanbul ignore next */ []);
+		this.statusActionLabel = input(null, ...ngDevMode ? [{ debugName: "statusActionLabel" }] : /* istanbul ignore next */ []);
+		this.statusActionIcon = input("close", ...ngDevMode ? [{ debugName: "statusActionIcon" }] : /* istanbul ignore next */ []);
+		this.statusChanging = input(false, ...ngDevMode ? [{ debugName: "statusChanging" }] : /* istanbul ignore next */ []);
+		this.templatesEnabled = input(false, ...ngDevMode ? [{ debugName: "templatesEnabled" }] : /* istanbul ignore next */ []);
+		this.templateLabel = input("Use a template", ...ngDevMode ? [{ debugName: "templateLabel" }] : /* istanbul ignore next */ []);
+		this.deleteThreadLabel = input("Delete conversation", ...ngDevMode ? [{ debugName: "deleteThreadLabel" }] : /* istanbul ignore next */ []);
+		this.backLabel = input("Back to conversations", ...ngDevMode ? [{ debugName: "backLabel" }] : /* istanbul ignore next */ []);
+		this.threadAriaLabel = input("Message thread", ...ngDevMode ? [{ debugName: "threadAriaLabel" }] : /* istanbul ignore next */ []);
+		this.messagesAriaLabel = input("Messages with", ...ngDevMode ? [{ debugName: "messagesAriaLabel" }] : /* istanbul ignore next */ []);
+		this.threadEmptyTitle = input("Select a conversation", ...ngDevMode ? [{ debugName: "threadEmptyTitle" }] : /* istanbul ignore next */ []);
+		this.threadEmptyMessage = input("Choose a conversation from the list or start a new one", ...ngDevMode ? [{ debugName: "threadEmptyMessage" }] : /* istanbul ignore next */ []);
+		this.noMessagesWriteText = input("No messages in this conversation yet. Send the first message below.", ...ngDevMode ? [{ debugName: "noMessagesWriteText" }] : /* istanbul ignore next */ []);
+		this.noMessagesReadText = input("No messages in this conversation yet.", ...ngDevMode ? [{ debugName: "noMessagesReadText" }] : /* istanbul ignore next */ []);
+		this.youLabel = input("You", ...ngDevMode ? [{ debugName: "youLabel" }] : /* istanbul ignore next */ []);
+		this.openMediaLabel = input("Open", ...ngDevMode ? [{ debugName: "openMediaLabel" }] : /* istanbul ignore next */ []);
+		this.imageFallbackName = input("image", ...ngDevMode ? [{ debugName: "imageFallbackName" }] : /* istanbul ignore next */ []);
+		this.fileFallbackName = input("Attachment", ...ngDevMode ? [{ debugName: "fileFallbackName" }] : /* istanbul ignore next */ []);
+		this.hasContext = input(false, ...ngDevMode ? [{ debugName: "hasContext" }] : /* istanbul ignore next */ []);
+		this.contextOpen = model(false, ...ngDevMode ? [{ debugName: "contextOpen" }] : /* istanbul ignore next */ []);
+		this.contextTitle = input("Contact Info", ...ngDevMode ? [{ debugName: "contextTitle" }] : /* istanbul ignore next */ []);
+		this.showContextLabel = input("Show contact info", ...ngDevMode ? [{ debugName: "showContextLabel" }] : /* istanbul ignore next */ []);
+		this.hideContextLabel = input("Hide contact info", ...ngDevMode ? [{ debugName: "hideContextLabel" }] : /* istanbul ignore next */ []);
+		this.closeContextLabel = input("Close contact info", ...ngDevMode ? [{ debugName: "closeContextLabel" }] : /* istanbul ignore next */ []);
+		this.canWrite = input(true, ...ngDevMode ? [{ debugName: "canWrite" }] : /* istanbul ignore next */ []);
+		this.draft = model("", ...ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []);
+		this.sending = input(false, ...ngDevMode ? [{ debugName: "sending" }] : /* istanbul ignore next */ []);
+		this.composerDisabled = input(false, ...ngDevMode ? [{ debugName: "composerDisabled" }] : /* istanbul ignore next */ []);
+		this.sendBlocked = input(false, ...ngDevMode ? [{ debugName: "sendBlocked" }] : /* istanbul ignore next */ []);
+		this.composerNotice = input("", ...ngDevMode ? [{ debugName: "composerNotice" }] : /* istanbul ignore next */ []);
+		this.composerStatus = input("", ...ngDevMode ? [{ debugName: "composerStatus" }] : /* istanbul ignore next */ []);
+		this.composerError = input("", ...ngDevMode ? [{ debugName: "composerError" }] : /* istanbul ignore next */ []);
+		this.maxLength = input(1600, ...ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []);
+		this.attachment = input(null, ...ngDevMode ? [{ debugName: "attachment" }] : /* istanbul ignore next */ []);
+		this.uploading = input(false, ...ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []);
+		this.attachEnabled = input(true, ...ngDevMode ? [{ debugName: "attachEnabled" }] : /* istanbul ignore next */ []);
+		this.acceptedFiles = input("image/*,video/*", ...ngDevMode ? [{ debugName: "acceptedFiles" }] : /* istanbul ignore next */ []);
+		this.maxFileSize = input(null, ...ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []);
+		this.typeMessage = input("Only image and video files are supported.", ...ngDevMode ? [{ debugName: "typeMessage" }] : /* istanbul ignore next */ []);
+		this.sizeMessage = input("That file is too large.", ...ngDevMode ? [{ debugName: "sizeMessage" }] : /* istanbul ignore next */ []);
+		this.composeLabel = input("Type a message", ...ngDevMode ? [{ debugName: "composeLabel" }] : /* istanbul ignore next */ []);
+		this.composePlaceholder = input("Type a message...", ...ngDevMode ? [{ debugName: "composePlaceholder" }] : /* istanbul ignore next */ []);
+		this.sendLabel = input("Send message", ...ngDevMode ? [{ debugName: "sendLabel" }] : /* istanbul ignore next */ []);
+		this.attachLabel = input("Attach image or video", ...ngDevMode ? [{ debugName: "attachLabel" }] : /* istanbul ignore next */ []);
+		this.removeAttachmentLabel = input("Remove attachment", ...ngDevMode ? [{ debugName: "removeAttachmentLabel" }] : /* istanbul ignore next */ []);
+		this.attachmentPreviewLabel = input("Attachment preview", ...ngDevMode ? [{ debugName: "attachmentPreviewLabel" }] : /* istanbul ignore next */ []);
+		this.now = input(null, ...ngDevMode ? [{ debugName: "now" }] : /* istanbul ignore next */ []);
+		this.searchChange = output();
+		this.filterChange = output();
+		this.pageChange = output();
+		this.selectConversation = output();
+		this.back = output();
+		this.newConversation = output();
+		this.retry = output();
+		this.deleteConversation = output();
+		this.statusChange = output();
+		this.templateRequest = output();
+		this.send = output();
+		this.filesSelected = output();
+		this.attachmentRemove = output();
+		this.mediaOpen = output();
+		this.messageAction = output();
+		this.loadEarlier = output();
+		this.messagesRetry = output();
+		this.titleId = `cv-title-${nextId++}`;
+		this.skeletonRows = [
+			1,
+			2,
+			3,
+			4,
+			5
+		];
+		this.skeletonBubbles = [
+			0,
+			1,
+			2
+		];
+		this.trackConversation = (c) => c.id;
+		this.initial = conversationInitial;
+		this.statusLabel = conversationMessageStatusLabel;
+		this.statusMark = conversationMessageStatusMark;
+		this.injector = inject(Injector);
+		this.host = inject(ElementRef);
+		this.threadHeading = viewChild("threadHeading", ...ngDevMode ? [{ debugName: "threadHeading" }] : /* istanbul ignore next */ []);
+		this.messagesEl = viewChild("messagesEl", ...ngDevMode ? [{ debugName: "messagesEl" }] : /* istanbul ignore next */ []);
+		this.contextPanel = viewChild("contextPanel", ...ngDevMode ? [{ debugName: "contextPanel" }] : /* istanbul ignore next */ []);
+		this.fileInput = viewChild(FileInputComponent, ...ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []);
+		this.atBottom = true;
+		this.lastThreadId = null;
+		this.filtering = computed(() => !!this.searchText().trim() || this.activeFilter() !== "", ...ngDevMode ? [{ debugName: "filtering" }] : /* istanbul ignore next */ []);
+		this.emptyText = computed(() => this.filtering() ? this.filteredEmptyMessage() : this.canWrite() ? this.emptyMessage() : this.emptyReadOnlyMessage(), ...ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []);
+		this.messageRows = computed(() => groupMessagesByDay(this.messages(), this.clock()), ...ngDevMode ? [{ debugName: "messageRows" }] : /* istanbul ignore next */ []);
+		this.contextVisible = computed(() => this.hasContext() && this.contextOpen() && !!this.selected(), ...ngDevMode ? [{ debugName: "contextVisible" }] : /* istanbul ignore next */ []);
+		this.canSend = computed(() => !this.composerDisabled() && !this.sendBlocked() && !this.sending() && (this.draft().trim().length > 0 || !!this.attachment()), ...ngDevMode ? [{ debugName: "canSend" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			const id = this.selected()?.id ?? null;
+			const count = this.messages().length;
+			untracked(() => {
+				const switched = id !== this.lastThreadId;
+				this.lastThreadId = id;
+				if (switched) this.atBottom = true;
+				if (count > 0 && this.atBottom) this.scrollToBottom();
+			});
+		});
+		effect(() => {
+			if (!this.selected() && this.contextOpen()) untracked(() => this.contextOpen.set(false));
+		});
+	}
+	relativeTime(iso) {
+		return formatConversationTime(iso, this.clock());
+	}
+	preview(text) {
+		return truncateConversationText(text, PREVIEW_LENGTH);
+	}
+	time(message) {
+		return formatMessageTime(message.sentAt);
+	}
+	onRowOpen(conv) {
+		this.selectConversation.emit(conv);
+		if (this.singleColumn()) afterNextRender(() => this.threadHeading()?.nativeElement.focus(), { injector: this.injector });
+	}
+	onBack() {
+		const id = this.selected()?.id;
+		this.back.emit();
+		afterNextRender(() => {
+			const rows = Array.from(this.host.nativeElement.querySelectorAll("[data-testid=\"conv-item\"]"));
+			(rows.find((r) => r.dataset["conversationId"] === id) ?? rows[0])?.closest("li")?.focus();
+		}, { injector: this.injector });
+	}
+	onMessagesScroll() {
+		const el = this.messagesEl()?.nativeElement;
+		if (el) this.atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < NEAR_BOTTOM_PX;
+	}
+	toggleContext() {
+		if (this.contextOpen()) {
+			this.closeContext(true);
+			return;
+		}
+		this.contextOpen.set(true);
+		afterNextRender(() => this.contextPanel()?.nativeElement.focus(), { injector: this.injector });
+	}
+	closeContext(restoreFocus = false) {
+		this.contextOpen.set(false);
+		if (restoreFocus) afterNextRender(() => this.host.nativeElement.querySelector("[data-testid=\"context-toggle\"] button")?.focus(), { injector: this.injector });
+	}
+	openFilePicker() {
+		this.fileInput()?.open();
+	}
+	onComposeKeydown(event) {
+		if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+			event.preventDefault();
+			this.sendMessage();
+		}
+	}
+	sendMessage() {
+		if (!this.canSend()) return;
+		this.send.emit({ text: this.draft().trim() });
+	}
+	clock() {
+		return this.now() ?? /* @__PURE__ */ new Date();
+	}
+	singleColumn() {
+		return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(SINGLE_COLUMN_QUERY).matches;
+	}
+	scrollToBottom() {
+		afterNextRender(() => {
+			const el = this.messagesEl()?.nativeElement;
+			if (el) el.scrollTop = el.scrollHeight;
+		}, { injector: this.injector });
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ConversationsComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: ConversationsComponent,
+			isStandalone: true,
+			selector: "ui-conversations",
+			inputs: {
+				conversations: {
+					classPropertyName: "conversations",
+					publicName: "conversations",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				selected: {
+					classPropertyName: "selected",
+					publicName: "selected",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				title: {
+					classPropertyName: "title",
+					publicName: "title",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loading: {
+					classPropertyName: "loading",
+					publicName: "loading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				error: {
+					classPropertyName: "error",
+					publicName: "error",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				searchText: {
+					classPropertyName: "searchText",
+					publicName: "searchText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				searchPlaceholder: {
+					classPropertyName: "searchPlaceholder",
+					publicName: "searchPlaceholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				searchAriaLabel: {
+					classPropertyName: "searchAriaLabel",
+					publicName: "searchAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showFilters: {
+					classPropertyName: "showFilters",
+					publicName: "showFilters",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				filterTabs: {
+					classPropertyName: "filterTabs",
+					publicName: "filterTabs",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				filterCounts: {
+					classPropertyName: "filterCounts",
+					publicName: "filterCounts",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				activeFilter: {
+					classPropertyName: "activeFilter",
+					publicName: "activeFilter",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				filterAriaLabel: {
+					classPropertyName: "filterAriaLabel",
+					publicName: "filterAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				page: {
+					classPropertyName: "page",
+					publicName: "page",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				pageSize: {
+					classPropertyName: "pageSize",
+					publicName: "pageSize",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				totalItems: {
+					classPropertyName: "totalItems",
+					publicName: "totalItems",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				paginationAriaLabel: {
+					classPropertyName: "paginationAriaLabel",
+					publicName: "paginationAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				listAriaLabel: {
+					classPropertyName: "listAriaLabel",
+					publicName: "listAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loadingLabel: {
+					classPropertyName: "loadingLabel",
+					publicName: "loadingLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				emptyTitle: {
+					classPropertyName: "emptyTitle",
+					publicName: "emptyTitle",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				emptyMessage: {
+					classPropertyName: "emptyMessage",
+					publicName: "emptyMessage",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				emptyReadOnlyMessage: {
+					classPropertyName: "emptyReadOnlyMessage",
+					publicName: "emptyReadOnlyMessage",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				filteredEmptyTitle: {
+					classPropertyName: "filteredEmptyTitle",
+					publicName: "filteredEmptyTitle",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				filteredEmptyMessage: {
+					classPropertyName: "filteredEmptyMessage",
+					publicName: "filteredEmptyMessage",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				noMessagesText: {
+					classPropertyName: "noMessagesText",
+					publicName: "noMessagesText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				allowNew: {
+					classPropertyName: "allowNew",
+					publicName: "allowNew",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				allowDelete: {
+					classPropertyName: "allowDelete",
+					publicName: "allowDelete",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				newLabel: {
+					classPropertyName: "newLabel",
+					publicName: "newLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				newTooltip: {
+					classPropertyName: "newTooltip",
+					publicName: "newTooltip",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				deleteRowLabel: {
+					classPropertyName: "deleteRowLabel",
+					publicName: "deleteRowLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				messages: {
+					classPropertyName: "messages",
+					publicName: "messages",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				messagesLoading: {
+					classPropertyName: "messagesLoading",
+					publicName: "messagesLoading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				messagesError: {
+					classPropertyName: "messagesError",
+					publicName: "messagesError",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hasEarlier: {
+					classPropertyName: "hasEarlier",
+					publicName: "hasEarlier",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loadingEarlier: {
+					classPropertyName: "loadingEarlier",
+					publicName: "loadingEarlier",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loadEarlierLabel: {
+					classPropertyName: "loadEarlierLabel",
+					publicName: "loadEarlierLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				statusActionLabel: {
+					classPropertyName: "statusActionLabel",
+					publicName: "statusActionLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				statusActionIcon: {
+					classPropertyName: "statusActionIcon",
+					publicName: "statusActionIcon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				statusChanging: {
+					classPropertyName: "statusChanging",
+					publicName: "statusChanging",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				templatesEnabled: {
+					classPropertyName: "templatesEnabled",
+					publicName: "templatesEnabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				templateLabel: {
+					classPropertyName: "templateLabel",
+					publicName: "templateLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				deleteThreadLabel: {
+					classPropertyName: "deleteThreadLabel",
+					publicName: "deleteThreadLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				backLabel: {
+					classPropertyName: "backLabel",
+					publicName: "backLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				threadAriaLabel: {
+					classPropertyName: "threadAriaLabel",
+					publicName: "threadAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				messagesAriaLabel: {
+					classPropertyName: "messagesAriaLabel",
+					publicName: "messagesAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				threadEmptyTitle: {
+					classPropertyName: "threadEmptyTitle",
+					publicName: "threadEmptyTitle",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				threadEmptyMessage: {
+					classPropertyName: "threadEmptyMessage",
+					publicName: "threadEmptyMessage",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				noMessagesWriteText: {
+					classPropertyName: "noMessagesWriteText",
+					publicName: "noMessagesWriteText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				noMessagesReadText: {
+					classPropertyName: "noMessagesReadText",
+					publicName: "noMessagesReadText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				youLabel: {
+					classPropertyName: "youLabel",
+					publicName: "youLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				openMediaLabel: {
+					classPropertyName: "openMediaLabel",
+					publicName: "openMediaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				imageFallbackName: {
+					classPropertyName: "imageFallbackName",
+					publicName: "imageFallbackName",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fileFallbackName: {
+					classPropertyName: "fileFallbackName",
+					publicName: "fileFallbackName",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hasContext: {
+					classPropertyName: "hasContext",
+					publicName: "hasContext",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				contextOpen: {
+					classPropertyName: "contextOpen",
+					publicName: "contextOpen",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				contextTitle: {
+					classPropertyName: "contextTitle",
+					publicName: "contextTitle",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showContextLabel: {
+					classPropertyName: "showContextLabel",
+					publicName: "showContextLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hideContextLabel: {
+					classPropertyName: "hideContextLabel",
+					publicName: "hideContextLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				closeContextLabel: {
+					classPropertyName: "closeContextLabel",
+					publicName: "closeContextLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				canWrite: {
+					classPropertyName: "canWrite",
+					publicName: "canWrite",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				draft: {
+					classPropertyName: "draft",
+					publicName: "draft",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				sending: {
+					classPropertyName: "sending",
+					publicName: "sending",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				composerDisabled: {
+					classPropertyName: "composerDisabled",
+					publicName: "composerDisabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				sendBlocked: {
+					classPropertyName: "sendBlocked",
+					publicName: "sendBlocked",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				composerNotice: {
+					classPropertyName: "composerNotice",
+					publicName: "composerNotice",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				composerStatus: {
+					classPropertyName: "composerStatus",
+					publicName: "composerStatus",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				composerError: {
+					classPropertyName: "composerError",
+					publicName: "composerError",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxLength: {
+					classPropertyName: "maxLength",
+					publicName: "maxLength",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				attachment: {
+					classPropertyName: "attachment",
+					publicName: "attachment",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				uploading: {
+					classPropertyName: "uploading",
+					publicName: "uploading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				attachEnabled: {
+					classPropertyName: "attachEnabled",
+					publicName: "attachEnabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				acceptedFiles: {
+					classPropertyName: "acceptedFiles",
+					publicName: "acceptedFiles",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxFileSize: {
+					classPropertyName: "maxFileSize",
+					publicName: "maxFileSize",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				typeMessage: {
+					classPropertyName: "typeMessage",
+					publicName: "typeMessage",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				sizeMessage: {
+					classPropertyName: "sizeMessage",
+					publicName: "sizeMessage",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				composeLabel: {
+					classPropertyName: "composeLabel",
+					publicName: "composeLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				composePlaceholder: {
+					classPropertyName: "composePlaceholder",
+					publicName: "composePlaceholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				sendLabel: {
+					classPropertyName: "sendLabel",
+					publicName: "sendLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				attachLabel: {
+					classPropertyName: "attachLabel",
+					publicName: "attachLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				removeAttachmentLabel: {
+					classPropertyName: "removeAttachmentLabel",
+					publicName: "removeAttachmentLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				attachmentPreviewLabel: {
+					classPropertyName: "attachmentPreviewLabel",
+					publicName: "attachmentPreviewLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				now: {
+					classPropertyName: "now",
+					publicName: "now",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				searchText: "searchTextChange",
+				contextOpen: "contextOpenChange",
+				draft: "draftChange",
+				searchChange: "searchChange",
+				filterChange: "filterChange",
+				pageChange: "pageChange",
+				selectConversation: "selectConversation",
+				back: "back",
+				newConversation: "newConversation",
+				retry: "retry",
+				deleteConversation: "deleteConversation",
+				statusChange: "statusChange",
+				templateRequest: "templateRequest",
+				send: "send",
+				filesSelected: "filesSelected",
+				attachmentRemove: "attachmentRemove",
+				mediaOpen: "mediaOpen",
+				messageAction: "messageAction",
+				loadEarlier: "loadEarlier",
+				messagesRetry: "messagesRetry"
+			},
+			viewQueries: [
+				{
+					propertyName: "threadHeading",
+					first: true,
+					predicate: ["threadHeading"],
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "messagesEl",
+					first: true,
+					predicate: ["messagesEl"],
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "contextPanel",
+					first: true,
+					predicate: ["contextPanel"],
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "fileInput",
+					first: true,
+					predicate: FileInputComponent,
+					descendants: true,
+					isSignal: true
+				}
+			],
+			ngImport: i0,
+			template: `
+    <div class="cv-layout" [class.has-context]="contextVisible()" data-testid="conversations">
+      @if (contextVisible()) {
+        <div class="cv-context-backdrop" (click)="closeContext()" aria-hidden="true"></div>
+      }
+
+      <!-- LEFT: conversation list -->
+      <section class="cv-list-panel" [class.cv-hidden-mobile]="!!selected()" [attr.aria-labelledby]="titleId">
+        <div class="cv-list-header">
+          <h2 class="cv-list-title" [id]="titleId">{{ title() }}</h2>
+          @if (canWrite() && allowNew()) {
+            <ui-button class="cv-new-btn" variant="primary" size="sm" [ariaLabel]="newLabel()" [uiTooltip]="newTooltip()" tooltipPosition="bottom" (click)="newConversation.emit()" data-testid="new-message-btn">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
+            </ui-button>
+          }
+        </div>
+
+        @if (showFilters()) {
+          <div class="cv-search">
+            <ui-search-input [placeholder]="searchPlaceholder()" [ariaLabel]="searchAriaLabel()" [(value)]="searchText" (searchChange)="searchChange.emit($event)" data-testid="conv-search" />
+          </div>
+          @if (filterTabs().length) {
+            <div class="cv-filters">
+              <ui-quick-filter-tabs [ariaLabel]="filterAriaLabel()" [tabs]="filterTabs()" [counts]="filterCounts()" [activeValue]="activeFilter()" (tabChange)="filterChange.emit($event)" data-testid="conv-filters" />
+            </div>
+          }
+        }
+
+        @if (loading()) {
+          <div class="cv-loading" aria-busy="true" [attr.aria-label]="loadingLabel()" data-testid="conv-loading">
+            @for (i of skeletonRows; track i) {
+              <div class="cv-skeleton">
+                <ui-skeleton [height]="40" width="40px" [radius]="20" />
+                <div class="cv-skel-content">
+                  <div class="cv-skel-row">
+                    <ui-skeleton width="55%" [height]="12" />
+                    <ui-skeleton width="48px" [height]="10" />
+                  </div>
+                  <ui-skeleton width="30%" [height]="10" [mb]="2" />
+                  <ui-skeleton width="85%" [height]="10" />
+                </div>
+              </div>
+            }
+          </div>
+        } @else if (error()) {
+          <div class="cv-error" data-testid="conv-error">
+            <ui-alert variant="danger">{{ error() }}</ui-alert>
+            <ui-button variant="secondary" size="sm" (click)="retry.emit()" data-testid="conv-retry">Retry</ui-button>
+          </div>
+        } @else if (conversations().length === 0) {
+          <ui-empty-state iconType="message" data-testid="conv-empty" [title]="filtering() ? filteredEmptyTitle() : emptyTitle()" [message]="emptyText()" />
+        } @else {
+          <div class="cv-list">
+            <ui-list [ariaLabel]="listAriaLabel()" [items]="conversations()" [trackBy]="trackConversation" [navigable]="true" (itemClick)="onRowOpen($event)">
+              <ng-template let-conv>
+                <div class="cv-item" data-testid="conv-item" [attr.data-conversation-id]="conv.id"
+                     [class.selected]="selected()?.id === conv.id" [class.unread]="(conv.unreadCount ?? 0) > 0">
+                  <ui-avatar [initials]="initial(conv.name)" [name]="conv.name" [size]="40" />
+                  <div class="cv-item-info">
+                    <div class="cv-item-top">
+                      <span class="cv-name">{{ conv.name }}</span>@if (selected()?.id === conv.id) {<span class="cv-sr-only">, open</span>}
+                      <span class="cv-time">{{ relativeTime(conv.lastMessageAt) }}</span>
+                    </div>
+                    @if (conv.subtitle) { <span class="cv-subtitle">{{ conv.subtitle }}</span> }
+                    <div class="cv-item-bottom">
+                      <p class="cv-preview">{{ preview(conv.preview) || noMessagesText() }}</p>
+                      <div class="cv-item-right">
+                        @if (conv.statusLabel) { <ui-badge [label]="conv.statusLabel" variant="gray" /> }
+                        @if ((conv.unreadCount ?? 0) > 0) {
+                          <ui-badge class="cv-unread-badge" [label]="'' + conv.unreadCount" variant="blue" data-testid="conv-unread" />
+                          <span class="cv-sr-only">unread</span>
+                        }
+                        @if (canWrite() && allowDelete()) {
+                          <ui-button class="cv-delete-btn" variant="icon-danger" [ariaLabel]="deleteRowLabel() + ' ' + conv.name" (click)="$event.stopPropagation(); deleteConversation.emit(conv)" data-testid="conv-delete-btn">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
+                          </ui-button>
+                        }
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </ng-template>
+            </ui-list>
+            <ui-pagination [ariaLabel]="paginationAriaLabel()" [page]="page()" [pageSize]="pageSize()" [totalItems]="totalItems()" (pageChange)="pageChange.emit($event)" />
+          </div>
+        }
+      </section>
+
+      <!-- CENTER: message thread -->
+      <section class="cv-thread-panel" [class.cv-hidden-mobile]="!selected()" [attr.aria-label]="threadAriaLabel()">
+        @if (selected(); as conv) {
+          <div class="cv-thread-header">
+            <ui-button class="cv-back-btn" variant="secondary" size="sm" [ariaLabel]="backLabel()" (click)="onBack()" data-testid="back-to-list">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
+            </ui-button>
+            <div class="cv-thread-header-info">
+              <ui-avatar [initials]="initial(conv.name)" [name]="conv.name" [size]="40" />
+              <div class="cv-thread-header-text">
+                <h3 class="cv-thread-name" #threadHeading tabindex="-1" data-testid="thread-name">{{ conv.name }}</h3>
+                @if (conv.subtitle) { <span class="cv-thread-subtitle" data-testid="thread-phone">{{ conv.subtitle }}</span> }
+              </div>
+            </div>
+            <div class="cv-thread-actions">
+              @if (canWrite() && templatesEnabled()) {
+                <ui-button class="cv-thread-action" variant="secondary" size="sm" [ariaLabel]="templateLabel()" [uiTooltip]="templateLabel()" tooltipPosition="bottom" [disabled]="composerDisabled()" (click)="templateRequest.emit()" data-testid="use-template-btn">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                </ui-button>
+              }
+              @if (hasContext()) {
+                <ui-button #contextToggle class="cv-thread-action" [variant]="contextOpen() ? 'primary' : 'secondary'" size="sm" [ariaLabel]="contextOpen() ? hideContextLabel() : showContextLabel()" [uiTooltip]="contextOpen() ? hideContextLabel() : contextTitle()" tooltipPosition="bottom" (click)="toggleContext()" data-testid="context-toggle">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+                </ui-button>
+              }
+              @if (canWrite() && statusActionLabel()) {
+                <ui-button class="cv-thread-action" variant="secondary" size="sm" [ariaLabel]="statusActionLabel() ?? ''" [uiTooltip]="statusActionLabel()" tooltipPosition="bottom" [disabled]="statusChanging()" (click)="statusChange.emit(conv)" data-testid="status-btn">
+                  @if (statusActionIcon() === 'reopen') {
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
+                  } @else {
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+                  }
+                </ui-button>
+              }
+              @if (canWrite() && allowDelete()) {
+                <ui-button class="cv-thread-action" variant="danger" size="sm" [ariaLabel]="deleteThreadLabel()" [uiTooltip]="deleteThreadLabel()" tooltipPosition="bottom" (click)="deleteConversation.emit(conv)" data-testid="thread-delete-btn">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
+                </ui-button>
+              }
+            </div>
+          </div>
+
+          <div class="cv-messages" #messagesEl role="log" aria-live="polite" aria-relevant="additions" tabindex="0"
+               [attr.aria-label]="messagesAriaLabel() + ' ' + conv.name" [attr.aria-busy]="messagesLoading()" (scroll)="onMessagesScroll()" data-testid="messages">
+            @if (messagesLoading()) {
+              <div class="cv-messages-loading" data-testid="messages-loading">
+                @for (i of skeletonBubbles; track i) {
+                  <div class="cv-msg-skeleton" [class.outbound]="i % 2 === 0">
+                    <ui-skeleton [height]="48" [width]="i % 2 === 0 ? '60%' : '55%'" [radius]="16" />
+                  </div>
+                }
+              </div>
+            } @else if (messagesError()) {
+              <div class="cv-messages-error" data-testid="thread-error">
+                <ui-alert variant="danger">{{ messagesError() }}</ui-alert>
+                <ui-button variant="secondary" size="sm" (click)="messagesRetry.emit()" data-testid="thread-retry">Retry</ui-button>
+              </div>
+            } @else if (messages().length === 0) {
+              <div class="cv-messages-empty" data-testid="messages-empty">
+                <p>{{ canWrite() ? noMessagesWriteText() : noMessagesReadText() }}</p>
+              </div>
+            } @else {
+              @if (hasEarlier()) {
+                <div class="cv-load-earlier">
+                  <ui-button variant="secondary" size="sm" [loading]="loadingEarlier()" (click)="loadEarlier.emit()" data-testid="load-earlier">{{ loadEarlierLabel() }}</ui-button>
+                </div>
+              }
+              @for (row of messageRows(); track row.message.id) {
+                @if (row.separator) { <div class="cv-date-separator"><span>{{ row.separator }}</span></div> }
+                <div class="cv-bubble" data-testid="message" [class.outbound]="row.message.direction === 'outbound'" [class.inbound]="row.message.direction === 'inbound'">
+                  <span class="cv-sr-only">{{ row.message.direction === 'outbound' ? youLabel() : conv.name }}:</span>
+                  @if (row.message.media; as media) {
+                    <div class="cv-media">
+                      @if (media.type?.startsWith('image/')) {
+                        <button type="button" class="cv-image-btn" (click)="mediaOpen.emit(media.url)" [attr.aria-label]="openMediaLabel() + ' ' + (media.fileName || imageFallbackName())">
+                          <img [src]="media.url" [alt]="media.fileName || imageFallbackName()" class="cv-image" loading="lazy" />
+                        </button>
+                      } @else if (media.type?.startsWith('video/')) {
+                        <video [src]="media.url" class="cv-video" controls preload="metadata"></video>
+                      } @else {
+                        <a [href]="media.url" target="_blank" rel="noopener noreferrer" class="cv-file-link">{{ media.fileName || fileFallbackName() }}</a>
+                      }
+                    </div>
+                  }
+                  @if (row.message.body) { <p class="cv-body">{{ row.message.body }}</p> }
+                  <span class="cv-meta">
+                    @if (row.message.direction === 'outbound' && row.message.sender) { <span class="cv-sender" data-testid="msg-sender">{{ row.message.sender }}</span> }
+                    {{ time(row.message) }}
+                    @if (row.message.action; as action) {
+                      <button type="button" class="cv-msg-action" data-testid="msg-action" (click)="messageAction.emit(row.message)">{{ action.label }}</button>
+                    }
+                    @if (row.message.direction === 'outbound' && statusLabel(row.message.status)) {
+                      <span class="cv-status" [class.failed]="row.message.status === 'failed'" data-testid="msg-status">
+                        <span aria-hidden="true">{{ statusMark(row.message.status) }}</span>
+                        <span class="cv-sr-only">{{ statusLabel(row.message.status) }}</span>
+                      </span>
+                    }
+                  </span>
+                </div>
+              }
+            }
+          </div>
+
+          @if (canWrite()) {
+            <div class="cv-compose">
+              @if (attachment(); as file) {
+                <div class="cv-attachment" data-testid="attachment-preview">
+                  @if (file.previewUrl) {
+                    <img [src]="file.previewUrl" [alt]="attachmentPreviewLabel()" class="cv-attachment-thumb" />
+                  } @else {
+                    <span class="cv-attachment-name">{{ file.fileName }}</span>
+                  }
+                  <ui-button class="cv-attachment-remove" variant="icon-danger" [ariaLabel]="removeAttachmentLabel()" (click)="attachmentRemove.emit()" data-testid="attachment-remove">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                  </ui-button>
+                </div>
+              }
+              <div class="cv-compose-row">
+                @if (attachEnabled()) {
+                  <ui-button class="cv-attach-btn" variant="icon" [ariaLabel]="attachLabel()" [disabled]="uploading() || composerDisabled()" [loading]="uploading()" (click)="openFilePicker()" data-testid="attach-btn">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+                  </ui-button>
+                  <ui-file-input [showField]="false" [accept]="acceptedFiles()" [maxSize]="maxFileSize()" [toastOnReject]="true"
+                    [typeMessage]="typeMessage()" [sizeMessage]="sizeMessage()" (filesSelected)="filesSelected.emit($event)" data-testid="attach-input" />
+                }
+                <ui-textarea-input class="cv-compose-input" [ariaLabel]="composeLabel()" [placeholder]="composePlaceholder()" [rows]="1" [maxlength]="maxLength()"
+                  [ngModel]="draft()" (ngModelChange)="draft.set($event)" [disabled]="composerDisabled()" [error]="composerError()"
+                  (keydown)="onComposeKeydown($event)" data-testid="compose-input" />
+                <ui-button class="cv-send-btn" variant="primary" [ariaLabel]="sendLabel()" [disabled]="!canSend()" [loading]="sending()" (click)="sendMessage()" data-testid="send-btn">
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
+                </ui-button>
+              </div>
+              @if (composerNotice()) {
+                <ui-alert variant="warning" data-testid="compose-opted-out">{{ composerNotice() }}</ui-alert>
+              }
+              <!-- Always in the page (a live region that appears together with its text is often not announced): only its text comes and goes. -->
+              <p class="cv-compose-status" role="status" data-testid="compose-loading-contact">{{ composerStatus() }}</p>
+            </div>
+          }
+        } @else {
+          <ui-empty-state iconType="message" [title]="threadEmptyTitle()" [message]="threadEmptyMessage()" data-testid="thread-empty" />
+        }
+      </section>
+
+      <!-- RIGHT: contact panel (the host's content) -->
+      @if (contextVisible()) {
+        <aside class="cv-context" #contextPanel tabindex="-1" [attr.aria-label]="contextTitle()" (keydown.escape)="closeContext(true)" data-testid="context-panel">
+          <div class="cv-context-header">
+            <h3>{{ contextTitle() }}</h3>
+            <ui-button variant="icon" [ariaLabel]="closeContextLabel()" (click)="closeContext(true)" data-testid="context-close">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </ui-button>
+          </div>
+          <div class="cv-context-body"><ng-content select="[uiConversationsContext]" /></div>
+        </aside>
+      }
+    </div>
+  `,
+			isInline: true,
+			styles: [":host{display:flex;flex:1;min-height:0;min-width:0}.cv-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cv-layout{display:grid;grid-template-columns:340px 1fr;flex:1;min-height:0;min-width:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000000f;border:1px solid #e2e8f0}.cv-layout.has-context{grid-template-columns:340px 1fr 280px}.cv-list-panel{display:flex;flex-direction:column;min-height:0;border-right:1px solid #e2e8f0;background:#f8fafc;overflow:hidden}.cv-list-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 12px}.cv-list-title{margin:0;font-size:1.125rem;font-weight:700;color:#1e293b}.cv-search,.cv-filters{padding:0 16px 12px}.cv-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.cv-item{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid #f1f5f9;transition:background .15s}.cv-item.unread{background:#fffbeb}.cv-item.selected{background:#eff6ff;box-shadow:inset 3px 0 #2563eb}.cv-item-info{flex:1;min-width:0}.cv-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.cv-name{font-size:.875rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv-time{font-size:.6875rem;color:#64748b;flex-shrink:0;margin-left:8px}.cv-subtitle{font-size:.6875rem;color:#64748b;display:block;margin-bottom:2px}.cv-item-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}.cv-preview{margin:0;font-size:.8125rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.cv-item-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.cv-delete-btn{opacity:0;transition:opacity .15s}.cv-item:hover .cv-delete-btn,.cv-item:focus-within .cv-delete-btn,.cv-delete-btn:focus-within{opacity:1}@media(hover:none){.cv-delete-btn{opacity:1}}.cv-loading{padding:8px 0}.cv-skeleton{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid #f1f5f9}.cv-skel-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:2px}.cv-skel-row{display:flex;justify-content:space-between;gap:8px}.cv-error{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;text-align:center}.cv-thread-panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff}.cv-thread-header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #e2e8f0;background:#fff}.cv-back-btn{display:none}.cv-thread-header-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.cv-thread-header-text{min-width:0;display:flex;flex-direction:column}.cv-thread-name{margin:0;font-size:.9375rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv-thread-name:focus{outline:none}.cv-thread-name:focus-visible{outline:2px solid #2563eb;outline-offset:2px;border-radius:4px}.cv-thread-subtitle{font-size:.75rem;color:#64748b}.cv-thread-actions{display:flex;align-items:center;gap:8px}.cv-messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:20px 24px;display:flex;flex-direction:column;gap:4px;background:#f8fafc}.cv-messages:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}.cv-messages-loading{display:flex;flex-direction:column;gap:12px;padding:20px 0}.cv-msg-skeleton{display:flex}.cv-msg-skeleton.outbound{justify-content:flex-end}.cv-messages-error{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;text-align:center}.cv-load-earlier{display:flex;justify-content:center;padding:4px 0 12px}.cv-sender{font-weight:600}.cv-msg-action{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}.cv-msg-action:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}.cv-messages-empty{display:flex;align-items:center;justify-content:center;flex:1}.cv-messages-empty p{margin:0;font-size:.875rem;color:#64748b;text-align:center}.cv-date-separator{display:flex;align-items:center;justify-content:center;padding:16px 0 8px}.cv-date-separator span{padding:4px 14px;border-radius:12px;background:#e2e8f0;font-size:.6875rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.3px}.cv-bubble{max-width:70%;padding:10px 14px;border-radius:16px;position:relative;word-break:break-word;overflow-wrap:break-word}.cv-bubble.inbound{align-self:flex-start;background:#fff;border:1px solid #e2e8f0;border-bottom-left-radius:4px}.cv-bubble.inbound .cv-body{color:#1e293b}.cv-bubble.inbound .cv-meta{color:#64748b}.cv-bubble.outbound{align-self:flex-end;background:#2563eb;border-bottom-right-radius:4px}.cv-bubble.outbound .cv-body,.cv-bubble.outbound .cv-meta{color:#fff}@media(prefers-reduced-motion:no-preference){.cv-bubble{animation:cv-appear .2s ease}.cv-context{animation:cv-slide-in .25s ease}}.cv-body{margin:0;font-size:.875rem;line-height:1.45;word-break:break-word;white-space:pre-wrap}.cv-media{margin-bottom:6px}.cv-image-btn{display:block;padding:0;border:0;background:none;cursor:pointer;border-radius:8px}.cv-image-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px #2563eb}.cv-image{display:block;max-width:240px;max-height:240px;border-radius:8px;object-fit:cover}.cv-video{max-width:240px;max-height:200px;border-radius:8px}.cv-file-link{font-size:.8125rem;color:#fff;text-decoration:underline}.cv-bubble.inbound .cv-file-link{color:#2563eb}.cv-meta{display:flex;align-items:center;gap:6px;justify-content:flex-end;font-size:.6875rem;margin-top:4px}.cv-status{font-weight:500}.cv-status.failed{color:#fff;font-weight:700}.cv-bubble.inbound .cv-status.failed{color:#dc2626}.cv-compose{display:flex;flex-direction:column;padding:12px 20px 16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid #e2e8f0;background:#fff}.cv-compose-row{display:flex;align-items:flex-end;gap:10px}.cv-compose-input{flex:1;min-width:0}.cv-attach-btn,.cv-send-btn{flex-shrink:0}.cv-attachment{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.cv-attachment-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px}.cv-attachment-name{font-size:.8125rem;color:#475569;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cv-attachment-remove{flex-shrink:0}.cv-compose-status{margin:4px 0 0;font-size:.8125rem;color:#64748b}.cv-compose-status:empty{margin:0}.cv-context-backdrop{display:none}.cv-context{width:100%;min-width:0;border-left:1px solid #e2e8f0;background:#fff;display:flex;flex-direction:column;overflow-y:auto}.cv-context-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e2e8f0}.cv-context-header h3{margin:0;font-size:.875rem;font-weight:700;color:#1e293b}.cv-context-body{padding:20px;display:flex;flex-direction:column;gap:16px}@keyframes cv-appear{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes cv-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:1100px){.cv-layout.has-context{grid-template-columns:280px 1fr 240px}}@media(max-width:768px){.cv-layout,.cv-layout.has-context{grid-template-columns:1fr;height:100%}.cv-hidden-mobile{display:none!important}.cv-back-btn{display:inline-flex}.cv-context-backdrop{display:block;position:fixed;inset:0;background:#00000059;z-index:99}.cv-context{position:fixed;top:0;right:0;bottom:0;width:300px;max-width:85vw;z-index:100;box-shadow:-4px 0 20px #0000001a}.cv-bubble{max-width:85%}.cv-messages,.cv-thread-header{padding:12px 16px}}@media(max-width:480px){.cv-thread-subtitle{display:none}.cv-compose{padding:8px 12px 12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.cv-list-header{padding:12px 16px 10px}.cv-context{width:100%;max-width:100vw}}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.MaxLengthValidator,
+					selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]",
+					inputs: ["maxlength"]
+				},
+				{
+					kind: "directive",
+					type: i1.NgModel,
+					selector: "[ngModel]:not([formControlName]):not([formControl])",
+					inputs: [
+						"name",
+						"disabled",
+						"ngModel",
+						"ngModelOptions"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngModel"]
+				},
+				{
+					kind: "component",
+					type: AlertComponent,
+					selector: "ui-alert",
+					inputs: [
+						"variant",
+						"title",
+						"dismissible",
+						"dismissAriaLabel",
+						"quiet",
+						"compact",
+						"inline",
+						"fill"
+					],
+					outputs: ["dismissed"]
+				},
+				{
+					kind: "component",
+					type: AvatarComponent,
+					selector: "ui-avatar",
+					inputs: [
+						"initials",
+						"name",
+						"size",
+						"imageUrl",
+						"editable",
+						"editLabel",
+						"busy"
+					],
+					outputs: ["editClick", "imageError"]
+				},
+				{
+					kind: "component",
+					type: BadgeComponent,
+					selector: "ui-badge",
+					inputs: ["label", "variant"]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"variant",
+						"routerLink",
+						"queryParams",
+						"fragment",
+						"state",
+						"href",
+						"target",
+						"rel",
+						"shortLabel",
+						"shortBelow",
+						"color",
+						"active",
+						"size",
+						"type",
+						"disabled",
+						"loading",
+						"fullWidth",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaPressed",
+						"ariaDescribedBy",
+						"modal-footer-left",
+						"modal-footer-right"
+					]
+				},
+				{
+					kind: "component",
+					type: EmptyStateComponent,
+					selector: "ui-empty-state",
+					inputs: [
+						"message",
+						"title",
+						"iconType"
+					]
+				},
+				{
+					kind: "component",
+					type: FileInputComponent,
+					selector: "ui-file-input",
+					inputs: [
+						"label",
+						"ariaLabel",
+						"placeholder",
+						"buttonLabel",
+						"accept",
+						"multiple",
+						"required",
+						"hint",
+						"error",
+						"showField",
+						"showErrors",
+						"toastOnReject",
+						"clearable",
+						"removeLabel",
+						"maxSize",
+						"enforceAccept",
+						"typeMessage",
+						"sizeMessage",
+						"rejectEmpty",
+						"emptyMessage",
+						"minSize",
+						"minSizeMessage",
+						"dropzone",
+						"showDetails",
+						"preview",
+						"loading",
+						"loadingText",
+						"disabled"
+					],
+					outputs: [
+						"filesSelected",
+						"fileRejected",
+						"fileRemoved",
+						"invalidChange"
+					]
+				},
+				{
+					kind: "component",
+					type: ListComponent,
+					selector: "ui-list",
+					inputs: [
+						"items",
+						"ordered",
+						"layout",
+						"gridMin",
+						"gap",
+						"reorderable",
+						"disabled",
+						"moveControls",
+						"dragDrop",
+						"ariaLabel",
+						"ariaLabelledby",
+						"itemLabelFn",
+						"trackBy",
+						"moveEarlierLabel",
+						"moveLaterLabel",
+						"helpText",
+						"moveAnnouncement",
+						"navigable"
+					],
+					outputs: [
+						"itemClick",
+						"itemsChange",
+						"reorder"
+					]
+				},
+				{
+					kind: "component",
+					type: PaginationComponent,
+					selector: "ui-pagination",
+					inputs: [
+						"page",
+						"pageSize",
+						"totalItems",
+						"detached",
+						"embedded",
+						"ariaLabel"
+					],
+					outputs: ["pageChange"]
+				},
+				{
+					kind: "component",
+					type: QuickFilterTabsComponent,
+					selector: "ui-quick-filter-tabs",
+					inputs: [
+						"tabs",
+						"counts",
+						"activeValue",
+						"ariaLabel"
+					],
+					outputs: ["tabChange"]
+				},
+				{
+					kind: "component",
+					type: SearchInputComponent,
+					selector: "ui-search-input",
+					inputs: [
+						"placeholder",
+						"ariaLabel",
+						"value",
+						"maxlength",
+						"endpoint",
+						"loading"
+					],
+					outputs: [
+						"valueChange",
+						"searchChange",
+						"filteredData"
+					]
+				},
+				{
+					kind: "component",
+					type: SkeletonComponent,
+					selector: "ui-skeleton",
+					inputs: [
+						"height",
+						"width",
+						"radius",
+						"mb",
+						"ariaLabel"
+					]
+				},
+				{
+					kind: "component",
+					type: TextareaInputComponent,
+					selector: "ui-textarea-input",
+					inputs: [
+						"label",
+						"ariaLabel",
+						"placeholder",
+						"rows",
+						"maxlength",
+						"required",
+						"readonly",
+						"hint",
+						"ariaDescribedBy",
+						"hintAsDescription",
+						"error",
+						"monospace",
+						"showErrors",
+						"disabled"
+					],
+					outputs: ["invalidChange"]
+				},
+				{
+					kind: "directive",
+					type: TooltipDirective,
+					selector: "[uiTooltip]",
+					inputs: ["uiTooltip", "tooltipPosition"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ConversationsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-conversations",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				FormsModule,
+				AlertComponent,
+				AvatarComponent,
+				BadgeComponent,
+				ButtonComponent,
+				EmptyStateComponent,
+				FileInputComponent,
+				ListComponent,
+				PaginationComponent,
+				QuickFilterTabsComponent,
+				SearchInputComponent,
+				SkeletonComponent,
+				TextareaInputComponent,
+				TooltipDirective
+			],
+			template: `
+    <div class="cv-layout" [class.has-context]="contextVisible()" data-testid="conversations">
+      @if (contextVisible()) {
+        <div class="cv-context-backdrop" (click)="closeContext()" aria-hidden="true"></div>
+      }
+
+      <!-- LEFT: conversation list -->
+      <section class="cv-list-panel" [class.cv-hidden-mobile]="!!selected()" [attr.aria-labelledby]="titleId">
+        <div class="cv-list-header">
+          <h2 class="cv-list-title" [id]="titleId">{{ title() }}</h2>
+          @if (canWrite() && allowNew()) {
+            <ui-button class="cv-new-btn" variant="primary" size="sm" [ariaLabel]="newLabel()" [uiTooltip]="newTooltip()" tooltipPosition="bottom" (click)="newConversation.emit()" data-testid="new-message-btn">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
+            </ui-button>
+          }
+        </div>
+
+        @if (showFilters()) {
+          <div class="cv-search">
+            <ui-search-input [placeholder]="searchPlaceholder()" [ariaLabel]="searchAriaLabel()" [(value)]="searchText" (searchChange)="searchChange.emit($event)" data-testid="conv-search" />
+          </div>
+          @if (filterTabs().length) {
+            <div class="cv-filters">
+              <ui-quick-filter-tabs [ariaLabel]="filterAriaLabel()" [tabs]="filterTabs()" [counts]="filterCounts()" [activeValue]="activeFilter()" (tabChange)="filterChange.emit($event)" data-testid="conv-filters" />
+            </div>
+          }
+        }
+
+        @if (loading()) {
+          <div class="cv-loading" aria-busy="true" [attr.aria-label]="loadingLabel()" data-testid="conv-loading">
+            @for (i of skeletonRows; track i) {
+              <div class="cv-skeleton">
+                <ui-skeleton [height]="40" width="40px" [radius]="20" />
+                <div class="cv-skel-content">
+                  <div class="cv-skel-row">
+                    <ui-skeleton width="55%" [height]="12" />
+                    <ui-skeleton width="48px" [height]="10" />
+                  </div>
+                  <ui-skeleton width="30%" [height]="10" [mb]="2" />
+                  <ui-skeleton width="85%" [height]="10" />
+                </div>
+              </div>
+            }
+          </div>
+        } @else if (error()) {
+          <div class="cv-error" data-testid="conv-error">
+            <ui-alert variant="danger">{{ error() }}</ui-alert>
+            <ui-button variant="secondary" size="sm" (click)="retry.emit()" data-testid="conv-retry">Retry</ui-button>
+          </div>
+        } @else if (conversations().length === 0) {
+          <ui-empty-state iconType="message" data-testid="conv-empty" [title]="filtering() ? filteredEmptyTitle() : emptyTitle()" [message]="emptyText()" />
+        } @else {
+          <div class="cv-list">
+            <ui-list [ariaLabel]="listAriaLabel()" [items]="conversations()" [trackBy]="trackConversation" [navigable]="true" (itemClick)="onRowOpen($event)">
+              <ng-template let-conv>
+                <div class="cv-item" data-testid="conv-item" [attr.data-conversation-id]="conv.id"
+                     [class.selected]="selected()?.id === conv.id" [class.unread]="(conv.unreadCount ?? 0) > 0">
+                  <ui-avatar [initials]="initial(conv.name)" [name]="conv.name" [size]="40" />
+                  <div class="cv-item-info">
+                    <div class="cv-item-top">
+                      <span class="cv-name">{{ conv.name }}</span>@if (selected()?.id === conv.id) {<span class="cv-sr-only">, open</span>}
+                      <span class="cv-time">{{ relativeTime(conv.lastMessageAt) }}</span>
+                    </div>
+                    @if (conv.subtitle) { <span class="cv-subtitle">{{ conv.subtitle }}</span> }
+                    <div class="cv-item-bottom">
+                      <p class="cv-preview">{{ preview(conv.preview) || noMessagesText() }}</p>
+                      <div class="cv-item-right">
+                        @if (conv.statusLabel) { <ui-badge [label]="conv.statusLabel" variant="gray" /> }
+                        @if ((conv.unreadCount ?? 0) > 0) {
+                          <ui-badge class="cv-unread-badge" [label]="'' + conv.unreadCount" variant="blue" data-testid="conv-unread" />
+                          <span class="cv-sr-only">unread</span>
+                        }
+                        @if (canWrite() && allowDelete()) {
+                          <ui-button class="cv-delete-btn" variant="icon-danger" [ariaLabel]="deleteRowLabel() + ' ' + conv.name" (click)="$event.stopPropagation(); deleteConversation.emit(conv)" data-testid="conv-delete-btn">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
+                          </ui-button>
+                        }
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </ng-template>
+            </ui-list>
+            <ui-pagination [ariaLabel]="paginationAriaLabel()" [page]="page()" [pageSize]="pageSize()" [totalItems]="totalItems()" (pageChange)="pageChange.emit($event)" />
+          </div>
+        }
+      </section>
+
+      <!-- CENTER: message thread -->
+      <section class="cv-thread-panel" [class.cv-hidden-mobile]="!selected()" [attr.aria-label]="threadAriaLabel()">
+        @if (selected(); as conv) {
+          <div class="cv-thread-header">
+            <ui-button class="cv-back-btn" variant="secondary" size="sm" [ariaLabel]="backLabel()" (click)="onBack()" data-testid="back-to-list">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
+            </ui-button>
+            <div class="cv-thread-header-info">
+              <ui-avatar [initials]="initial(conv.name)" [name]="conv.name" [size]="40" />
+              <div class="cv-thread-header-text">
+                <h3 class="cv-thread-name" #threadHeading tabindex="-1" data-testid="thread-name">{{ conv.name }}</h3>
+                @if (conv.subtitle) { <span class="cv-thread-subtitle" data-testid="thread-phone">{{ conv.subtitle }}</span> }
+              </div>
+            </div>
+            <div class="cv-thread-actions">
+              @if (canWrite() && templatesEnabled()) {
+                <ui-button class="cv-thread-action" variant="secondary" size="sm" [ariaLabel]="templateLabel()" [uiTooltip]="templateLabel()" tooltipPosition="bottom" [disabled]="composerDisabled()" (click)="templateRequest.emit()" data-testid="use-template-btn">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                </ui-button>
+              }
+              @if (hasContext()) {
+                <ui-button #contextToggle class="cv-thread-action" [variant]="contextOpen() ? 'primary' : 'secondary'" size="sm" [ariaLabel]="contextOpen() ? hideContextLabel() : showContextLabel()" [uiTooltip]="contextOpen() ? hideContextLabel() : contextTitle()" tooltipPosition="bottom" (click)="toggleContext()" data-testid="context-toggle">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+                </ui-button>
+              }
+              @if (canWrite() && statusActionLabel()) {
+                <ui-button class="cv-thread-action" variant="secondary" size="sm" [ariaLabel]="statusActionLabel() ?? ''" [uiTooltip]="statusActionLabel()" tooltipPosition="bottom" [disabled]="statusChanging()" (click)="statusChange.emit(conv)" data-testid="status-btn">
+                  @if (statusActionIcon() === 'reopen') {
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
+                  } @else {
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+                  }
+                </ui-button>
+              }
+              @if (canWrite() && allowDelete()) {
+                <ui-button class="cv-thread-action" variant="danger" size="sm" [ariaLabel]="deleteThreadLabel()" [uiTooltip]="deleteThreadLabel()" tooltipPosition="bottom" (click)="deleteConversation.emit(conv)" data-testid="thread-delete-btn">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
+                </ui-button>
+              }
+            </div>
+          </div>
+
+          <div class="cv-messages" #messagesEl role="log" aria-live="polite" aria-relevant="additions" tabindex="0"
+               [attr.aria-label]="messagesAriaLabel() + ' ' + conv.name" [attr.aria-busy]="messagesLoading()" (scroll)="onMessagesScroll()" data-testid="messages">
+            @if (messagesLoading()) {
+              <div class="cv-messages-loading" data-testid="messages-loading">
+                @for (i of skeletonBubbles; track i) {
+                  <div class="cv-msg-skeleton" [class.outbound]="i % 2 === 0">
+                    <ui-skeleton [height]="48" [width]="i % 2 === 0 ? '60%' : '55%'" [radius]="16" />
+                  </div>
+                }
+              </div>
+            } @else if (messagesError()) {
+              <div class="cv-messages-error" data-testid="thread-error">
+                <ui-alert variant="danger">{{ messagesError() }}</ui-alert>
+                <ui-button variant="secondary" size="sm" (click)="messagesRetry.emit()" data-testid="thread-retry">Retry</ui-button>
+              </div>
+            } @else if (messages().length === 0) {
+              <div class="cv-messages-empty" data-testid="messages-empty">
+                <p>{{ canWrite() ? noMessagesWriteText() : noMessagesReadText() }}</p>
+              </div>
+            } @else {
+              @if (hasEarlier()) {
+                <div class="cv-load-earlier">
+                  <ui-button variant="secondary" size="sm" [loading]="loadingEarlier()" (click)="loadEarlier.emit()" data-testid="load-earlier">{{ loadEarlierLabel() }}</ui-button>
+                </div>
+              }
+              @for (row of messageRows(); track row.message.id) {
+                @if (row.separator) { <div class="cv-date-separator"><span>{{ row.separator }}</span></div> }
+                <div class="cv-bubble" data-testid="message" [class.outbound]="row.message.direction === 'outbound'" [class.inbound]="row.message.direction === 'inbound'">
+                  <span class="cv-sr-only">{{ row.message.direction === 'outbound' ? youLabel() : conv.name }}:</span>
+                  @if (row.message.media; as media) {
+                    <div class="cv-media">
+                      @if (media.type?.startsWith('image/')) {
+                        <button type="button" class="cv-image-btn" (click)="mediaOpen.emit(media.url)" [attr.aria-label]="openMediaLabel() + ' ' + (media.fileName || imageFallbackName())">
+                          <img [src]="media.url" [alt]="media.fileName || imageFallbackName()" class="cv-image" loading="lazy" />
+                        </button>
+                      } @else if (media.type?.startsWith('video/')) {
+                        <video [src]="media.url" class="cv-video" controls preload="metadata"></video>
+                      } @else {
+                        <a [href]="media.url" target="_blank" rel="noopener noreferrer" class="cv-file-link">{{ media.fileName || fileFallbackName() }}</a>
+                      }
+                    </div>
+                  }
+                  @if (row.message.body) { <p class="cv-body">{{ row.message.body }}</p> }
+                  <span class="cv-meta">
+                    @if (row.message.direction === 'outbound' && row.message.sender) { <span class="cv-sender" data-testid="msg-sender">{{ row.message.sender }}</span> }
+                    {{ time(row.message) }}
+                    @if (row.message.action; as action) {
+                      <button type="button" class="cv-msg-action" data-testid="msg-action" (click)="messageAction.emit(row.message)">{{ action.label }}</button>
+                    }
+                    @if (row.message.direction === 'outbound' && statusLabel(row.message.status)) {
+                      <span class="cv-status" [class.failed]="row.message.status === 'failed'" data-testid="msg-status">
+                        <span aria-hidden="true">{{ statusMark(row.message.status) }}</span>
+                        <span class="cv-sr-only">{{ statusLabel(row.message.status) }}</span>
+                      </span>
+                    }
+                  </span>
+                </div>
+              }
+            }
+          </div>
+
+          @if (canWrite()) {
+            <div class="cv-compose">
+              @if (attachment(); as file) {
+                <div class="cv-attachment" data-testid="attachment-preview">
+                  @if (file.previewUrl) {
+                    <img [src]="file.previewUrl" [alt]="attachmentPreviewLabel()" class="cv-attachment-thumb" />
+                  } @else {
+                    <span class="cv-attachment-name">{{ file.fileName }}</span>
+                  }
+                  <ui-button class="cv-attachment-remove" variant="icon-danger" [ariaLabel]="removeAttachmentLabel()" (click)="attachmentRemove.emit()" data-testid="attachment-remove">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                  </ui-button>
+                </div>
+              }
+              <div class="cv-compose-row">
+                @if (attachEnabled()) {
+                  <ui-button class="cv-attach-btn" variant="icon" [ariaLabel]="attachLabel()" [disabled]="uploading() || composerDisabled()" [loading]="uploading()" (click)="openFilePicker()" data-testid="attach-btn">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+                  </ui-button>
+                  <ui-file-input [showField]="false" [accept]="acceptedFiles()" [maxSize]="maxFileSize()" [toastOnReject]="true"
+                    [typeMessage]="typeMessage()" [sizeMessage]="sizeMessage()" (filesSelected)="filesSelected.emit($event)" data-testid="attach-input" />
+                }
+                <ui-textarea-input class="cv-compose-input" [ariaLabel]="composeLabel()" [placeholder]="composePlaceholder()" [rows]="1" [maxlength]="maxLength()"
+                  [ngModel]="draft()" (ngModelChange)="draft.set($event)" [disabled]="composerDisabled()" [error]="composerError()"
+                  (keydown)="onComposeKeydown($event)" data-testid="compose-input" />
+                <ui-button class="cv-send-btn" variant="primary" [ariaLabel]="sendLabel()" [disabled]="!canSend()" [loading]="sending()" (click)="sendMessage()" data-testid="send-btn">
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
+                </ui-button>
+              </div>
+              @if (composerNotice()) {
+                <ui-alert variant="warning" data-testid="compose-opted-out">{{ composerNotice() }}</ui-alert>
+              }
+              <!-- Always in the page (a live region that appears together with its text is often not announced): only its text comes and goes. -->
+              <p class="cv-compose-status" role="status" data-testid="compose-loading-contact">{{ composerStatus() }}</p>
+            </div>
+          }
+        } @else {
+          <ui-empty-state iconType="message" [title]="threadEmptyTitle()" [message]="threadEmptyMessage()" data-testid="thread-empty" />
+        }
+      </section>
+
+      <!-- RIGHT: contact panel (the host's content) -->
+      @if (contextVisible()) {
+        <aside class="cv-context" #contextPanel tabindex="-1" [attr.aria-label]="contextTitle()" (keydown.escape)="closeContext(true)" data-testid="context-panel">
+          <div class="cv-context-header">
+            <h3>{{ contextTitle() }}</h3>
+            <ui-button variant="icon" [ariaLabel]="closeContextLabel()" (click)="closeContext(true)" data-testid="context-close">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </ui-button>
+          </div>
+          <div class="cv-context-body"><ng-content select="[uiConversationsContext]" /></div>
+        </aside>
+      }
+    </div>
+  `,
+			styles: [":host{display:flex;flex:1;min-height:0;min-width:0}.cv-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cv-layout{display:grid;grid-template-columns:340px 1fr;flex:1;min-height:0;min-width:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000000f;border:1px solid #e2e8f0}.cv-layout.has-context{grid-template-columns:340px 1fr 280px}.cv-list-panel{display:flex;flex-direction:column;min-height:0;border-right:1px solid #e2e8f0;background:#f8fafc;overflow:hidden}.cv-list-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 12px}.cv-list-title{margin:0;font-size:1.125rem;font-weight:700;color:#1e293b}.cv-search,.cv-filters{padding:0 16px 12px}.cv-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.cv-item{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid #f1f5f9;transition:background .15s}.cv-item.unread{background:#fffbeb}.cv-item.selected{background:#eff6ff;box-shadow:inset 3px 0 #2563eb}.cv-item-info{flex:1;min-width:0}.cv-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.cv-name{font-size:.875rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv-time{font-size:.6875rem;color:#64748b;flex-shrink:0;margin-left:8px}.cv-subtitle{font-size:.6875rem;color:#64748b;display:block;margin-bottom:2px}.cv-item-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}.cv-preview{margin:0;font-size:.8125rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.cv-item-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.cv-delete-btn{opacity:0;transition:opacity .15s}.cv-item:hover .cv-delete-btn,.cv-item:focus-within .cv-delete-btn,.cv-delete-btn:focus-within{opacity:1}@media(hover:none){.cv-delete-btn{opacity:1}}.cv-loading{padding:8px 0}.cv-skeleton{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid #f1f5f9}.cv-skel-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:2px}.cv-skel-row{display:flex;justify-content:space-between;gap:8px}.cv-error{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;text-align:center}.cv-thread-panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff}.cv-thread-header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #e2e8f0;background:#fff}.cv-back-btn{display:none}.cv-thread-header-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.cv-thread-header-text{min-width:0;display:flex;flex-direction:column}.cv-thread-name{margin:0;font-size:.9375rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv-thread-name:focus{outline:none}.cv-thread-name:focus-visible{outline:2px solid #2563eb;outline-offset:2px;border-radius:4px}.cv-thread-subtitle{font-size:.75rem;color:#64748b}.cv-thread-actions{display:flex;align-items:center;gap:8px}.cv-messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:20px 24px;display:flex;flex-direction:column;gap:4px;background:#f8fafc}.cv-messages:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}.cv-messages-loading{display:flex;flex-direction:column;gap:12px;padding:20px 0}.cv-msg-skeleton{display:flex}.cv-msg-skeleton.outbound{justify-content:flex-end}.cv-messages-error{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;text-align:center}.cv-load-earlier{display:flex;justify-content:center;padding:4px 0 12px}.cv-sender{font-weight:600}.cv-msg-action{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}.cv-msg-action:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}.cv-messages-empty{display:flex;align-items:center;justify-content:center;flex:1}.cv-messages-empty p{margin:0;font-size:.875rem;color:#64748b;text-align:center}.cv-date-separator{display:flex;align-items:center;justify-content:center;padding:16px 0 8px}.cv-date-separator span{padding:4px 14px;border-radius:12px;background:#e2e8f0;font-size:.6875rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.3px}.cv-bubble{max-width:70%;padding:10px 14px;border-radius:16px;position:relative;word-break:break-word;overflow-wrap:break-word}.cv-bubble.inbound{align-self:flex-start;background:#fff;border:1px solid #e2e8f0;border-bottom-left-radius:4px}.cv-bubble.inbound .cv-body{color:#1e293b}.cv-bubble.inbound .cv-meta{color:#64748b}.cv-bubble.outbound{align-self:flex-end;background:#2563eb;border-bottom-right-radius:4px}.cv-bubble.outbound .cv-body,.cv-bubble.outbound .cv-meta{color:#fff}@media(prefers-reduced-motion:no-preference){.cv-bubble{animation:cv-appear .2s ease}.cv-context{animation:cv-slide-in .25s ease}}.cv-body{margin:0;font-size:.875rem;line-height:1.45;word-break:break-word;white-space:pre-wrap}.cv-media{margin-bottom:6px}.cv-image-btn{display:block;padding:0;border:0;background:none;cursor:pointer;border-radius:8px}.cv-image-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px #2563eb}.cv-image{display:block;max-width:240px;max-height:240px;border-radius:8px;object-fit:cover}.cv-video{max-width:240px;max-height:200px;border-radius:8px}.cv-file-link{font-size:.8125rem;color:#fff;text-decoration:underline}.cv-bubble.inbound .cv-file-link{color:#2563eb}.cv-meta{display:flex;align-items:center;gap:6px;justify-content:flex-end;font-size:.6875rem;margin-top:4px}.cv-status{font-weight:500}.cv-status.failed{color:#fff;font-weight:700}.cv-bubble.inbound .cv-status.failed{color:#dc2626}.cv-compose{display:flex;flex-direction:column;padding:12px 20px 16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid #e2e8f0;background:#fff}.cv-compose-row{display:flex;align-items:flex-end;gap:10px}.cv-compose-input{flex:1;min-width:0}.cv-attach-btn,.cv-send-btn{flex-shrink:0}.cv-attachment{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.cv-attachment-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px}.cv-attachment-name{font-size:.8125rem;color:#475569;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cv-attachment-remove{flex-shrink:0}.cv-compose-status{margin:4px 0 0;font-size:.8125rem;color:#64748b}.cv-compose-status:empty{margin:0}.cv-context-backdrop{display:none}.cv-context{width:100%;min-width:0;border-left:1px solid #e2e8f0;background:#fff;display:flex;flex-direction:column;overflow-y:auto}.cv-context-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e2e8f0}.cv-context-header h3{margin:0;font-size:.875rem;font-weight:700;color:#1e293b}.cv-context-body{padding:20px;display:flex;flex-direction:column;gap:16px}@keyframes cv-appear{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes cv-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:1100px){.cv-layout.has-context{grid-template-columns:280px 1fr 240px}}@media(max-width:768px){.cv-layout,.cv-layout.has-context{grid-template-columns:1fr;height:100%}.cv-hidden-mobile{display:none!important}.cv-back-btn{display:inline-flex}.cv-context-backdrop{display:block;position:fixed;inset:0;background:#00000059;z-index:99}.cv-context{position:fixed;top:0;right:0;bottom:0;width:300px;max-width:85vw;z-index:100;box-shadow:-4px 0 20px #0000001a}.cv-bubble{max-width:85%}.cv-messages,.cv-thread-header{padding:12px 16px}}@media(max-width:480px){.cv-thread-subtitle{display:none}.cv-compose{padding:8px 12px 12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.cv-list-header{padding:12px 16px 10px}.cv-context{width:100%;max-width:100vw}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		conversations: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "conversations",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selected",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		searchText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "searchText",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["searchTextChange"]
+		}],
+		searchPlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "searchPlaceholder",
+				required: false
+			}]
+		}],
+		searchAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "searchAriaLabel",
+				required: false
+			}]
+		}],
+		showFilters: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showFilters",
+				required: false
+			}]
+		}],
+		filterTabs: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterTabs",
+				required: false
+			}]
+		}],
+		filterCounts: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterCounts",
+				required: false
+			}]
+		}],
+		activeFilter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeFilter",
+				required: false
+			}]
+		}],
+		filterAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterAriaLabel",
+				required: false
+			}]
+		}],
+		page: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "page",
+				required: false
+			}]
+		}],
+		pageSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pageSize",
+				required: false
+			}]
+		}],
+		totalItems: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "totalItems",
+				required: false
+			}]
+		}],
+		paginationAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "paginationAriaLabel",
+				required: false
+			}]
+		}],
+		listAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "listAriaLabel",
+				required: false
+			}]
+		}],
+		loadingLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingLabel",
+				required: false
+			}]
+		}],
+		emptyTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyTitle",
+				required: false
+			}]
+		}],
+		emptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyMessage",
+				required: false
+			}]
+		}],
+		emptyReadOnlyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyReadOnlyMessage",
+				required: false
+			}]
+		}],
+		filteredEmptyTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filteredEmptyTitle",
+				required: false
+			}]
+		}],
+		filteredEmptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filteredEmptyMessage",
+				required: false
+			}]
+		}],
+		noMessagesText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noMessagesText",
+				required: false
+			}]
+		}],
+		allowNew: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowNew",
+				required: false
+			}]
+		}],
+		allowDelete: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowDelete",
+				required: false
+			}]
+		}],
+		newLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "newLabel",
+				required: false
+			}]
+		}],
+		newTooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "newTooltip",
+				required: false
+			}]
+		}],
+		deleteRowLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "deleteRowLabel",
+				required: false
+			}]
+		}],
+		messages: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "messages",
+				required: false
+			}]
+		}],
+		messagesLoading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "messagesLoading",
+				required: false
+			}]
+		}],
+		messagesError: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "messagesError",
+				required: false
+			}]
+		}],
+		hasEarlier: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hasEarlier",
+				required: false
+			}]
+		}],
+		loadingEarlier: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingEarlier",
+				required: false
+			}]
+		}],
+		loadEarlierLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadEarlierLabel",
+				required: false
+			}]
+		}],
+		statusActionLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "statusActionLabel",
+				required: false
+			}]
+		}],
+		statusActionIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "statusActionIcon",
+				required: false
+			}]
+		}],
+		statusChanging: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "statusChanging",
+				required: false
+			}]
+		}],
+		templatesEnabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "templatesEnabled",
+				required: false
+			}]
+		}],
+		templateLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "templateLabel",
+				required: false
+			}]
+		}],
+		deleteThreadLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "deleteThreadLabel",
+				required: false
+			}]
+		}],
+		backLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "backLabel",
+				required: false
+			}]
+		}],
+		threadAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "threadAriaLabel",
+				required: false
+			}]
+		}],
+		messagesAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "messagesAriaLabel",
+				required: false
+			}]
+		}],
+		threadEmptyTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "threadEmptyTitle",
+				required: false
+			}]
+		}],
+		threadEmptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "threadEmptyMessage",
+				required: false
+			}]
+		}],
+		noMessagesWriteText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noMessagesWriteText",
+				required: false
+			}]
+		}],
+		noMessagesReadText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noMessagesReadText",
+				required: false
+			}]
+		}],
+		youLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "youLabel",
+				required: false
+			}]
+		}],
+		openMediaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "openMediaLabel",
+				required: false
+			}]
+		}],
+		imageFallbackName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "imageFallbackName",
+				required: false
+			}]
+		}],
+		fileFallbackName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fileFallbackName",
+				required: false
+			}]
+		}],
+		hasContext: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hasContext",
+				required: false
+			}]
+		}],
+		contextOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contextOpen",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["contextOpenChange"]
+		}],
+		contextTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contextTitle",
+				required: false
+			}]
+		}],
+		showContextLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showContextLabel",
+				required: false
+			}]
+		}],
+		hideContextLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hideContextLabel",
+				required: false
+			}]
+		}],
+		closeContextLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeContextLabel",
+				required: false
+			}]
+		}],
+		canWrite: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "canWrite",
+				required: false
+			}]
+		}],
+		draft: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "draft",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["draftChange"]
+		}],
+		sending: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sending",
+				required: false
+			}]
+		}],
+		composerDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "composerDisabled",
+				required: false
+			}]
+		}],
+		sendBlocked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sendBlocked",
+				required: false
+			}]
+		}],
+		composerNotice: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "composerNotice",
+				required: false
+			}]
+		}],
+		composerStatus: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "composerStatus",
+				required: false
+			}]
+		}],
+		composerError: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "composerError",
+				required: false
+			}]
+		}],
+		maxLength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxLength",
+				required: false
+			}]
+		}],
+		attachment: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "attachment",
+				required: false
+			}]
+		}],
+		uploading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "uploading",
+				required: false
+			}]
+		}],
+		attachEnabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "attachEnabled",
+				required: false
+			}]
+		}],
+		acceptedFiles: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "acceptedFiles",
+				required: false
+			}]
+		}],
+		maxFileSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxFileSize",
+				required: false
+			}]
+		}],
+		typeMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "typeMessage",
+				required: false
+			}]
+		}],
+		sizeMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sizeMessage",
+				required: false
+			}]
+		}],
+		composeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "composeLabel",
+				required: false
+			}]
+		}],
+		composePlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "composePlaceholder",
+				required: false
+			}]
+		}],
+		sendLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sendLabel",
+				required: false
+			}]
+		}],
+		attachLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "attachLabel",
+				required: false
+			}]
+		}],
+		removeAttachmentLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removeAttachmentLabel",
+				required: false
+			}]
+		}],
+		attachmentPreviewLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "attachmentPreviewLabel",
+				required: false
+			}]
+		}],
+		now: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "now",
+				required: false
+			}]
+		}],
+		searchChange: [{
+			type: i0.Output,
+			args: ["searchChange"]
+		}],
+		filterChange: [{
+			type: i0.Output,
+			args: ["filterChange"]
+		}],
+		pageChange: [{
+			type: i0.Output,
+			args: ["pageChange"]
+		}],
+		selectConversation: [{
+			type: i0.Output,
+			args: ["selectConversation"]
+		}],
+		back: [{
+			type: i0.Output,
+			args: ["back"]
+		}],
+		newConversation: [{
+			type: i0.Output,
+			args: ["newConversation"]
+		}],
+		retry: [{
+			type: i0.Output,
+			args: ["retry"]
+		}],
+		deleteConversation: [{
+			type: i0.Output,
+			args: ["deleteConversation"]
+		}],
+		statusChange: [{
+			type: i0.Output,
+			args: ["statusChange"]
+		}],
+		templateRequest: [{
+			type: i0.Output,
+			args: ["templateRequest"]
+		}],
+		send: [{
+			type: i0.Output,
+			args: ["send"]
+		}],
+		filesSelected: [{
+			type: i0.Output,
+			args: ["filesSelected"]
+		}],
+		attachmentRemove: [{
+			type: i0.Output,
+			args: ["attachmentRemove"]
+		}],
+		mediaOpen: [{
+			type: i0.Output,
+			args: ["mediaOpen"]
+		}],
+		messageAction: [{
+			type: i0.Output,
+			args: ["messageAction"]
+		}],
+		loadEarlier: [{
+			type: i0.Output,
+			args: ["loadEarlier"]
+		}],
+		messagesRetry: [{
+			type: i0.Output,
+			args: ["messagesRetry"]
+		}],
+		threadHeading: [{
+			type: i0.ViewChild,
+			args: ["threadHeading", { isSignal: true }]
+		}],
+		messagesEl: [{
+			type: i0.ViewChild,
+			args: ["messagesEl", { isSignal: true }]
+		}],
+		contextPanel: [{
+			type: i0.ViewChild,
+			args: ["contextPanel", { isSignal: true }]
+		}],
+		fileInput: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => FileInputComponent), { isSignal: true }]
+		}]
+	}
+});
+export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BankAccountFormComponent, BarRowComponent, BoardCardDirective, BoardComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CalendarComponent, CardListItemComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, ConversationsComponent, DEFAULT_BANK_ACCOUNT_TYPE_OPTIONS, DEFAULT_BANK_HOLDER_TYPE_OPTIONS, DEFAULT_BANK_MANDATE_TEXT, DEFAULT_EMAIL_TEMPLATE_BLOCK_GROUPS, DEFAULT_EMAIL_TEMPLATE_VARIABLE_GROUPS, DEFAULT_PASSWORD_RULES, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DropdownComponent, EMAIL_BLOCK_DRAG_TYPE, EMAIL_TEMPLATE_MAX_BODY, EMAIL_TEMPLATE_MAX_TEXT, EMAIL_TEMPLATE_START_TEXT, EmailTemplateEditorComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FadeComponent, FileInputComponent, FixedFooterComponent, FormColSpanDirective, FormComponent, FormRowComponent, FormSectionComponent, HintComponent, IDX_BEHAVIOR_SIGNALS, INTEGRATION_CATALOG, INTEGRATION_FIELD_DEFS, INTEGRATION_GROUP_ORDER, INTEGRATION_OPTION_DEFS, IconComponent, ImageComponent, ImageGalleryComponent, ImageGalleryDialogComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, ImportSourceGridComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, LiveRegionComponent, MAX_EMAIL_ADDRESS_LENGTH, ModalComponent, MoreMenuComponent, MultiSelectComponent, NOTES_MAX_LENGTH, NotesComponent, OfflineBannerComponent, OptionCardComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PageComponent, PaginationComponent, PanelInfoListComponent, PasswordRequirementsComponent, PdfHotspotComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, RadioOptionContentDirective, ReadonlyFieldsetComponent, ReminderAlertsComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SETUP_DONE_KEY, SETUP_INTEGRATIONS, SearchInputComponent, SectionHeaderComponent, SelectComponent, SetupWizardComponent, SetupWizardStepDirective, SetupWizardStepHeaderDirective, ShareMenuComponent, ShowComponent, SidePanelComponent, SidebarLayoutComponent, SignaturePadComponent, SkeletonComponent, SnackbarComponent, SnackbarService, StackComponent, StarComponent, StepperComponent, TableToolbarComponent, TextComponent, TextInputComponent, TextTemplatePickerComponent, TextareaInputComponent, TimeInputComponent, TimelineComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, acceptLabel, appShellGroupsStorageKey, autoVariant, blockHasContent, buildDefaultSchedule, buildPreviewDocument, buildVideoBlockHtml, builtInActionIcon, businessTimeOptions, conversationDateLabel, conversationInitial, conversationMessageStatusLabel, conversationMessageStatusMark, createFieldReveal, decodeFilterValues, digitsOnly, downloadBlob, emailShareUrl, encodeFilterValue, encodeFilterValues, errorContextInterceptor, escapeHtml, facebookShareUrl, fileMatchesAccept, formatAddress, formatCategoryLabel, formatConversationPhone, formatConversationTime, formatCurrency, formatFileSize, formatIsoDate, formatIsoDateTime, formatMessageTime, formatTime, formatVideoDuration, getEligibleIds, getEligibleOptions, getErrorMessage, gmailShareUrl, groupMessagesByDay, humanReadableMessage, iconPath, insideEditorBlock, integrationPlainText, integrationsForApp, integrationsOnlyFor, isBlockDrag, isValidEmailAddress, isWebUrl, isoKey, issueToErrors, linkedInShareUrl, maxLengthIssue, mergeDescribedBy, normalizeHexColor, outlookShareUrl, parseBizHours, parseIso, parseTime, passwordMeetsRules, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, serializeBizHours, serializedTextLength, setupIntegrations, splitIntro, truncateConversationText, xShareUrl };
 
 //# sourceMappingURL=forgeroute-ui.mjs.map