@acorex/components 20.4.16 → 20.4.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,10 +2,10 @@ import { AXClosableComponent, AXComponentCloseEvent, AXCommonModule, AXDataSourc
2
2
  import * as i2$1 from '@acorex/components/tabs';
3
3
  import { AXTabsModule, AXTabsComponent, AXTabItemComponent } from '@acorex/components/tabs';
4
4
  import * as i1$5 from '@angular/common';
5
- import { CommonModule, isPlatformBrowser, NgComponentOutlet } from '@angular/common';
5
+ import { isPlatformBrowser, CommonModule, NgComponentOutlet } from '@angular/common';
6
6
  import * as i0 from '@angular/core';
7
- import { InjectionToken, inject, Injectable, signal, computed, input, output, Component, viewChild, effect, model, ChangeDetectionStrategy, PLATFORM_ID, DestroyRef, SecurityContext, untracked, ViewContainerRef, Directive, EventEmitter, ElementRef, afterNextRender, NgModule } from '@angular/core';
8
- import { Subject, BehaviorSubject, Observable, filter, of, takeUntil, catchError, EMPTY } from 'rxjs';
7
+ import { InjectionToken, inject, Injectable, signal, computed, PLATFORM_ID, input, output, Component, viewChild, DestroyRef, effect, model, ChangeDetectionStrategy, SecurityContext, untracked, ViewContainerRef, Directive, EventEmitter, ElementRef, afterNextRender, NgModule } from '@angular/core';
8
+ import { Subject, BehaviorSubject, Observable, filter, firstValueFrom, takeUntil, catchError, EMPTY } from 'rxjs';
9
9
  import { AXDialogService } from '@acorex/components/dialog';
10
10
  import { AXPopupService } from '@acorex/components/popup';
11
11
  import * as i1 from '@acorex/components/button';
@@ -47,8 +47,10 @@ import { AXResizableDirective } from '@acorex/cdk/resizable';
47
47
  import { AXBadgeComponent } from '@acorex/components/badge';
48
48
  import { AXContextMenuComponent } from '@acorex/components/menu';
49
49
  import { AXDateTimeModule } from '@acorex/core/date-time';
50
- import * as i4$1 from '@acorex/core/format';
50
+ import * as i5 from '@acorex/core/format';
51
51
  import { AXFormatModule } from '@acorex/core/format';
52
+ import * as i6$1 from '@acorex/core/translation';
53
+ import { AXTranslationModule } from '@acorex/core/translation';
52
54
  import { AXBasePageComponent } from '@acorex/components/page';
53
55
 
54
56
  /**
@@ -958,22 +960,21 @@ class AXConversationStoreService {
958
960
  newMessages.set(message.id, message);
959
961
  return newMessages;
960
962
  });
961
- // Update conversation messages list (sorted)
963
+ // Update conversation messages list (sorted) — always produce new arrays
962
964
  this._conversationMessages.update((map) => {
963
965
  const newMap = new Map(map);
964
- const messageIds = newMap.get(message.conversationId) || [];
965
- if (!messageIds.includes(message.id)) {
966
- messageIds.push(message.id);
967
- // Sort by timestamp
968
- messageIds.sort((a, b) => {
969
- const msgA = this._messages().get(a);
970
- const msgB = this._messages().get(b);
971
- if (!msgA || !msgB)
972
- return 0;
973
- return msgA.timestamp.getTime() - msgB.timestamp.getTime();
974
- });
975
- newMap.set(message.conversationId, messageIds);
966
+ const existing = newMap.get(message.conversationId) || [];
967
+ if (existing.includes(message.id)) {
968
+ return newMap;
976
969
  }
970
+ const updated = [...existing, message.id].sort((a, b) => {
971
+ const msgA = this._messages().get(a);
972
+ const msgB = this._messages().get(b);
973
+ if (!msgA || !msgB)
974
+ return 0;
975
+ return msgA.timestamp.getTime() - msgB.timestamp.getTime();
976
+ });
977
+ newMap.set(message.conversationId, updated);
977
978
  return newMap;
978
979
  });
979
980
  }
@@ -1000,21 +1001,23 @@ class AXConversationStoreService {
1000
1001
  this._conversationMessages.update((map) => {
1001
1002
  const newMap = new Map(map);
1002
1003
  for (const [conversationId, newMsgIds] of conversationGroups) {
1003
- const messageIds = newMap.get(conversationId) || [];
1004
- newMsgIds.forEach((id) => {
1005
- if (!messageIds.includes(id)) {
1006
- messageIds.push(id);
1004
+ const existing = newMap.get(conversationId) || [];
1005
+ const idSet = new Set(existing);
1006
+ const merged = [...existing];
1007
+ for (const id of newMsgIds) {
1008
+ if (!idSet.has(id)) {
1009
+ merged.push(id);
1010
+ idSet.add(id);
1007
1011
  }
1008
- });
1009
- // Sort by timestamp
1010
- messageIds.sort((a, b) => {
1012
+ }
1013
+ const sorted = merged.sort((a, b) => {
1011
1014
  const msgA = this._messages().get(a);
1012
1015
  const msgB = this._messages().get(b);
1013
1016
  if (!msgA || !msgB)
1014
1017
  return 0;
1015
1018
  return msgA.timestamp.getTime() - msgB.timestamp.getTime();
1016
1019
  });
1017
- newMap.set(conversationId, messageIds);
1020
+ newMap.set(conversationId, sorted);
1018
1021
  }
1019
1022
  return newMap;
1020
1023
  });
@@ -1073,14 +1076,12 @@ class AXConversationStoreService {
1073
1076
  newMessages.delete(messageId);
1074
1077
  return newMessages;
1075
1078
  });
1076
- // Remove from conversation messages list
1079
+ // Remove from conversation messages list — produce a new array via filter
1077
1080
  this._conversationMessages.update((map) => {
1078
1081
  const newMap = new Map(map);
1079
- const messageIds = newMap.get(message.conversationId) || [];
1080
- const index = messageIds.indexOf(messageId);
1081
- if (index > -1) {
1082
- messageIds.splice(index, 1);
1083
- newMap.set(message.conversationId, messageIds);
1082
+ const existing = newMap.get(message.conversationId);
1083
+ if (existing) {
1084
+ newMap.set(message.conversationId, existing.filter((id) => id !== messageId));
1084
1085
  }
1085
1086
  return newMap;
1086
1087
  });
@@ -1149,25 +1150,25 @@ class AXConversationStoreService {
1149
1150
  * Keeps only recent messages per conversation
1150
1151
  */
1151
1152
  cleanupConversationMessages() {
1153
+ const maxMessages = this.config.maxMessagesPerConversation;
1154
+ const idsToRemove = [];
1152
1155
  this._conversationMessages.update((map) => {
1153
1156
  const newMap = new Map(map);
1154
1157
  for (const [convId, messageIds] of newMap) {
1155
- const maxMessages = this.config.maxMessagesPerConversation;
1156
1158
  if (messageIds.length > maxMessages) {
1157
- // Keep only recent messages
1158
- const toKeep = messageIds.slice(-maxMessages);
1159
- newMap.set(convId, toKeep);
1160
- // Remove old message objects
1161
- const toRemove = messageIds.slice(0, messageIds.length - maxMessages);
1162
- this._messages.update((messages) => {
1163
- const newMessages = new Map(messages);
1164
- toRemove.forEach((id) => newMessages.delete(id));
1165
- return newMessages;
1166
- });
1159
+ idsToRemove.push(...messageIds.slice(0, messageIds.length - maxMessages));
1160
+ newMap.set(convId, messageIds.slice(-maxMessages));
1167
1161
  }
1168
1162
  }
1169
1163
  return newMap;
1170
1164
  });
1165
+ if (idsToRemove.length > 0) {
1166
+ this._messages.update((messages) => {
1167
+ const newMessages = new Map(messages);
1168
+ idsToRemove.forEach((id) => newMessages.delete(id));
1169
+ return newMessages;
1170
+ });
1171
+ }
1171
1172
  }
1172
1173
  // =====================
1173
1174
  // Statistics
@@ -1685,15 +1686,15 @@ class AXComposerActionRegistry {
1685
1686
  if (!action) {
1686
1687
  throw new Error(`Action "${actionId}" not found`);
1687
1688
  }
1688
- // Check if visible and enabled
1689
1689
  if (!action.visible(context)) {
1690
1690
  throw new Error(`Action "${actionId}" is not visible`);
1691
1691
  }
1692
1692
  if (action.enabled && !action.enabled(context)) {
1693
1693
  throw new Error(`Action "${actionId}" is not enabled`);
1694
1694
  }
1695
- // Execute handler
1696
- await action.handler(context);
1695
+ if (action.handler) {
1696
+ await action.handler(context);
1697
+ }
1697
1698
  }
1698
1699
  /**
1699
1700
  * Update action badge
@@ -3311,19 +3312,19 @@ class AXConversationSharedStorage {
3311
3312
  'Can we schedule a team meeting?',
3312
3313
  'Great work team! 🎉',
3313
3314
  'I have some questions about the requirements',
3314
- 'Who\'s available for a sync?',
3315
+ "Who's available for a sync?",
3315
3316
  'Thanks for the update!',
3316
3317
  'Looking forward to the demo',
3317
3318
  'Could someone review the PR?',
3318
- 'Let\'s discuss this in the meeting',
3319
- 'I\'ll share the docs in a moment',
3320
- 'That\'s a solid approach',
3319
+ "Let's discuss this in the meeting",
3320
+ "I'll share the docs in a moment",
3321
+ "That's a solid approach",
3321
3322
  'What does everyone think?',
3322
3323
  'Agreed with the direction',
3323
3324
  'Need input from the team',
3324
3325
  'Status update: on track ✅',
3325
3326
  'Fantastic progress everyone!',
3326
- 'I\'ll follow up on this',
3327
+ "I'll follow up on this",
3327
3328
  'Working on it as we speak',
3328
3329
  'ETA: end of day',
3329
3330
  'Anyone free for a quick huddle?',
@@ -3347,7 +3348,7 @@ class AXConversationSharedStorage {
3347
3348
  '🔥 Hot fix deployed',
3348
3349
  '📈 Performance improvements live',
3349
3350
  '🎊 Celebrating our success!',
3350
- '📣 Don\'t miss the upcoming event',
3351
+ "📣 Don't miss the upcoming event",
3351
3352
  '🌟 Featured project of the week',
3352
3353
  '🔧 System update in progress',
3353
3354
  '📌 Pinned: Important resources',
@@ -3775,7 +3776,6 @@ class AXConversationIndexedDbConversationApi extends AXConversationApi {
3775
3776
  });
3776
3777
  }
3777
3778
  async getConversationMedia(_conversationId, _pagination) {
3778
- // Mock media gallery
3779
3779
  return {
3780
3780
  items: [],
3781
3781
  hasMore: false,
@@ -4796,6 +4796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
4796
4796
  class AXFileUploadService {
4797
4797
  constructor() {
4798
4798
  this.config = inject(CONVERSATION_CONFIG);
4799
+ this.platformId = inject(PLATFORM_ID);
4799
4800
  this.uploadProgress$ = new Subject();
4800
4801
  }
4801
4802
  /**
@@ -4853,6 +4854,9 @@ class AXFileUploadService {
4853
4854
  * Get video duration
4854
4855
  */
4855
4856
  async getVideoDuration(file) {
4857
+ if (!isPlatformBrowser(this.platformId)) {
4858
+ return 0;
4859
+ }
4856
4860
  return new Promise((resolve, reject) => {
4857
4861
  const video = document.createElement('video');
4858
4862
  video.preload = 'metadata';
@@ -4871,6 +4875,9 @@ class AXFileUploadService {
4871
4875
  * Get audio duration
4872
4876
  */
4873
4877
  async getAudioDuration(file) {
4878
+ if (!isPlatformBrowser(this.platformId)) {
4879
+ return 0;
4880
+ }
4874
4881
  return new Promise((resolve, reject) => {
4875
4882
  const audio = new Audio();
4876
4883
  audio.onloadedmetadata = () => {
@@ -5224,7 +5231,7 @@ class AXAudioPickerComponent {
5224
5231
  (change)="onFileInputChange($event)"
5225
5232
  />
5226
5233
  </div>
5227
- `, isInline: true, styles: [":host{display:block;width:100%}.audio-picker{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface));border-radius:.5rem;overflow:hidden}.picker-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-surface));background:rgb(var(--ax-sys-color-surface))}.picker-title{font-size:.875rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface))}.close-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:.25rem;cursor:pointer;color:rgb(var(--ax-sys-color-on-surface) / .65);transition:all .2s;font-size:1.125rem}.close-button:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}.picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;max-height:450px;cursor:pointer;border:2px dashed rgb(var(--ax-sys-color-border-surface));border-radius:.5rem;margin:.75rem;transition:all .2s}.picker-empty:hover,.picker-empty.drag-over{border-color:rgb(var(--ax-sys-color-primary-500));background:rgb(var(--ax-sys-color-primary-500) / .05)}.empty-icon{font-size:2.5rem;color:rgb(var(--ax-sys-color-on-surface) / .65);margin-bottom:.75rem}.empty-text{text-align:center}.empty-title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));margin-bottom:.25rem}.empty-subtitle{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.picker-audio{padding:.75rem}.audio-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.audio-count{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface-variant))}.audio-list{display:flex;flex-direction:column;gap:.625rem;margin-bottom:.75rem}.audio-item{display:flex;align-items:center;gap:.75rem;padding:.625rem;background:rgb(var(--ax-sys-color-surface));border-radius:.375rem;border:1px solid rgb(var(--ax-sys-color-border-surface));transition:background-color .2s}.audio-item:hover{background:rgb(var(--ax-sys-color-light-surface))}.audio-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:.375rem;background:rgb(var(--ax-sys-color-primary-500) / .1);color:rgb(var(--ax-sys-color-primary-500));font-size:1.125rem;flex-shrink:0}.audio-info{flex:1;min-width:0}.audio-name{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.25rem}.audio-meta{display:flex;gap:1rem;font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.remove-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:.25rem;cursor:pointer;color:rgb(var(--ax-sys-color-on-surface) / .65);transition:all .2s;flex-shrink:0;font-size:1rem}.remove-button:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}.caption-input{margin-top:.75rem}.picker-footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid rgb(var(--ax-sys-color-border-surface));background:rgb(var(--ax-sys-color-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: AXPickerHeaderComponent, selector: "ax-picker-header", inputs: ["title"], outputs: ["onClose"] }, { kind: "component", type: AXPickerFooterComponent, selector: "ax-picker-footer", inputs: ["sendText", "sendDisabled"], outputs: ["onCancel", "onSend"] }] }); }
5234
+ `, isInline: true, styles: [":host{display:block;width:100%}.audio-picker{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface));border-radius:.5rem;overflow:hidden}.picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;max-height:450px;cursor:pointer;border:2px dashed rgb(var(--ax-sys-color-border-surface));border-radius:.5rem;margin:.75rem;transition:all .2s}.picker-empty:hover,.picker-empty.drag-over{border-color:rgb(var(--ax-sys-color-primary-500));background:rgb(var(--ax-sys-color-primary-500) / .05)}.empty-icon{font-size:2.5rem;color:rgb(var(--ax-sys-color-on-surface) / .65);margin-bottom:.75rem}.empty-text{text-align:center}.empty-title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));margin-bottom:.25rem}.empty-subtitle{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.picker-audio{padding:.75rem}.audio-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.audio-count{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface-variant))}.audio-list{display:flex;flex-direction:column;gap:.625rem;margin-bottom:.75rem}.audio-item{display:flex;align-items:center;gap:.75rem;padding:.625rem;background:rgb(var(--ax-sys-color-surface));border-radius:.375rem;border:1px solid rgb(var(--ax-sys-color-border-surface));transition:background-color .2s}.audio-item:hover{background:rgb(var(--ax-sys-color-light-surface))}.audio-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:.375rem;background:rgb(var(--ax-sys-color-primary-500) / .1);color:rgb(var(--ax-sys-color-primary-500));font-size:1.125rem;flex-shrink:0}.audio-info{flex:1;min-width:0}.audio-name{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.25rem}.audio-meta{display:flex;gap:1rem;font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.remove-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:.25rem;cursor:pointer;color:rgb(var(--ax-sys-color-on-surface) / .65);transition:all .2s;flex-shrink:0;font-size:1rem}.remove-button:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}.caption-input{margin-top:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: AXPickerHeaderComponent, selector: "ax-picker-header", inputs: ["title"], outputs: ["onClose"] }, { kind: "component", type: AXPickerFooterComponent, selector: "ax-picker-footer", inputs: ["sendText", "sendDisabled"], outputs: ["onCancel", "onSend"] }] }); }
5228
5235
  }
5229
5236
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAudioPickerComponent, decorators: [{
5230
5237
  type: Component,
@@ -5319,7 +5326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
5319
5326
  (change)="onFileInputChange($event)"
5320
5327
  />
5321
5328
  </div>
5322
- `, styles: [":host{display:block;width:100%}.audio-picker{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface));border-radius:.5rem;overflow:hidden}.picker-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-surface));background:rgb(var(--ax-sys-color-surface))}.picker-title{font-size:.875rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface))}.close-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:.25rem;cursor:pointer;color:rgb(var(--ax-sys-color-on-surface) / .65);transition:all .2s;font-size:1.125rem}.close-button:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}.picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;max-height:450px;cursor:pointer;border:2px dashed rgb(var(--ax-sys-color-border-surface));border-radius:.5rem;margin:.75rem;transition:all .2s}.picker-empty:hover,.picker-empty.drag-over{border-color:rgb(var(--ax-sys-color-primary-500));background:rgb(var(--ax-sys-color-primary-500) / .05)}.empty-icon{font-size:2.5rem;color:rgb(var(--ax-sys-color-on-surface) / .65);margin-bottom:.75rem}.empty-text{text-align:center}.empty-title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));margin-bottom:.25rem}.empty-subtitle{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.picker-audio{padding:.75rem}.audio-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.audio-count{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface-variant))}.audio-list{display:flex;flex-direction:column;gap:.625rem;margin-bottom:.75rem}.audio-item{display:flex;align-items:center;gap:.75rem;padding:.625rem;background:rgb(var(--ax-sys-color-surface));border-radius:.375rem;border:1px solid rgb(var(--ax-sys-color-border-surface));transition:background-color .2s}.audio-item:hover{background:rgb(var(--ax-sys-color-light-surface))}.audio-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:.375rem;background:rgb(var(--ax-sys-color-primary-500) / .1);color:rgb(var(--ax-sys-color-primary-500));font-size:1.125rem;flex-shrink:0}.audio-info{flex:1;min-width:0}.audio-name{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.25rem}.audio-meta{display:flex;gap:1rem;font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.remove-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:.25rem;cursor:pointer;color:rgb(var(--ax-sys-color-on-surface) / .65);transition:all .2s;flex-shrink:0;font-size:1rem}.remove-button:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}.caption-input{margin-top:.75rem}.picker-footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid rgb(var(--ax-sys-color-border-surface));background:rgb(var(--ax-sys-color-surface))}\n"] }]
5329
+ `, styles: [":host{display:block;width:100%}.audio-picker{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface));border-radius:.5rem;overflow:hidden}.picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;max-height:450px;cursor:pointer;border:2px dashed rgb(var(--ax-sys-color-border-surface));border-radius:.5rem;margin:.75rem;transition:all .2s}.picker-empty:hover,.picker-empty.drag-over{border-color:rgb(var(--ax-sys-color-primary-500));background:rgb(var(--ax-sys-color-primary-500) / .05)}.empty-icon{font-size:2.5rem;color:rgb(var(--ax-sys-color-on-surface) / .65);margin-bottom:.75rem}.empty-text{text-align:center}.empty-title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));margin-bottom:.25rem}.empty-subtitle{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.picker-audio{padding:.75rem}.audio-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.audio-count{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface-variant))}.audio-list{display:flex;flex-direction:column;gap:.625rem;margin-bottom:.75rem}.audio-item{display:flex;align-items:center;gap:.75rem;padding:.625rem;background:rgb(var(--ax-sys-color-surface));border-radius:.375rem;border:1px solid rgb(var(--ax-sys-color-border-surface));transition:background-color .2s}.audio-item:hover{background:rgb(var(--ax-sys-color-light-surface))}.audio-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:.375rem;background:rgb(var(--ax-sys-color-primary-500) / .1);color:rgb(var(--ax-sys-color-primary-500));font-size:1.125rem;flex-shrink:0}.audio-info{flex:1;min-width:0}.audio-name{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.25rem}.audio-meta{display:flex;gap:1rem;font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.remove-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:.25rem;cursor:pointer;color:rgb(var(--ax-sys-color-on-surface) / .65);transition:all .2s;flex-shrink:0;font-size:1rem}.remove-button:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}.caption-input{margin-top:.75rem}\n"] }]
5323
5330
  }] });
5324
5331
 
5325
5332
  /**
@@ -5628,7 +5635,6 @@ class AXEmojiTabComponent {
5628
5635
  }
5629
5636
  return classes.join(' ');
5630
5637
  }
5631
- /** Handle search change */
5632
5638
  onSearchChange(event) {
5633
5639
  this.searchQuery.set(event?.value || '');
5634
5640
  }
@@ -5746,6 +5752,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
5746
5752
  * Sticker Tab Component
5747
5753
  * Sticker picker for composer popup
5748
5754
  */
5755
+ const AX_STICKER_API_KEY = new InjectionToken('AX_STICKER_API_KEY', {
5756
+ providedIn: 'root',
5757
+ factory: () => 'sXpGFDGZs0Dv1mmNFvYaGUvYwKX0PWIh',
5758
+ });
5749
5759
  // Sticker categories using Giphy API
5750
5760
  const STICKER_CATEGORIES = [
5751
5761
  { id: 'trending', name: 'Trending', icon: '🔥', searchTerm: 'trending' },
@@ -5758,27 +5768,18 @@ const STICKER_CATEGORIES = [
5758
5768
  class AXStickerTabComponent {
5759
5769
  constructor() {
5760
5770
  this.http = inject(HttpClient);
5761
- /** Sticker selected event */
5771
+ this.destroyRef = inject(DestroyRef);
5772
+ this.apiKey = inject(AX_STICKER_API_KEY);
5762
5773
  this.itemSelected = output();
5763
- /** Search query */
5764
5774
  this.searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
5765
- /** Active category ID */
5766
- this.activeCategoryId = signal('trending', ...(ngDevMode ? [{ debugName: "activeCategoryId" }] : []));
5767
- /** Sticker categories */
5768
- this.stickerCategories = STICKER_CATEGORIES;
5769
- /** Active stickers */
5770
5775
  this.activeStickers = signal([], ...(ngDevMode ? [{ debugName: "activeStickers" }] : []));
5771
- /** Loading state */
5772
5776
  this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
5773
- /** Skeleton items array */
5777
+ this.stickerCategories = STICKER_CATEGORIES;
5774
5778
  this.skeletonItems = Array.from({ length: 20 }, (_, i) => i);
5775
- // Giphy API key - using public demo key (replace with your own in production)
5776
- this.GIPHY_API_KEY = 'sXpGFDGZs0Dv1mmNFvYaGUvYwKX0PWIh';
5777
- // Load stickers when category changes
5779
+ this.activeCategoryId = signal('trending', ...(ngDevMode ? [{ debugName: "activeCategoryId" }] : []));
5778
5780
  effect(() => {
5779
5781
  const categoryId = this.activeCategoryId();
5780
5782
  const query = this.searchQuery();
5781
- // If searching, use search API, otherwise use category
5782
5783
  if (query.trim()) {
5783
5784
  this.searchStickers(query);
5784
5785
  }
@@ -5786,8 +5787,11 @@ class AXStickerTabComponent {
5786
5787
  this.loadStickers(categoryId);
5787
5788
  }
5788
5789
  });
5790
+ this.destroyRef.onDestroy(() => {
5791
+ if (this.searchTimeout)
5792
+ clearTimeout(this.searchTimeout);
5793
+ });
5789
5794
  }
5790
- /** Load stickers from Giphy API */
5791
5795
  async loadStickers(categoryId) {
5792
5796
  this.loading.set(true);
5793
5797
  try {
@@ -5795,22 +5799,10 @@ class AXStickerTabComponent {
5795
5799
  if (!category)
5796
5800
  return;
5797
5801
  const endpoint = categoryId === 'trending'
5798
- ? `https://api.giphy.com/v1/stickers/trending?api_key=${this.GIPHY_API_KEY}&limit=20`
5799
- : `https://api.giphy.com/v1/stickers/search?api_key=${this.GIPHY_API_KEY}&q=${category.searchTerm}&limit=20`;
5800
- const response = await this.http.get(endpoint).toPromise();
5801
- if (response?.data) {
5802
- const stickers = response.data.map((item) => ({
5803
- type: 'sticker',
5804
- id: item.id,
5805
- packId: categoryId,
5806
- url: item.images.fixed_height.url,
5807
- animated: item.images.fixed_height.url.endsWith('.gif'),
5808
- width: parseInt(item.images.fixed_height.width),
5809
- height: parseInt(item.images.fixed_height.height),
5810
- emoji: item.title || 'Sticker',
5811
- }));
5812
- this.activeStickers.set(stickers);
5813
- }
5802
+ ? `https://api.giphy.com/v1/stickers/trending?api_key=${this.apiKey}&limit=20`
5803
+ : `https://api.giphy.com/v1/stickers/search?api_key=${this.apiKey}&q=${category.searchTerm}&limit=20`;
5804
+ const response = await firstValueFrom(this.http.get(endpoint));
5805
+ this.activeStickers.set(this.mapGiphyStickers(response, categoryId));
5814
5806
  }
5815
5807
  catch (error) {
5816
5808
  console.error('Failed to load stickers:', error);
@@ -5825,30 +5817,16 @@ class AXStickerTabComponent {
5825
5817
  this.activeCategoryId.set(categoryId);
5826
5818
  this.searchQuery.set('');
5827
5819
  }
5828
- /** Search stickers using Giphy API */
5829
5820
  async searchStickers(query) {
5830
5821
  if (!query.trim()) {
5831
- // If empty, reload current category
5832
5822
  this.loadStickers(this.activeCategoryId());
5833
5823
  return;
5834
5824
  }
5835
5825
  this.loading.set(true);
5836
5826
  try {
5837
- const endpoint = `https://api.giphy.com/v1/stickers/search?api_key=${this.GIPHY_API_KEY}&q=${encodeURIComponent(query)}&limit=20`;
5838
- const response = await this.http.get(endpoint).toPromise();
5839
- if (response?.data) {
5840
- const stickers = response.data.map((item) => ({
5841
- type: 'sticker',
5842
- id: item.id,
5843
- packId: 'search',
5844
- url: item.images.fixed_height.url,
5845
- animated: item.images.fixed_height.url.endsWith('.gif'),
5846
- width: parseInt(item.images.fixed_height.width),
5847
- height: parseInt(item.images.fixed_height.height),
5848
- emoji: item.title || 'Sticker',
5849
- }));
5850
- this.activeStickers.set(stickers);
5851
- }
5827
+ const endpoint = `https://api.giphy.com/v1/stickers/search?api_key=${this.apiKey}&q=${encodeURIComponent(query)}&limit=20`;
5828
+ const response = await firstValueFrom(this.http.get(endpoint));
5829
+ this.activeStickers.set(this.mapGiphyStickers(response, 'search'));
5852
5830
  }
5853
5831
  catch (error) {
5854
5832
  console.error('Failed to search stickers:', error);
@@ -5858,15 +5836,12 @@ class AXStickerTabComponent {
5858
5836
  this.loading.set(false);
5859
5837
  }
5860
5838
  }
5861
- /** Handle search change with debouncing */
5862
5839
  onSearchChange(event) {
5863
5840
  const query = event?.value || '';
5864
- // Clear existing timeout
5865
5841
  if (this.searchTimeout) {
5866
5842
  clearTimeout(this.searchTimeout);
5867
5843
  }
5868
- // Debounce search by 500ms
5869
- this.searchTimeout = window.setTimeout(() => {
5844
+ this.searchTimeout = setTimeout(() => {
5870
5845
  this.searchQuery.set(query);
5871
5846
  }, 500);
5872
5847
  }
@@ -5878,7 +5853,20 @@ class AXStickerTabComponent {
5878
5853
  }
5879
5854
  return classes.join(' ');
5880
5855
  }
5881
- /** Select sticker */
5856
+ mapGiphyStickers(response, packId) {
5857
+ if (!response?.data)
5858
+ return [];
5859
+ return response.data.map((item) => ({
5860
+ type: 'sticker',
5861
+ id: item.id,
5862
+ packId,
5863
+ url: item.images.fixed_height.url,
5864
+ animated: item.images.fixed_height.url.endsWith('.gif'),
5865
+ width: Number(item.images.fixed_height.width),
5866
+ height: Number(item.images.fixed_height.height),
5867
+ emoji: item.title || 'Sticker',
5868
+ }));
5869
+ }
5882
5870
  selectSticker(sticker) {
5883
5871
  this.itemSelected.emit(sticker);
5884
5872
  }
@@ -6041,16 +6029,13 @@ class AXFilePickerComponent {
6041
6029
  this.conversationService = inject(AXConversationService);
6042
6030
  this.fileUploadService = inject(AXFileUploadService);
6043
6031
  this.messageApi = inject(AXMessageApi);
6032
+ this.composerService = inject(AXComposerService);
6044
6033
  this.conversation = input.required(...(ngDevMode ? [{ debugName: "conversation" }] : []));
6045
- this.service = input(...(ngDevMode ? [undefined, { debugName: "service" }] : []));
6046
6034
  this.fileInput = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInput" }] : []));
6047
6035
  this.files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
6048
6036
  this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
6049
6037
  this.isUploading = signal(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : []));
6050
6038
  }
6051
- get composerService() {
6052
- return this.service() || inject(AXComposerService);
6053
- }
6054
6039
  triggerFileInput() {
6055
6040
  this.fileInput()?.nativeElement.click();
6056
6041
  }
@@ -6217,7 +6202,7 @@ class AXFilePickerComponent {
6217
6202
  return `${uploadedCount}/${fileList.length} Ready`;
6218
6203
  }
6219
6204
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFilePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6220
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXFilePickerComponent, isStandalone: true, selector: "ax-conversation-file-picker", inputs: { conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: true, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
6205
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXFilePickerComponent, isStandalone: true, selector: "ax-conversation-file-picker", inputs: { conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
6221
6206
  <div class="file-picker">
6222
6207
  <ax-picker-header [title]="'Attach Files'" (onClose)="cancel()" />
6223
6208
 
@@ -6276,9 +6261,9 @@ class AXFilePickerComponent {
6276
6261
  @if (file.uploading) {
6277
6262
  <span>Uploading... {{ file.uploadProgress }}%</span>
6278
6263
  } @else if (file.uploaded) {
6279
- <span class="upload-success">✓ Uploaded</span>
6264
+ <span class="upload-success"><i class="fa-light fa-check"></i> Uploaded</span>
6280
6265
  } @else if (file.error) {
6281
- <span class="upload-error">✗ {{ file.error }}</span>
6266
+ <span class="upload-error"><i class="fa-light fa-xmark"></i> {{ file.error }}</span>
6282
6267
  } @else {
6283
6268
  <span>{{ formatFileSize(file.file.size) }}</span>
6284
6269
  }
@@ -6318,7 +6303,7 @@ class AXFilePickerComponent {
6318
6303
  <!-- Hidden File Input -->
6319
6304
  <input #fileInput type="file" accept="*/*" multiple style="display: none;" (change)="onFileInputChange($event)" />
6320
6305
  </div>
6321
- `, isInline: true, styles: [":host{display:block;width:100%}.file-picker{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface));border-radius:.5rem;overflow:hidden;max-height:450px}.picker-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-surface));background:rgb(var(--ax-sys-color-surface))}.picker-title{font-size:.875rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface))}.close-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:.25rem;cursor:pointer;color:rgb(var(--ax-sys-color-on-surface) / .65);transition:all .2s;font-size:1.125rem}.close-button:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}.picker-content{flex:1;overflow-y:auto}.picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;min-height:160px;cursor:pointer;border:2px dashed rgb(var(--ax-sys-color-border-surface));border-radius:.5rem;margin:.75rem;transition:all .2s}.picker-empty:hover,.picker-empty.drag-over{border-color:rgb(var(--ax-sys-color-primary-500));background:rgb(var(--ax-sys-color-primary-500) / .05)}.empty-icon{font-size:2.5rem;color:rgb(var(--ax-sys-color-on-surface) / .65);margin-bottom:.75rem}.empty-text{text-align:center}.empty-title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));margin-bottom:.25rem}.empty-subtitle{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.picker-body{padding:.75rem}.body-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.item-count{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface) / .65)}.files-list{display:flex;flex-direction:column;gap:.625rem}.file-item{display:flex;align-items:center;gap:.75rem;padding:.625rem;background:rgb(var(--ax-sys-color-surface));border-radius:.375rem;border:1px solid rgb(var(--ax-sys-color-border-surface));transition:background-color .2s}.file-item:hover{background:rgb(var(--ax-sys-color-light-surface))}.file-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:.375rem;background:rgb(var(--ax-sys-color-primary-500) / .1);color:rgb(var(--ax-sys-color-primary-500));font-size:1.25rem;flex-shrink:0;overflow:hidden}.file-icon img{width:100%;height:100%;object-fit:cover}.file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.file-name{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.progress-container{width:100%;margin-top:.125rem}.upload-success{color:rgb(var(--ax-sys-color-success-600));font-weight:500}.upload-error{color:rgb(var(--ax-sys-color-danger-600));font-weight:500}.remove-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:.25rem;cursor:pointer;color:rgb(var(--ax-sys-color-on-surface) / .65);transition:all .2s;flex-shrink:0;font-size:1rem}.remove-button:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}.picker-footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid rgb(var(--ax-sys-color-border-surface));background:rgb(var(--ax-sys-color-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXProgressBarModule }, { kind: "component", type: i3$1.AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "component", type: AXPickerHeaderComponent, selector: "ax-picker-header", inputs: ["title"], outputs: ["onClose"] }, { kind: "component", type: AXPickerFooterComponent, selector: "ax-picker-footer", inputs: ["sendText", "sendDisabled"], outputs: ["onCancel", "onSend"] }] }); }
6306
+ `, isInline: true, styles: [":host{display:block;width:100%}.file-picker{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface));border-radius:.5rem;overflow:hidden;max-height:450px}.picker-content{flex:1;overflow-y:auto}.picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;min-height:160px;cursor:pointer;border:2px dashed rgb(var(--ax-sys-color-border-surface));border-radius:.5rem;margin:.75rem;transition:all .2s}.picker-empty:hover,.picker-empty.drag-over{border-color:rgb(var(--ax-sys-color-primary-500));background:rgb(var(--ax-sys-color-primary-500) / .05)}.empty-icon{font-size:2.5rem;color:rgb(var(--ax-sys-color-on-surface) / .65);margin-bottom:.75rem}.empty-text{text-align:center}.empty-title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));margin-bottom:.25rem}.empty-subtitle{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.picker-body{padding:.75rem}.body-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.item-count{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface) / .65)}.files-list{display:flex;flex-direction:column;gap:.625rem}.file-item{display:flex;align-items:center;gap:.75rem;padding:.625rem;background:rgb(var(--ax-sys-color-surface));border-radius:.375rem;border:1px solid rgb(var(--ax-sys-color-border-surface));transition:background-color .2s}.file-item:hover{background:rgb(var(--ax-sys-color-light-surface))}.file-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:.375rem;background:rgb(var(--ax-sys-color-primary-500) / .1);color:rgb(var(--ax-sys-color-primary-500));font-size:1.25rem;flex-shrink:0;overflow:hidden}.file-icon img{width:100%;height:100%;object-fit:cover}.file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.file-name{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.progress-container{width:100%;margin-top:.125rem}.upload-success{color:rgb(var(--ax-sys-color-success-600));font-weight:500}.upload-error{color:rgb(var(--ax-sys-color-danger-600));font-weight:500}.remove-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:.25rem;cursor:pointer;color:rgb(var(--ax-sys-color-on-surface) / .65);transition:all .2s;flex-shrink:0;font-size:1rem}.remove-button:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXProgressBarModule }, { kind: "component", type: i3$1.AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { kind: "component", type: AXPickerHeaderComponent, selector: "ax-picker-header", inputs: ["title"], outputs: ["onClose"] }, { kind: "component", type: AXPickerFooterComponent, selector: "ax-picker-footer", inputs: ["sendText", "sendDisabled"], outputs: ["onCancel", "onSend"] }] }); }
6322
6307
  }
6323
6308
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFilePickerComponent, decorators: [{
6324
6309
  type: Component,
@@ -6388,9 +6373,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
6388
6373
  @if (file.uploading) {
6389
6374
  <span>Uploading... {{ file.uploadProgress }}%</span>
6390
6375
  } @else if (file.uploaded) {
6391
- <span class="upload-success">✓ Uploaded</span>
6376
+ <span class="upload-success"><i class="fa-light fa-check"></i> Uploaded</span>
6392
6377
  } @else if (file.error) {
6393
- <span class="upload-error">✗ {{ file.error }}</span>
6378
+ <span class="upload-error"><i class="fa-light fa-xmark"></i> {{ file.error }}</span>
6394
6379
  } @else {
6395
6380
  <span>{{ formatFileSize(file.file.size) }}</span>
6396
6381
  }
@@ -6430,7 +6415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
6430
6415
  <!-- Hidden File Input -->
6431
6416
  <input #fileInput type="file" accept="*/*" multiple style="display: none;" (change)="onFileInputChange($event)" />
6432
6417
  </div>
6433
- `, styles: [":host{display:block;width:100%}.file-picker{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface));border-radius:.5rem;overflow:hidden;max-height:450px}.picker-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-surface));background:rgb(var(--ax-sys-color-surface))}.picker-title{font-size:.875rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface))}.close-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:.25rem;cursor:pointer;color:rgb(var(--ax-sys-color-on-surface) / .65);transition:all .2s;font-size:1.125rem}.close-button:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}.picker-content{flex:1;overflow-y:auto}.picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;min-height:160px;cursor:pointer;border:2px dashed rgb(var(--ax-sys-color-border-surface));border-radius:.5rem;margin:.75rem;transition:all .2s}.picker-empty:hover,.picker-empty.drag-over{border-color:rgb(var(--ax-sys-color-primary-500));background:rgb(var(--ax-sys-color-primary-500) / .05)}.empty-icon{font-size:2.5rem;color:rgb(var(--ax-sys-color-on-surface) / .65);margin-bottom:.75rem}.empty-text{text-align:center}.empty-title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));margin-bottom:.25rem}.empty-subtitle{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.picker-body{padding:.75rem}.body-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.item-count{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface) / .65)}.files-list{display:flex;flex-direction:column;gap:.625rem}.file-item{display:flex;align-items:center;gap:.75rem;padding:.625rem;background:rgb(var(--ax-sys-color-surface));border-radius:.375rem;border:1px solid rgb(var(--ax-sys-color-border-surface));transition:background-color .2s}.file-item:hover{background:rgb(var(--ax-sys-color-light-surface))}.file-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:.375rem;background:rgb(var(--ax-sys-color-primary-500) / .1);color:rgb(var(--ax-sys-color-primary-500));font-size:1.25rem;flex-shrink:0;overflow:hidden}.file-icon img{width:100%;height:100%;object-fit:cover}.file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.file-name{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.progress-container{width:100%;margin-top:.125rem}.upload-success{color:rgb(var(--ax-sys-color-success-600));font-weight:500}.upload-error{color:rgb(var(--ax-sys-color-danger-600));font-weight:500}.remove-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:.25rem;cursor:pointer;color:rgb(var(--ax-sys-color-on-surface) / .65);transition:all .2s;flex-shrink:0;font-size:1rem}.remove-button:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}.picker-footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid rgb(var(--ax-sys-color-border-surface));background:rgb(var(--ax-sys-color-surface))}\n"] }]
6418
+ `, styles: [":host{display:block;width:100%}.file-picker{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface));border-radius:.5rem;overflow:hidden;max-height:450px}.picker-content{flex:1;overflow-y:auto}.picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;min-height:160px;cursor:pointer;border:2px dashed rgb(var(--ax-sys-color-border-surface));border-radius:.5rem;margin:.75rem;transition:all .2s}.picker-empty:hover,.picker-empty.drag-over{border-color:rgb(var(--ax-sys-color-primary-500));background:rgb(var(--ax-sys-color-primary-500) / .05)}.empty-icon{font-size:2.5rem;color:rgb(var(--ax-sys-color-on-surface) / .65);margin-bottom:.75rem}.empty-text{text-align:center}.empty-title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));margin-bottom:.25rem}.empty-subtitle{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.picker-body{padding:.75rem}.body-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.item-count{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface) / .65)}.files-list{display:flex;flex-direction:column;gap:.625rem}.file-item{display:flex;align-items:center;gap:.75rem;padding:.625rem;background:rgb(var(--ax-sys-color-surface));border-radius:.375rem;border:1px solid rgb(var(--ax-sys-color-border-surface));transition:background-color .2s}.file-item:hover{background:rgb(var(--ax-sys-color-light-surface))}.file-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:.375rem;background:rgb(var(--ax-sys-color-primary-500) / .1);color:rgb(var(--ax-sys-color-primary-500));font-size:1.25rem;flex-shrink:0;overflow:hidden}.file-icon img{width:100%;height:100%;object-fit:cover}.file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.file-name{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.progress-container{width:100%;margin-top:.125rem}.upload-success{color:rgb(var(--ax-sys-color-success-600));font-weight:500}.upload-error{color:rgb(var(--ax-sys-color-danger-600));font-weight:500}.remove-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:.25rem;cursor:pointer;color:rgb(var(--ax-sys-color-on-surface) / .65);transition:all .2s;flex-shrink:0;font-size:1rem}.remove-button:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}\n"] }]
6434
6419
  }] });
6435
6420
 
6436
6421
  /**
@@ -6609,7 +6594,7 @@ class AXImagePickerComponent {
6609
6594
  (change)="onFileInputChange($event)"
6610
6595
  />
6611
6596
  </div>
6612
- `, isInline: true, styles: [":host{display:block;width:100%}.image-picker{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface));border-radius:.5rem;overflow:hidden}.picker-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-surface));background:rgb(var(--ax-sys-color-surface))}.picker-title{font-size:.875rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface))}.close-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:.25rem;cursor:pointer;color:rgb(var(--ax-sys-color-on-surface) / .65);transition:all .2s;font-size:1.125rem}.close-button:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}.picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;max-height:450px;cursor:pointer;border:2px dashed rgb(var(--ax-sys-color-border-surface));border-radius:.5rem;margin:.75rem;transition:all .2s}.picker-empty:hover,.picker-empty.drag-over{border-color:rgb(var(--ax-sys-color-primary-500));background:rgb(var(--ax-sys-color-primary-500) / .05)}.empty-icon{font-size:2.5rem;color:rgb(var(--ax-sys-color-on-surface) / .65);margin-bottom:.75rem}.empty-text{text-align:center}.empty-title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));margin-bottom:.25rem}.empty-subtitle{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.picker-images{padding:.75rem}.images-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.images-count{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface) / .65)}.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem;margin-bottom:.75rem}.image-item{display:flex;flex-direction:column;gap:.5rem}.image-preview{position:relative;aspect-ratio:1;border-radius:.375rem;overflow:hidden;background:rgb(var(--ax-sys-color-light-surface));border:1px solid rgb(var(--ax-sys-color-border-surface))}.image-preview img{width:100%;height:100%;object-fit:cover}.remove-button{position:absolute;top:.25rem;right:.25rem;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;background:rgb(var(--ax-sys-color-danger-500));color:rgb(var(--ax-sys-color-light));border-radius:50%;cursor:pointer;opacity:0;transition:opacity .2s;font-size:.75rem;box-shadow:0 2px 4px #0003}.image-item:hover .remove-button{opacity:1}.image-info{display:flex;flex-direction:column;gap:.25rem}.image-name{font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-size{font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.caption-input{margin-top:.75rem}.picker-footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid rgb(var(--ax-sys-color-border-surface));background:rgb(var(--ax-sys-color-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: AXPickerHeaderComponent, selector: "ax-picker-header", inputs: ["title"], outputs: ["onClose"] }, { kind: "component", type: AXPickerFooterComponent, selector: "ax-picker-footer", inputs: ["sendText", "sendDisabled"], outputs: ["onCancel", "onSend"] }] }); }
6597
+ `, isInline: true, styles: [":host{display:block;width:100%}.image-picker{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface));border-radius:.5rem;overflow:hidden}.picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;max-height:450px;cursor:pointer;border:2px dashed rgb(var(--ax-sys-color-border-surface));border-radius:.5rem;margin:.75rem;transition:all .2s}.picker-empty:hover,.picker-empty.drag-over{border-color:rgb(var(--ax-sys-color-primary-500));background:rgb(var(--ax-sys-color-primary-500) / .05)}.empty-icon{font-size:2.5rem;color:rgb(var(--ax-sys-color-on-surface) / .65);margin-bottom:.75rem}.empty-text{text-align:center}.empty-title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));margin-bottom:.25rem}.empty-subtitle{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.picker-images{padding:.75rem}.images-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.images-count{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface) / .65)}.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem;margin-bottom:.75rem}.image-item{display:flex;flex-direction:column;gap:.5rem}.image-preview{position:relative;aspect-ratio:1;border-radius:.375rem;overflow:hidden;background:rgb(var(--ax-sys-color-light-surface));border:1px solid rgb(var(--ax-sys-color-border-surface))}.image-preview img{width:100%;height:100%;object-fit:cover}.remove-button{position:absolute;top:.25rem;right:.25rem;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;background:rgb(var(--ax-sys-color-danger-500));color:rgb(var(--ax-sys-color-light));border-radius:50%;cursor:pointer;opacity:0;transition:opacity .2s;font-size:.75rem;box-shadow:0 2px 4px #0003}.image-item:hover .remove-button{opacity:1}.image-info{display:flex;flex-direction:column;gap:.25rem}.image-name{font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-size{font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.caption-input{margin-top:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: AXPickerHeaderComponent, selector: "ax-picker-header", inputs: ["title"], outputs: ["onClose"] }, { kind: "component", type: AXPickerFooterComponent, selector: "ax-picker-footer", inputs: ["sendText", "sendDisabled"], outputs: ["onCancel", "onSend"] }] }); }
6613
6598
  }
6614
6599
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImagePickerComponent, decorators: [{
6615
6600
  type: Component,
@@ -6699,7 +6684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
6699
6684
  (change)="onFileInputChange($event)"
6700
6685
  />
6701
6686
  </div>
6702
- `, styles: [":host{display:block;width:100%}.image-picker{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface));border-radius:.5rem;overflow:hidden}.picker-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-surface));background:rgb(var(--ax-sys-color-surface))}.picker-title{font-size:.875rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface))}.close-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:.25rem;cursor:pointer;color:rgb(var(--ax-sys-color-on-surface) / .65);transition:all .2s;font-size:1.125rem}.close-button:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}.picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;max-height:450px;cursor:pointer;border:2px dashed rgb(var(--ax-sys-color-border-surface));border-radius:.5rem;margin:.75rem;transition:all .2s}.picker-empty:hover,.picker-empty.drag-over{border-color:rgb(var(--ax-sys-color-primary-500));background:rgb(var(--ax-sys-color-primary-500) / .05)}.empty-icon{font-size:2.5rem;color:rgb(var(--ax-sys-color-on-surface) / .65);margin-bottom:.75rem}.empty-text{text-align:center}.empty-title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));margin-bottom:.25rem}.empty-subtitle{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.picker-images{padding:.75rem}.images-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.images-count{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface) / .65)}.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem;margin-bottom:.75rem}.image-item{display:flex;flex-direction:column;gap:.5rem}.image-preview{position:relative;aspect-ratio:1;border-radius:.375rem;overflow:hidden;background:rgb(var(--ax-sys-color-light-surface));border:1px solid rgb(var(--ax-sys-color-border-surface))}.image-preview img{width:100%;height:100%;object-fit:cover}.remove-button{position:absolute;top:.25rem;right:.25rem;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;background:rgb(var(--ax-sys-color-danger-500));color:rgb(var(--ax-sys-color-light));border-radius:50%;cursor:pointer;opacity:0;transition:opacity .2s;font-size:.75rem;box-shadow:0 2px 4px #0003}.image-item:hover .remove-button{opacity:1}.image-info{display:flex;flex-direction:column;gap:.25rem}.image-name{font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-size{font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.caption-input{margin-top:.75rem}.picker-footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid rgb(var(--ax-sys-color-border-surface));background:rgb(var(--ax-sys-color-surface))}\n"] }]
6687
+ `, styles: [":host{display:block;width:100%}.image-picker{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface));border-radius:.5rem;overflow:hidden}.picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;max-height:450px;cursor:pointer;border:2px dashed rgb(var(--ax-sys-color-border-surface));border-radius:.5rem;margin:.75rem;transition:all .2s}.picker-empty:hover,.picker-empty.drag-over{border-color:rgb(var(--ax-sys-color-primary-500));background:rgb(var(--ax-sys-color-primary-500) / .05)}.empty-icon{font-size:2.5rem;color:rgb(var(--ax-sys-color-on-surface) / .65);margin-bottom:.75rem}.empty-text{text-align:center}.empty-title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));margin-bottom:.25rem}.empty-subtitle{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface) / .65)}.picker-images{padding:.75rem}.images-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.images-count{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface) / .65)}.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem;margin-bottom:.75rem}.image-item{display:flex;flex-direction:column;gap:.5rem}.image-preview{position:relative;aspect-ratio:1;border-radius:.375rem;overflow:hidden;background:rgb(var(--ax-sys-color-light-surface));border:1px solid rgb(var(--ax-sys-color-border-surface))}.image-preview img{width:100%;height:100%;object-fit:cover}.remove-button{position:absolute;top:.25rem;right:.25rem;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;background:rgb(var(--ax-sys-color-danger-500));color:rgb(var(--ax-sys-color-light));border-radius:50%;cursor:pointer;opacity:0;transition:opacity .2s;font-size:.75rem;box-shadow:0 2px 4px #0003}.image-item:hover .remove-button{opacity:1}.image-info{display:flex;flex-direction:column;gap:.25rem}.image-name{font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-size{font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.caption-input{margin-top:.75rem}\n"] }]
6703
6688
  }] });
6704
6689
 
6705
6690
  /**
@@ -6711,7 +6696,6 @@ class AXLocationPickerComponent {
6711
6696
  this.composerService = inject(AXComposerService);
6712
6697
  this.conversationService = inject(AXConversationService);
6713
6698
  this.conversation = input.required(...(ngDevMode ? [{ debugName: "conversation" }] : []));
6714
- this.onClose = output();
6715
6699
  // Default location
6716
6700
  this.currentLocation = signal({
6717
6701
  type: 'location',
@@ -6747,7 +6731,7 @@ class AXLocationPickerComponent {
6747
6731
  this.composerService.hideComponent();
6748
6732
  }
6749
6733
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXLocationPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6750
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXLocationPickerComponent, isStandalone: true, selector: "ax-conversation-location-picker", inputs: { conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
6734
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXLocationPickerComponent, isStandalone: true, selector: "ax-conversation-location-picker", inputs: { conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
6751
6735
  <div class="location-picker">
6752
6736
  <ax-picker-header [title]="'Send Location'" (onClose)="cancel()" />
6753
6737
 
@@ -7020,7 +7004,7 @@ class AXVideoPickerComponent {
7020
7004
  (change)="onFileInputChange($event)"
7021
7005
  />
7022
7006
  </div>
7023
- `, isInline: true, styles: [":host{display:block;width:100%}.video-picker{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface));border-radius:.5rem;overflow:hidden}.picker-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid rgb(var(--ax-sys-color-border));background:rgb(var(--ax-sys-color-surface))}.picker-title{font-size:.875rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface))}.close-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:.25rem;cursor:pointer;color:rgb(var(--ax-sys-color-on-surface-variant));transition:all .2s;font-size:1.125rem}.close-button:hover{background:rgb(var(--ax-sys-color-error) / .1);color:rgb(var(--ax-sys-color-error))}.picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;max-height:450px;cursor:pointer;border:2px dashed rgb(var(--ax-sys-color-border));border-radius:.5rem;margin:.75rem;transition:all .2s}.picker-empty:hover,.picker-empty.drag-over{border-color:rgb(var(--ax-sys-color-primary));background:rgb(var(--ax-sys-color-primary) / .05)}.empty-icon{font-size:2.5rem;color:rgb(var(--ax-sys-color-on-surface-variant));margin-bottom:.75rem}.empty-text{text-align:center}.empty-title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));margin-bottom:.25rem}.empty-subtitle{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.picker-videos{padding:.75rem}.videos-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.videos-count{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface-variant))}.videos-list{display:flex;flex-direction:column;gap:.625rem;margin-bottom:.75rem}.video-item{display:flex;gap:.75rem;padding:.625rem;background:rgb(var(--ax-sys-color-surface));border-radius:.375rem;border:1px solid rgb(var(--ax-sys-color-border))}.video-preview{position:relative;width:120px;height:68px;flex-shrink:0;border-radius:.375rem;overflow:hidden;background:rgb(var(--ax-sys-color-surface-variant))}.video-preview video{width:100%;height:100%;object-fit:cover}.video-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:2rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.remove-button{position:absolute;top:.25rem;right:.25rem;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;background:rgb(var(--ax-sys-color-error));color:rgb(var(--ax-sys-color-on-error));border-radius:50%;cursor:pointer;opacity:0;transition:opacity .2s;font-size:.75rem;box-shadow:0 2px 4px #0003}.video-item:hover .remove-button{opacity:1}.video-info{display:flex;flex-direction:column;justify-content:center;gap:.5rem;flex:1}.video-name{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-meta{display:flex;gap:1rem;font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.caption-input{margin-top:.75rem}.picker-footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid rgb(var(--ax-sys-color-border));background:rgb(var(--ax-sys-color-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: AXPickerHeaderComponent, selector: "ax-picker-header", inputs: ["title"], outputs: ["onClose"] }, { kind: "component", type: AXPickerFooterComponent, selector: "ax-picker-footer", inputs: ["sendText", "sendDisabled"], outputs: ["onCancel", "onSend"] }] }); }
7007
+ `, isInline: true, styles: [":host{display:block;width:100%}.video-picker{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface));border-radius:.5rem;overflow:hidden}.picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;max-height:450px;cursor:pointer;border:2px dashed rgb(var(--ax-sys-color-border));border-radius:.5rem;margin:.75rem;transition:all .2s}.picker-empty:hover,.picker-empty.drag-over{border-color:rgb(var(--ax-sys-color-primary));background:rgb(var(--ax-sys-color-primary) / .05)}.empty-icon{font-size:2.5rem;color:rgb(var(--ax-sys-color-on-surface-variant));margin-bottom:.75rem}.empty-text{text-align:center}.empty-title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));margin-bottom:.25rem}.empty-subtitle{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.picker-videos{padding:.75rem}.videos-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.videos-count{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface-variant))}.videos-list{display:flex;flex-direction:column;gap:.625rem;margin-bottom:.75rem}.video-item{display:flex;gap:.75rem;padding:.625rem;background:rgb(var(--ax-sys-color-surface));border-radius:.375rem;border:1px solid rgb(var(--ax-sys-color-border))}.video-preview{position:relative;width:120px;height:68px;flex-shrink:0;border-radius:.375rem;overflow:hidden;background:rgb(var(--ax-sys-color-surface-variant))}.video-preview video{width:100%;height:100%;object-fit:cover}.video-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:2rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.remove-button{position:absolute;top:.25rem;right:.25rem;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;background:rgb(var(--ax-sys-color-error));color:rgb(var(--ax-sys-color-on-error));border-radius:50%;cursor:pointer;opacity:0;transition:opacity .2s;font-size:.75rem;box-shadow:0 2px 4px #0003}.video-item:hover .remove-button{opacity:1}.video-info{display:flex;flex-direction:column;justify-content:center;gap:.5rem;flex:1}.video-name{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-meta{display:flex;gap:1rem;font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.caption-input{margin-top:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: AXPickerHeaderComponent, selector: "ax-picker-header", inputs: ["title"], outputs: ["onClose"] }, { kind: "component", type: AXPickerFooterComponent, selector: "ax-picker-footer", inputs: ["sendText", "sendDisabled"], outputs: ["onCancel", "onSend"] }] }); }
7024
7008
  }
7025
7009
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXVideoPickerComponent, decorators: [{
7026
7010
  type: Component,
@@ -7121,7 +7105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
7121
7105
  (change)="onFileInputChange($event)"
7122
7106
  />
7123
7107
  </div>
7124
- `, styles: [":host{display:block;width:100%}.video-picker{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface));border-radius:.5rem;overflow:hidden}.picker-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid rgb(var(--ax-sys-color-border));background:rgb(var(--ax-sys-color-surface))}.picker-title{font-size:.875rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface))}.close-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;border-radius:.25rem;cursor:pointer;color:rgb(var(--ax-sys-color-on-surface-variant));transition:all .2s;font-size:1.125rem}.close-button:hover{background:rgb(var(--ax-sys-color-error) / .1);color:rgb(var(--ax-sys-color-error))}.picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;max-height:450px;cursor:pointer;border:2px dashed rgb(var(--ax-sys-color-border));border-radius:.5rem;margin:.75rem;transition:all .2s}.picker-empty:hover,.picker-empty.drag-over{border-color:rgb(var(--ax-sys-color-primary));background:rgb(var(--ax-sys-color-primary) / .05)}.empty-icon{font-size:2.5rem;color:rgb(var(--ax-sys-color-on-surface-variant));margin-bottom:.75rem}.empty-text{text-align:center}.empty-title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));margin-bottom:.25rem}.empty-subtitle{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.picker-videos{padding:.75rem}.videos-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.videos-count{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface-variant))}.videos-list{display:flex;flex-direction:column;gap:.625rem;margin-bottom:.75rem}.video-item{display:flex;gap:.75rem;padding:.625rem;background:rgb(var(--ax-sys-color-surface));border-radius:.375rem;border:1px solid rgb(var(--ax-sys-color-border))}.video-preview{position:relative;width:120px;height:68px;flex-shrink:0;border-radius:.375rem;overflow:hidden;background:rgb(var(--ax-sys-color-surface-variant))}.video-preview video{width:100%;height:100%;object-fit:cover}.video-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:2rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.remove-button{position:absolute;top:.25rem;right:.25rem;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;background:rgb(var(--ax-sys-color-error));color:rgb(var(--ax-sys-color-on-error));border-radius:50%;cursor:pointer;opacity:0;transition:opacity .2s;font-size:.75rem;box-shadow:0 2px 4px #0003}.video-item:hover .remove-button{opacity:1}.video-info{display:flex;flex-direction:column;justify-content:center;gap:.5rem;flex:1}.video-name{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-meta{display:flex;gap:1rem;font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.caption-input{margin-top:.75rem}.picker-footer{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid rgb(var(--ax-sys-color-border));background:rgb(var(--ax-sys-color-surface))}\n"] }]
7108
+ `, styles: [":host{display:block;width:100%}.video-picker{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface));border-radius:.5rem;overflow:hidden}.picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;max-height:450px;cursor:pointer;border:2px dashed rgb(var(--ax-sys-color-border));border-radius:.5rem;margin:.75rem;transition:all .2s}.picker-empty:hover,.picker-empty.drag-over{border-color:rgb(var(--ax-sys-color-primary));background:rgb(var(--ax-sys-color-primary) / .05)}.empty-icon{font-size:2.5rem;color:rgb(var(--ax-sys-color-on-surface-variant));margin-bottom:.75rem}.empty-text{text-align:center}.empty-title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));margin-bottom:.25rem}.empty-subtitle{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.picker-videos{padding:.75rem}.videos-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.videos-count{font-size:.8125rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface-variant))}.videos-list{display:flex;flex-direction:column;gap:.625rem;margin-bottom:.75rem}.video-item{display:flex;gap:.75rem;padding:.625rem;background:rgb(var(--ax-sys-color-surface));border-radius:.375rem;border:1px solid rgb(var(--ax-sys-color-border))}.video-preview{position:relative;width:120px;height:68px;flex-shrink:0;border-radius:.375rem;overflow:hidden;background:rgb(var(--ax-sys-color-surface-variant))}.video-preview video{width:100%;height:100%;object-fit:cover}.video-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:2rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.remove-button{position:absolute;top:.25rem;right:.25rem;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;background:rgb(var(--ax-sys-color-error));color:rgb(var(--ax-sys-color-on-error));border-radius:50%;cursor:pointer;opacity:0;transition:opacity .2s;font-size:.75rem;box-shadow:0 2px 4px #0003}.video-item:hover .remove-button{opacity:1}.video-info{display:flex;flex-direction:column;justify-content:center;gap:.5rem;flex:1}.video-name{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-meta{display:flex;gap:1rem;font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.caption-input{margin-top:.75rem}\n"] }]
7125
7109
  }] });
7126
7110
 
7127
7111
  /**
@@ -7130,49 +7114,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
7130
7114
  */
7131
7115
  class AXVoiceRecorderComponent {
7132
7116
  constructor() {
7117
+ this.platformId = inject(PLATFORM_ID);
7118
+ this.destroyRef = inject(DestroyRef);
7133
7119
  this.composerService = inject(AXComposerService);
7134
7120
  this.conversationService = inject(AXConversationService);
7135
7121
  this.messageApi = inject(AXMessageApi);
7136
- /** Conversation context */
7137
7122
  this.conversation = input(...(ngDevMode ? [undefined, { debugName: "conversation" }] : []));
7138
- /** Service reference */
7139
- this.service = input(...(ngDevMode ? [undefined, { debugName: "service" }] : []));
7140
- /** Recording completed event */
7141
7123
  this.recordingComplete = output();
7142
- /** Recording cancelled event */
7143
7124
  this.recordingCancelled = output();
7144
- /** Recording state */
7145
7125
  this.isRecording = signal(false, ...(ngDevMode ? [{ debugName: "isRecording" }] : []));
7146
- /** Recording start time */
7147
- this.recordingStartTime = 0;
7148
- /** Recording duration in seconds */
7149
7126
  this.recordingDuration = signal(0, ...(ngDevMode ? [{ debugName: "recordingDuration" }] : []));
7150
- /** Recorded audio chunks */
7127
+ this.recordingStartTime = 0;
7151
7128
  this.audioChunks = [];
7152
- /** Formatted time display */
7129
+ this.cancelled = false;
7153
7130
  this.formattedTime = computed(() => {
7154
7131
  const duration = this.recordingDuration();
7155
7132
  const minutes = Math.floor(duration / 60);
7156
7133
  const seconds = duration % 60;
7157
7134
  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
7158
7135
  }, ...(ngDevMode ? [{ debugName: "formattedTime" }] : []));
7136
+ this.destroyRef.onDestroy(() => this.stopAndCleanup());
7159
7137
  }
7160
- /** Start recording */
7161
7138
  async startRecording() {
7139
+ if (!isPlatformBrowser(this.platformId))
7140
+ return;
7162
7141
  try {
7163
7142
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
7143
+ this.activeStream = stream;
7164
7144
  this.mediaRecorder = new MediaRecorder(stream);
7165
7145
  this.audioChunks = [];
7146
+ this.cancelled = false;
7166
7147
  this.mediaRecorder.ondataavailable = (event) => {
7167
7148
  if (event.data.size > 0) {
7168
7149
  this.audioChunks.push(event.data);
7169
7150
  }
7170
7151
  };
7171
7152
  this.mediaRecorder.onstop = async () => {
7153
+ stream.getTracks().forEach((track) => track.stop());
7154
+ this.activeStream = undefined;
7155
+ if (this.cancelled) {
7156
+ this.cancelled = false;
7157
+ return;
7158
+ }
7172
7159
  const audioBlob = new Blob(this.audioChunks, { type: 'audio/webm' });
7173
7160
  this.recordingComplete.emit(audioBlob);
7174
- stream.getTracks().forEach((track) => track.stop());
7175
- // Send voice message if we have a conversation
7176
7161
  const conv = this.conversation();
7177
7162
  if (conv && this.audioChunks.length > 0) {
7178
7163
  await this.sendVoiceMessage(audioBlob, conv);
@@ -7182,7 +7167,6 @@ class AXVoiceRecorderComponent {
7182
7167
  this.isRecording.set(true);
7183
7168
  this.recordingStartTime = Date.now();
7184
7169
  this.recordingDuration.set(0);
7185
- // Start timer
7186
7170
  this.timerInterval = window.setInterval(() => {
7187
7171
  const elapsed = Math.floor((Date.now() - this.recordingStartTime) / 1000);
7188
7172
  this.recordingDuration.set(elapsed);
@@ -7190,7 +7174,6 @@ class AXVoiceRecorderComponent {
7190
7174
  }
7191
7175
  catch (error) {
7192
7176
  console.error('Failed to start recording:', error);
7193
- alert('Could not access microphone. Please check permissions.');
7194
7177
  }
7195
7178
  }
7196
7179
  /** Stop recording and send */
@@ -7203,15 +7186,14 @@ class AXVoiceRecorderComponent {
7203
7186
  this.composerService.hideComponent();
7204
7187
  }
7205
7188
  }
7206
- /** Cancel recording */
7207
7189
  cancelRecording() {
7208
7190
  if (this.mediaRecorder && this.isRecording()) {
7191
+ this.cancelled = true;
7209
7192
  this.mediaRecorder.stop();
7210
7193
  this.isRecording.set(false);
7211
7194
  this.clearTimer();
7212
7195
  this.audioChunks = [];
7213
7196
  this.recordingCancelled.emit();
7214
- // Close the full-width component
7215
7197
  this.composerService.hideComponent();
7216
7198
  }
7217
7199
  }
@@ -7257,11 +7239,19 @@ class AXVoiceRecorderComponent {
7257
7239
  }
7258
7240
  catch (error) {
7259
7241
  console.error('Failed to send voice message:', error);
7260
- alert('Failed to send voice message. Please try again.');
7261
7242
  }
7262
7243
  }
7244
+ stopAndCleanup() {
7245
+ this.clearTimer();
7246
+ if (this.mediaRecorder?.state === 'recording') {
7247
+ this.cancelled = true;
7248
+ this.mediaRecorder.stop();
7249
+ }
7250
+ this.activeStream?.getTracks().forEach((track) => track.stop());
7251
+ this.activeStream = undefined;
7252
+ }
7263
7253
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXVoiceRecorderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7264
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXVoiceRecorderComponent, isStandalone: true, selector: "ax-conversation-voice-recorder", inputs: { conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordingComplete: "recordingComplete", recordingCancelled: "recordingCancelled" }, ngImport: i0, template: `
7254
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXVoiceRecorderComponent, isStandalone: true, selector: "ax-conversation-voice-recorder", inputs: { conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordingComplete: "recordingComplete", recordingCancelled: "recordingCancelled" }, ngImport: i0, template: `
7265
7255
  <div class="voice-recorder">
7266
7256
  <!-- Header with Close Button -->
7267
7257
  <div class="recorder-header">
@@ -7360,7 +7350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
7360
7350
  </div>
7361
7351
  </div>
7362
7352
  `, styles: [":host{display:block;width:100%}.voice-recorder{display:flex;flex-direction:column;width:100%;background:rgb(var(--ax-sys-color-lightest-surface))}.recorder-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.recorder-title{margin:0;font-size:.875rem;font-weight:600}.close-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:50%;font-size:1rem;cursor:pointer;transition:all .2s;opacity:.7}.close-button:hover{background:rgb(var(--ax-sys-color-light-surface));opacity:1}.recorder-content{display:flex;align-items:center;width:100%;padding:1rem}.recorder-idle{display:flex;align-items:center;gap:1rem;width:100%}.record-button{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:none;background:rgb(var(--ax-sys-color-primary-500));color:rgb(var(--ax-sys-color-on-primary-surface));border-radius:50%;font-size:1.5rem;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(var(--ax-sys-color-primary-500),.3)}.record-button:hover{background:rgb(var(--ax-sys-color-primary-600));// transform: scale(1.05)}.record-button:active{// transform: scale(.95)}.recorder-hint{font-size:.875rem;opacity:.7}.recorder-active{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem}.recorder-info{display:flex;align-items:center;gap:1.5rem;flex:1}.recording-indicator{display:flex;align-items:center;gap:.5rem}.pulse-dot{width:12px;height:12px;background:rgb(var(--ax-sys-color-danger-500));border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;// transform: scale(1)}50%{opacity:.5;// transform: scale(1.2)}}.recording-text{font-size:.875rem;font-weight:600;color:rgb(var(--ax-sys-color-danger-500))}.recording-time{font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums;min-width:80px}.recorder-actions{display:flex;align-items:center;gap:.75rem}@media (max-width: 768px){.voice-recorder{padding:.75rem}.record-button{width:48px;height:48px;font-size:1.25rem}.recorder-info{gap:1rem}.recording-time{font-size:1.125rem;font-variant-numeric:tabular-nums}.recorder-actions{gap:.5rem}}@media (max-width: 480px){.recorder-hint{font-size:.8125rem}.recording-text{display:none}.recording-time{font-size:1rem;min-width:60px;font-variant-numeric:tabular-nums}}\n"] }]
7363
- }] });
7353
+ }], ctorParameters: () => [] });
7364
7354
 
7365
7355
  /**
7366
7356
  * Composer Actions Plugin
@@ -7808,22 +7798,22 @@ class AXConversationMessageUtilsService {
7808
7798
  return message.senderId === currentUserId;
7809
7799
  }
7810
7800
  /**
7811
- * Get message status icon
7801
+ * Get message status icon class (Font Awesome)
7812
7802
  */
7813
7803
  static getStatusIcon(message) {
7814
7804
  switch (message.status) {
7815
7805
  case 'sending':
7816
- return '';
7806
+ return 'fa-light fa-clock';
7817
7807
  case 'sent':
7818
- return '';
7808
+ return 'fa-light fa-check';
7819
7809
  case 'delivered':
7820
- return '✓✓';
7810
+ return 'fa-light fa-check-double';
7821
7811
  case 'read':
7822
- return '✓✓';
7812
+ return 'fa-light fa-check-double';
7823
7813
  case 'failed':
7824
- return '';
7814
+ return 'fa-light fa-circle-exclamation';
7825
7815
  default:
7826
- return '';
7816
+ return 'fa-light fa-check';
7827
7817
  }
7828
7818
  }
7829
7819
  /**
@@ -7916,6 +7906,8 @@ class AXConversationMessageUtilsService {
7916
7906
  return `${conversation.participants.length} members`;
7917
7907
  case 'channel':
7918
7908
  return `${conversation.participants.length} subscribers`;
7909
+ case 'bot':
7910
+ return `bot`;
7919
7911
  default:
7920
7912
  return '';
7921
7913
  }
@@ -8640,6 +8632,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
8640
8632
  */
8641
8633
  class AXInfoBarSearchComponent {
8642
8634
  constructor() {
8635
+ this.platformId = inject(PLATFORM_ID);
8636
+ this.destroyRef = inject(DestroyRef);
8643
8637
  this.infoBarService = inject(AXInfoBarService);
8644
8638
  this.conversationService = inject(AXConversationService);
8645
8639
  /** Conversation input */
@@ -8661,7 +8655,6 @@ class AXInfoBarSearchComponent {
8661
8655
  }
8662
8656
  return [];
8663
8657
  }, ...(ngDevMode ? [{ debugName: "messages" }] : []));
8664
- // Auto-search when query changes
8665
8658
  effect(() => {
8666
8659
  const query = this.searchQuery();
8667
8660
  if (query) {
@@ -8671,6 +8664,10 @@ class AXInfoBarSearchComponent {
8671
8664
  this.infoBarService.setSearchResults(0, 0);
8672
8665
  }
8673
8666
  });
8667
+ this.destroyRef.onDestroy(() => {
8668
+ if (this.scrollTimer)
8669
+ clearTimeout(this.scrollTimer);
8670
+ });
8674
8671
  }
8675
8672
  /** Handle search input change */
8676
8673
  onSearchChange(value) {
@@ -8680,7 +8677,6 @@ class AXInfoBarSearchComponent {
8680
8677
  performSearch(query) {
8681
8678
  const messages = this.messages();
8682
8679
  const lowerQuery = query.toLowerCase();
8683
- // Search in text messages
8684
8680
  const results = messages.filter((msg) => {
8685
8681
  if (msg.type === 'text') {
8686
8682
  const text = msg.payload?.text || '';
@@ -8725,10 +8721,12 @@ class AXInfoBarSearchComponent {
8725
8721
  }
8726
8722
  }
8727
8723
  }
8728
- /** Scroll to a specific message */
8729
8724
  scrollToResult(messageId) {
8730
- // Use setTimeout to ensure DOM is ready
8731
- setTimeout(() => {
8725
+ if (!isPlatformBrowser(this.platformId))
8726
+ return;
8727
+ if (this.scrollTimer)
8728
+ clearTimeout(this.scrollTimer);
8729
+ this.scrollTimer = setTimeout(() => {
8732
8730
  const element = document.querySelector(`[data-message-id="${messageId}"]`);
8733
8731
  if (element) {
8734
8732
  element.scrollIntoView({ behavior: 'smooth', block: 'center' });
@@ -9269,7 +9267,6 @@ class AXAudioRendererComponent {
9269
9267
  title: this.title() || 'Audio',
9270
9268
  currentTime: this.currentTime(),
9271
9269
  duration: this.duration() || payload.duration || 0,
9272
- isPlaying: this.isPlaying(),
9273
9270
  onClose: () => this.pausePlayback(),
9274
9271
  };
9275
9272
  this.infoBarService.showMessageBanner(message, inputs);
@@ -9569,10 +9566,16 @@ class AXImageRendererComponent {
9569
9566
  this.thumbnailUrl = computed(() => this.payload().thumbnailUrl || this.payload().url, ...(ngDevMode ? [{ debugName: "thumbnailUrl" }] : []));
9570
9567
  this.alt = computed(() => this.payload().caption || 'Image', ...(ngDevMode ? [{ debugName: "alt" }] : []));
9571
9568
  this.caption = computed(() => this.payload().caption, ...(ngDevMode ? [{ debugName: "caption" }] : []));
9569
+ let previousImageKey = null;
9572
9570
  effect(() => {
9573
- this.message().id;
9574
- this.thumbnailUrl();
9575
- this._contentState.set('loading');
9571
+ const messageId = this.message().id;
9572
+ const url = this.thumbnailUrl();
9573
+ const imageKey = `${messageId}::${url}`;
9574
+ // Avoid resetting state for unrelated message updates (e.g. reactions).
9575
+ if (previousImageKey !== imageKey) {
9576
+ previousImageKey = imageKey;
9577
+ this._contentState.set('loading');
9578
+ }
9576
9579
  });
9577
9580
  }
9578
9581
  onLoad() {
@@ -9599,8 +9602,8 @@ class AXImageRendererComponent {
9599
9602
  class="ax-cnv-media__img"
9600
9603
  [src]="thumbnailUrl()"
9601
9604
  [alt]="alt()"
9602
- [class.ax-cnv-media__img--ready]="rendererState().contentState !== 'loading'"
9603
- [class.ax-cnv-media__img--hidden]="rendererState().contentState === 'error'"
9605
+ [class.ax-cnv-media__img--ready]="rendererState().contentState === 'ready'"
9606
+ [class.ax-cnv-media__img--hidden]="rendererState().contentState !== 'ready'"
9604
9607
  loading="lazy"
9605
9608
  (load)="onLoad()"
9606
9609
  (error)="onError()"
@@ -9634,8 +9637,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
9634
9637
  class="ax-cnv-media__img"
9635
9638
  [src]="thumbnailUrl()"
9636
9639
  [alt]="alt()"
9637
- [class.ax-cnv-media__img--ready]="rendererState().contentState !== 'loading'"
9638
- [class.ax-cnv-media__img--hidden]="rendererState().contentState === 'error'"
9640
+ [class.ax-cnv-media__img--ready]="rendererState().contentState === 'ready'"
9641
+ [class.ax-cnv-media__img--hidden]="rendererState().contentState !== 'ready'"
9639
9642
  loading="lazy"
9640
9643
  (load)="onLoad()"
9641
9644
  (error)="onError()"
@@ -9719,7 +9722,7 @@ class AXLocationRendererComponent {
9719
9722
  <i class="fa-light fa-arrow-up-right-from-square" aria-hidden="true"></i>
9720
9723
  </a>
9721
9724
  </div>
9722
- `, isInline: true, styles: [":host{display:block}.ax-cnv-loc{display:flex;flex-direction:column;width:min(100%,290px);border-radius:var(--ax-sys-border-radius);border:1px solid rgb(var(--ax-sys-color-border-light-surface));overflow:hidden;background:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lighter-surface))}.ax-cnv-loc__map{position:relative;height:170px;width:100%;overflow:hidden}.ax-cnv-loc__map ::ng-deep ax-map{display:block;height:100%;width:100%}.ax-cnv-loc__body{padding:.625rem .75rem .5rem;display:flex;flex-direction:column;gap:.25rem}.ax-cnv-loc__title{display:flex;align-items:center;font-size:.875rem;font-weight:600;line-height:1.2}.ax-cnv-loc__title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-cnv-loc__addr{font-size:.75rem;opacity:.78;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-cnv-loc__meta{display:flex;align-items:center;gap:.5rem}.ax-cnv-loc__coords{font-size:.6875rem;opacity:.62;font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace}.ax-cnv-loc__action{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));font-size:.78rem;font-weight:500;color:rgb(var(--ax-sys-color-primary-600));text-decoration:none;transition:background .15s ease,color .15s ease}.ax-cnv-loc__action:hover{background:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-primary-700))}.ax-cnv-loc__action i{font-size:.75rem;opacity:.85}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$3.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "maxPolygon", "hasDraw", "hasLocator", "fitToDraw", "limitDraw", "addPoiToFitDraw", "addMarkerOnTap", "readonly", "disabled", "markerPlace", "locatePlace", "poiMinZoom", "markers", "polygons", "pois"], outputs: ["zoomLevelChange", "latitudeChange", "longitudeChange", "onMarkerAdded", "onMarkerClick", "onMarkerChanged", "onPolygonAdded", "onPolygonClick", "onPolygonChanged", "onLocationFound", "onPoiChanged", "onPoiAdded", "onMapReady", "onLoadError"] }, { kind: "component", type: AXConversationMessageRendererStateComponent, selector: "ax-conversation-message-renderer-state", inputs: ["rendererState", "message", "contentErrorLabel", "deliveryFailedLabel", "showContentErrorChrome", "contentErrorStyle", "contentErrorIconClass", "placement", "contentRetryEnabled"], outputs: ["contentRetry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
9725
+ `, isInline: true, styles: [":host{display:block}.ax-cnv-loc{display:flex;flex-direction:column;border-radius:var(--ax-sys-border-radius);border:1px solid rgb(var(--ax-sys-color-border-light-surface));overflow:hidden;background:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lighter-surface))}.ax-cnv-loc__map{position:relative;height:170px;width:100%;overflow:hidden}.ax-cnv-loc__map ::ng-deep ax-map{display:block;height:100%;width:100%}.ax-cnv-loc__body{padding:.625rem .75rem .5rem;display:flex;flex-direction:column;gap:.25rem}.ax-cnv-loc__title{display:flex;align-items:center;font-size:.875rem;font-weight:600;line-height:1.2}.ax-cnv-loc__title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-cnv-loc__addr{font-size:.75rem;opacity:.78;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-cnv-loc__meta{display:flex;align-items:center;gap:.5rem}.ax-cnv-loc__coords{font-size:.6875rem;opacity:.62;font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace}.ax-cnv-loc__action{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));font-size:.78rem;font-weight:500;color:rgb(var(--ax-sys-color-primary-600));text-decoration:none;transition:background .15s ease,color .15s ease}.ax-cnv-loc__action:hover{background:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-primary-700))}.ax-cnv-loc__action i{font-size:.75rem;opacity:.85}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXMapModule }, { kind: "component", type: i1$3.AXMapComponent, selector: "ax-map", inputs: ["zoomLevel", "latitude", "longitude", "maxMarker", "maxPolygon", "hasDraw", "hasLocator", "fitToDraw", "limitDraw", "addPoiToFitDraw", "addMarkerOnTap", "readonly", "disabled", "markerPlace", "locatePlace", "poiMinZoom", "markers", "polygons", "pois"], outputs: ["zoomLevelChange", "latitudeChange", "longitudeChange", "onMarkerAdded", "onMarkerClick", "onMarkerChanged", "onPolygonAdded", "onPolygonClick", "onPolygonChanged", "onLocationFound", "onPoiChanged", "onPoiAdded", "onMapReady", "onLoadError"] }, { kind: "component", type: AXConversationMessageRendererStateComponent, selector: "ax-conversation-message-renderer-state", inputs: ["rendererState", "message", "contentErrorLabel", "deliveryFailedLabel", "showContentErrorChrome", "contentErrorStyle", "contentErrorIconClass", "placement", "contentRetryEnabled"], outputs: ["contentRetry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
9723
9726
  }
9724
9727
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXLocationRendererComponent, decorators: [{
9725
9728
  type: Component,
@@ -9752,7 +9755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
9752
9755
  <i class="fa-light fa-arrow-up-right-from-square" aria-hidden="true"></i>
9753
9756
  </a>
9754
9757
  </div>
9755
- `, styles: [":host{display:block}.ax-cnv-loc{display:flex;flex-direction:column;width:min(100%,290px);border-radius:var(--ax-sys-border-radius);border:1px solid rgb(var(--ax-sys-color-border-light-surface));overflow:hidden;background:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lighter-surface))}.ax-cnv-loc__map{position:relative;height:170px;width:100%;overflow:hidden}.ax-cnv-loc__map ::ng-deep ax-map{display:block;height:100%;width:100%}.ax-cnv-loc__body{padding:.625rem .75rem .5rem;display:flex;flex-direction:column;gap:.25rem}.ax-cnv-loc__title{display:flex;align-items:center;font-size:.875rem;font-weight:600;line-height:1.2}.ax-cnv-loc__title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-cnv-loc__addr{font-size:.75rem;opacity:.78;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-cnv-loc__meta{display:flex;align-items:center;gap:.5rem}.ax-cnv-loc__coords{font-size:.6875rem;opacity:.62;font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace}.ax-cnv-loc__action{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));font-size:.78rem;font-weight:500;color:rgb(var(--ax-sys-color-primary-600));text-decoration:none;transition:background .15s ease,color .15s ease}.ax-cnv-loc__action:hover{background:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-primary-700))}.ax-cnv-loc__action i{font-size:.75rem;opacity:.85}\n"] }]
9758
+ `, styles: [":host{display:block}.ax-cnv-loc{display:flex;flex-direction:column;border-radius:var(--ax-sys-border-radius);border:1px solid rgb(var(--ax-sys-color-border-light-surface));overflow:hidden;background:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lighter-surface))}.ax-cnv-loc__map{position:relative;height:170px;width:100%;overflow:hidden}.ax-cnv-loc__map ::ng-deep ax-map{display:block;height:100%;width:100%}.ax-cnv-loc__body{padding:.625rem .75rem .5rem;display:flex;flex-direction:column;gap:.25rem}.ax-cnv-loc__title{display:flex;align-items:center;font-size:.875rem;font-weight:600;line-height:1.2}.ax-cnv-loc__title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-cnv-loc__addr{font-size:.75rem;opacity:.78;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-cnv-loc__meta{display:flex;align-items:center;gap:.5rem}.ax-cnv-loc__coords{font-size:.6875rem;opacity:.62;font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace}.ax-cnv-loc__action{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-surface));font-size:.78rem;font-weight:500;color:rgb(var(--ax-sys-color-primary-600));text-decoration:none;transition:background .15s ease,color .15s ease}.ax-cnv-loc__action:hover{background:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-primary-700))}.ax-cnv-loc__action i{font-size:.75rem;opacity:.85}\n"] }]
9756
9759
  }] });
9757
9760
 
9758
9761
  class AXStickerRendererComponent {
@@ -10102,7 +10105,6 @@ class AXVideoRendererComponent {
10102
10105
  title: payload.caption || 'Video',
10103
10106
  currentTime: this.currentTime(),
10104
10107
  duration: this.duration() || 0,
10105
- isPlaying: this.isPlaying(),
10106
10108
  onClose: () => this.pausePlayback(),
10107
10109
  };
10108
10110
  this.infoBarService.showMessageBanner(message, inputs);
@@ -10448,8 +10450,6 @@ class AXVoiceRendererComponent {
10448
10450
  title: 'Voice message',
10449
10451
  currentTime: this.currentTime(),
10450
10452
  duration: this.duration() || payload.duration || 0,
10451
- isPlaying: this.isPlaying(),
10452
- playbackRate: this.playbackSpeed(),
10453
10453
  onClose: () => this.pausePlayback(),
10454
10454
  };
10455
10455
  this.infoBarService.showMessageBanner(message, inputs);
@@ -11236,11 +11236,8 @@ class AXConversationService {
11236
11236
  this._activeConversationId = signal(null, ...(ngDevMode ? [{ debugName: "_activeConversationId" }] : []));
11237
11237
  this._loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
11238
11238
  this._error = signal(null, ...(ngDevMode ? [{ debugName: "_error" }] : []));
11239
- // Request cancellation tracking
11240
- this.activeRequests = new Map();
11241
- // Message queue for preventing race conditions
11242
- this.messageQueue = new Map();
11243
- this.processingQueue = false;
11239
+ /** Emits when the active conversation changes, cancelling per-conversation subscriptions. */
11240
+ this._conversationSwitch$ = new Subject();
11244
11241
  // Event subjects
11245
11242
  this._messageReceived$ = new Subject();
11246
11243
  this._messageUpdated$ = new Subject();
@@ -11266,7 +11263,7 @@ class AXConversationService {
11266
11263
  /** Error state */
11267
11264
  this.error = this._error.asReadonly();
11268
11265
  /** Connection status */
11269
- this.connectionStatus$ = this.realtimeApi?.connectionStatus$ ?? of('disconnected');
11266
+ this.connectionStatus$ = this.realtimeApi?.connectionStatus$ ?? new BehaviorSubject('disconnected').asObservable();
11270
11267
  /** Error stream */
11271
11268
  this.errors$ = this.errorHandler.errors$;
11272
11269
  // Event observables
@@ -11281,8 +11278,9 @@ class AXConversationService {
11281
11278
  // Current user cache
11282
11279
  this._currentUser = signal(null, ...(ngDevMode ? [{ debugName: "_currentUser" }] : []));
11283
11280
  this.currentUser = this._currentUser.asReadonly();
11284
- // Register cleanup on destroy
11285
11281
  this.destroyRef.onDestroy(() => {
11282
+ this._conversationSwitch$.next();
11283
+ this._conversationSwitch$.complete();
11286
11284
  this.destroy$.next();
11287
11285
  this.destroy$.complete();
11288
11286
  });
@@ -11430,6 +11428,8 @@ class AXConversationService {
11430
11428
  */
11431
11429
  async selectConversation(conversationId) {
11432
11430
  try {
11431
+ // Cancel previous per-conversation subscriptions before switching
11432
+ this._conversationSwitch$.next();
11433
11433
  this._activeConversationId.set(conversationId);
11434
11434
  // Load messages for this conversation
11435
11435
  await this.loadMessages(conversationId);
@@ -11437,7 +11437,7 @@ class AXConversationService {
11437
11437
  if (this.realtimeApi) {
11438
11438
  this.realtimeApi
11439
11439
  .subscribeToMessages(conversationId)
11440
- .pipe(takeUntil(this.destroy$), catchError((error) => {
11440
+ .pipe(takeUntil(this._conversationSwitch$), takeUntil(this.destroy$), catchError((error) => {
11441
11441
  this.errorHandler.handle(error, 'subscribeToMessages', { conversationId });
11442
11442
  return EMPTY;
11443
11443
  }))
@@ -11449,7 +11449,7 @@ class AXConversationService {
11449
11449
  }
11450
11450
  catch (error) {
11451
11451
  this.errorHandler.handle(error, 'selectConversation', { conversationId });
11452
- throw error; // Re-throw to notify caller
11452
+ throw error;
11453
11453
  }
11454
11454
  }
11455
11455
  closeActiveConversation() {
@@ -11462,16 +11462,7 @@ class AXConversationService {
11462
11462
  * Fetches messages from server with request cancellation support
11463
11463
  */
11464
11464
  async loadMessages(conversationId, page = 0) {
11465
- // Cancel previous request for this conversation
11466
- const requestKey = `loadMessages-${conversationId}`;
11467
- const prevController = this.activeRequests.get(requestKey);
11468
- if (prevController) {
11469
- prevController.abort();
11470
- }
11471
- const controller = new AbortController();
11472
- this.activeRequests.set(requestKey, controller);
11473
11465
  try {
11474
- // Fetch from server
11475
11466
  const result = await this.messageApi.getMessages(conversationId, {
11476
11467
  page,
11477
11468
  pageSize: this.config.messagePageSize,
@@ -11480,15 +11471,8 @@ class AXConversationService {
11480
11471
  return result.items;
11481
11472
  }
11482
11473
  catch (error) {
11483
- // Don't handle aborted requests as errors
11484
- if (error.name === 'AbortError') {
11485
- return [];
11486
- }
11487
11474
  this.errorHandler.handle(error, 'loadMessages', { conversationId, page });
11488
- return []; // Return empty array on failure
11489
- }
11490
- finally {
11491
- this.activeRequests.delete(requestKey);
11475
+ return [];
11492
11476
  }
11493
11477
  }
11494
11478
  /**
@@ -11795,8 +11779,6 @@ class AXConversationService {
11795
11779
  if (currentUser && indicator.userId === currentUser.id) {
11796
11780
  return;
11797
11781
  }
11798
- // Set typing indicator
11799
- // Set typing indicator
11800
11782
  this.store.updateTypingIndicator(indicator.conversationId, indicator.userId, true);
11801
11783
  // Clear typing indicator after timeout
11802
11784
  setTimeout(() => {
@@ -13284,7 +13266,6 @@ class AXComposerComponent {
13284
13266
  if (action.component && action.toggleable) {
13285
13267
  this.composerService.toggleComponent(action, {
13286
13268
  conversation: this.activeConversation(),
13287
- service: this.composerService,
13288
13269
  });
13289
13270
  return;
13290
13271
  }
@@ -13292,7 +13273,6 @@ class AXComposerComponent {
13292
13273
  if (action.component) {
13293
13274
  this.composerService.showComponent(action, {
13294
13275
  conversation: this.activeConversation(),
13295
- service: this.composerService,
13296
13276
  });
13297
13277
  return;
13298
13278
  }
@@ -13368,7 +13348,6 @@ class AXComposerComponent {
13368
13348
  return {
13369
13349
  ...activeComp.inputs,
13370
13350
  conversation: this.activeConversation(),
13371
- service: this.composerService,
13372
13351
  };
13373
13352
  }
13374
13353
  async onEnter(event) {
@@ -13395,7 +13374,7 @@ class AXComposerComponent {
13395
13374
  <div class="composer-banner">
13396
13375
  <div class="banner-content">
13397
13376
  @if (editingMessage()) {
13398
- <span class="banner-icon">✏️</span>
13377
+ <span class="banner-icon"><i class="fa-light fa-pen-to-square"></i></span>
13399
13378
  <div class="banner-text">
13400
13379
  <div class="banner-title">Editing message</div>
13401
13380
  @if (getEditingPreview(); as preview) {
@@ -13424,7 +13403,7 @@ class AXComposerComponent {
13424
13403
  }
13425
13404
  </div>
13426
13405
  } @else if (replyingToMessage()) {
13427
- <span class="banner-icon">↩️</span>
13406
+ <span class="banner-icon"><i class="fa-light fa-reply"></i></span>
13428
13407
  <div class="banner-text" (click)="onReplyPreviewClick()">
13429
13408
  <div class="banner-title">Replying to {{ getReplyingSenderName() }}</div>
13430
13409
  @if (getReplyingPreview(); as preview) {
@@ -13454,7 +13433,9 @@ class AXComposerComponent {
13454
13433
  </div>
13455
13434
  }
13456
13435
  </div>
13457
- <button type="button" class="banner-close" (click)="cancelEditReply()" aria-label="Cancel">✕</button>
13436
+ <button type="button" class="banner-close" (click)="cancelEditReply()" aria-label="Cancel">
13437
+ <i class="fa-light fa-xmark"></i>
13438
+ </button>
13458
13439
  </div>
13459
13440
  }
13460
13441
 
@@ -13580,7 +13561,7 @@ class AXComposerComponent {
13580
13561
  <div class="composer-attachments">
13581
13562
  @for (attachment of attachments(); track $index) {
13582
13563
  <div class="attachment-item">
13583
- <span class="attachment-icon">📎</span>
13564
+ <span class="attachment-icon"><i class="fa-light fa-paperclip"></i></span>
13584
13565
  <span class="attachment-name">{{ attachment.name }}</span>
13585
13566
  <button
13586
13567
  type="button"
@@ -13588,7 +13569,7 @@ class AXComposerComponent {
13588
13569
  (click)="removeAttachment($index)"
13589
13570
  aria-label="Remove attachment"
13590
13571
  >
13591
-
13572
+ <i class="fa-light fa-xmark"></i>
13592
13573
  </button>
13593
13574
  </div>
13594
13575
  }
@@ -13652,7 +13633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
13652
13633
  <div class="composer-banner">
13653
13634
  <div class="banner-content">
13654
13635
  @if (editingMessage()) {
13655
- <span class="banner-icon">✏️</span>
13636
+ <span class="banner-icon"><i class="fa-light fa-pen-to-square"></i></span>
13656
13637
  <div class="banner-text">
13657
13638
  <div class="banner-title">Editing message</div>
13658
13639
  @if (getEditingPreview(); as preview) {
@@ -13681,7 +13662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
13681
13662
  }
13682
13663
  </div>
13683
13664
  } @else if (replyingToMessage()) {
13684
- <span class="banner-icon">↩️</span>
13665
+ <span class="banner-icon"><i class="fa-light fa-reply"></i></span>
13685
13666
  <div class="banner-text" (click)="onReplyPreviewClick()">
13686
13667
  <div class="banner-title">Replying to {{ getReplyingSenderName() }}</div>
13687
13668
  @if (getReplyingPreview(); as preview) {
@@ -13711,7 +13692,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
13711
13692
  </div>
13712
13693
  }
13713
13694
  </div>
13714
- <button type="button" class="banner-close" (click)="cancelEditReply()" aria-label="Cancel">✕</button>
13695
+ <button type="button" class="banner-close" (click)="cancelEditReply()" aria-label="Cancel">
13696
+ <i class="fa-light fa-xmark"></i>
13697
+ </button>
13715
13698
  </div>
13716
13699
  }
13717
13700
 
@@ -13837,7 +13820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
13837
13820
  <div class="composer-attachments">
13838
13821
  @for (attachment of attachments(); track $index) {
13839
13822
  <div class="attachment-item">
13840
- <span class="attachment-icon">📎</span>
13823
+ <span class="attachment-icon"><i class="fa-light fa-paperclip"></i></span>
13841
13824
  <span class="attachment-name">{{ attachment.name }}</span>
13842
13825
  <button
13843
13826
  type="button"
@@ -13845,7 +13828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
13845
13828
  (click)="removeAttachment($index)"
13846
13829
  aria-label="Remove attachment"
13847
13830
  >
13848
-
13831
+ <i class="fa-light fa-xmark"></i>
13849
13832
  </button>
13850
13833
  </div>
13851
13834
  }
@@ -14181,14 +14164,14 @@ class AXInfoBarService {
14181
14164
  }
14182
14165
  const current = this._activeBanner();
14183
14166
  if (current && current.message.id !== message.id) {
14184
- // Ensure only one media session owns the banner at a time.
14185
- // This triggers previous renderer close hook (pause/cleanup).
14186
14167
  this.hideMessageBanner(current.message.id);
14187
14168
  }
14169
+ const { onClose, ...componentInputs } = this._extractOnClose(inputs);
14188
14170
  this._activeBanner.set({
14189
14171
  message,
14190
14172
  component: bannerComponent,
14191
- inputs,
14173
+ inputs: componentInputs,
14174
+ onClose,
14192
14175
  });
14193
14176
  }
14194
14177
  /**
@@ -14199,12 +14182,14 @@ class AXInfoBarService {
14199
14182
  if (!current || current.message.id !== messageId) {
14200
14183
  return;
14201
14184
  }
14185
+ const { onClose, ...componentInputs } = this._extractOnClose(inputs);
14202
14186
  this._activeBanner.set({
14203
14187
  ...current,
14204
14188
  inputs: {
14205
14189
  ...(current.inputs ?? {}),
14206
- ...inputs,
14190
+ ...componentInputs,
14207
14191
  },
14192
+ ...(onClose !== undefined ? { onClose } : {}),
14208
14193
  });
14209
14194
  }
14210
14195
  /**
@@ -14218,10 +14203,9 @@ class AXInfoBarService {
14218
14203
  if (messageId && current.message.id !== messageId) {
14219
14204
  return;
14220
14205
  }
14221
- const maybeOnClose = current.inputs?.['onClose'];
14222
- if (typeof maybeOnClose === 'function') {
14206
+ if (current.onClose) {
14223
14207
  try {
14224
- maybeOnClose();
14208
+ current.onClose();
14225
14209
  }
14226
14210
  catch (error) {
14227
14211
  console.warn('Failed to execute info-bar banner close hook:', error);
@@ -14285,6 +14269,15 @@ class AXInfoBarService {
14285
14269
  this._searchResultsCount.set(0);
14286
14270
  this._currentSearchIndex.set(0);
14287
14271
  }
14272
+ _extractOnClose(inputs) {
14273
+ if (!inputs)
14274
+ return {};
14275
+ const { onClose, ...rest } = inputs;
14276
+ return {
14277
+ ...rest,
14278
+ ...(typeof onClose === 'function' ? { onClose: onClose } : {}),
14279
+ };
14280
+ }
14288
14281
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXInfoBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
14289
14282
  static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXInfoBarService }); }
14290
14283
  }
@@ -14521,6 +14514,18 @@ class AXInfoBarComponent {
14521
14514
  service: this.infoBar,
14522
14515
  };
14523
14516
  }
14517
+ getInlineComponentInputs() {
14518
+ return {
14519
+ conversation: this.activeConversation(),
14520
+ service: this.infoBar,
14521
+ };
14522
+ }
14523
+ isActiveComponentFullWidth() {
14524
+ const activeComp = this.activeComponent();
14525
+ if (!activeComp)
14526
+ return false;
14527
+ return activeComp.action.fullWidthComponent !== false;
14528
+ }
14524
14529
  /** Handle close component */
14525
14530
  onCloseComponent() {
14526
14531
  this.infoBar.hideComponent();
@@ -14532,8 +14537,6 @@ class AXInfoBarComponent {
14532
14537
  return {
14533
14538
  ...activeBanner.inputs,
14534
14539
  message: activeBanner.message,
14535
- service: this.infoBar,
14536
- conversation: this.activeConversation(),
14537
14540
  };
14538
14541
  }
14539
14542
  onCloseBanner() {
@@ -14617,13 +14620,19 @@ class AXInfoBarComponent {
14617
14620
  </ax-popover>
14618
14621
 
14619
14622
  <!-- Right: Actions or Full-Width Component -->
14620
- @if (!activeComponent()) {
14623
+ @if (!activeComponent() || !isActiveComponentFullWidth()) {
14621
14624
  <div class="info-actions">
14622
14625
  <!-- Inline action buttons from registry -->
14623
14626
  @for (action of inlineActions(); track action.id) {
14624
- <ax-button class="action-button" (onClick)="onInlineActionClick(action.id)">
14625
- <ax-icon [icon]="registry.infoBarActions.getActionIcon(action, activeConversation()!)"></ax-icon>
14626
- </ax-button>
14627
+ @if (action.component && action.fullWidthComponent === false) {
14628
+ <ng-container
14629
+ *ngComponentOutlet="action.component; inputs: getInlineComponentInputs()"
14630
+ ></ng-container>
14631
+ } @else {
14632
+ <ax-button class="action-button" (onClick)="onInlineActionClick(action.id)">
14633
+ <ax-icon [icon]="registry.infoBarActions.getActionIcon(action, activeConversation()!)"></ax-icon>
14634
+ </ax-button>
14635
+ }
14627
14636
  }
14628
14637
 
14629
14638
  <ax-button look="blank">
@@ -14656,10 +14665,11 @@ class AXInfoBarComponent {
14656
14665
  </ax-button-item-list>
14657
14666
  </ax-dropdown-panel>
14658
14667
  </ax-button>
14668
+
14659
14669
  </div>
14660
14670
  }
14661
14671
 
14662
- @if (activeComponent()) {
14672
+ @if (activeComponent() && isActiveComponentFullWidth()) {
14663
14673
  <!-- Full-width component mode (e.g., search) - takes entire info-bar -->
14664
14674
  <div class="info-component-fullwidth" animate.enter="slide-in" animate.leave="slide-out">
14665
14675
  <ng-container
@@ -14757,13 +14767,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
14757
14767
  </ax-popover>
14758
14768
 
14759
14769
  <!-- Right: Actions or Full-Width Component -->
14760
- @if (!activeComponent()) {
14770
+ @if (!activeComponent() || !isActiveComponentFullWidth()) {
14761
14771
  <div class="info-actions">
14762
14772
  <!-- Inline action buttons from registry -->
14763
14773
  @for (action of inlineActions(); track action.id) {
14764
- <ax-button class="action-button" (onClick)="onInlineActionClick(action.id)">
14765
- <ax-icon [icon]="registry.infoBarActions.getActionIcon(action, activeConversation()!)"></ax-icon>
14766
- </ax-button>
14774
+ @if (action.component && action.fullWidthComponent === false) {
14775
+ <ng-container
14776
+ *ngComponentOutlet="action.component; inputs: getInlineComponentInputs()"
14777
+ ></ng-container>
14778
+ } @else {
14779
+ <ax-button class="action-button" (onClick)="onInlineActionClick(action.id)">
14780
+ <ax-icon [icon]="registry.infoBarActions.getActionIcon(action, activeConversation()!)"></ax-icon>
14781
+ </ax-button>
14782
+ }
14767
14783
  }
14768
14784
 
14769
14785
  <ax-button look="blank">
@@ -14796,10 +14812,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
14796
14812
  </ax-button-item-list>
14797
14813
  </ax-dropdown-panel>
14798
14814
  </ax-button>
14815
+
14799
14816
  </div>
14800
14817
  }
14801
14818
 
14802
- @if (activeComponent()) {
14819
+ @if (activeComponent() && isActiveComponentFullWidth()) {
14803
14820
  <!-- Full-width component mode (e.g., search) - takes entire info-bar -->
14804
14821
  <div class="info-component-fullwidth" animate.enter="slide-in" animate.leave="slide-out">
14805
14822
  <ng-container
@@ -14989,12 +15006,8 @@ class AXForwardMessageDialogComponent {
14989
15006
  </div>
14990
15007
  <ng-template #forwardItemTpl let-item>
14991
15008
  @if (conversationFromItem(item); as conversation) {
14992
- <div class="user-row" [class.user-row-selected]="isSelected(conversation.id)">
14993
- <span class="check-indicator" [class.check-indicator-selected]="isSelected(conversation.id)">
14994
- @if (isSelected(conversation.id)) {
14995
- <i class="fa-solid fa-check"></i>
14996
- }
14997
- </span>
15009
+ <div class="ax-label-container forward-item-content">
15010
+ <input class="ax-checkbox" type="checkbox" [checked]="isSelected(conversation.id)" tabindex="0" />
14998
15011
  <ax-avatar [size]="36" [color]="'primary'">
14999
15012
  @if (conversation.avatar) {
15000
15013
  <ax-image [src]="conversation.avatar" [alt]="conversation.title"></ax-image>
@@ -15002,9 +15015,7 @@ class AXForwardMessageDialogComponent {
15002
15015
  <ax-label>{{ getInitials(conversation.title) }}</ax-label>
15003
15016
  }
15004
15017
  </ax-avatar>
15005
- <div class="user-meta">
15006
- <span class="user-name">{{ conversation.title }}</span>
15007
- </div>
15018
+ <span class="ax-checkbox-label ax-truncated forward-title-text">{{ conversation.title }}</span>
15008
15019
  </div>
15009
15020
  }
15010
15021
  </ng-template>
@@ -15021,7 +15032,7 @@ class AXForwardMessageDialogComponent {
15021
15032
  </ax-suffix>
15022
15033
  </ax-footer>
15023
15034
  </div>
15024
- `, isInline: true, styles: [":host{display:block}.forward-message-dialog{display:flex;flex-direction:column}.form-field{display:flex;flex-direction:column;gap:.35rem}.field-label{font-size:.875rem;font-weight:500;color:var(--ax-text-secondary, #6b7280)}.forward-list-wrap{height:280px;overflow:hidden}.forward-list{display:block;height:100%}.forward-list-header{display:block;position:sticky;top:0;z-index:1;background:rgba(var(--ax-sys-color-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}.forward-list-header-inner{padding:.5rem .75rem}.forward-list-empty{padding:1rem;text-align:center;font-size:.875rem;color:var(--ax-text-secondary, #6b7280)}.users-list-wrap{height:260px;overflow:hidden;// border: 1px solid rgb(var(--ax-sys-color-border-light-surface));// border-radius: .65rem;// background: rgb(var(--ax-sys-color-surface))}.users-list{display:block;height:100%}.users-list-header{display:block;position:sticky;top:0;z-index:1;// background: rgb(var(--ax-sys-color-lightest-surface));border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.users-list-header-inner{padding:.5rem .625rem}.user-row{height:100%;display:flex;align-items:center;gap:.6rem;padding:.1rem .75rem;border-radius:.5rem;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}// .user-row-selected{// background: rgba(var(--ax-sys-color-primary-500),.08);//}.user-meta{min-width:0;display:flex}.user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:500}.users-list-empty{padding:1rem;text-align:center;font-size:.85rem;opacity:.7}.forward-row{height:100%;display:flex;align-items:center;gap:.65rem;padding:0 .65rem;border-radius:.5rem}.forward-row-selected{// background: rgba(var(--ax-sys-color-primary-500),.08)}.check-indicator{width:1rem;height:1rem;border-radius:999px;border:1px solid rgb(var(--ax-sys-color-border-light-surface));display:inline-flex;align-items:center;justify-content:center;font-size:.625rem;color:rgb(var(--ax-sys-color-on-primary-surface));flex-shrink:0}.check-indicator-selected{border-color:rgb(var(--ax-sys-color-primary-500));background:rgb(var(--ax-sys-color-primary-500))}.forward-row-meta{min-width:0}.forward-row-title{font-size:.875rem;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dialog-footer{padding:1rem;border-top:1px solid var(--ax-border-color, #e5e7eb);display:flex;justify-content:flex-end;gap:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }] }); }
15035
+ `, isInline: true, styles: [":host{display:block}.forward-message-dialog{display:flex;flex-direction:column}.form-field{display:flex;flex-direction:column;gap:.35rem}.field-label{font-size:.875rem;font-weight:500;color:var(--ax-text-secondary, #6b7280)}.forward-list-wrap{height:280px;overflow:hidden}.forward-list{display:block;height:100%}.forward-list-header{display:block;position:sticky;top:0;z-index:1;background:rgba(var(--ax-sys-color-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}.forward-list-header-inner{padding:.5rem .75rem}.forward-list-empty{padding:1rem;text-align:center;font-size:.875rem;color:var(--ax-text-secondary, #6b7280)}.users-list-wrap{height:260px;overflow:hidden;// border: 1px solid rgb(var(--ax-sys-color-border-light-surface));// border-radius: .65rem;// background: rgb(var(--ax-sys-color-surface))}.users-list{display:block;height:100%}.users-list-header{display:block;position:sticky;top:0;z-index:1;// background: rgb(var(--ax-sys-color-lightest-surface));border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.users-list-header-inner{padding:.5rem .625rem}.forward-item-content{height:100%;display:flex;align-items:center;gap:.6rem;padding:.1rem .75rem;min-width:0}.forward-title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:500}.users-list-empty{padding:1rem;text-align:center;font-size:.85rem;opacity:.7}.dialog-footer{padding:1rem;border-top:1px solid var(--ax-border-color, #e5e7eb);display:flex;justify-content:flex-end;gap:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }] }); }
15025
15036
  }
15026
15037
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXForwardMessageDialogComponent, decorators: [{
15027
15038
  type: Component,
@@ -15079,12 +15090,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
15079
15090
  </div>
15080
15091
  <ng-template #forwardItemTpl let-item>
15081
15092
  @if (conversationFromItem(item); as conversation) {
15082
- <div class="user-row" [class.user-row-selected]="isSelected(conversation.id)">
15083
- <span class="check-indicator" [class.check-indicator-selected]="isSelected(conversation.id)">
15084
- @if (isSelected(conversation.id)) {
15085
- <i class="fa-solid fa-check"></i>
15086
- }
15087
- </span>
15093
+ <div class="ax-label-container forward-item-content">
15094
+ <input class="ax-checkbox" type="checkbox" [checked]="isSelected(conversation.id)" tabindex="0" />
15088
15095
  <ax-avatar [size]="36" [color]="'primary'">
15089
15096
  @if (conversation.avatar) {
15090
15097
  <ax-image [src]="conversation.avatar" [alt]="conversation.title"></ax-image>
@@ -15092,9 +15099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
15092
15099
  <ax-label>{{ getInitials(conversation.title) }}</ax-label>
15093
15100
  }
15094
15101
  </ax-avatar>
15095
- <div class="user-meta">
15096
- <span class="user-name">{{ conversation.title }}</span>
15097
- </div>
15102
+ <span class="ax-checkbox-label ax-truncated forward-title-text">{{ conversation.title }}</span>
15098
15103
  </div>
15099
15104
  }
15100
15105
  </ng-template>
@@ -15111,7 +15116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
15111
15116
  </ax-suffix>
15112
15117
  </ax-footer>
15113
15118
  </div>
15114
- `, providers: [{ provide: AXClosableComponent, useExisting: AXForwardMessageDialogComponent }], styles: [":host{display:block}.forward-message-dialog{display:flex;flex-direction:column}.form-field{display:flex;flex-direction:column;gap:.35rem}.field-label{font-size:.875rem;font-weight:500;color:var(--ax-text-secondary, #6b7280)}.forward-list-wrap{height:280px;overflow:hidden}.forward-list{display:block;height:100%}.forward-list-header{display:block;position:sticky;top:0;z-index:1;background:rgba(var(--ax-sys-color-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}.forward-list-header-inner{padding:.5rem .75rem}.forward-list-empty{padding:1rem;text-align:center;font-size:.875rem;color:var(--ax-text-secondary, #6b7280)}.users-list-wrap{height:260px;overflow:hidden;// border: 1px solid rgb(var(--ax-sys-color-border-light-surface));// border-radius: .65rem;// background: rgb(var(--ax-sys-color-surface))}.users-list{display:block;height:100%}.users-list-header{display:block;position:sticky;top:0;z-index:1;// background: rgb(var(--ax-sys-color-lightest-surface));border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.users-list-header-inner{padding:.5rem .625rem}.user-row{height:100%;display:flex;align-items:center;gap:.6rem;padding:.1rem .75rem;border-radius:.5rem;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}// .user-row-selected{// background: rgba(var(--ax-sys-color-primary-500),.08);//}.user-meta{min-width:0;display:flex}.user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:500}.users-list-empty{padding:1rem;text-align:center;font-size:.85rem;opacity:.7}.forward-row{height:100%;display:flex;align-items:center;gap:.65rem;padding:0 .65rem;border-radius:.5rem}.forward-row-selected{// background: rgba(var(--ax-sys-color-primary-500),.08)}.check-indicator{width:1rem;height:1rem;border-radius:999px;border:1px solid rgb(var(--ax-sys-color-border-light-surface));display:inline-flex;align-items:center;justify-content:center;font-size:.625rem;color:rgb(var(--ax-sys-color-on-primary-surface));flex-shrink:0}.check-indicator-selected{border-color:rgb(var(--ax-sys-color-primary-500));background:rgb(var(--ax-sys-color-primary-500))}.forward-row-meta{min-width:0}.forward-row-title{font-size:.875rem;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dialog-footer{padding:1rem;border-top:1px solid var(--ax-border-color, #e5e7eb);display:flex;justify-content:flex-end;gap:.75rem}\n"] }]
15119
+ `, providers: [{ provide: AXClosableComponent, useExisting: AXForwardMessageDialogComponent }], styles: [":host{display:block}.forward-message-dialog{display:flex;flex-direction:column}.form-field{display:flex;flex-direction:column;gap:.35rem}.field-label{font-size:.875rem;font-weight:500;color:var(--ax-text-secondary, #6b7280)}.forward-list-wrap{height:280px;overflow:hidden}.forward-list{display:block;height:100%}.forward-list-header{display:block;position:sticky;top:0;z-index:1;background:rgba(var(--ax-sys-color-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}.forward-list-header-inner{padding:.5rem .75rem}.forward-list-empty{padding:1rem;text-align:center;font-size:.875rem;color:var(--ax-text-secondary, #6b7280)}.users-list-wrap{height:260px;overflow:hidden;// border: 1px solid rgb(var(--ax-sys-color-border-light-surface));// border-radius: .65rem;// background: rgb(var(--ax-sys-color-surface))}.users-list{display:block;height:100%}.users-list-header{display:block;position:sticky;top:0;z-index:1;// background: rgb(var(--ax-sys-color-lightest-surface));border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.users-list-header-inner{padding:.5rem .625rem}.forward-item-content{height:100%;display:flex;align-items:center;gap:.6rem;padding:.1rem .75rem;min-width:0}.forward-title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:500}.users-list-empty{padding:1rem;text-align:center;font-size:.85rem;opacity:.7}.dialog-footer{padding:1rem;border-top:1px solid var(--ax-border-color, #e5e7eb);display:flex;justify-content:flex-end;gap:.75rem}\n"] }]
15115
15120
  }] });
15116
15121
 
15117
15122
  /**
@@ -15180,6 +15185,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
15180
15185
  }]
15181
15186
  }], ctorParameters: () => [] });
15182
15187
 
15188
+ class AXMessageListEmptyDefaultComponent {
15189
+ constructor() {
15190
+ this.conversation = input.required(...(ngDevMode ? [{ debugName: "conversation" }] : []));
15191
+ }
15192
+ get conversationTypeLabel() {
15193
+ switch (this.conversation().type) {
15194
+ case 'private':
15195
+ return 'private chat';
15196
+ case 'group':
15197
+ return 'group';
15198
+ case 'channel':
15199
+ return 'channel';
15200
+ case 'bot':
15201
+ return 'bot chat';
15202
+ default:
15203
+ return 'conversation';
15204
+ }
15205
+ }
15206
+ get conversationPreposition() {
15207
+ return this.conversation().type === 'private' ? 'with' : 'in';
15208
+ }
15209
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMessageListEmptyDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
15210
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXMessageListEmptyDefaultComponent, isStandalone: true, selector: "ax-conversation-message-list-empty-default", inputs: { conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
15211
+ <div class="empty-icon"><i class="fa-light fa-envelope"></i></div>
15212
+ <h3 class="empty-title">No messages yet</h3>
15213
+ <p class="empty-description">
15214
+ Start the {{ conversationTypeLabel }} {{ conversationPreposition }} {{ conversation().title }}.
15215
+ </p>
15216
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
15217
+ }
15218
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMessageListEmptyDefaultComponent, decorators: [{
15219
+ type: Component,
15220
+ args: [{
15221
+ selector: 'ax-conversation-message-list-empty-default',
15222
+ changeDetection: ChangeDetectionStrategy.OnPush,
15223
+ imports: [CommonModule],
15224
+ template: `
15225
+ <div class="empty-icon"><i class="fa-light fa-envelope"></i></div>
15226
+ <h3 class="empty-title">No messages yet</h3>
15227
+ <p class="empty-description">
15228
+ Start the {{ conversationTypeLabel }} {{ conversationPreposition }} {{ conversation().title }}.
15229
+ </p>
15230
+ `,
15231
+ }]
15232
+ }] });
15233
+
15183
15234
  /**
15184
15235
  * MessageList Component
15185
15236
  * Displays messages with virtual scrolling, date separators, and actions
@@ -15224,6 +15275,13 @@ class AXMessageListComponent {
15224
15275
  }
15225
15276
  return normalizeMessageListBackgroundValue(raw);
15226
15277
  }
15278
+ resolvedEmptyStateComponent() {
15279
+ const fromMetadata = this.activeConversation()?.metadata?.['messageListEmptyComponent'];
15280
+ if (typeof fromMetadata === 'function') {
15281
+ return fromMetadata;
15282
+ }
15283
+ return AXMessageListEmptyDefaultComponent;
15284
+ }
15227
15285
  // Access registry through conversation service
15228
15286
  get registry() {
15229
15287
  return this.conversationService.registry;
@@ -15321,6 +15379,7 @@ class AXMessageListComponent {
15321
15379
  const messages = this.messages();
15322
15380
  const conversation = this.activeConversation();
15323
15381
  const container = this.messagesContainerRef()?.nativeElement;
15382
+ const currentUser = this.currentUser();
15324
15383
  if (!container || !conversation) {
15325
15384
  previousMessageCount = messages.length;
15326
15385
  return;
@@ -15328,29 +15387,48 @@ class AXMessageListComponent {
15328
15387
  const currentCount = messages.length;
15329
15388
  const hasNewMessages = currentCount > previousMessageCount;
15330
15389
  if (hasNewMessages) {
15331
- // Check if user is at bottom before DOM updates
15332
- const { scrollTop, scrollHeight, clientHeight } = container;
15333
- const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
15334
- const isAtBottom = distanceFromBottom < this.config.scrollThreshold;
15335
- // Only auto-scroll if user is at bottom
15336
- if (isAtBottom) {
15390
+ const newestMessage = messages[messages.length - 1];
15391
+ const isOwnMessage = !!currentUser && newestMessage?.senderId === currentUser.id;
15392
+ if (isOwnMessage) {
15393
+ // Always scroll to bottom for own messages
15337
15394
  requestAnimationFrame(() => {
15338
15395
  requestAnimationFrame(() => {
15339
15396
  container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
15340
15397
  });
15341
15398
  });
15342
15399
  }
15400
+ else {
15401
+ // For incoming messages, only scroll if user is already near the bottom
15402
+ const { scrollTop, scrollHeight, clientHeight } = container;
15403
+ const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
15404
+ const isAtBottom = distanceFromBottom < this.config.scrollThreshold;
15405
+ if (isAtBottom) {
15406
+ requestAnimationFrame(() => {
15407
+ requestAnimationFrame(() => {
15408
+ container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
15409
+ });
15410
+ });
15411
+ }
15412
+ }
15343
15413
  }
15344
15414
  previousMessageCount = currentCount;
15345
15415
  });
15346
15416
  // Setup intersection observer for marking messages as read
15347
15417
  this.setupIntersectionObserver();
15348
15418
  // Scroll to bottom when an external scroll request is issued (e.g., after sending a message)
15419
+ let initialScrollRequest = true;
15349
15420
  effect(() => {
15350
- // Read the counter to create a dependency
15351
15421
  void this.messageListService.scrollRequests();
15352
- // Defer to next tick to ensure DOM is updated
15353
- setTimeout(() => this.scrollToBottom(false), 0);
15422
+ if (initialScrollRequest) {
15423
+ initialScrollRequest = false;
15424
+ return;
15425
+ }
15426
+ // Wait for DOM to render the new message before scrolling
15427
+ requestAnimationFrame(() => {
15428
+ requestAnimationFrame(() => {
15429
+ this.scrollToBottom(false);
15430
+ });
15431
+ });
15354
15432
  });
15355
15433
  }
15356
15434
  /**
@@ -15484,7 +15562,7 @@ class AXMessageListComponent {
15484
15562
  getRendererComponent(message) {
15485
15563
  const renderer = this.registry.messageRenderers.getRenderer(message);
15486
15564
  if (!renderer) {
15487
- console.warn('⚠️ No renderer found for message type:', message.type, 'Using fallback');
15565
+ console.warn('No renderer found for message type:', message.type, 'Using fallback');
15488
15566
  }
15489
15567
  return renderer?.component ?? AXFallbackRendererComponent;
15490
15568
  }
@@ -15838,9 +15916,14 @@ class AXMessageListComponent {
15838
15916
  </div>
15839
15917
  } @else if (messages().length === 0) {
15840
15918
  <div class="list-empty" role="status" aria-label="No messages">
15841
- <div class="empty-icon">✉️</div>
15842
- <h3 class="empty-title">No messages yet</h3>
15843
- <p class="empty-description">Be the first to send a message and start the conversation!</p>
15919
+ <ng-content select="ax-conversation-message-list-empty, [ax-conversation-message-list-empty]">
15920
+ <ng-container
15921
+ *ngComponentOutlet="
15922
+ resolvedEmptyStateComponent();
15923
+ inputs: { conversation: activeConversation()! }
15924
+ "
15925
+ ></ng-container>
15926
+ </ng-content>
15844
15927
  </div>
15845
15928
  } @else {
15846
15929
  <div
@@ -15947,23 +16030,7 @@ class AXMessageListComponent {
15947
16030
  @if (preview.type !== 'text') {
15948
16031
  <i [class]="preview.icon"></i>
15949
16032
  }
15950
- @if (preview.type === 'text') {
15951
- {{ preview.value }}
15952
- } @else if (preview.type === 'image') {
15953
- Image
15954
- } @else if (preview.type === 'video') {
15955
- Video
15956
- } @else if (preview.type === 'audio' || preview.type === 'voice') {
15957
- Voice message
15958
- } @else if (preview.type === 'file') {
15959
- File
15960
- } @else if (preview.type === 'location') {
15961
- Location
15962
- } @else if (preview.type === 'sticker') {
15963
- Sticker
15964
- } @else {
15965
- Message
15966
- }
16033
+ {{ '@acorex:chat.' + preview.type | translate | async }}
15967
16034
  </span>
15968
16035
  }
15969
16036
  </div>
@@ -16031,7 +16098,9 @@ class AXMessageListComponent {
16031
16098
  </span>
16032
16099
  }
16033
16100
  @if (isOwnMessage(message)) {
16034
- <span [class]="getStatusIconClasses(message)">{{ getStatusIcon(message) }}</span>
16101
+ <span [class]="getStatusIconClasses(message)">
16102
+ <ax-icon><i [class]="getStatusIcon(message)"></i></ax-icon>
16103
+ </span>
16035
16104
  }
16036
16105
  </div>
16037
16106
  </div>
@@ -16101,7 +16170,7 @@ class AXMessageListComponent {
16101
16170
  </ax-popover>
16102
16171
  }
16103
16172
  }
16104
- `, isInline: true, styles: [":host{display:block;height:100%;position:relative}.message-list{height:100%}.list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:3rem 2rem;gap:1.25rem;animation:fadeInUp .5s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.empty-icon{font-size:5.5rem;line-height:1;opacity:.35;margin-bottom:.5rem;filter:grayscale(.2)}.empty-title{font-size:1.625rem;font-weight:600;margin:0;color:rgb(var(--ax-sys-color-on-surface));letter-spacing:-.02em}.empty-description{font-size:1.0625rem;margin:0;color:rgb(var(--ax-sys-color-on-surface));opacity:.65;max-width:420px;line-height:1.7}.spinner{width:32px;height:32px;border:3px solid rgb(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));border-radius:50%;animation:spin .8s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.list-loading-more{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;text-align:center;color:rgb(var(--ax-sys-color-on-surface));opacity:.7}.messages-container{width:100%;height:100%;overflow-y:auto;overflow-x:hidden}.date-separator{position:sticky;z-index:150;top:0;display:flex;align-items:center;justify-content:center;padding:.5rem 0}.date-text{padding:.25rem .75rem;background:rgb(var(--ax-sys-color-lighter-surface));font-size:.75rem;font-weight:500;border-radius:1rem;width:7rem;display:flex;justify-content:center;align-items:center}.unread-separator{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0;padding:0 1rem}.unread-separator-line{flex:1;height:1px;background:rgb(var(--ax-sys-color-primary-500));opacity:.3}.unread-separator-text{font-size:.75rem;font-weight:600;color:rgb(var(--ax-sys-color-primary-500));text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.message-item{position:relative;display:flex;padding:.5rem 1rem;gap:.5rem;line-height:1rem;align-items:end;transition:background-color .3s ease}.message-highlight{background-color:rgba(var(--ax-sys-color-primary-500),.1);border-radius:.5rem}.fade-slide-in{animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes fadeSlideIn{0%{opacity:0;// transform: translateX(20%)}to{opacity:1;// transform: translateX(0)}}.message-own{flex-direction:row-reverse}.message-avatar{flex-shrink:0}.message-content-row{display:flex;flex-direction:row;align-items:flex-end;max-width:70%;min-width:0;flex:0 1 auto;position:relative;column-gap:.25rem}.message-content-row-own{justify-content:flex-end}.message-item:not(.message-own) .message-content-row{justify-content:flex-start}.message-bubble-container{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;max-width:100%;position:relative}.message-own .message-bubble-container{align-items:flex-end}.message-sender{font-size:.75rem;font-weight:600;margin-bottom:.1rem}.message-bubble{position:relative;display:flex;flex-direction:column;padding:.375rem .5rem .1rem;border-radius:1rem;background:rgb(var(--ax-sys-color-lightest-surface));word-wrap:break-word;transition:background-color .3s ease}.reply-preview{padding:.375rem .5rem;margin-bottom:.1rem;background:rgba(var(--ax-sys-color-primary-500),.08);border-radius:var(--ax-sys-border-radius);border-inline-start:3px solid rgb(var(--ax-sys-color-primary-500));cursor:pointer;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}.message-own .reply-preview{background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start:3px solid rgba(var(--ax-sys-color-on-primary-surface),.55)}.message-own .reply-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}.reply-preview-line{width:3px;background:currentColor;opacity:.5;border-radius:1.5px;flex-shrink:0}.reply-preview-content{flex:1;min-width:0}.reply-preview-sender{font-size:.75rem;font-weight:600;margin-bottom:.125rem;color:rgb(var(--ax-sys-color-primary-600))}.reply-preview-text{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-own .reply-preview-sender{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.95}.message-own .reply-preview-text{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.78}.forwarded-preview{display:flex;align-items:center;gap:.375rem;padding:.375rem .5rem;margin-bottom:.1rem;background:rgba(var(--ax-sys-color-primary-500),.08);border-radius:var(--ax-sys-border-radius);border-inline-start:3px solid rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}.message-own .forwarded-preview{background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start:3px solid rgba(var(--ax-sys-color-on-primary-surface),.55)}.message-own .forwarded-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}.forwarded-preview i{font-size:.8125rem;flex-shrink:0;color:rgb(var(--ax-sys-color-primary-600))}.forwarded-text{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.message-own .forwarded-preview i{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.95}.message-own .forwarded-text{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.78}.message-bubble-received{border-bottom-left-radius:.125rem}.message-bubble-received:before{content:\"\";display:block;background:rgb(var(--ax-sys-color-lightest-surface));width:.8rem;height:.8rem;position:absolute;bottom:0;left:-.7rem;border-top-left-radius:86%;corner-shape:scoop}.message-bubble-sent{border-bottom-right-radius:.125rem}.message-bubble-sent:after{content:\"\";display:block;background:rgb(var(--ax-sys-color-primary-surface));width:.8rem;height:.8rem;position:absolute;bottom:0;right:-.7rem;border-top-right-radius:86%;corner-shape:scoop}.message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}.message-content{font-size:.9375rem;line-height:1.5;white-space:pre-wrap}.message-footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:.1rem;gap:.25rem;font-size:.6875rem;opacity:.7;letter-spacing:.05rem;-webkit-user-select:none;user-select:none}.message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-variant-numeric:tabular-nums;font-size:.675rem}.message-footer-count i{font-size:.625rem;opacity:.9}.message-footer-count-value{font-weight:600}.message-footer-split{flex-shrink:0;align-self:center;width:1px;height:.65rem;background:rgb(var(--ax-sys-color-border-light-surface));opacity:.9;margin-inline:.2rem}.message-time{font-variant-numeric:tabular-nums;font-size:.675rem}.edited-indicator{display:inline-flex;align-items:center;gap:.25rem;font-size:.675rem;opacity:.75;padding-inline-start:.35rem;border-inline-start:1px solid rgb(var(--ax-sys-color-border-light-surface))}.status-icon{display:inline-flex;font-size:.75rem}.status-read{color:rgb(var(--ax-sys-color-primary-200))}.status-failed{color:rgb(var(--ax-sys-color-danger-200))}.message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}.reaction-bubble{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;min-height:1.375rem;padding:.1rem .35rem;margin:0;background:rgba(var(--ax-sys-color-on-surface),.06);color:rgb(var(--ax-sys-color-on-surface));border:1px solid rgba(var(--ax-sys-color-on-surface),.1);border-radius:.75rem;box-shadow:none;cursor:pointer;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}.reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}.reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}.reaction-emoji{font-size:.8125rem;line-height:1;display:inline-block}.reaction-count{font-size:.6875rem;font-weight:500;font-variant-numeric:tabular-nums;color:rgb(var(--ax-sys-color-on-surface));opacity:.65;line-height:1}.reaction-bubble-active .reaction-count{color:rgb(var(--ax-sys-color-primary-600));opacity:.95;font-weight:600}.message-own .reaction-bubble{background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2);color:rgb(var(--ax-sys-color-on-primary-surface))}.message-own .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.2);border-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}.message-own .reaction-bubble-active{background:rgba(var(--ax-sys-color-on-primary-surface),.28);border-color:rgba(var(--ax-sys-color-on-primary-surface),.5)}.message-own .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.34);border-color:rgba(var(--ax-sys-color-on-primary-surface),.6)}.message-own .reaction-count{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.8}.message-own .reaction-bubble-active .reaction-count{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:1}.message-reactions-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.2rem;margin-top:.25rem;justify-content:flex-start}.message-own .message-reactions-container{justify-content:flex-end}.add-reaction-button.add-reaction-outside{display:none;position:absolute;top:50%;inset-inline-end:-1.5rem;transform:translateY(-50%);align-items:center;justify-content:center;box-sizing:border-box;width:1.25rem;height:1.25rem;padding:0;margin:0;border-radius:50%;cursor:pointer;background:rgb(var(--ax-sys-color-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));box-shadow:0 1px 2px #0000000f}.add-reaction-button{padding-inline-start:.05rem}.message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-1.5rem;inset-inline-end:auto}.message-item:hover .add-reaction-button.add-reaction-outside,.add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}.add-reaction-button.add-reaction-outside:hover,.add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgb(var(--ax-sys-color-primary-500))}.add-reaction-button.add-reaction-outside i{font-size:.625rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.8}.reaction-picker-popup{position:fixed;background:rgb(var(--ax-sys-color-lightest-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:.5rem;z-index:100;min-width:auto;width:max-content;max-width:min(200px,92vw);box-shadow:0 4px 16px #0000001a;transform:translateY(-100%);margin-top:-.35rem;overflow:hidden}.reaction-picker-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.3rem .4rem .3rem .55rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface));min-height:0}.picker-title{font-size:.6875rem;font-weight:600;letter-spacing:.02em;color:rgb(var(--ax-sys-color-on-surface));opacity:.85}.picker-close{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:transparent;border:none;border-radius:.25rem;cursor:pointer;font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface) / .55);transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.picker-close:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}.reaction-bubble:focus-visible,.add-reaction-button:focus-visible,.picker-close:focus-visible,.reaction-picker-emoji:focus-visible,.action-trigger:focus-visible,.scroll-to-bottom:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}.reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,1fr);gap:.08rem;padding:.3rem .35rem .35rem}.reaction-picker-emoji{width:1.5rem;height:1.5rem;padding:0;background:transparent;border:1px solid transparent;border-radius:.35rem;font-size:.95rem;line-height:1;cursor:pointer;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-picker-emoji:hover{// transform: scale(1.15);background:rgb(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background:rgb(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgb(var(--ax-sys-color-primary-500) / .25)}.message-actions{padding-bottom:1.5rem;opacity:0;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);z-index:10}.message-item:hover .message-actions{opacity:1}.action-trigger{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ax-sys-color-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:var(--ax-sys-border-radius);font-size:.875rem;cursor:pointer;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.action-trigger:hover{background:rgb(var(--ax-sys-color-light-surface));// transform: scale(1.05)}.shortcut{font-size:.6875rem;opacity:.7}.scroll-to-bottom{position:absolute;bottom:1rem;right:1rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ax-sys-color-primary-500));color:rgb(var(--ax-sys-color-on-primary-surface));border:none;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);z-index:999}.scroll-to-bottom:hover{// transform: scale(1.1)}.slide-in{animation:slideInFromBottom var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.slide-out{opacity:0;transform:translateY(100%);transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge"], outputs: ["scrollThreshold"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
16173
+ `, isInline: true, styles: [":host{display:block;height:100%;position:relative}.message-list{height:100%}.list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:3rem 2rem;gap:1.25rem;animation:fadeInUp .5s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.empty-icon{font-size:5.5rem;line-height:1;opacity:.35;margin-bottom:.5rem;filter:grayscale(.2)}.empty-title{font-size:1.625rem;font-weight:600;margin:0;color:rgb(var(--ax-sys-color-on-surface));letter-spacing:-.02em}.empty-description{font-size:1.0625rem;margin:0;color:rgb(var(--ax-sys-color-on-surface));opacity:.65;max-width:420px;line-height:1.7}.spinner{width:32px;height:32px;border:3px solid rgb(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));border-radius:50%;animation:spin .8s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.list-loading-more{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;text-align:center;color:rgb(var(--ax-sys-color-on-surface));opacity:.7}.messages-container{width:100%;height:100%;overflow-y:auto;overflow-x:hidden}.date-separator{position:sticky;z-index:150;top:0;display:flex;align-items:center;justify-content:center;padding:.5rem 0}.date-text{padding:.25rem .75rem;background:rgb(var(--ax-sys-color-lighter-surface));font-size:.75rem;font-weight:500;border-radius:1rem;width:7rem;display:flex;justify-content:center;align-items:center}.unread-separator{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0;padding:0 1rem}.unread-separator-line{flex:1;height:1px;background:rgb(var(--ax-sys-color-primary-500));opacity:.3}.unread-separator-text{font-size:.75rem;font-weight:600;color:rgb(var(--ax-sys-color-primary-500));text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.message-item{position:relative;display:flex;padding:.5rem 1rem;gap:.5rem;line-height:1rem;align-items:end;transition:background-color .3s ease}.message-highlight{background-color:rgba(var(--ax-sys-color-primary-500),.1);border-radius:.5rem}.fade-slide-in{animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes fadeSlideIn{0%{opacity:0;// transform: translateX(20%)}to{opacity:1;// transform: translateX(0)}}.message-own{flex-direction:row-reverse}.message-avatar{flex-shrink:0}.message-content-row{display:flex;flex-direction:row;align-items:flex-end;max-width:70%;min-width:0;flex:0 1 auto;position:relative;column-gap:.25rem}.message-content-row-own{justify-content:flex-end}.message-item:not(.message-own) .message-content-row{justify-content:flex-start}.message-bubble-container{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;max-width:100%;position:relative}.message-own .message-bubble-container{align-items:flex-end}.message-sender{font-size:.75rem;font-weight:600;margin-bottom:.1rem}.message-bubble{position:relative;display:flex;flex-direction:column;padding:.5rem .5rem .1rem;border-radius:1rem;background:rgb(var(--ax-sys-color-lightest-surface));word-wrap:break-word;transition:background-color .3s ease}.reply-preview{padding:.375rem .5rem;margin-bottom:.1rem;background:rgba(var(--ax-sys-color-primary-500),.08);border-radius:var(--ax-sys-border-radius);border-inline-start:3px solid rgb(var(--ax-sys-color-primary-500));cursor:pointer;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}.message-own .reply-preview{background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start:3px solid rgba(var(--ax-sys-color-on-primary-surface),.55)}.message-own .reply-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}.reply-preview-line{width:3px;background:currentColor;opacity:.5;border-radius:1.5px;flex-shrink:0}.reply-preview-content{flex:1;min-width:0}.reply-preview-sender{font-size:.75rem;font-weight:600;margin-bottom:.125rem;color:rgb(var(--ax-sys-color-primary-600))}.reply-preview-text{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-own .reply-preview-sender{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.95}.message-own .reply-preview-text{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.78}.forwarded-preview{display:flex;align-items:center;gap:.375rem;padding:.375rem .5rem;margin-bottom:.1rem;background:rgba(var(--ax-sys-color-primary-500),.08);border-radius:var(--ax-sys-border-radius);border-inline-start:3px solid rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}.message-own .forwarded-preview{background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start:3px solid rgba(var(--ax-sys-color-on-primary-surface),.55)}.message-own .forwarded-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}.forwarded-preview i{font-size:.8125rem;flex-shrink:0;color:rgb(var(--ax-sys-color-primary-600))}.forwarded-text{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.message-own .forwarded-preview i{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.95}.message-own .forwarded-text{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.78}.message-bubble-received{border-bottom-left-radius:.125rem}.message-bubble-received:before{content:\"\";display:block;background:rgb(var(--ax-sys-color-lightest-surface));width:.8rem;height:.8rem;position:absolute;bottom:0;left:-.7rem;border-top-left-radius:86%;corner-shape:scoop}.message-bubble-sent{border-bottom-right-radius:.125rem}.message-bubble-sent:after{content:\"\";display:block;background:rgb(var(--ax-sys-color-primary-surface));width:.8rem;height:.8rem;position:absolute;bottom:0;right:-.7rem;border-top-right-radius:86%;corner-shape:scoop}.message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}.message-content{font-size:.9375rem;line-height:1.5;white-space:pre-wrap}.message-footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;padding-inline-start:.25rem;margin-top:.1rem;gap:.25rem;font-size:.6875rem;opacity:.7;letter-spacing:.05rem;-webkit-user-select:none;user-select:none}.message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-variant-numeric:tabular-nums;font-size:.675rem}.message-footer-count i{font-size:.625rem;opacity:.9}.message-footer-count-value{font-weight:600}.message-footer-split{flex-shrink:0;align-self:center;width:1px;height:.65rem;background:rgb(var(--ax-sys-color-border-light-surface));opacity:.9;margin-inline:.2rem}.message-time{font-variant-numeric:tabular-nums;font-size:.675rem}.edited-indicator{display:inline-flex;align-items:center;gap:.25rem;font-size:.675rem;opacity:.75;padding-inline-start:.35rem;border-inline-start:1px solid rgb(var(--ax-sys-color-border-light-surface))}.status-icon{display:inline-flex;align-items:center}.status-icon i{font-size:.75rem}.status-read{color:rgb(var(--ax-sys-color-primary-200))}.status-failed{color:rgb(var(--ax-sys-color-danger-200))}.message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}.reaction-bubble{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;min-height:1.375rem;padding:.1rem .35rem;margin:0;background:rgba(var(--ax-sys-color-on-surface),.06);color:rgb(var(--ax-sys-color-on-surface));border:1px solid rgba(var(--ax-sys-color-on-surface),.1);border-radius:.75rem;box-shadow:none;cursor:pointer;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}.reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}.reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}.reaction-emoji{font-size:.8125rem;line-height:1;display:inline-block}.reaction-count{font-size:.6875rem;font-weight:500;font-variant-numeric:tabular-nums;color:rgb(var(--ax-sys-color-on-surface));opacity:.65;line-height:1}.reaction-bubble-active .reaction-count{color:rgb(var(--ax-sys-color-primary-600));opacity:.95;font-weight:600}.message-own .reaction-bubble{background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2);color:rgb(var(--ax-sys-color-on-primary-surface))}.message-own .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.2);border-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}.message-own .reaction-bubble-active{background:rgba(var(--ax-sys-color-on-primary-surface),.28);border-color:rgba(var(--ax-sys-color-on-primary-surface),.5)}.message-own .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.34);border-color:rgba(var(--ax-sys-color-on-primary-surface),.6)}.message-own .reaction-count{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.8}.message-own .reaction-bubble-active .reaction-count{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:1}.message-reactions-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.2rem;margin-top:.25rem;justify-content:flex-start}.message-own .message-reactions-container{justify-content:flex-end}.add-reaction-button.add-reaction-outside{display:none;position:absolute;top:50%;inset-inline-end:-2.25rem;transform:translateY(-50%);align-items:center;justify-content:center;box-sizing:border-box;width:1.8rem;height:1.8rem;padding:0;margin:0;border-radius:50%;cursor:pointer;background:rgb(var(--ax-sys-color-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));box-shadow:0 1px 2px #0000000f}.add-reaction-button{padding-inline-start:.05rem}.message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.25rem;inset-inline-end:auto}.message-item:hover .add-reaction-button.add-reaction-outside,.add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}.add-reaction-button.add-reaction-outside:hover,.add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgb(var(--ax-sys-color-primary-500))}.add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.8}.reaction-picker-popup{position:fixed;background:rgb(var(--ax-sys-color-lightest-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:.65rem;z-index:100;min-width:auto;width:max-content;max-width:min(260px,92vw);box-shadow:0 4px 16px #0000001a;transform:translateY(-100%);margin-top:-.35rem;overflow:hidden}.reaction-picker-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.45rem .5rem .45rem .7rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface));min-height:0}.picker-title{font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:rgb(var(--ax-sys-color-on-surface));opacity:.85}.picker-close{display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;padding:0;background:transparent;border:none;border-radius:.25rem;cursor:pointer;font-size:.95rem;color:rgb(var(--ax-sys-color-on-surface) / .55);transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.picker-close:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}.reaction-bubble:focus-visible,.add-reaction-button:focus-visible,.picker-close:focus-visible,.reaction-picker-emoji:focus-visible,.action-trigger:focus-visible,.scroll-to-bottom:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}.reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,1fr);gap:.2rem;padding:.45rem .5rem .5rem}.reaction-picker-emoji{width:2rem;height:2rem;padding:0;background:transparent;border:1px solid transparent;border-radius:.45rem;font-size:1.15rem;line-height:1;cursor:pointer;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-picker-emoji:hover{// transform: scale(1.15);background:rgb(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background:rgb(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgb(var(--ax-sys-color-primary-500) / .25)}.message-actions{padding-bottom:1.5rem;opacity:0;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);z-index:10}.message-item:hover .message-actions{opacity:1}.action-trigger{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ax-sys-color-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:var(--ax-sys-border-radius);font-size:.875rem;cursor:pointer;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.action-trigger:hover{background:rgb(var(--ax-sys-color-light-surface));// transform: scale(1.05)}.shortcut{font-size:.6875rem;opacity:.7}.scroll-to-bottom{position:absolute;bottom:1rem;right:1rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ax-sys-color-primary-500));color:rgb(var(--ax-sys-color-on-primary-surface));border:none;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);z-index:999}.scroll-to-bottom:hover{// transform: scale(1.1)}.slide-in{animation:slideInFromBottom var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.slide-out{opacity:0;transform:translateY(100%);transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge"], outputs: ["scrollThreshold"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXFormatPipe, name: "format" }, { kind: "pipe", type: i6$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
16105
16174
  }
16106
16175
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMessageListComponent, decorators: [{
16107
16176
  type: Component,
@@ -16118,6 +16187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
16118
16187
  AXFormatModule,
16119
16188
  AXDateTimeModule,
16120
16189
  AXPopoverModule,
16190
+ AXTranslationModule,
16121
16191
  AXInfiniteScrollDirective,
16122
16192
  ], template: `
16123
16193
  @if (activeConversation()) {
@@ -16136,9 +16206,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
16136
16206
  </div>
16137
16207
  } @else if (messages().length === 0) {
16138
16208
  <div class="list-empty" role="status" aria-label="No messages">
16139
- <div class="empty-icon">✉️</div>
16140
- <h3 class="empty-title">No messages yet</h3>
16141
- <p class="empty-description">Be the first to send a message and start the conversation!</p>
16209
+ <ng-content select="ax-conversation-message-list-empty, [ax-conversation-message-list-empty]">
16210
+ <ng-container
16211
+ *ngComponentOutlet="
16212
+ resolvedEmptyStateComponent();
16213
+ inputs: { conversation: activeConversation()! }
16214
+ "
16215
+ ></ng-container>
16216
+ </ng-content>
16142
16217
  </div>
16143
16218
  } @else {
16144
16219
  <div
@@ -16245,23 +16320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
16245
16320
  @if (preview.type !== 'text') {
16246
16321
  <i [class]="preview.icon"></i>
16247
16322
  }
16248
- @if (preview.type === 'text') {
16249
- {{ preview.value }}
16250
- } @else if (preview.type === 'image') {
16251
- Image
16252
- } @else if (preview.type === 'video') {
16253
- Video
16254
- } @else if (preview.type === 'audio' || preview.type === 'voice') {
16255
- Voice message
16256
- } @else if (preview.type === 'file') {
16257
- File
16258
- } @else if (preview.type === 'location') {
16259
- Location
16260
- } @else if (preview.type === 'sticker') {
16261
- Sticker
16262
- } @else {
16263
- Message
16264
- }
16323
+ {{ '@acorex:chat.' + preview.type | translate | async }}
16265
16324
  </span>
16266
16325
  }
16267
16326
  </div>
@@ -16329,7 +16388,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
16329
16388
  </span>
16330
16389
  }
16331
16390
  @if (isOwnMessage(message)) {
16332
- <span [class]="getStatusIconClasses(message)">{{ getStatusIcon(message) }}</span>
16391
+ <span [class]="getStatusIconClasses(message)">
16392
+ <ax-icon><i [class]="getStatusIcon(message)"></i></ax-icon>
16393
+ </span>
16333
16394
  }
16334
16395
  </div>
16335
16396
  </div>
@@ -16399,7 +16460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
16399
16460
  </ax-popover>
16400
16461
  }
16401
16462
  }
16402
- `, styles: [":host{display:block;height:100%;position:relative}.message-list{height:100%}.list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:3rem 2rem;gap:1.25rem;animation:fadeInUp .5s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.empty-icon{font-size:5.5rem;line-height:1;opacity:.35;margin-bottom:.5rem;filter:grayscale(.2)}.empty-title{font-size:1.625rem;font-weight:600;margin:0;color:rgb(var(--ax-sys-color-on-surface));letter-spacing:-.02em}.empty-description{font-size:1.0625rem;margin:0;color:rgb(var(--ax-sys-color-on-surface));opacity:.65;max-width:420px;line-height:1.7}.spinner{width:32px;height:32px;border:3px solid rgb(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));border-radius:50%;animation:spin .8s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.list-loading-more{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;text-align:center;color:rgb(var(--ax-sys-color-on-surface));opacity:.7}.messages-container{width:100%;height:100%;overflow-y:auto;overflow-x:hidden}.date-separator{position:sticky;z-index:150;top:0;display:flex;align-items:center;justify-content:center;padding:.5rem 0}.date-text{padding:.25rem .75rem;background:rgb(var(--ax-sys-color-lighter-surface));font-size:.75rem;font-weight:500;border-radius:1rem;width:7rem;display:flex;justify-content:center;align-items:center}.unread-separator{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0;padding:0 1rem}.unread-separator-line{flex:1;height:1px;background:rgb(var(--ax-sys-color-primary-500));opacity:.3}.unread-separator-text{font-size:.75rem;font-weight:600;color:rgb(var(--ax-sys-color-primary-500));text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.message-item{position:relative;display:flex;padding:.5rem 1rem;gap:.5rem;line-height:1rem;align-items:end;transition:background-color .3s ease}.message-highlight{background-color:rgba(var(--ax-sys-color-primary-500),.1);border-radius:.5rem}.fade-slide-in{animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes fadeSlideIn{0%{opacity:0;// transform: translateX(20%)}to{opacity:1;// transform: translateX(0)}}.message-own{flex-direction:row-reverse}.message-avatar{flex-shrink:0}.message-content-row{display:flex;flex-direction:row;align-items:flex-end;max-width:70%;min-width:0;flex:0 1 auto;position:relative;column-gap:.25rem}.message-content-row-own{justify-content:flex-end}.message-item:not(.message-own) .message-content-row{justify-content:flex-start}.message-bubble-container{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;max-width:100%;position:relative}.message-own .message-bubble-container{align-items:flex-end}.message-sender{font-size:.75rem;font-weight:600;margin-bottom:.1rem}.message-bubble{position:relative;display:flex;flex-direction:column;padding:.375rem .5rem .1rem;border-radius:1rem;background:rgb(var(--ax-sys-color-lightest-surface));word-wrap:break-word;transition:background-color .3s ease}.reply-preview{padding:.375rem .5rem;margin-bottom:.1rem;background:rgba(var(--ax-sys-color-primary-500),.08);border-radius:var(--ax-sys-border-radius);border-inline-start:3px solid rgb(var(--ax-sys-color-primary-500));cursor:pointer;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}.message-own .reply-preview{background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start:3px solid rgba(var(--ax-sys-color-on-primary-surface),.55)}.message-own .reply-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}.reply-preview-line{width:3px;background:currentColor;opacity:.5;border-radius:1.5px;flex-shrink:0}.reply-preview-content{flex:1;min-width:0}.reply-preview-sender{font-size:.75rem;font-weight:600;margin-bottom:.125rem;color:rgb(var(--ax-sys-color-primary-600))}.reply-preview-text{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-own .reply-preview-sender{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.95}.message-own .reply-preview-text{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.78}.forwarded-preview{display:flex;align-items:center;gap:.375rem;padding:.375rem .5rem;margin-bottom:.1rem;background:rgba(var(--ax-sys-color-primary-500),.08);border-radius:var(--ax-sys-border-radius);border-inline-start:3px solid rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}.message-own .forwarded-preview{background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start:3px solid rgba(var(--ax-sys-color-on-primary-surface),.55)}.message-own .forwarded-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}.forwarded-preview i{font-size:.8125rem;flex-shrink:0;color:rgb(var(--ax-sys-color-primary-600))}.forwarded-text{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.message-own .forwarded-preview i{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.95}.message-own .forwarded-text{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.78}.message-bubble-received{border-bottom-left-radius:.125rem}.message-bubble-received:before{content:\"\";display:block;background:rgb(var(--ax-sys-color-lightest-surface));width:.8rem;height:.8rem;position:absolute;bottom:0;left:-.7rem;border-top-left-radius:86%;corner-shape:scoop}.message-bubble-sent{border-bottom-right-radius:.125rem}.message-bubble-sent:after{content:\"\";display:block;background:rgb(var(--ax-sys-color-primary-surface));width:.8rem;height:.8rem;position:absolute;bottom:0;right:-.7rem;border-top-right-radius:86%;corner-shape:scoop}.message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}.message-content{font-size:.9375rem;line-height:1.5;white-space:pre-wrap}.message-footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:.1rem;gap:.25rem;font-size:.6875rem;opacity:.7;letter-spacing:.05rem;-webkit-user-select:none;user-select:none}.message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-variant-numeric:tabular-nums;font-size:.675rem}.message-footer-count i{font-size:.625rem;opacity:.9}.message-footer-count-value{font-weight:600}.message-footer-split{flex-shrink:0;align-self:center;width:1px;height:.65rem;background:rgb(var(--ax-sys-color-border-light-surface));opacity:.9;margin-inline:.2rem}.message-time{font-variant-numeric:tabular-nums;font-size:.675rem}.edited-indicator{display:inline-flex;align-items:center;gap:.25rem;font-size:.675rem;opacity:.75;padding-inline-start:.35rem;border-inline-start:1px solid rgb(var(--ax-sys-color-border-light-surface))}.status-icon{display:inline-flex;font-size:.75rem}.status-read{color:rgb(var(--ax-sys-color-primary-200))}.status-failed{color:rgb(var(--ax-sys-color-danger-200))}.message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}.reaction-bubble{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;min-height:1.375rem;padding:.1rem .35rem;margin:0;background:rgba(var(--ax-sys-color-on-surface),.06);color:rgb(var(--ax-sys-color-on-surface));border:1px solid rgba(var(--ax-sys-color-on-surface),.1);border-radius:.75rem;box-shadow:none;cursor:pointer;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}.reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}.reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}.reaction-emoji{font-size:.8125rem;line-height:1;display:inline-block}.reaction-count{font-size:.6875rem;font-weight:500;font-variant-numeric:tabular-nums;color:rgb(var(--ax-sys-color-on-surface));opacity:.65;line-height:1}.reaction-bubble-active .reaction-count{color:rgb(var(--ax-sys-color-primary-600));opacity:.95;font-weight:600}.message-own .reaction-bubble{background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2);color:rgb(var(--ax-sys-color-on-primary-surface))}.message-own .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.2);border-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}.message-own .reaction-bubble-active{background:rgba(var(--ax-sys-color-on-primary-surface),.28);border-color:rgba(var(--ax-sys-color-on-primary-surface),.5)}.message-own .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.34);border-color:rgba(var(--ax-sys-color-on-primary-surface),.6)}.message-own .reaction-count{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.8}.message-own .reaction-bubble-active .reaction-count{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:1}.message-reactions-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.2rem;margin-top:.25rem;justify-content:flex-start}.message-own .message-reactions-container{justify-content:flex-end}.add-reaction-button.add-reaction-outside{display:none;position:absolute;top:50%;inset-inline-end:-1.5rem;transform:translateY(-50%);align-items:center;justify-content:center;box-sizing:border-box;width:1.25rem;height:1.25rem;padding:0;margin:0;border-radius:50%;cursor:pointer;background:rgb(var(--ax-sys-color-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));box-shadow:0 1px 2px #0000000f}.add-reaction-button{padding-inline-start:.05rem}.message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-1.5rem;inset-inline-end:auto}.message-item:hover .add-reaction-button.add-reaction-outside,.add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}.add-reaction-button.add-reaction-outside:hover,.add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgb(var(--ax-sys-color-primary-500))}.add-reaction-button.add-reaction-outside i{font-size:.625rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.8}.reaction-picker-popup{position:fixed;background:rgb(var(--ax-sys-color-lightest-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:.5rem;z-index:100;min-width:auto;width:max-content;max-width:min(200px,92vw);box-shadow:0 4px 16px #0000001a;transform:translateY(-100%);margin-top:-.35rem;overflow:hidden}.reaction-picker-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.3rem .4rem .3rem .55rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface));min-height:0}.picker-title{font-size:.6875rem;font-weight:600;letter-spacing:.02em;color:rgb(var(--ax-sys-color-on-surface));opacity:.85}.picker-close{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:transparent;border:none;border-radius:.25rem;cursor:pointer;font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface) / .55);transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.picker-close:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}.reaction-bubble:focus-visible,.add-reaction-button:focus-visible,.picker-close:focus-visible,.reaction-picker-emoji:focus-visible,.action-trigger:focus-visible,.scroll-to-bottom:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}.reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,1fr);gap:.08rem;padding:.3rem .35rem .35rem}.reaction-picker-emoji{width:1.5rem;height:1.5rem;padding:0;background:transparent;border:1px solid transparent;border-radius:.35rem;font-size:.95rem;line-height:1;cursor:pointer;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-picker-emoji:hover{// transform: scale(1.15);background:rgb(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background:rgb(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgb(var(--ax-sys-color-primary-500) / .25)}.message-actions{padding-bottom:1.5rem;opacity:0;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);z-index:10}.message-item:hover .message-actions{opacity:1}.action-trigger{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ax-sys-color-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:var(--ax-sys-border-radius);font-size:.875rem;cursor:pointer;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.action-trigger:hover{background:rgb(var(--ax-sys-color-light-surface));// transform: scale(1.05)}.shortcut{font-size:.6875rem;opacity:.7}.scroll-to-bottom{position:absolute;bottom:1rem;right:1rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ax-sys-color-primary-500));color:rgb(var(--ax-sys-color-on-primary-surface));border:none;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);z-index:999}.scroll-to-bottom:hover{// transform: scale(1.1)}.slide-in{animation:slideInFromBottom var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.slide-out{opacity:0;transform:translateY(100%);transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}\n"] }]
16463
+ `, styles: [":host{display:block;height:100%;position:relative}.message-list{height:100%}.list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:3rem 2rem;gap:1.25rem;animation:fadeInUp .5s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.empty-icon{font-size:5.5rem;line-height:1;opacity:.35;margin-bottom:.5rem;filter:grayscale(.2)}.empty-title{font-size:1.625rem;font-weight:600;margin:0;color:rgb(var(--ax-sys-color-on-surface));letter-spacing:-.02em}.empty-description{font-size:1.0625rem;margin:0;color:rgb(var(--ax-sys-color-on-surface));opacity:.65;max-width:420px;line-height:1.7}.spinner{width:32px;height:32px;border:3px solid rgb(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));border-radius:50%;animation:spin .8s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.list-loading-more{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;text-align:center;color:rgb(var(--ax-sys-color-on-surface));opacity:.7}.messages-container{width:100%;height:100%;overflow-y:auto;overflow-x:hidden}.date-separator{position:sticky;z-index:150;top:0;display:flex;align-items:center;justify-content:center;padding:.5rem 0}.date-text{padding:.25rem .75rem;background:rgb(var(--ax-sys-color-lighter-surface));font-size:.75rem;font-weight:500;border-radius:1rem;width:7rem;display:flex;justify-content:center;align-items:center}.unread-separator{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0;padding:0 1rem}.unread-separator-line{flex:1;height:1px;background:rgb(var(--ax-sys-color-primary-500));opacity:.3}.unread-separator-text{font-size:.75rem;font-weight:600;color:rgb(var(--ax-sys-color-primary-500));text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.message-item{position:relative;display:flex;padding:.5rem 1rem;gap:.5rem;line-height:1rem;align-items:end;transition:background-color .3s ease}.message-highlight{background-color:rgba(var(--ax-sys-color-primary-500),.1);border-radius:.5rem}.fade-slide-in{animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes fadeSlideIn{0%{opacity:0;// transform: translateX(20%)}to{opacity:1;// transform: translateX(0)}}.message-own{flex-direction:row-reverse}.message-avatar{flex-shrink:0}.message-content-row{display:flex;flex-direction:row;align-items:flex-end;max-width:70%;min-width:0;flex:0 1 auto;position:relative;column-gap:.25rem}.message-content-row-own{justify-content:flex-end}.message-item:not(.message-own) .message-content-row{justify-content:flex-start}.message-bubble-container{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;max-width:100%;position:relative}.message-own .message-bubble-container{align-items:flex-end}.message-sender{font-size:.75rem;font-weight:600;margin-bottom:.1rem}.message-bubble{position:relative;display:flex;flex-direction:column;padding:.5rem .5rem .1rem;border-radius:1rem;background:rgb(var(--ax-sys-color-lightest-surface));word-wrap:break-word;transition:background-color .3s ease}.reply-preview{padding:.375rem .5rem;margin-bottom:.1rem;background:rgba(var(--ax-sys-color-primary-500),.08);border-radius:var(--ax-sys-border-radius);border-inline-start:3px solid rgb(var(--ax-sys-color-primary-500));cursor:pointer;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}.message-own .reply-preview{background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start:3px solid rgba(var(--ax-sys-color-on-primary-surface),.55)}.message-own .reply-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}.reply-preview-line{width:3px;background:currentColor;opacity:.5;border-radius:1.5px;flex-shrink:0}.reply-preview-content{flex:1;min-width:0}.reply-preview-sender{font-size:.75rem;font-weight:600;margin-bottom:.125rem;color:rgb(var(--ax-sys-color-primary-600))}.reply-preview-text{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-own .reply-preview-sender{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.95}.message-own .reply-preview-text{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.78}.forwarded-preview{display:flex;align-items:center;gap:.375rem;padding:.375rem .5rem;margin-bottom:.1rem;background:rgba(var(--ax-sys-color-primary-500),.08);border-radius:var(--ax-sys-border-radius);border-inline-start:3px solid rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}.message-own .forwarded-preview{background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start:3px solid rgba(var(--ax-sys-color-on-primary-surface),.55)}.message-own .forwarded-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}.forwarded-preview i{font-size:.8125rem;flex-shrink:0;color:rgb(var(--ax-sys-color-primary-600))}.forwarded-text{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.message-own .forwarded-preview i{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.95}.message-own .forwarded-text{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.78}.message-bubble-received{border-bottom-left-radius:.125rem}.message-bubble-received:before{content:\"\";display:block;background:rgb(var(--ax-sys-color-lightest-surface));width:.8rem;height:.8rem;position:absolute;bottom:0;left:-.7rem;border-top-left-radius:86%;corner-shape:scoop}.message-bubble-sent{border-bottom-right-radius:.125rem}.message-bubble-sent:after{content:\"\";display:block;background:rgb(var(--ax-sys-color-primary-surface));width:.8rem;height:.8rem;position:absolute;bottom:0;right:-.7rem;border-top-right-radius:86%;corner-shape:scoop}.message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}.message-content{font-size:.9375rem;line-height:1.5;white-space:pre-wrap}.message-footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;padding-inline-start:.25rem;margin-top:.1rem;gap:.25rem;font-size:.6875rem;opacity:.7;letter-spacing:.05rem;-webkit-user-select:none;user-select:none}.message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-variant-numeric:tabular-nums;font-size:.675rem}.message-footer-count i{font-size:.625rem;opacity:.9}.message-footer-count-value{font-weight:600}.message-footer-split{flex-shrink:0;align-self:center;width:1px;height:.65rem;background:rgb(var(--ax-sys-color-border-light-surface));opacity:.9;margin-inline:.2rem}.message-time{font-variant-numeric:tabular-nums;font-size:.675rem}.edited-indicator{display:inline-flex;align-items:center;gap:.25rem;font-size:.675rem;opacity:.75;padding-inline-start:.35rem;border-inline-start:1px solid rgb(var(--ax-sys-color-border-light-surface))}.status-icon{display:inline-flex;align-items:center}.status-icon i{font-size:.75rem}.status-read{color:rgb(var(--ax-sys-color-primary-200))}.status-failed{color:rgb(var(--ax-sys-color-danger-200))}.message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}.reaction-bubble{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;min-height:1.375rem;padding:.1rem .35rem;margin:0;background:rgba(var(--ax-sys-color-on-surface),.06);color:rgb(var(--ax-sys-color-on-surface));border:1px solid rgba(var(--ax-sys-color-on-surface),.1);border-radius:.75rem;box-shadow:none;cursor:pointer;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}.reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}.reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}.reaction-emoji{font-size:.8125rem;line-height:1;display:inline-block}.reaction-count{font-size:.6875rem;font-weight:500;font-variant-numeric:tabular-nums;color:rgb(var(--ax-sys-color-on-surface));opacity:.65;line-height:1}.reaction-bubble-active .reaction-count{color:rgb(var(--ax-sys-color-primary-600));opacity:.95;font-weight:600}.message-own .reaction-bubble{background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2);color:rgb(var(--ax-sys-color-on-primary-surface))}.message-own .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.2);border-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}.message-own .reaction-bubble-active{background:rgba(var(--ax-sys-color-on-primary-surface),.28);border-color:rgba(var(--ax-sys-color-on-primary-surface),.5)}.message-own .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.34);border-color:rgba(var(--ax-sys-color-on-primary-surface),.6)}.message-own .reaction-count{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.8}.message-own .reaction-bubble-active .reaction-count{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:1}.message-reactions-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.2rem;margin-top:.25rem;justify-content:flex-start}.message-own .message-reactions-container{justify-content:flex-end}.add-reaction-button.add-reaction-outside{display:none;position:absolute;top:50%;inset-inline-end:-2.25rem;transform:translateY(-50%);align-items:center;justify-content:center;box-sizing:border-box;width:1.8rem;height:1.8rem;padding:0;margin:0;border-radius:50%;cursor:pointer;background:rgb(var(--ax-sys-color-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));box-shadow:0 1px 2px #0000000f}.add-reaction-button{padding-inline-start:.05rem}.message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.25rem;inset-inline-end:auto}.message-item:hover .add-reaction-button.add-reaction-outside,.add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}.add-reaction-button.add-reaction-outside:hover,.add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgb(var(--ax-sys-color-primary-500))}.add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.8}.reaction-picker-popup{position:fixed;background:rgb(var(--ax-sys-color-lightest-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:.65rem;z-index:100;min-width:auto;width:max-content;max-width:min(260px,92vw);box-shadow:0 4px 16px #0000001a;transform:translateY(-100%);margin-top:-.35rem;overflow:hidden}.reaction-picker-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.45rem .5rem .45rem .7rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface));min-height:0}.picker-title{font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:rgb(var(--ax-sys-color-on-surface));opacity:.85}.picker-close{display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;padding:0;background:transparent;border:none;border-radius:.25rem;cursor:pointer;font-size:.95rem;color:rgb(var(--ax-sys-color-on-surface) / .55);transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.picker-close:hover{background:rgb(var(--ax-sys-color-danger-500) / .1);color:rgb(var(--ax-sys-color-danger-500))}.reaction-bubble:focus-visible,.add-reaction-button:focus-visible,.picker-close:focus-visible,.reaction-picker-emoji:focus-visible,.action-trigger:focus-visible,.scroll-to-bottom:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}.reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,1fr);gap:.2rem;padding:.45rem .5rem .5rem}.reaction-picker-emoji{width:2rem;height:2rem;padding:0;background:transparent;border:1px solid transparent;border-radius:.45rem;font-size:1.15rem;line-height:1;cursor:pointer;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-picker-emoji:hover{// transform: scale(1.15);background:rgb(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background:rgb(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgb(var(--ax-sys-color-primary-500) / .25)}.message-actions{padding-bottom:1.5rem;opacity:0;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);z-index:10}.message-item:hover .message-actions{opacity:1}.action-trigger{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ax-sys-color-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:var(--ax-sys-border-radius);font-size:.875rem;cursor:pointer;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.action-trigger:hover{background:rgb(var(--ax-sys-color-light-surface));// transform: scale(1.05)}.shortcut{font-size:.6875rem;opacity:.7}.scroll-to-bottom{position:absolute;bottom:1rem;right:1rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ax-sys-color-primary-500));color:rgb(var(--ax-sys-color-on-primary-surface));border:none;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);z-index:999}.scroll-to-bottom:hover{// transform: scale(1.1)}.slide-in{animation:slideInFromBottom var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.slide-out{opacity:0;transform:translateY(100%);transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}\n"] }]
16403
16464
  }], ctorParameters: () => [] });
16404
16465
 
16405
16466
  /**
@@ -16611,7 +16672,7 @@ class AXConversationItemComponent {
16611
16672
  (onItemClick)="handleContextMenuItemClick($event)"
16612
16673
  >
16613
16674
  </ax-context-menu>
16614
- `, isInline: true, styles: [":host{display:block}.conversation-item{display:flex;align-items:center;gap:.75rem;padding:.375rem .75rem;margin:.375rem;border-radius:.5rem;cursor:pointer;transition:background .2s}.conversation-item:focus-visible,.conversation-item:hover{background:rgb(var(--ax-sys-color-light-surface));outline:none}.conversation-item-active{background:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-on-primary-lightest-surface))}.conversation-item-active:hover{background:rgb(var(--ax-sys-color-primary-lighter-surface))}.item-avatar{flex-shrink:0}.avatar-wrapper{position:relative}.avatar-status{position:absolute;bottom:2px;right:2px;width:12px;height:12px;border-radius:50%}.avatar-status.status-online{border:2px solid rgb(var(--ax-sys-color-surface));background-color:rgb(var(--ax-sys-color-success-500))}// .avatar-status.status-offline{// border: 2px solid rgb(var(--ax-sys-color-surface));// background: rgb(var(--ax-sys-color-neutral));//}.avatar-status.status-away{border:2px solid rgb(var(--ax-sys-color-surface));background-color:rgb(var(--ax-sys-color-warning-500))}.item-content{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0;line-height:1.1rem}.item-header{display:flex;align-items:center;justify-content:space-between;gap:.25rem}.item-title{display:flex;align-items:center;// gap: .25rem;font-weight:600;font-size:.875rem;flex:1;min-width:0}.item-title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.item-time{font-variant-numeric:tabular-nums;flex-shrink:0;font-size:.75rem;opacity:.7}.item-description{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;opacity:.7;min-width:0}.typing-indicator{color:rgb(var(--ax-sys-color-primary-500));font-style:italic;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.last-message{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-message{// font-weight: 600}.item-badge{flex-shrink:0}.mute-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-warning-500))}.block-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-danger-500))}.pin-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-primary-500));flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
16675
+ `, isInline: true, styles: [":host{display:block}.conversation-item{display:flex;align-items:center;gap:.75rem;padding:.375rem .75rem;margin:.375rem;border-radius:.5rem;cursor:pointer;transition:background .2s}.conversation-item:focus-visible,.conversation-item:hover{background:rgb(var(--ax-sys-color-light-surface));outline:none}.conversation-item-active{background:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-on-primary-lightest-surface))}.conversation-item-active:hover{background:rgb(var(--ax-sys-color-primary-lighter-surface))}.item-avatar{flex-shrink:0}.avatar-wrapper{position:relative}.avatar-status{position:absolute;bottom:2px;right:2px;width:12px;height:12px;border-radius:50%}.avatar-status.status-online{border:2px solid rgb(var(--ax-sys-color-surface));background-color:rgb(var(--ax-sys-color-success-500))}// .avatar-status.status-offline{// border: 2px solid rgb(var(--ax-sys-color-surface));// background: rgb(var(--ax-sys-color-neutral));//}.avatar-status.status-away{border:2px solid rgb(var(--ax-sys-color-surface));background-color:rgb(var(--ax-sys-color-warning-500))}.item-content{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0;line-height:1.1rem}.item-header{display:flex;align-items:center;justify-content:space-between;gap:.25rem}.item-title{display:flex;align-items:center;// gap: .25rem;font-weight:600;font-size:.875rem;flex:1;min-width:0}.item-title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.item-time{font-variant-numeric:tabular-nums;flex-shrink:0;font-size:.75rem;opacity:.7}.item-description{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;opacity:.7;min-width:0}.typing-indicator{color:rgb(var(--ax-sys-color-primary-500));font-style:italic;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.last-message{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-message{// font-weight: 600}.item-badge{flex-shrink:0}.mute-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-warning-500))}.block-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-danger-500))}.pin-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-primary-500));flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
16615
16676
  }
16616
16677
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConversationItemComponent, decorators: [{
16617
16678
  type: Component,
@@ -16987,12 +17048,8 @@ class AXNewConversationDialogComponent extends AXBasePageComponent {
16987
17048
 
16988
17049
  <ng-template #userItemTpl let-item>
16989
17050
  @if (userFromItem(item); as user) {
16990
- <div class="user-row" [class.user-row-selected]="isUserSelected(user.id)">
16991
- <span class="check-indicator" [class.check-indicator-selected]="isUserSelected(user.id)">
16992
- @if (isUserSelected(user.id)) {
16993
- <i class="fa-solid fa-check"></i>
16994
- }
16995
- </span>
17051
+ <div class="ax-label-container user-item-content">
17052
+ <input class="ax-checkbox" type="checkbox" [checked]="isUserSelected(user.id)" tabindex="0" />
16996
17053
  <ax-avatar [size]="36" [color]="'primary'">
16997
17054
  @if (user.avatar) {
16998
17055
  <ax-image [src]="user.avatar" [alt]="user.name"></ax-image>
@@ -17000,13 +17057,11 @@ class AXNewConversationDialogComponent extends AXBasePageComponent {
17000
17057
  <ax-label>{{ getInitials(user.name) }}</ax-label>
17001
17058
  }
17002
17059
  </ax-avatar>
17003
- <div class="user-meta">
17004
- <span class="user-name">{{ user.name }}</span>
17005
- </div>
17060
+ <span class="ax-checkbox-label ax-truncated user-name-text">{{ user.name }}</span>
17006
17061
  </div>
17007
17062
  }
17008
17063
  </ng-template>
17009
- `, isInline: true, styles: [":host{display:block}.new-conversation-panel{display:flex;flex-direction:column;width:100%;overflow:hidden}.new-conversation-dialog-content{flex:1;min-height:0;overflow:hidden;padding:.875rem;display:flex;flex-direction:column;gap:.75rem}.form-field--grow{flex:1;min-height:0;display:flex;flex-direction:column}.group-details-step{flex:1;min-height:0;display:flex;flex-direction:column;gap:.75rem}.form-field{display:flex;flex-direction:column;gap:.35rem}.field-label{font-size:.875rem;font-weight:500;color:var(--ax-text-secondary, #6b7280)}.title-input{height:2.25rem;border-radius:.5rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-lighter-surface));padding:0 .7rem;color:rgb(var(--ax-sys-color-on-surface));font:inherit}.title-input:focus{outline:2px solid rgba(var(--ax-sys-color-primary-500),.25);outline-offset:0}.users-list-wrap{height:min(50vh,36rem);overflow:hidden}.users-list{display:block;height:100%}.users-list-header{display:block;position:sticky;top:0;z-index:1;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.users-list-header-inner{padding:.5rem .75rem}.user-row{display:flex;align-items:center;gap:.6rem;height:100%;padding:.1rem .75rem;border-radius:.5rem;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.check-indicator{width:1rem;height:1rem;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgb(var(--ax-sys-color-border-light-surface));font-size:.625rem;color:rgb(var(--ax-sys-color-on-primary-surface))}.check-indicator-selected{border-color:rgb(var(--ax-sys-color-primary-500));background:rgb(var(--ax-sys-color-primary-500))}.user-meta{display:flex;min-width:0}.user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:500}.users-list-empty{padding:1rem;text-align:center;font-size:.85rem;opacity:.7}.dialog-footer{flex-shrink:0;padding:1rem;border-top:1px solid var(--ax-border-color, #e5e7eb);display:flex;justify-content:flex-end;gap:.75rem}.dialog-footer>ax-suffix{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXAvatarPickerComponent, selector: "ax-avatar-picker", inputs: ["showClearButton", "avatarUrl"], outputs: ["avatarUrlChange", "onFileSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
17064
+ `, isInline: true, styles: [":host{display:block}.new-conversation-panel{display:flex;flex-direction:column;width:100%;overflow:hidden}.new-conversation-dialog-content{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:.75rem}.form-field--grow{flex:1;min-height:0;display:flex;flex-direction:column}.group-details-step{flex:1;min-height:0;padding:.5rem .75rem;display:flex;flex-direction:column;gap:.75rem}.form-field{display:flex;flex-direction:column;gap:.35rem}.field-label{font-size:.875rem;font-weight:500;color:var(--ax-text-secondary, #6b7280)}.title-input{height:2.25rem;border-radius:.5rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-lighter-surface));padding:0 .7rem;color:rgb(var(--ax-sys-color-on-surface));font:inherit}.title-input:focus{outline:2px solid rgba(var(--ax-sys-color-primary-500),.25);outline-offset:0}.users-list-wrap{height:min(50vh,36rem);overflow:hidden}.users-list{display:block;height:100%}.users-list-header{display:block;position:sticky;top:0;z-index:1;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.users-list-header-inner{padding:.5rem .75rem}.user-item-content{display:flex;align-items:center;gap:.6rem;height:100%;padding:.1rem .75rem;min-width:0}.user-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:500}.users-list-empty{padding:1rem;text-align:center;font-size:.85rem;opacity:.7}.dialog-footer{flex-shrink:0;padding:1rem;border-top:1px solid var(--ax-border-color, #e5e7eb);display:flex;justify-content:flex-end;gap:.75rem}.dialog-footer>ax-suffix{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXAvatarPickerComponent, selector: "ax-avatar-picker", inputs: ["showClearButton", "avatarUrl"], outputs: ["avatarUrlChange", "onFileSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
17010
17065
  }
17011
17066
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXNewConversationDialogComponent, decorators: [{
17012
17067
  type: Component,
@@ -17112,12 +17167,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
17112
17167
 
17113
17168
  <ng-template #userItemTpl let-item>
17114
17169
  @if (userFromItem(item); as user) {
17115
- <div class="user-row" [class.user-row-selected]="isUserSelected(user.id)">
17116
- <span class="check-indicator" [class.check-indicator-selected]="isUserSelected(user.id)">
17117
- @if (isUserSelected(user.id)) {
17118
- <i class="fa-solid fa-check"></i>
17119
- }
17120
- </span>
17170
+ <div class="ax-label-container user-item-content">
17171
+ <input class="ax-checkbox" type="checkbox" [checked]="isUserSelected(user.id)" tabindex="0" />
17121
17172
  <ax-avatar [size]="36" [color]="'primary'">
17122
17173
  @if (user.avatar) {
17123
17174
  <ax-image [src]="user.avatar" [alt]="user.name"></ax-image>
@@ -17125,13 +17176,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
17125
17176
  <ax-label>{{ getInitials(user.name) }}</ax-label>
17126
17177
  }
17127
17178
  </ax-avatar>
17128
- <div class="user-meta">
17129
- <span class="user-name">{{ user.name }}</span>
17130
- </div>
17179
+ <span class="ax-checkbox-label ax-truncated user-name-text">{{ user.name }}</span>
17131
17180
  </div>
17132
17181
  }
17133
17182
  </ng-template>
17134
- `, styles: [":host{display:block}.new-conversation-panel{display:flex;flex-direction:column;width:100%;overflow:hidden}.new-conversation-dialog-content{flex:1;min-height:0;overflow:hidden;padding:.875rem;display:flex;flex-direction:column;gap:.75rem}.form-field--grow{flex:1;min-height:0;display:flex;flex-direction:column}.group-details-step{flex:1;min-height:0;display:flex;flex-direction:column;gap:.75rem}.form-field{display:flex;flex-direction:column;gap:.35rem}.field-label{font-size:.875rem;font-weight:500;color:var(--ax-text-secondary, #6b7280)}.title-input{height:2.25rem;border-radius:.5rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-lighter-surface));padding:0 .7rem;color:rgb(var(--ax-sys-color-on-surface));font:inherit}.title-input:focus{outline:2px solid rgba(var(--ax-sys-color-primary-500),.25);outline-offset:0}.users-list-wrap{height:min(50vh,36rem);overflow:hidden}.users-list{display:block;height:100%}.users-list-header{display:block;position:sticky;top:0;z-index:1;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.users-list-header-inner{padding:.5rem .75rem}.user-row{display:flex;align-items:center;gap:.6rem;height:100%;padding:.1rem .75rem;border-radius:.5rem;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.check-indicator{width:1rem;height:1rem;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgb(var(--ax-sys-color-border-light-surface));font-size:.625rem;color:rgb(var(--ax-sys-color-on-primary-surface))}.check-indicator-selected{border-color:rgb(var(--ax-sys-color-primary-500));background:rgb(var(--ax-sys-color-primary-500))}.user-meta{display:flex;min-width:0}.user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:500}.users-list-empty{padding:1rem;text-align:center;font-size:.85rem;opacity:.7}.dialog-footer{flex-shrink:0;padding:1rem;border-top:1px solid var(--ax-border-color, #e5e7eb);display:flex;justify-content:flex-end;gap:.75rem}.dialog-footer>ax-suffix{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.75rem}\n"] }]
17183
+ `, styles: [":host{display:block}.new-conversation-panel{display:flex;flex-direction:column;width:100%;overflow:hidden}.new-conversation-dialog-content{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:.75rem}.form-field--grow{flex:1;min-height:0;display:flex;flex-direction:column}.group-details-step{flex:1;min-height:0;padding:.5rem .75rem;display:flex;flex-direction:column;gap:.75rem}.form-field{display:flex;flex-direction:column;gap:.35rem}.field-label{font-size:.875rem;font-weight:500;color:var(--ax-text-secondary, #6b7280)}.title-input{height:2.25rem;border-radius:.5rem;border:1px solid rgb(var(--ax-sys-color-border-light-surface));background:rgb(var(--ax-sys-color-lighter-surface));padding:0 .7rem;color:rgb(var(--ax-sys-color-on-surface));font:inherit}.title-input:focus{outline:2px solid rgba(var(--ax-sys-color-primary-500),.25);outline-offset:0}.users-list-wrap{height:min(50vh,36rem);overflow:hidden}.users-list{display:block;height:100%}.users-list-header{display:block;position:sticky;top:0;z-index:1;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.users-list-header-inner{padding:.5rem .75rem}.user-item-content{display:flex;align-items:center;gap:.6rem;height:100%;padding:.1rem .75rem;min-width:0}.user-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:500}.users-list-empty{padding:1rem;text-align:center;font-size:.85rem;opacity:.7}.dialog-footer{flex-shrink:0;padding:1rem;border-top:1px solid var(--ax-border-color, #e5e7eb);display:flex;justify-content:flex-end;gap:.75rem}.dialog-footer>ax-suffix{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.75rem}\n"] }]
17135
17184
  }] });
17136
17185
 
17137
17186
  /**
@@ -17426,7 +17475,7 @@ class AXSidebarComponent {
17426
17475
  }
17427
17476
  } @else if (filteredConversations().length === 0) {
17428
17477
  <div class="list-empty">
17429
- <div class="empty-icon">💬</div>
17478
+ <div class="empty-icon"><i class="fa-light fa-comments"></i></div>
17430
17479
  <h3 class="empty-title">No conversations yet</h3>
17431
17480
  <p class="empty-description">
17432
17481
  @if (sidebar.searchQuery()) {
@@ -17536,7 +17585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
17536
17585
  }
17537
17586
  } @else if (filteredConversations().length === 0) {
17538
17587
  <div class="list-empty">
17539
- <div class="empty-icon">💬</div>
17588
+ <div class="empty-icon"><i class="fa-light fa-comments"></i></div>
17540
17589
  <h3 class="empty-title">No conversations yet</h3>
17541
17590
  <p class="empty-description">
17542
17591
  @if (sidebar.searchQuery()) {
@@ -18059,5 +18108,5 @@ function getErrorMessage(code, params) {
18059
18108
  * Generated bundle index. Do not edit.
18060
18109
  */
18061
18110
 
18062
- export { AXAudioInfoBarBannerComponent, AXAudioPickerComponent, AXAudioRendererComponent, AXBaseRegistry, AXComposerActionRegistry, AXComposerComponent, AXComposerPopupComponent, AXComposerService, AXComposerTabRegistry, AXConversation2Module, AXConversationAiApiKey, AXConversationAiResponderService, AXConversationApi, AXConversationContainerComponent, AXConversationContainerDirective, AXConversationDateUtilsService, AXConversationIndexedDbConversationApi, AXConversationIndexedDbMessageAiApi, AXConversationIndexedDbMessageApi, AXConversationIndexedDbRealtimeApi, AXConversationIndexedDbStorage, AXConversationIndexedDbStores, AXConversationIndexedDbUserApi, AXConversationInfoPanelComponent, AXConversationItemActionRegistry, AXConversationMessageRendererStateComponent, AXConversationMessageUtilsService, AXConversationService, AXConversationSharedStorage, AXConversationStoreService, AXConversationTabRegistry, AXEmojiTabComponent, AXErrorHandlerService, AXFallbackRendererComponent, AXFilePickerComponent, AXFileRendererComponent, AXFileUploadService, AXForwardMessageDialogComponent, AXImagePickerComponent, AXImageRendererComponent, AXInfiniteScrollDirective, AXInfoBarActionRegistry, AXInfoBarComponent, AXInfoBarSearchComponent, AXInfoBarService, AXLocationPickerComponent, AXLocationRendererComponent, AXMessageActionRegistry, AXMessageApi, AXMessageListComponent, AXMessageListService, AXMessageRendererRegistry, AXNewConversationDialogComponent, AXPickerFooterComponent, AXPickerHeaderComponent, AXRealtimeApi, AXRegistryService, AXSidebarComponent, AXSidebarService, AXStickerRendererComponent, AXStickerTabComponent, AXSystemRendererComponent, AXTextRendererComponent, AXUserApi, AXVideoInfoBarBannerComponent, AXVideoPickerComponent, AXVideoRendererComponent, AXVoiceInfoBarBannerComponent, AXVoiceRecorderComponent, AXVoiceRendererComponent, AX_CONVERSATION_AUDIO_RENDERER, AX_CONVERSATION_COMPOSER_AUDIO_ACTION, AX_CONVERSATION_COMPOSER_EMOJI_ACTION, AX_CONVERSATION_COMPOSER_EMOJI_TAB, AX_CONVERSATION_COMPOSER_FILE_ACTION, AX_CONVERSATION_COMPOSER_IMAGE_ACTION, AX_CONVERSATION_COMPOSER_LOCATION_ACTION, AX_CONVERSATION_COMPOSER_STICKER_TAB, AX_CONVERSATION_COMPOSER_VIDEO_ACTION, AX_CONVERSATION_COMPOSER_VOICE_RECORDING_ACTION, AX_CONVERSATION_FALLBACK_RENDERER, AX_CONVERSATION_FILE_RENDERER, AX_CONVERSATION_IMAGE_RENDERER, AX_CONVERSATION_INFO_BAR_ARCHIVE_ACTION, AX_CONVERSATION_INFO_BAR_BLOCK_ACTION, AX_CONVERSATION_INFO_BAR_DELETE_ACTION, AX_CONVERSATION_INFO_BAR_DIVIDER, AX_CONVERSATION_INFO_BAR_INFO_ACTION, AX_CONVERSATION_INFO_BAR_MUTE_ACTION, AX_CONVERSATION_INFO_BAR_SEARCH_ACTION, AX_CONVERSATION_ITEM_BLOCK_ACTION, AX_CONVERSATION_ITEM_DELETE_ACTION, AX_CONVERSATION_ITEM_DIVIDER, AX_CONVERSATION_ITEM_MARK_READ_ACTION, AX_CONVERSATION_ITEM_MUTE_ACTION, AX_CONVERSATION_ITEM_PIN_ACTION, AX_CONVERSATION_LOCATION_RENDERER, AX_CONVERSATION_MESSAGE_COPY_ACTION, AX_CONVERSATION_MESSAGE_DELETE_ACTION, AX_CONVERSATION_MESSAGE_EDIT_ACTION, AX_CONVERSATION_MESSAGE_FORWARD_ACTION, AX_CONVERSATION_MESSAGE_REPLY_ACTION, AX_CONVERSATION_STICKER_RENDERER, AX_CONVERSATION_SYSTEM_RENDERER, AX_CONVERSATION_TAB_ALL, AX_CONVERSATION_TAB_ARCHIVED, AX_CONVERSATION_TAB_CHANNELS, AX_CONVERSATION_TAB_GROUPS, AX_CONVERSATION_TAB_PRIVATE, AX_CONVERSATION_TAB_UNREAD, AX_CONVERSATION_TEXT_RENDERER, AX_CONVERSATION_VIDEO_RENDERER, AX_CONVERSATION_VOICE_RENDERER, AX_DEFAULT_CONVERSATION_CONFIG, CONNECTION_ERRORS, CONVERSATION_CONFIG, CONVERSATION_ERRORS, DEFAULT_COMPOSER_ACTIONS, DEFAULT_COMPOSER_TABS, DEFAULT_CONVERSATION_ITEM_ACTIONS, DEFAULT_CONVERSATION_TABS, DEFAULT_INFO_BAR_ACTIONS, DEFAULT_MESSAGE_ACTIONS, DEFAULT_MESSAGE_RENDERERS, ERROR_HANDLER_CONFIG, ERROR_MESSAGES, FILE_ERRORS, LOCATION_ERRORS, MESSAGE_ERRORS, PERMISSION_ERRORS, REGISTRY_CONFIG, URL_ERRORS, USER_ERRORS, axConversationIndexedDbStorage, conversationSharedStorage, formatErrorMessage, getDefaultConversationItemActions, getErrorMessage, mergeWithDefaults, provideConversation, sanitizeInput, validateConversationId, validateEmail, validateFile, validateLatitude, validateLongitude, validateMessagePayload, validateMessageText, validateMessageType, validateUrl, validateUserId, validateUserIds };
18111
+ export { AXAudioInfoBarBannerComponent, AXAudioPickerComponent, AXAudioRendererComponent, AXBaseRegistry, AXComposerActionRegistry, AXComposerComponent, AXComposerPopupComponent, AXComposerService, AXComposerTabRegistry, AXConversation2Module, AXConversationAiApiKey, AXConversationAiResponderService, AXConversationApi, AXConversationContainerComponent, AXConversationContainerDirective, AXConversationDateUtilsService, AXConversationIndexedDbConversationApi, AXConversationIndexedDbMessageAiApi, AXConversationIndexedDbMessageApi, AXConversationIndexedDbRealtimeApi, AXConversationIndexedDbStorage, AXConversationIndexedDbStores, AXConversationIndexedDbUserApi, AXConversationInfoPanelComponent, AXConversationItemActionRegistry, AXConversationMessageRendererStateComponent, AXConversationMessageUtilsService, AXConversationService, AXConversationSharedStorage, AXConversationStoreService, AXConversationTabRegistry, AXEmojiTabComponent, AXErrorHandlerService, AXFallbackRendererComponent, AXFilePickerComponent, AXFileRendererComponent, AXFileUploadService, AXForwardMessageDialogComponent, AXImagePickerComponent, AXImageRendererComponent, AXInfiniteScrollDirective, AXInfoBarActionRegistry, AXInfoBarComponent, AXInfoBarSearchComponent, AXInfoBarService, AXLocationPickerComponent, AXLocationRendererComponent, AXMessageActionRegistry, AXMessageApi, AXMessageListComponent, AXMessageListService, AXMessageRendererRegistry, AXNewConversationDialogComponent, AXPickerFooterComponent, AXPickerHeaderComponent, AXRealtimeApi, AXRegistryService, AXSidebarComponent, AXSidebarService, AXStickerRendererComponent, AXStickerTabComponent, AXSystemRendererComponent, AXTextRendererComponent, AXUserApi, AXVideoInfoBarBannerComponent, AXVideoPickerComponent, AXVideoRendererComponent, AXVoiceInfoBarBannerComponent, AXVoiceRecorderComponent, AXVoiceRendererComponent, AX_CONVERSATION_AUDIO_RENDERER, AX_CONVERSATION_COMPOSER_AUDIO_ACTION, AX_CONVERSATION_COMPOSER_EMOJI_ACTION, AX_CONVERSATION_COMPOSER_EMOJI_TAB, AX_CONVERSATION_COMPOSER_FILE_ACTION, AX_CONVERSATION_COMPOSER_IMAGE_ACTION, AX_CONVERSATION_COMPOSER_LOCATION_ACTION, AX_CONVERSATION_COMPOSER_STICKER_TAB, AX_CONVERSATION_COMPOSER_VIDEO_ACTION, AX_CONVERSATION_COMPOSER_VOICE_RECORDING_ACTION, AX_CONVERSATION_FALLBACK_RENDERER, AX_CONVERSATION_FILE_RENDERER, AX_CONVERSATION_IMAGE_RENDERER, AX_CONVERSATION_INFO_BAR_ARCHIVE_ACTION, AX_CONVERSATION_INFO_BAR_BLOCK_ACTION, AX_CONVERSATION_INFO_BAR_DELETE_ACTION, AX_CONVERSATION_INFO_BAR_DIVIDER, AX_CONVERSATION_INFO_BAR_INFO_ACTION, AX_CONVERSATION_INFO_BAR_MUTE_ACTION, AX_CONVERSATION_INFO_BAR_SEARCH_ACTION, AX_CONVERSATION_ITEM_BLOCK_ACTION, AX_CONVERSATION_ITEM_DELETE_ACTION, AX_CONVERSATION_ITEM_DIVIDER, AX_CONVERSATION_ITEM_MARK_READ_ACTION, AX_CONVERSATION_ITEM_MUTE_ACTION, AX_CONVERSATION_ITEM_PIN_ACTION, AX_CONVERSATION_LOCATION_RENDERER, AX_CONVERSATION_MESSAGE_COPY_ACTION, AX_CONVERSATION_MESSAGE_DELETE_ACTION, AX_CONVERSATION_MESSAGE_EDIT_ACTION, AX_CONVERSATION_MESSAGE_FORWARD_ACTION, AX_CONVERSATION_MESSAGE_REPLY_ACTION, AX_CONVERSATION_STICKER_RENDERER, AX_CONVERSATION_SYSTEM_RENDERER, AX_CONVERSATION_TAB_ALL, AX_CONVERSATION_TAB_ARCHIVED, AX_CONVERSATION_TAB_CHANNELS, AX_CONVERSATION_TAB_GROUPS, AX_CONVERSATION_TAB_PRIVATE, AX_CONVERSATION_TAB_UNREAD, AX_CONVERSATION_TEXT_RENDERER, AX_CONVERSATION_VIDEO_RENDERER, AX_CONVERSATION_VOICE_RENDERER, AX_DEFAULT_CONVERSATION_CONFIG, AX_STICKER_API_KEY, CONNECTION_ERRORS, CONVERSATION_CONFIG, CONVERSATION_ERRORS, DEFAULT_COMPOSER_ACTIONS, DEFAULT_COMPOSER_TABS, DEFAULT_CONVERSATION_ITEM_ACTIONS, DEFAULT_CONVERSATION_TABS, DEFAULT_INFO_BAR_ACTIONS, DEFAULT_MESSAGE_ACTIONS, DEFAULT_MESSAGE_RENDERERS, ERROR_HANDLER_CONFIG, ERROR_MESSAGES, FILE_ERRORS, LOCATION_ERRORS, MESSAGE_ERRORS, PERMISSION_ERRORS, REGISTRY_CONFIG, URL_ERRORS, USER_ERRORS, axConversationIndexedDbStorage, conversationSharedStorage, formatErrorMessage, getDefaultConversationItemActions, getErrorMessage, mergeWithDefaults, provideConversation, sanitizeInput, validateConversationId, validateEmail, validateFile, validateLatitude, validateLongitude, validateMessagePayload, validateMessageText, validateMessageType, validateUrl, validateUserId, validateUserIds };
18063
18112
  //# sourceMappingURL=acorex-components-conversation2.mjs.map