@forgeroute/ui 0.4.57 → 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 */ []);
@@ -29749,7 +29749,7 @@ var ListComponent = class ListComponent {
     }
   `,
 			isInline: true,
-			styles: ["ui-list{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-list:not(.ul-list--grid)>.ul-item:not(:last-child)>.ul-row>.ul-content>ui-list-item:not(.li-bordered) .li-row{border-bottom:1px solid var(--border, #e2e8f0)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-item--nav{cursor:pointer;border-radius:10px;transition:background-color .12s ease}.ul-item--nav:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.ul-item--nav:hover{background:var(--surface-hover, #f8fafc)}.ul-item--nav:hover:has(>.ul-row>.ul-content>ui-list-item.li-bordered){background:transparent}.ul-item--nav>.ul-row{padding-inline-end:8px}.ul-item--nav:hover .ul-chevron{color:#0f172a;transform:translate(2px)}.ul-chevron{flex:0 0 auto;color:#94a3b8;transition:color .15s ease,transform .15s ease}@media(prefers-reduced-motion:reduce){.ul-chevron{transition:none;transform:none!important}}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}ui-list .ul-item--draggable img,ui-list .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"],
+			styles: ["ui-list{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-list:not(.ul-list--grid)>.ul-item:not(:last-child)>.ul-row>.ul-content>ui-list-item:not(.li-bordered) .li-row{border-bottom:1px solid var(--border, #e2e8f0)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-item--nav{cursor:pointer;border-radius:10px;transition:background-color .12s ease}.ul-item--nav:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.ul-item--nav:hover{background:var(--surface-hover, #f8fafc)}.ul-item--nav:hover:has(>.ul-row>.ul-content>ui-list-item.li-bordered){background:transparent}.ul-item--nav>.ul-row{padding-inline-end:8px}.ul-item--nav:hover .ul-chevron{color:#0f172a;transform:translate(2px)}.ul-chevron{flex:0 0 auto;color:#94a3b8;transition:color .15s ease,transform .15s ease}@media(prefers-reduced-motion:reduce){.ul-chevron{transition:none;transform:none!important}}.ul-item--nav:has(>.ul-row>.ul-content>ui-list-item.li-bordered)>.ul-row{position:relative;padding-inline-end:0}.ul-item--nav:has(>.ul-row>.ul-content>ui-list-item.li-bordered)>.ul-row>.ul-chevron{position:absolute;inset-inline-end:12px;top:50%;margin-top:-10px;pointer-events:none}.ul-item--nav>.ul-row>.ul-content>ui-list-item.li-bordered .li-row{padding-inline-end:40px}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}ui-list .ul-item--draggable img,ui-list .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: NgTemplateOutlet,
@@ -29877,7 +29877,7 @@ i0.ɵɵngDeclareClassMetadata({
       <div class="ul-sr" role="status" aria-live="polite" aria-atomic="true">{{ announcement() }}</div>
     }
   `,
-			styles: ["ui-list{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-list:not(.ul-list--grid)>.ul-item:not(:last-child)>.ul-row>.ul-content>ui-list-item:not(.li-bordered) .li-row{border-bottom:1px solid var(--border, #e2e8f0)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-item--nav{cursor:pointer;border-radius:10px;transition:background-color .12s ease}.ul-item--nav:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.ul-item--nav:hover{background:var(--surface-hover, #f8fafc)}.ul-item--nav:hover:has(>.ul-row>.ul-content>ui-list-item.li-bordered){background:transparent}.ul-item--nav>.ul-row{padding-inline-end:8px}.ul-item--nav:hover .ul-chevron{color:#0f172a;transform:translate(2px)}.ul-chevron{flex:0 0 auto;color:#94a3b8;transition:color .15s ease,transform .15s ease}@media(prefers-reduced-motion:reduce){.ul-chevron{transition:none;transform:none!important}}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}ui-list .ul-item--draggable img,ui-list .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
+			styles: ["ui-list{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-list:not(.ul-list--grid)>.ul-item:not(:last-child)>.ul-row>.ul-content>ui-list-item:not(.li-bordered) .li-row{border-bottom:1px solid var(--border, #e2e8f0)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-item--nav{cursor:pointer;border-radius:10px;transition:background-color .12s ease}.ul-item--nav:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.ul-item--nav:hover{background:var(--surface-hover, #f8fafc)}.ul-item--nav:hover:has(>.ul-row>.ul-content>ui-list-item.li-bordered){background:transparent}.ul-item--nav>.ul-row{padding-inline-end:8px}.ul-item--nav:hover .ul-chevron{color:#0f172a;transform:translate(2px)}.ul-chevron{flex:0 0 auto;color:#94a3b8;transition:color .15s ease,transform .15s ease}@media(prefers-reduced-motion:reduce){.ul-chevron{transition:none;transform:none!important}}.ul-item--nav:has(>.ul-row>.ul-content>ui-list-item.li-bordered)>.ul-row{position:relative;padding-inline-end:0}.ul-item--nav:has(>.ul-row>.ul-content>ui-list-item.li-bordered)>.ul-row>.ul-chevron{position:absolute;inset-inline-end:12px;top:50%;margin-top:-10px;pointer-events:none}.ul-item--nav>.ul-row>.ul-content>ui-list-item.li-bordered .li-row{padding-inline-end:40px}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}ui-list .ul-item--draggable img,ui-list .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -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 {
@@ -49166,6 +49166,3492 @@ 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, 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, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SETUP_DONE_KEY, SETUP_INTEGRATIONS, SearchInputComponent, SectionHeaderComponent, SelectComponent, SetupWizardComponent, SetupWizardStepDirective, SetupWizardStepHeaderDirective, ShowComponent, SidePanelComponent, SidebarLayoutComponent, SignaturePadComponent, SkeletonComponent, 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, encodeFilterValue, encodeFilterValues, errorContextInterceptor, escapeHtml, fileMatchesAccept, formatAddress, formatCategoryLabel, formatCurrency, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, formatVideoDuration, getEligibleIds, getEligibleOptions, getErrorMessage, humanReadableMessage, iconPath, insideEditorBlock, integrationPlainText, integrationsForApp, integrationsOnlyFor, isBlockDrag, isValidEmailAddress, isWebUrl, isoKey, issueToErrors, maxLengthIssue, mergeDescribedBy, normalizeHexColor, parseBizHours, parseIso, parseTime, passwordMeetsRules, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, serializeBizHours, serializedTextLength, setupIntegrations, splitIntro };
+const facebookShareUrl = (url) => `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
+const xShareUrl = (url, text) => `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
+const linkedInShareUrl = (url) => `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
+const gmailShareUrl = (url, title) => `https://mail.google.com/mail/?view=cm&fs=1&su=${encodeURIComponent(title)}&body=${encodeURIComponent(`${title}\n\n${url}`)}`;
+const outlookShareUrl = (url, title) => `https://outlook.live.com/mail/0/deeplink/compose?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(`${title}\n\n${url}`)}`;
+const emailShareUrl = (url, title) => `mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(`${title}\n\n${url}`)}`;
+let nextShareMenuId = 0;
+var ShareMenuComponent = class ShareMenuComponent {
+	constructor() {
+		this.url = input.required(...ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []);
+		this.title = input.required(...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.label = input("this page", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.panelId = `ui-share-panel-${nextShareMenuId++}`;
+		this.doc = inject(DOCUMENT);
+		this.toast = inject(ToastService);
+		this.injector = inject(Injector);
+		this.host = inject(ElementRef);
+		this.trigger = viewChild("trigger", ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
+		this.panel = viewChild("panel", ...ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []);
+		this.open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+		this.shiftX = signal(0, ...ngDevMode ? [{ debugName: "shiftX" }] : /* istanbul ignore next */ []);
+		this.isTouchDevice = computed(() => this.doc.defaultView?.matchMedia?.("(pointer: coarse)").matches === true, ...ngDevMode ? [{ debugName: "isTouchDevice" }] : /* istanbul ignore next */ []);
+		this.canNativeShare = computed(() => typeof this.doc.defaultView?.navigator?.share === "function" && this.isTouchDevice(), ...ngDevMode ? [{ debugName: "canNativeShare" }] : /* istanbul ignore next */ []);
+		this.tiles = computed(() => [
+			{
+				value: "facebook",
+				label: "Facebook",
+				background: "#1877f2"
+			},
+			{
+				value: "x",
+				label: "X",
+				background: "#000000"
+			},
+			{
+				value: "linkedin",
+				label: "LinkedIn",
+				background: "#0a66c2"
+			},
+			...this.isTouchDevice() ? [{
+				value: "email",
+				label: "Email",
+				background: "#78716c"
+			}] : [{
+				value: "gmail",
+				label: "Gmail",
+				background: "#ea4335"
+			}, {
+				value: "outlook",
+				label: "Outlook",
+				background: "#0078d4"
+			}],
+			{
+				value: "copy",
+				label: "Copy link",
+				background: "var(--ui-share-accent, var(--primary, #2563eb))"
+			},
+			...this.canNativeShare() ? [{
+				value: "native",
+				label: "More",
+				background: "#57534e"
+			}] : []
+		], ...ngDevMode ? [{ debugName: "tiles" }] : /* istanbul ignore next */ []);
+		this.links = computed(() => ({
+			facebook: facebookShareUrl(this.url()),
+			x: xShareUrl(this.url(), this.title()),
+			linkedin: linkedInShareUrl(this.url()),
+			email: emailShareUrl(this.url(), this.title()),
+			gmail: gmailShareUrl(this.url(), this.title()),
+			outlook: outlookShareUrl(this.url(), this.title())
+		}), ...ngDevMode ? [{ debugName: "links" }] : /* istanbul ignore next */ []);
+	}
+	toggle(event) {
+		event.stopPropagation();
+		if (this.open()) this.close();
+		else this.show();
+	}
+	show() {
+		this.shiftX.set(0);
+		this.open.set(true);
+		afterNextRender(() => {
+			const panel = this.panel()?.nativeElement;
+			if (!panel) return;
+			const view = this.doc.documentElement.clientWidth;
+			const rect = panel.getBoundingClientRect();
+			const margin = 8;
+			if (rect.right > view - margin) this.shiftX.set(Math.round(view - margin - rect.right));
+			else if (rect.left < margin) this.shiftX.set(Math.round(margin - rect.left));
+			if (this.doc.activeElement === this.trigger()?.nativeElement) panel.querySelector("button")?.focus();
+		}, { injector: this.injector });
+	}
+	close(returnFocus = false) {
+		if (!this.open()) return;
+		this.open.set(false);
+		if (returnFocus) this.trigger()?.nativeElement.focus();
+	}
+	onEscape() {
+		if (!this.open()) return;
+		const focusInside = this.host.nativeElement.contains(this.doc.activeElement);
+		this.close(focusInside);
+	}
+	onDocumentClick(event) {
+		if (this.open() && !this.host.nativeElement.contains(event.target)) this.close();
+	}
+	onFocusOut(event) {
+		const next = event.relatedTarget;
+		if (this.open() && next && !this.host.nativeElement.contains(next)) this.close();
+	}
+	onPanelKeydown(event) {
+		const options = Array.from(this.panel().nativeElement.querySelectorAll("button"));
+		const i = options.indexOf(this.doc.activeElement);
+		const to = event.key === "ArrowRight" ? (i + 1) % options.length : event.key === "ArrowLeft" ? (i - 1 + options.length) % options.length : event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : -1;
+		if (to < 0) return;
+		event.preventDefault();
+		options[to].focus();
+	}
+	choose(option) {
+		switch (option) {
+			case "native":
+				this.nativeShare();
+				break;
+			case "facebook":
+			case "x":
+			case "linkedin":
+			case "gmail":
+			case "outlook":
+				this.doc.defaultView?.open(this.links()[option], "_blank", "noopener,noreferrer");
+				break;
+			case "email":
+				this.email();
+				break;
+			case "copy": this.copy();
+		}
+		this.close(true);
+	}
+	async nativeShare() {
+		try {
+			await this.doc.defaultView.navigator.share({
+				title: this.title(),
+				url: this.url()
+			});
+		} catch (err) {
+			if (err?.name !== "AbortError") this.toast.error("Sharing from this page isn't available here. Use one of the other options.");
+		}
+	}
+	email() {
+		const link = this.doc.createElement("a");
+		link.href = this.links().email;
+		link.rel = "noopener noreferrer";
+		link.click();
+	}
+	async copy() {
+		const url = this.url();
+		try {
+			await this.doc.defaultView.navigator.clipboard.writeText(url);
+			this.toast.show("Link copied");
+			return;
+		} catch {}
+		if (this.legacyCopy(url)) {
+			this.toast.show("Link copied");
+			return;
+		}
+		this.doc.defaultView?.prompt("Copy this link:", url);
+	}
+	legacyCopy(text) {
+		const textarea = this.doc.createElement("textarea");
+		textarea.value = text;
+		textarea.setAttribute("readonly", "");
+		textarea.style.position = "fixed";
+		textarea.style.opacity = "0";
+		this.doc.body.appendChild(textarea);
+		try {
+			textarea.select();
+			textarea.setSelectionRange(0, text.length);
+			return this.doc.execCommand("copy");
+		} catch {
+			return false;
+		} finally {
+			textarea.remove();
+		}
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ShareMenuComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: ShareMenuComponent,
+			isStandalone: true,
+			selector: "ui-share-menu",
+			inputs: {
+				url: {
+					classPropertyName: "url",
+					publicName: "url",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				title: {
+					classPropertyName: "title",
+					publicName: "title",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: { listeners: {
+				"document:keydown.escape": "onEscape()",
+				"document:click": "onDocumentClick($event)",
+				"focusout": "onFocusOut($event)"
+			} },
+			viewQueries: [{
+				propertyName: "trigger",
+				first: true,
+				predicate: ["trigger"],
+				descendants: true,
+				isSignal: true
+			}, {
+				propertyName: "panel",
+				first: true,
+				predicate: ["panel"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: `
+    <div class="share-wrap">
+      <button
+        #trigger
+        type="button"
+        class="share-trigger"
+        data-testid="share-trigger"
+        [attr.aria-label]="'Share ' + label()"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="open() ? panelId : null"
+        (click)="toggle($event)"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
+          <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
+        </svg>
+        Share
+      </button>
+
+      @if (open()) {
+        <div
+          #panel
+          [id]="panelId"
+          class="share-panel"
+          role="group"
+          aria-label="Share options"
+          data-testid="share-panel"
+          [style.transform]="'translateX(' + shiftX() + 'px)'"
+          (keydown)="onPanelKeydown($event)"
+        >
+          @for (tile of tiles(); track tile.value) {
+            <button type="button" class="share-tile" [attr.data-testid]="'share-' + tile.value" (click)="choose(tile.value)">
+              <span class="share-icon" [style.background]="tile.background" aria-hidden="true">
+                @switch (tile.value) {
+                  @case ('facebook') {
+                    <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M13.5 21v-7.5h2.6l.4-3h-3V8.6c0-.9.3-1.5 1.6-1.5h1.5V4.4c-.3 0-1.2-.1-2.3-.1-2.3 0-3.8 1.4-3.8 3.9v2.3H8v3h2.5V21h3z"/></svg>
+                  }
+                  @case ('x') {
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M17.8 3h3.1l-6.8 7.7L22 21h-6.2l-4.9-6.4L5.3 21H2.2l7.3-8.3L2 3h6.4l4.4 5.8L17.8 3zm-1.1 16.2h1.7L7.3 4.7H5.5l11.2 14.5z"/></svg>
+                  }
+                  @case ('linkedin') {
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M6.9 8.9H3.6V20h3.3V8.9zM5.2 3.5a1.9 1.9 0 100 3.8 1.9 1.9 0 000-3.8zM20.4 13.4c0-3-1.6-4.7-4.1-4.7-1.2 0-2.2.6-2.7 1.4V8.9h-3.2V20h3.3v-6c0-1.4.7-2.4 1.9-2.4s1.5 1 1.5 2.4V20h3.3v-6.6z"/></svg>
+                  }
+                  @case ('email') {
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
+                  }
+                  @case ('gmail') {
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
+                  }
+                  @case ('outlook') {
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
+                  }
+                  @case ('copy') {
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 007.1 0l3-3a5 5 0 00-7.1-7.1l-1.7 1.7"/><path d="M14 11a5 5 0 00-7.1 0l-3 3A5 5 0 0011 21l1.7-1.7"/></svg>
+                  }
+                  @case ('native') {
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
+                  }
+                }
+              </span>
+              <span class="share-name">{{ tile.label }}</span>
+            </button>
+          }
+        </div>
+      }
+    </div>
+    <ui-toast />
+  `,
+			isInline: true,
+			styles: [":host{display:inline-block}.share-wrap{position:relative}.share-trigger{display:inline-flex;align-items:center;gap:.4rem;min-height:2.25rem;padding:.35rem .95rem;border:1px solid #d6d3d1;border-radius:9999px;background:#fff;color:#44403c;font-size:.875rem;font-weight:600;font-family:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.share-trigger:hover{border-color:#a8a29e;background:#fafaf9}.share-trigger[aria-expanded=true]{border-color:#78716c;background:#f5f5f4}.share-trigger:focus-visible,.share-tile:focus-visible{outline:2px solid var(--ui-share-accent, var(--primary, #2563eb));outline-offset:2px}@media(pointer:coarse){.share-trigger{min-height:2.75rem}}.share-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;align-items:flex-start;gap:4px;padding:14px 12px 10px;width:max-content;max-width:calc(100vw - 16px);overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #e7e5e4;border-radius:16px;box-shadow:0 10px 30px #1c19172e}.share-tile{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;width:64px;padding:2px 0;border:0;background:none;border-radius:10px;font-family:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.share-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:9999px;color:#fff;transition:transform .12s ease,box-shadow .12s ease}.share-tile:hover .share-icon{transform:translateY(-2px);box-shadow:0 4px 10px #1c191740}.share-name{font-size:.75rem;line-height:1.1;font-weight:500;color:#57534e;text-align:center}@media(max-width:480px){.share-panel{padding:12px 8px 8px;gap:2px}.share-tile{width:auto;min-width:48px;padding:2px 1px}.share-icon{width:44px;height:44px}.share-name{white-space:nowrap;font-size:.8125rem}}@media(prefers-reduced-motion:reduce){.share-icon{transition:none}.share-tile:hover .share-icon{transform:none}}\n"],
+			dependencies: [{
+				kind: "component",
+				type: ToastComponent,
+				selector: "ui-toast",
+				inputs: ["dismissible", "persistentLiveRegion"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ShareMenuComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-share-menu",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [ToastComponent],
+			host: {
+				"(document:keydown.escape)": "onEscape()",
+				"(document:click)": "onDocumentClick($event)",
+				"(focusout)": "onFocusOut($event)"
+			},
+			template: `
+    <div class="share-wrap">
+      <button
+        #trigger
+        type="button"
+        class="share-trigger"
+        data-testid="share-trigger"
+        [attr.aria-label]="'Share ' + label()"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="open() ? panelId : null"
+        (click)="toggle($event)"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
+          <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
+        </svg>
+        Share
+      </button>
+
+      @if (open()) {
+        <div
+          #panel
+          [id]="panelId"
+          class="share-panel"
+          role="group"
+          aria-label="Share options"
+          data-testid="share-panel"
+          [style.transform]="'translateX(' + shiftX() + 'px)'"
+          (keydown)="onPanelKeydown($event)"
+        >
+          @for (tile of tiles(); track tile.value) {
+            <button type="button" class="share-tile" [attr.data-testid]="'share-' + tile.value" (click)="choose(tile.value)">
+              <span class="share-icon" [style.background]="tile.background" aria-hidden="true">
+                @switch (tile.value) {
+                  @case ('facebook') {
+                    <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M13.5 21v-7.5h2.6l.4-3h-3V8.6c0-.9.3-1.5 1.6-1.5h1.5V4.4c-.3 0-1.2-.1-2.3-.1-2.3 0-3.8 1.4-3.8 3.9v2.3H8v3h2.5V21h3z"/></svg>
+                  }
+                  @case ('x') {
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M17.8 3h3.1l-6.8 7.7L22 21h-6.2l-4.9-6.4L5.3 21H2.2l7.3-8.3L2 3h6.4l4.4 5.8L17.8 3zm-1.1 16.2h1.7L7.3 4.7H5.5l11.2 14.5z"/></svg>
+                  }
+                  @case ('linkedin') {
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M6.9 8.9H3.6V20h3.3V8.9zM5.2 3.5a1.9 1.9 0 100 3.8 1.9 1.9 0 000-3.8zM20.4 13.4c0-3-1.6-4.7-4.1-4.7-1.2 0-2.2.6-2.7 1.4V8.9h-3.2V20h3.3v-6c0-1.4.7-2.4 1.9-2.4s1.5 1 1.5 2.4V20h3.3v-6.6z"/></svg>
+                  }
+                  @case ('email') {
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
+                  }
+                  @case ('gmail') {
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
+                  }
+                  @case ('outlook') {
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
+                  }
+                  @case ('copy') {
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 007.1 0l3-3a5 5 0 00-7.1-7.1l-1.7 1.7"/><path d="M14 11a5 5 0 00-7.1 0l-3 3A5 5 0 0011 21l1.7-1.7"/></svg>
+                  }
+                  @case ('native') {
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
+                  }
+                }
+              </span>
+              <span class="share-name">{{ tile.label }}</span>
+            </button>
+          }
+        </div>
+      }
+    </div>
+    <ui-toast />
+  `,
+			styles: [":host{display:inline-block}.share-wrap{position:relative}.share-trigger{display:inline-flex;align-items:center;gap:.4rem;min-height:2.25rem;padding:.35rem .95rem;border:1px solid #d6d3d1;border-radius:9999px;background:#fff;color:#44403c;font-size:.875rem;font-weight:600;font-family:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.share-trigger:hover{border-color:#a8a29e;background:#fafaf9}.share-trigger[aria-expanded=true]{border-color:#78716c;background:#f5f5f4}.share-trigger:focus-visible,.share-tile:focus-visible{outline:2px solid var(--ui-share-accent, var(--primary, #2563eb));outline-offset:2px}@media(pointer:coarse){.share-trigger{min-height:2.75rem}}.share-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;align-items:flex-start;gap:4px;padding:14px 12px 10px;width:max-content;max-width:calc(100vw - 16px);overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #e7e5e4;border-radius:16px;box-shadow:0 10px 30px #1c19172e}.share-tile{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;width:64px;padding:2px 0;border:0;background:none;border-radius:10px;font-family:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.share-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:9999px;color:#fff;transition:transform .12s ease,box-shadow .12s ease}.share-tile:hover .share-icon{transform:translateY(-2px);box-shadow:0 4px 10px #1c191740}.share-name{font-size:.75rem;line-height:1.1;font-weight:500;color:#57534e;text-align:center}@media(max-width:480px){.share-panel{padding:12px 8px 8px;gap:2px}.share-tile{width:auto;min-width:48px;padding:2px 1px}.share-icon{width:44px;height:44px}.share-name{white-space:nowrap;font-size:.8125rem}}@media(prefers-reduced-motion:reduce){.share-icon{transition:none}.share-tile:hover .share-icon{transform:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		url: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "url",
+				required: true
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		trigger: [{
+			type: i0.ViewChild,
+			args: ["trigger", { isSignal: true }]
+		}],
+		panel: [{
+			type: i0.ViewChild,
+			args: ["panel", { isSignal: true }]
+		}]
+	}
+});
+var SnackbarService = class SnackbarService {
+	constructor() {
+		this._messages = signal([], ...ngDevMode ? [{ debugName: "_messages" }] : /* istanbul ignore next */ []);
+		this.nextId = 0;
+		this.timers = /* @__PURE__ */ new Map();
+	}
+	messages$() {
+		return [...this._messages()];
+	}
+	showSuccess(message, duration = 5e3) {
+		this.show(message, "success", duration);
+	}
+	showError(message, duration = 5e3) {
+		this.show(message, "error", duration);
+	}
+	showInfo(message, duration = 5e3, action) {
+		this.show(message, "info", duration, action);
+	}
+	show(message, type, duration, action) {
+		const id = this.nextId++;
+		this._messages.update((messages) => [...messages, {
+			id,
+			message,
+			type,
+			action
+		}]);
+		if (duration > 0) this.timers.set(id, setTimeout(() => this.dismiss(id), duration));
+	}
+	dismiss(id) {
+		const timer = this.timers.get(id);
+		if (timer) {
+			clearTimeout(timer);
+			this.timers.delete(id);
+		}
+		this._messages.update((messages) => messages.filter((m) => m.id !== id));
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: SnackbarService,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: SnackbarService,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SnackbarService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+var SnackbarComponent = class SnackbarComponent {
+	constructor() {
+		this.service = inject(SnackbarService);
+		this.messages = computed(() => this.service.messages$(), ...ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []);
+	}
+	variant(m) {
+		return m.type === "error" ? "danger" : m.type;
+	}
+	dismiss(id) {
+		this.service.dismiss(id);
+	}
+	runAction(m, callback) {
+		callback();
+		this.service.dismiss(m.id);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: SnackbarComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: SnackbarComponent,
+			isStandalone: true,
+			selector: "ui-snackbar",
+			ngImport: i0,
+			template: `
+    <div class="sb-stack" role="region" aria-label="Notifications" aria-live="polite">
+      @for (m of messages(); track m.id) {
+        <ui-alert class="sb-item" [variant]="variant(m)" [dismissible]="true" dismissAriaLabel="Dismiss notification"
+                  [attr.data-testid]="m.type + '-message'" (dismissed)="dismiss(m.id)">
+          <span class="sb-text">{{ m.message }}</span>
+          @if (m.action; as act) {
+            <ui-button variant="link" size="sm" data-testid="snackbar-action" (click)="runAction(m, act.callback)">{{ act.label }}</ui-button>
+          }
+        </ui-alert>
+      }
+    </div>
+  `,
+			isInline: true,
+			styles: [":host{display:contents}.sb-stack{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;width:20rem;max-width:calc(100vw - 32px);pointer-events:none}.sb-item{pointer-events:auto;box-shadow:0 8px 20px #0f172a2e;border-radius:8px;animation:sb-in .28s cubic-bezier(.16,1,.3,1)}.sb-text{min-width:0;overflow-wrap:anywhere}@keyframes sb-in{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.sb-item{animation:none}}\n"],
+			dependencies: [{
+				kind: "component",
+				type: AlertComponent,
+				selector: "ui-alert",
+				inputs: [
+					"variant",
+					"title",
+					"dismissible",
+					"dismissAriaLabel",
+					"quiet",
+					"compact",
+					"inline",
+					"fill"
+				],
+				outputs: ["dismissed"]
+			}, {
+				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"
+				]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SnackbarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-snackbar",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [AlertComponent, ButtonComponent],
+			template: `
+    <div class="sb-stack" role="region" aria-label="Notifications" aria-live="polite">
+      @for (m of messages(); track m.id) {
+        <ui-alert class="sb-item" [variant]="variant(m)" [dismissible]="true" dismissAriaLabel="Dismiss notification"
+                  [attr.data-testid]="m.type + '-message'" (dismissed)="dismiss(m.id)">
+          <span class="sb-text">{{ m.message }}</span>
+          @if (m.action; as act) {
+            <ui-button variant="link" size="sm" data-testid="snackbar-action" (click)="runAction(m, act.callback)">{{ act.label }}</ui-button>
+          }
+        </ui-alert>
+      }
+    </div>
+  `,
+			styles: [":host{display:contents}.sb-stack{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;width:20rem;max-width:calc(100vw - 32px);pointer-events:none}.sb-item{pointer-events:auto;box-shadow:0 8px 20px #0f172a2e;border-radius:8px;animation:sb-in .28s cubic-bezier(.16,1,.3,1)}.sb-text{min-width:0;overflow-wrap:anywhere}@keyframes sb-in{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.sb-item{animation:none}}\n"]
+		}]
+	}]
+});
+var OfflineBannerComponent = class OfflineBannerComponent {
+	constructor() {
+		this.title = input("You are currently offline", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.message = input("Some features may not work properly. Please check your internet connection.", ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
+		this.offline = input(null, ...ngDevMode ? [{ debugName: "offline" }] : /* istanbul ignore next */ []);
+		this.browserOffline = signal(false, ...ngDevMode ? [{ debugName: "browserOffline" }] : /* istanbul ignore next */ []);
+		this.dismissed = signal(false, ...ngDevMode ? [{ debugName: "dismissed" }] : /* istanbul ignore next */ []);
+		this.isOffline = computed(() => this.offline() ?? this.browserOffline(), ...ngDevMode ? [{ debugName: "isOffline" }] : /* istanbul ignore next */ []);
+		this.visible = computed(() => this.isOffline() && !this.dismissed(), ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+		const win = inject(DOCUMENT).defaultView;
+		if (!win) return;
+		this.browserOffline.set(win.navigator.onLine === false);
+		const goOffline = () => this.browserOffline.set(true);
+		const goOnline = () => {
+			this.browserOffline.set(false);
+			this.dismissed.set(false);
+		};
+		win.addEventListener("offline", goOffline);
+		win.addEventListener("online", goOnline);
+		inject(DestroyRef).onDestroy(() => {
+			win.removeEventListener("offline", goOffline);
+			win.removeEventListener("online", goOnline);
+		});
+	}
+	dismiss() {
+		this.dismissed.set(true);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: OfflineBannerComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: OfflineBannerComponent,
+			isStandalone: true,
+			selector: "ui-offline-banner",
+			inputs: {
+				title: {
+					classPropertyName: "title",
+					publicName: "title",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				message: {
+					classPropertyName: "message",
+					publicName: "message",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				offline: {
+					classPropertyName: "offline",
+					publicName: "offline",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0,
+			template: `
+    @if (visible()) {
+      <div class="ob-bar" data-testid="offline-banner">
+        <ui-alert variant="warning" [title]="title()" [dismissible]="true" dismissAriaLabel="Dismiss offline notification" (dismissed)="dismiss()">{{ message() }}</ui-alert>
+      </div>
+    }
+  `,
+			isInline: true,
+			styles: [":host{display:contents}.ob-bar{position:fixed;top:0;left:0;right:0;z-index:9999;padding:8px 16px;pointer-events:none}.ob-bar ui-alert{pointer-events:auto;max-width:1200px;margin:0 auto;box-shadow:0 4px 12px #0f172a26;border-radius:8px}\n"],
+			dependencies: [{
+				kind: "component",
+				type: AlertComponent,
+				selector: "ui-alert",
+				inputs: [
+					"variant",
+					"title",
+					"dismissible",
+					"dismissAriaLabel",
+					"quiet",
+					"compact",
+					"inline",
+					"fill"
+				],
+				outputs: ["dismissed"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: OfflineBannerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-offline-banner",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [AlertComponent],
+			template: `
+    @if (visible()) {
+      <div class="ob-bar" data-testid="offline-banner">
+        <ui-alert variant="warning" [title]="title()" [dismissible]="true" dismissAriaLabel="Dismiss offline notification" (dismissed)="dismiss()">{{ message() }}</ui-alert>
+      </div>
+    }
+  `,
+			styles: [":host{display:contents}.ob-bar{position:fixed;top:0;left:0;right:0;z-index:9999;padding:8px 16px;pointer-events:none}.ob-bar ui-alert{pointer-events:auto;max-width:1200px;margin:0 auto;box-shadow:0 4px 12px #0f172a26;border-radius:8px}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		message: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "message",
+				required: false
+			}]
+		}],
+		offline: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "offline",
+				required: false
+			}]
+		}]
+	}
+});
+var ReminderAlertsComponent = class ReminderAlertsComponent {
+	constructor() {
+		this.items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("Alerts", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.action = output();
+		this.hidden = output();
+	}
+	variant(item) {
+		return item.tone;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ReminderAlertsComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: ReminderAlertsComponent,
+			isStandalone: true,
+			selector: "ui-reminder-alerts",
+			inputs: {
+				items: {
+					classPropertyName: "items",
+					publicName: "items",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				action: "action",
+				hidden: "hidden"
+			},
+			ngImport: i0,
+			template: `
+    @if (items().length) {
+      <div class="ra-stack" role="region" [attr.aria-label]="ariaLabel()" aria-live="polite">
+        @for (item of items(); track item.id) {
+          <ui-alert class="ra-item" [variant]="variant(item)" [attr.data-testid]="'reminder-alert-' + item.id">
+            <div class="ra-body">
+              <ui-button class="ra-hide" variant="icon" size="xs" [ariaLabel]="item.hideLabel || 'Hide alert'" [attr.data-testid]="item.hideTestId || 'alert-hide'" (click)="hidden.emit(item)">
+                <ui-icon name="close" [size]="14" [interactive]="false" />
+              </ui-button>
+              <span class="ra-label">{{ item.label }}</span>
+              <p class="ra-title">{{ item.title }}</p>
+              @if (item.badge; as b) {
+                <ui-badge class="ra-badge" role="img" variant="purple" [label]="b.label" [attr.aria-label]="b.ariaLabel || b.label" [attr.title]="b.ariaLabel || b.label" [attr.data-testid]="b.testId || 'alert-badge'" />
+              }
+              @for (line of item.lines ?? []; track $index) {
+                <p class="ra-line">{{ line }}</p>
+              }
+              @if (item.actions?.length) {
+                <div class="ra-actions">
+                  @for (a of item.actions; track a.id) {
+                    <ui-button [variant]="a.variant || 'secondary'" size="xs" [attr.data-testid]="'alert-' + a.id" (click)="action.emit({ item, actionId: a.id })">{{ a.label }}</ui-button>
+                  }
+                </div>
+              }
+            </div>
+          </ui-alert>
+        }
+      </div>
+    }
+  `,
+			isInline: true,
+			styles: [":host{display:contents}.ra-stack{position:fixed;top:16px;right:16px;z-index:9990;display:flex;flex-direction:column;gap:8px;width:24rem;max-width:calc(100vw - 32px);pointer-events:none}.ra-item{pointer-events:auto;box-shadow:0 8px 20px #0f172a2e;border-radius:8px;animation:ra-in .3s ease-out}.ra-body{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;width:100%;padding-right:28px}.ra-hide{position:absolute;top:-4px;right:-4px}.ra-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.ra-title{margin:0;font-size:.875rem;font-weight:600;overflow-wrap:anywhere}.ra-line{margin:0;font-size:.75rem;overflow-wrap:anywhere}.ra-badge{align-self:flex-start;max-width:100%;overflow:hidden}.ra-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}@keyframes ra-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ra-item{animation:none}}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: AlertComponent,
+					selector: "ui-alert",
+					inputs: [
+						"variant",
+						"title",
+						"dismissible",
+						"dismissAriaLabel",
+						"quiet",
+						"compact",
+						"inline",
+						"fill"
+					],
+					outputs: ["dismissed"]
+				},
+				{
+					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: IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"name",
+						"tooltip",
+						"ariaLabel",
+						"size",
+						"variant",
+						"disabled",
+						"loading",
+						"interactive"
+					],
+					outputs: ["iconClick"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ReminderAlertsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-reminder-alerts",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				AlertComponent,
+				BadgeComponent,
+				ButtonComponent,
+				IconComponent
+			],
+			template: `
+    @if (items().length) {
+      <div class="ra-stack" role="region" [attr.aria-label]="ariaLabel()" aria-live="polite">
+        @for (item of items(); track item.id) {
+          <ui-alert class="ra-item" [variant]="variant(item)" [attr.data-testid]="'reminder-alert-' + item.id">
+            <div class="ra-body">
+              <ui-button class="ra-hide" variant="icon" size="xs" [ariaLabel]="item.hideLabel || 'Hide alert'" [attr.data-testid]="item.hideTestId || 'alert-hide'" (click)="hidden.emit(item)">
+                <ui-icon name="close" [size]="14" [interactive]="false" />
+              </ui-button>
+              <span class="ra-label">{{ item.label }}</span>
+              <p class="ra-title">{{ item.title }}</p>
+              @if (item.badge; as b) {
+                <ui-badge class="ra-badge" role="img" variant="purple" [label]="b.label" [attr.aria-label]="b.ariaLabel || b.label" [attr.title]="b.ariaLabel || b.label" [attr.data-testid]="b.testId || 'alert-badge'" />
+              }
+              @for (line of item.lines ?? []; track $index) {
+                <p class="ra-line">{{ line }}</p>
+              }
+              @if (item.actions?.length) {
+                <div class="ra-actions">
+                  @for (a of item.actions; track a.id) {
+                    <ui-button [variant]="a.variant || 'secondary'" size="xs" [attr.data-testid]="'alert-' + a.id" (click)="action.emit({ item, actionId: a.id })">{{ a.label }}</ui-button>
+                  }
+                </div>
+              }
+            </div>
+          </ui-alert>
+        }
+      </div>
+    }
+  `,
+			styles: [":host{display:contents}.ra-stack{position:fixed;top:16px;right:16px;z-index:9990;display:flex;flex-direction:column;gap:8px;width:24rem;max-width:calc(100vw - 32px);pointer-events:none}.ra-item{pointer-events:auto;box-shadow:0 8px 20px #0f172a2e;border-radius:8px;animation:ra-in .3s ease-out}.ra-body{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;width:100%;padding-right:28px}.ra-hide{position:absolute;top:-4px;right:-4px}.ra-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.ra-title{margin:0;font-size:.875rem;font-weight:600;overflow-wrap:anywhere}.ra-line{margin:0;font-size:.75rem;overflow-wrap:anywhere}.ra-badge{align-self:flex-start;max-width:100%;overflow:hidden}.ra-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}@keyframes ra-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ra-item{animation:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		action: [{
+			type: i0.Output,
+			args: ["action"]
+		}],
+		hidden: [{
+			type: i0.Output,
+			args: ["hidden"]
+		}]
+	}
+});
+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