@propbinder/mobile-design 0.3.3 → 0.3.33

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.
Files changed (4) hide show
  1. package/fesm2022/propbinder-mobile-design.mjs +291 -320
  2. package/fesm2022/propbinder-mobile-design.mjs.map +1 -1
  3. package/index.d.ts +6 -6
  4. package/package.json +1 -1
package/fesm2022/propbinder-mobile-design.mjs CHANGED
@@ -4067,31 +4067,31 @@ class DsMobileProfileActionsSheetComponent {
4067
4067
  code: 'da',
4068
4068
  nativeName: 'Dansk',
4069
4069
  englishName: 'Danish',
4070
- flagIcon: '/Assets/country-flags/denmark.svg',
4070
+ flagIcon: '/assets/country-flags/denmark.svg',
4071
4071
  },
4072
4072
  {
4073
4073
  code: 'en',
4074
4074
  nativeName: 'English',
4075
4075
  englishName: 'English',
4076
- flagIcon: '/Assets/country-flags/united-kingdom.svg',
4076
+ flagIcon: '/assets/country-flags/united-kingdom.svg',
4077
4077
  },
4078
4078
  {
4079
4079
  code: 'sv',
4080
4080
  nativeName: 'Svenska',
4081
4081
  englishName: 'Swedish',
4082
- flagIcon: '/Assets/country-flags/sweden.svg',
4082
+ flagIcon: '/assets/country-flags/sweden.svg',
4083
4083
  },
4084
4084
  {
4085
4085
  code: 'no',
4086
4086
  nativeName: 'Norsk',
4087
4087
  englishName: 'Norwegian',
4088
- flagIcon: '/Assets/country-flags/norway.svg',
4088
+ flagIcon: '/assets/country-flags/norway.svg',
4089
4089
  },
4090
4090
  {
4091
4091
  code: 'de',
4092
4092
  nativeName: 'Deutsch',
4093
4093
  englishName: 'German',
4094
- flagIcon: '/Assets/country-flags/germany.svg',
4094
+ flagIcon: '/assets/country-flags/germany.svg',
4095
4095
  },
4096
4096
  ];
4097
4097
  /**
@@ -16155,7 +16155,7 @@ class DsMobileChatModalComponent {
16155
16155
  const uid = this.chatData?.currentUserId;
16156
16156
  if (!uid)
16157
16157
  return members;
16158
- return members.filter(m => m.id !== uid);
16158
+ return members.filter((m) => m.id !== uid);
16159
16159
  }, ...(ngDevMode ? [{ debugName: "groupMembersForStack" }] : []));
16160
16160
  isGroupAdmin = computed(() => {
16161
16161
  const g = this.group();
@@ -16355,7 +16355,8 @@ class DsMobileChatModalComponent {
16355
16355
  avatarType: this.currentUserAvatarType(),
16356
16356
  avatarSrc: this.currentUserAvatarSrc(),
16357
16357
  fileAttachments: event.attachments || [],
16358
- isNewMessage: true, // Mark as new message to trigger animation
16358
+ isNewMessage: true,
16359
+ isInternal: event.isInternal,
16359
16360
  };
16360
16361
  // Add message to list
16361
16362
  const updatedMessages = [...this.messages(), newMessage];
@@ -16571,9 +16572,7 @@ class DsMobileChatModalComponent {
16571
16572
  ],
16572
16573
  },
16573
16574
  ];
16574
- const canEdit = message.isOwnMessage &&
16575
- !message.fileAttachments?.length &&
16576
- message.content.trim().length > 0;
16575
+ const canEdit = message.isOwnMessage && !message.fileAttachments?.length && message.content.trim().length > 0;
16577
16576
  const canDelete = message.isOwnMessage;
16578
16577
  if (canEdit) {
16579
16578
  groups[0].actions.push({
@@ -16654,13 +16653,13 @@ class DsMobileChatModalComponent {
16654
16653
  if (!this.chatData.onEditMessage)
16655
16654
  return;
16656
16655
  await this.chatData.onEditMessage(messageId, newContent);
16657
- this.messages.update(msgs => msgs.map(m => m.id === messageId ? { ...m, content: newContent, editedAt: new Date() } : m));
16656
+ this.messages.update((msgs) => msgs.map((m) => (m.id === messageId ? { ...m, content: newContent, editedAt: new Date() } : m)));
16658
16657
  }
16659
16658
  async applyMessageDelete(messageId) {
16660
16659
  if (!this.chatData.onDeleteMessage)
16661
16660
  return;
16662
16661
  await this.chatData.onDeleteMessage(messageId);
16663
- this.messages.update(msgs => msgs.map(m => m.id === messageId ? { ...m, deletedAt: new Date(), content: '' } : m));
16662
+ this.messages.update((msgs) => msgs.map((m) => (m.id === messageId ? { ...m, deletedAt: new Date(), content: '' } : m)));
16664
16663
  }
16665
16664
  deletePlaceholder(message) {
16666
16665
  return message.isOwnMessage ? this.lbl.deletePlaceholderOwn : this.lbl.deletePlaceholderOther;
@@ -16669,21 +16668,13 @@ class DsMobileChatModalComponent {
16669
16668
  const m = message.systemMeta;
16670
16669
  switch (message.systemKind) {
16671
16670
  case 'member_added':
16672
- return m?.actorName && m?.targetName
16673
- ? this.lbl.activityMemberAddedWithNames(m.actorName, m.targetName)
16674
- : this.lbl.activityMemberAdded;
16671
+ return m?.actorName && m?.targetName ? this.lbl.activityMemberAddedWithNames(m.actorName, m.targetName) : this.lbl.activityMemberAdded;
16675
16672
  case 'member_removed':
16676
- return m?.actorName && m?.targetName
16677
- ? this.lbl.activityMemberRemovedWithNames(m.actorName, m.targetName)
16678
- : this.lbl.activityMemberRemoved;
16673
+ return m?.actorName && m?.targetName ? this.lbl.activityMemberRemovedWithNames(m.actorName, m.targetName) : this.lbl.activityMemberRemoved;
16679
16674
  case 'renamed':
16680
- return m?.newTitle
16681
- ? this.lbl.activityRenamed(m.newTitle)
16682
- : this.lbl.activityRenamedFallback;
16675
+ return m?.newTitle ? this.lbl.activityRenamed(m.newTitle) : this.lbl.activityRenamedFallback;
16683
16676
  case 'left_group':
16684
- return m?.actorName
16685
- ? this.lbl.activityLeftGroup(m.actorName)
16686
- : this.lbl.activityLeftGroupFallback;
16677
+ return m?.actorName ? this.lbl.activityLeftGroup(m.actorName) : this.lbl.activityLeftGroupFallback;
16687
16678
  default:
16688
16679
  return '';
16689
16680
  }
@@ -16715,32 +16706,30 @@ class DsMobileChatModalComponent {
16715
16706
  if (!data?.onRenameGroup)
16716
16707
  return;
16717
16708
  await data.onRenameGroup(title);
16718
- this.participant.update(p => ({ ...p, name: title }));
16719
- this.group.update(gr => (gr ? { ...gr, title } : gr));
16709
+ this.participant.update((p) => ({ ...p, name: title }));
16710
+ this.group.update((gr) => (gr ? { ...gr, title } : gr));
16720
16711
  }
16721
16712
  async handleAvatarUrlFromPanel(url) {
16722
16713
  const data = this.chatData;
16723
16714
  if (!data?.onSetGroupCustomAvatarUrl)
16724
16715
  return;
16725
16716
  await data.onSetGroupCustomAvatarUrl(url);
16726
- this.group.update(gr => gr ? { ...gr, customAvatarUrl: url || undefined } : gr);
16717
+ this.group.update((gr) => (gr ? { ...gr, customAvatarUrl: url || undefined } : gr));
16727
16718
  }
16728
16719
  async handleAddMembersFromPanel(ids) {
16729
16720
  const data = this.chatData;
16730
16721
  if (!data?.onAddMembers)
16731
16722
  return;
16732
16723
  await data.onAddMembers(ids);
16733
- this.group.update(gr => {
16724
+ this.group.update((gr) => {
16734
16725
  if (!gr)
16735
16726
  return gr;
16736
- const existing = new Set(gr.members.map(m => m.id));
16727
+ const existing = new Set(gr.members.map((m) => m.id));
16737
16728
  const newMembers = ids
16738
- .filter(id => !existing.has(id))
16739
- .map(id => data.allTenantsForPicker.find(x => x.id === id))
16729
+ .filter((id) => !existing.has(id))
16730
+ .map((id) => data.allTenantsForPicker.find((x) => x.id === id))
16740
16731
  .filter((t) => !!t);
16741
- return newMembers.length > 0
16742
- ? { ...gr, members: [...gr.members, ...newMembers] }
16743
- : gr;
16732
+ return newMembers.length > 0 ? { ...gr, members: [...gr.members, ...newMembers] } : gr;
16744
16733
  });
16745
16734
  }
16746
16735
  async handleRemoveMemberFromPanel(userId) {
@@ -16748,7 +16737,7 @@ class DsMobileChatModalComponent {
16748
16737
  if (!data?.onRemoveMember)
16749
16738
  return;
16750
16739
  await data.onRemoveMember(userId);
16751
- this.group.update(g => g ? { ...g, members: g.members.filter(x => x.id !== userId) } : g);
16740
+ this.group.update((g) => (g ? { ...g, members: g.members.filter((x) => x.id !== userId) } : g));
16752
16741
  }
16753
16742
  async handleMessageMemberFromPanel(userId) {
16754
16743
  if (this.chatData?.onMessageMember) {
@@ -16974,10 +16963,7 @@ class DsMobileChatModalComponent {
16974
16963
  />
16975
16964
  }
16976
16965
  } @else if (participant().avatarShape === 'squircle') {
16977
- <ds-mobile-vendor-avatar
16978
- [name]="participant().name"
16979
- [logo]="participant().avatarSrc || ''"
16980
- size="md" />
16966
+ <ds-mobile-vendor-avatar [name]="participant().name" [logo]="participant().avatarSrc || ''" size="md" />
16981
16967
  } @else {
16982
16968
  <ds-avatar-with-badge
16983
16969
  [initials]="participant().avatarInitials || ''"
@@ -17027,159 +17013,153 @@ class DsMobileChatModalComponent {
17027
17013
  (leaveGroup)="handleLeaveGroupFromPanel()"
17028
17014
  />
17029
17015
  } @else {
17030
- <!-- Messages Section -->
17031
- <ds-mobile-section>
17032
- <div class="chat-messages-container" (click)="handleContentClick()">
17033
- <!-- Centered avatar section at top of messages -->
17034
- <div class="chat-avatar-section">
17035
- @if (threadKind() === 'group' && group()) {
17036
- <ds-mobile-group-avatar-stack
17037
- [members]="groupMembersForStack()"
17038
- [customAvatarUrl]="group()!.customAvatarUrl || ''"
17039
- layout="list"
17040
- size="xl"
17041
- style="cursor: pointer"
17042
- (click)="onGroupTitleClick(); $event.stopPropagation()"
17043
- />
17044
- } @else if (participant().avatarShape === 'squircle') {
17045
- <ds-mobile-vendor-avatar
17046
- [name]="participant().name"
17047
- [logo]="participant().avatarSrc || ''"
17048
- size="xl" />
17049
- } @else {
17050
- <ds-avatar-with-badge
17051
- [initials]="participant().avatarInitials || ''"
17052
- [type]="participant().avatarType || 'initials'"
17053
- [src]="participant().avatarSrc || ''"
17054
- [badge]="participant().badge"
17055
- [showBadge]="threadContext() === 'inquiry'"
17056
- size="xl"
17057
- />
17058
- }
17059
- <div class="chat-avatar-info">
17060
- <div class="chat-avatar-name">
17061
- {{ participant().name }}
17062
- @if (participant().verified) {
17063
- <ds-icon name="remixCheckboxCircleFill" size="24px" [style.color]="'var(--color-primary-base)'"></ds-icon>
17016
+ <!-- Messages Section -->
17017
+ <ds-mobile-section>
17018
+ <div class="chat-messages-container" (click)="handleContentClick()">
17019
+ <!-- Centered avatar section at top of messages -->
17020
+ <div class="chat-avatar-section">
17021
+ @if (threadKind() === 'group' && group()) {
17022
+ <ds-mobile-group-avatar-stack
17023
+ [members]="groupMembersForStack()"
17024
+ [customAvatarUrl]="group()!.customAvatarUrl || ''"
17025
+ layout="list"
17026
+ size="xl"
17027
+ style="cursor: pointer"
17028
+ (click)="onGroupTitleClick(); $event.stopPropagation()"
17029
+ />
17030
+ } @else if (participant().avatarShape === 'squircle') {
17031
+ <ds-mobile-vendor-avatar [name]="participant().name" [logo]="participant().avatarSrc || ''" size="xl" />
17032
+ } @else {
17033
+ <ds-avatar-with-badge
17034
+ [initials]="participant().avatarInitials || ''"
17035
+ [type]="participant().avatarType || 'initials'"
17036
+ [src]="participant().avatarSrc || ''"
17037
+ [badge]="participant().badge"
17038
+ [showBadge]="threadContext() === 'inquiry'"
17039
+ size="xl"
17040
+ />
17041
+ }
17042
+ <div class="chat-avatar-info">
17043
+ <div class="chat-avatar-name">
17044
+ {{ participant().name }}
17045
+ @if (participant().verified) {
17046
+ <ds-icon name="remixCheckboxCircleFill" size="24px" [style.color]="'var(--color-primary-base)'"></ds-icon>
17047
+ }
17048
+ </div>
17049
+ @if (participant().role) {
17050
+ <div class="chat-avatar-role">{{ participant().role }}</div>
17051
+ }
17052
+ @if (participant().lastActive) {
17053
+ <div class="chat-avatar-meta">{{ participant().lastActive }}</div>
17064
17054
  }
17065
17055
  </div>
17066
- @if (participant().role) {
17067
- <div class="chat-avatar-role">{{ participant().role }}</div>
17068
- }
17069
- @if (participant().lastActive) {
17070
- <div class="chat-avatar-meta">{{ participant().lastActive }}</div>
17071
- }
17072
17056
  </div>
17073
- </div>
17074
-
17075
- <div class="messages-list">
17076
- @if (messages().length === 0) {
17077
- <!-- Empty State - Timestamp and optional inquiry system message -->
17078
- <div class="timestamp-header">
17079
- <span class="timestamp-text">{{ getInitialTimestamp() }}</span>
17080
- </div>
17081
17057
 
17082
- @if (threadContext() === 'inquiry') {
17083
- <ds-mobile-system-message-banner [message]="participant().name + ' har overtaget din henvendelse og vil kontakte dig snart.'" [afterTimestamp]="true">
17084
- </ds-mobile-system-message-banner>
17085
- }
17086
- } @else {
17087
- @for (group of messagesWithDisplay(); track group.timestamp) {
17088
- <!-- Timestamp Header -->
17058
+ <div class="messages-list">
17059
+ @if (messages().length === 0) {
17060
+ <!-- Empty State - Timestamp and optional inquiry system message -->
17089
17061
  <div class="timestamp-header">
17090
- <span class="timestamp-text">{{ group.displayTimestamp }}</span>
17062
+ <span class="timestamp-text">{{ getInitialTimestamp() }}</span>
17091
17063
  </div>
17092
17064
 
17093
- @if ($first && threadContext() === 'inquiry') {
17065
+ @if (threadContext() === 'inquiry') {
17094
17066
  <ds-mobile-system-message-banner [message]="participant().name + ' har overtaget din henvendelse og vil kontakte dig snart.'" [afterTimestamp]="true">
17095
17067
  </ds-mobile-system-message-banner>
17096
17068
  }
17097
- @for (message of group.messages; track message.id) {
17098
- @if (message.systemKind) {
17099
- <p class="chat-system-line">{{ formatActivityLine(message) }}</p>
17100
- } @else if (message.senderId === 'system' && message.content.trim()) {
17101
- <p class="chat-system-line">{{ message.content }}</p>
17102
- } @else if (message.deletedAt) {
17103
- <ds-mobile-message-bubble
17104
- [content]="deletePlaceholder(message)"
17105
- [isOwnMessage]="message.isOwnMessage"
17106
- [isInternal]="message.isInternal || false"
17107
- [internalMessageBadgeText]="lbl.internalMessageBadge"
17108
- [timestamp]="formatMessageTimestamp(message.timestamp)"
17109
- [showTimestamp]="selectedMessageId() === message.id"
17110
- [avatarInitials]="message.avatarInitials || ''"
17111
- [avatarType]="message.avatarType || 'initials'"
17112
- [avatarSrc]="message.avatarSrc || ''"
17113
- [showAvatar]="message.showAvatar"
17114
- [clusterPosition]="message.clusterPosition"
17115
- [attachments]="message.attachments"
17116
- [clickable]="false"
17117
- [isDeleted]="true"
17118
- [isNewMessage]="false"
17119
- >
17120
- </ds-mobile-message-bubble>
17121
- } @else if (message.content.trim()) {
17122
- <ds-mobile-message-bubble
17123
- [content]="message.content"
17124
- [isOwnMessage]="message.isOwnMessage"
17125
- [isInternal]="message.isInternal || false"
17126
- [internalMessageBadgeText]="lbl.internalMessageBadge"
17127
- [timestamp]="formatMessageTimestamp(message.timestamp)"
17128
- [showTimestamp]="selectedMessageId() === message.id"
17129
- [avatarInitials]="message.avatarInitials || ''"
17130
- [avatarType]="message.avatarType || 'initials'"
17131
- [avatarSrc]="message.avatarSrc || ''"
17132
- [showAvatar]="message.showAvatar && !(message.fileAttachments && message.fileAttachments.length > 0)"
17133
- [clusterPosition]="(message.fileAttachments && message.fileAttachments.length > 0) ? 'first' : message.clusterPosition"
17134
- [attachments]="message.attachments"
17135
- [clickable]="true"
17136
- [isNewMessage]="message.isNewMessage || false"
17137
- [showEditedHint]="!!message.editedAt"
17138
- [editedHintText]="lbl.editedHint"
17139
- (messageClick)="handleMessageClick(message.id)"
17140
- (attachmentClick)="handleAttachmentClick($event)"
17141
- (longPress)="handleMessageLongPress(message)"
17142
- >
17143
- </ds-mobile-message-bubble>
17069
+ } @else {
17070
+ @for (group of messagesWithDisplay(); track group.timestamp) {
17071
+ <!-- Timestamp Header -->
17072
+ <div class="timestamp-header">
17073
+ <span class="timestamp-text">{{ group.displayTimestamp }}</span>
17074
+ </div>
17075
+
17076
+ @if ($first && threadContext() === 'inquiry') {
17077
+ <ds-mobile-system-message-banner [message]="participant().name + ' har overtaget din henvendelse og vil kontakte dig snart.'" [afterTimestamp]="true">
17078
+ </ds-mobile-system-message-banner>
17144
17079
  }
17080
+ @for (message of group.messages; track message.id) {
17081
+ @if (message.systemKind) {
17082
+ <p class="chat-system-line">{{ formatActivityLine(message) }}</p>
17083
+ } @else if (message.senderId === 'system' && message.content.trim()) {
17084
+ <p class="chat-system-line">{{ message.content }}</p>
17085
+ } @else if (message.deletedAt) {
17086
+ <ds-mobile-message-bubble
17087
+ [content]="deletePlaceholder(message)"
17088
+ [isOwnMessage]="message.isOwnMessage"
17089
+ [isInternal]="message.isInternal || false"
17090
+ [internalMessageBadgeText]="lbl.internalMessageBadge"
17091
+ [timestamp]="formatMessageTimestamp(message.timestamp)"
17092
+ [showTimestamp]="selectedMessageId() === message.id"
17093
+ [avatarInitials]="message.avatarInitials || ''"
17094
+ [avatarType]="message.avatarType || 'initials'"
17095
+ [avatarSrc]="message.avatarSrc || ''"
17096
+ [showAvatar]="message.showAvatar"
17097
+ [clusterPosition]="message.clusterPosition"
17098
+ [attachments]="message.attachments"
17099
+ [clickable]="false"
17100
+ [isDeleted]="true"
17101
+ [isNewMessage]="false"
17102
+ >
17103
+ </ds-mobile-message-bubble>
17104
+ } @else if (message.content.trim()) {
17105
+ <ds-mobile-message-bubble
17106
+ [content]="message.content"
17107
+ [isOwnMessage]="message.isOwnMessage"
17108
+ [isInternal]="message.isInternal || false"
17109
+ [internalMessageBadgeText]="lbl.internalMessageBadge"
17110
+ [timestamp]="formatMessageTimestamp(message.timestamp)"
17111
+ [showTimestamp]="selectedMessageId() === message.id"
17112
+ [avatarInitials]="message.avatarInitials || ''"
17113
+ [avatarType]="message.avatarType || 'initials'"
17114
+ [avatarSrc]="message.avatarSrc || ''"
17115
+ [showAvatar]="message.showAvatar && !(message.fileAttachments && message.fileAttachments.length > 0)"
17116
+ [clusterPosition]="message.fileAttachments && message.fileAttachments.length > 0 ? 'first' : message.clusterPosition"
17117
+ [attachments]="message.attachments"
17118
+ [clickable]="true"
17119
+ [isNewMessage]="message.isNewMessage || false"
17120
+ [showEditedHint]="!!message.editedAt"
17121
+ [editedHintText]="lbl.editedHint"
17122
+ (messageClick)="handleMessageClick(message.id)"
17123
+ (attachmentClick)="handleAttachmentClick($event)"
17124
+ (longPress)="handleMessageLongPress(message)"
17125
+ >
17126
+ </ds-mobile-message-bubble>
17127
+ }
17145
17128
 
17146
- @if (!message.deletedAt && message.fileAttachments && message.fileAttachments.length > 0) {
17147
- <div
17148
- class="message-file-attachments"
17149
- [class.own-message]="message.isOwnMessage"
17150
- [class.attachment-only]="!message.content.trim()"
17151
- (click)="handleMessageClick(message.id)"
17152
- (touchstart)="startAttachmentLongPress(message)"
17153
- (touchend)="cancelAttachmentLongPress()"
17154
- (touchcancel)="cancelAttachmentLongPress()"
17155
- >
17156
- @for (fileAttachment of message.fileAttachments; track fileAttachment.id) {
17157
- @if (fileAttachment.type === 'image') {
17158
- <div
17159
- class="message-image-attachment"
17160
- (click)="handleImageClick(fileAttachment, message); $event.stopPropagation()"
17161
- >
17162
- <img [src]="fileAttachment.src" [alt]="fileAttachment.name || 'Image'" class="inline-image" />
17163
- </div>
17164
- } @else {
17165
- <ds-mobile-card-inline-file
17166
- [fileName]="fileAttachment.name || 'Unknown file'"
17167
- [fileSize]="fileAttachment.size || ''"
17168
- [variant]="getFileVariant(fileAttachment.type)"
17169
- [layout]="'compact'"
17170
- (fileClick)="handleFileAttachmentClick(fileAttachment)"
17171
- >
17172
- </ds-mobile-card-inline-file>
17129
+ @if (!message.deletedAt && message.fileAttachments && message.fileAttachments.length > 0) {
17130
+ <div
17131
+ class="message-file-attachments"
17132
+ [class.own-message]="message.isOwnMessage"
17133
+ [class.attachment-only]="!message.content.trim()"
17134
+ (click)="handleMessageClick(message.id)"
17135
+ (touchstart)="startAttachmentLongPress(message)"
17136
+ (touchend)="cancelAttachmentLongPress()"
17137
+ (touchcancel)="cancelAttachmentLongPress()"
17138
+ >
17139
+ @for (fileAttachment of message.fileAttachments; track fileAttachment.id) {
17140
+ @if (fileAttachment.type === 'image') {
17141
+ <div class="message-image-attachment" (click)="handleImageClick(fileAttachment, message); $event.stopPropagation()">
17142
+ <img [src]="fileAttachment.src" [alt]="fileAttachment.name || 'Image'" class="inline-image" />
17143
+ </div>
17144
+ } @else {
17145
+ <ds-mobile-card-inline-file
17146
+ [fileName]="fileAttachment.name || 'Unknown file'"
17147
+ [fileSize]="fileAttachment.size || ''"
17148
+ [variant]="getFileVariant(fileAttachment.type)"
17149
+ [layout]="'compact'"
17150
+ (fileClick)="handleFileAttachmentClick(fileAttachment)"
17151
+ >
17152
+ </ds-mobile-card-inline-file>
17153
+ }
17173
17154
  }
17174
- }
17175
- </div>
17155
+ </div>
17156
+ }
17176
17157
  }
17177
17158
  }
17178
17159
  }
17179
- }
17160
+ </div>
17180
17161
  </div>
17181
- </div>
17182
- </ds-mobile-section>
17162
+ </ds-mobile-section>
17183
17163
  }
17184
17164
 
17185
17165
  <!-- Fixed message composer -->
@@ -17266,10 +17246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
17266
17246
  />
17267
17247
  }
17268
17248
  } @else if (participant().avatarShape === 'squircle') {
17269
- <ds-mobile-vendor-avatar
17270
- [name]="participant().name"
17271
- [logo]="participant().avatarSrc || ''"
17272
- size="md" />
17249
+ <ds-mobile-vendor-avatar [name]="participant().name" [logo]="participant().avatarSrc || ''" size="md" />
17273
17250
  } @else {
17274
17251
  <ds-avatar-with-badge
17275
17252
  [initials]="participant().avatarInitials || ''"
@@ -17319,159 +17296,153 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
17319
17296
  (leaveGroup)="handleLeaveGroupFromPanel()"
17320
17297
  />
17321
17298
  } @else {
17322
- <!-- Messages Section -->
17323
- <ds-mobile-section>
17324
- <div class="chat-messages-container" (click)="handleContentClick()">
17325
- <!-- Centered avatar section at top of messages -->
17326
- <div class="chat-avatar-section">
17327
- @if (threadKind() === 'group' && group()) {
17328
- <ds-mobile-group-avatar-stack
17329
- [members]="groupMembersForStack()"
17330
- [customAvatarUrl]="group()!.customAvatarUrl || ''"
17331
- layout="list"
17332
- size="xl"
17333
- style="cursor: pointer"
17334
- (click)="onGroupTitleClick(); $event.stopPropagation()"
17335
- />
17336
- } @else if (participant().avatarShape === 'squircle') {
17337
- <ds-mobile-vendor-avatar
17338
- [name]="participant().name"
17339
- [logo]="participant().avatarSrc || ''"
17340
- size="xl" />
17341
- } @else {
17342
- <ds-avatar-with-badge
17343
- [initials]="participant().avatarInitials || ''"
17344
- [type]="participant().avatarType || 'initials'"
17345
- [src]="participant().avatarSrc || ''"
17346
- [badge]="participant().badge"
17347
- [showBadge]="threadContext() === 'inquiry'"
17348
- size="xl"
17349
- />
17350
- }
17351
- <div class="chat-avatar-info">
17352
- <div class="chat-avatar-name">
17353
- {{ participant().name }}
17354
- @if (participant().verified) {
17355
- <ds-icon name="remixCheckboxCircleFill" size="24px" [style.color]="'var(--color-primary-base)'"></ds-icon>
17299
+ <!-- Messages Section -->
17300
+ <ds-mobile-section>
17301
+ <div class="chat-messages-container" (click)="handleContentClick()">
17302
+ <!-- Centered avatar section at top of messages -->
17303
+ <div class="chat-avatar-section">
17304
+ @if (threadKind() === 'group' && group()) {
17305
+ <ds-mobile-group-avatar-stack
17306
+ [members]="groupMembersForStack()"
17307
+ [customAvatarUrl]="group()!.customAvatarUrl || ''"
17308
+ layout="list"
17309
+ size="xl"
17310
+ style="cursor: pointer"
17311
+ (click)="onGroupTitleClick(); $event.stopPropagation()"
17312
+ />
17313
+ } @else if (participant().avatarShape === 'squircle') {
17314
+ <ds-mobile-vendor-avatar [name]="participant().name" [logo]="participant().avatarSrc || ''" size="xl" />
17315
+ } @else {
17316
+ <ds-avatar-with-badge
17317
+ [initials]="participant().avatarInitials || ''"
17318
+ [type]="participant().avatarType || 'initials'"
17319
+ [src]="participant().avatarSrc || ''"
17320
+ [badge]="participant().badge"
17321
+ [showBadge]="threadContext() === 'inquiry'"
17322
+ size="xl"
17323
+ />
17324
+ }
17325
+ <div class="chat-avatar-info">
17326
+ <div class="chat-avatar-name">
17327
+ {{ participant().name }}
17328
+ @if (participant().verified) {
17329
+ <ds-icon name="remixCheckboxCircleFill" size="24px" [style.color]="'var(--color-primary-base)'"></ds-icon>
17330
+ }
17331
+ </div>
17332
+ @if (participant().role) {
17333
+ <div class="chat-avatar-role">{{ participant().role }}</div>
17334
+ }
17335
+ @if (participant().lastActive) {
17336
+ <div class="chat-avatar-meta">{{ participant().lastActive }}</div>
17356
17337
  }
17357
17338
  </div>
17358
- @if (participant().role) {
17359
- <div class="chat-avatar-role">{{ participant().role }}</div>
17360
- }
17361
- @if (participant().lastActive) {
17362
- <div class="chat-avatar-meta">{{ participant().lastActive }}</div>
17363
- }
17364
17339
  </div>
17365
- </div>
17366
-
17367
- <div class="messages-list">
17368
- @if (messages().length === 0) {
17369
- <!-- Empty State - Timestamp and optional inquiry system message -->
17370
- <div class="timestamp-header">
17371
- <span class="timestamp-text">{{ getInitialTimestamp() }}</span>
17372
- </div>
17373
17340
 
17374
- @if (threadContext() === 'inquiry') {
17375
- <ds-mobile-system-message-banner [message]="participant().name + ' har overtaget din henvendelse og vil kontakte dig snart.'" [afterTimestamp]="true">
17376
- </ds-mobile-system-message-banner>
17377
- }
17378
- } @else {
17379
- @for (group of messagesWithDisplay(); track group.timestamp) {
17380
- <!-- Timestamp Header -->
17341
+ <div class="messages-list">
17342
+ @if (messages().length === 0) {
17343
+ <!-- Empty State - Timestamp and optional inquiry system message -->
17381
17344
  <div class="timestamp-header">
17382
- <span class="timestamp-text">{{ group.displayTimestamp }}</span>
17345
+ <span class="timestamp-text">{{ getInitialTimestamp() }}</span>
17383
17346
  </div>
17384
17347
 
17385
- @if ($first && threadContext() === 'inquiry') {
17348
+ @if (threadContext() === 'inquiry') {
17386
17349
  <ds-mobile-system-message-banner [message]="participant().name + ' har overtaget din henvendelse og vil kontakte dig snart.'" [afterTimestamp]="true">
17387
17350
  </ds-mobile-system-message-banner>
17388
17351
  }
17389
- @for (message of group.messages; track message.id) {
17390
- @if (message.systemKind) {
17391
- <p class="chat-system-line">{{ formatActivityLine(message) }}</p>
17392
- } @else if (message.senderId === 'system' && message.content.trim()) {
17393
- <p class="chat-system-line">{{ message.content }}</p>
17394
- } @else if (message.deletedAt) {
17395
- <ds-mobile-message-bubble
17396
- [content]="deletePlaceholder(message)"
17397
- [isOwnMessage]="message.isOwnMessage"
17398
- [isInternal]="message.isInternal || false"
17399
- [internalMessageBadgeText]="lbl.internalMessageBadge"
17400
- [timestamp]="formatMessageTimestamp(message.timestamp)"
17401
- [showTimestamp]="selectedMessageId() === message.id"
17402
- [avatarInitials]="message.avatarInitials || ''"
17403
- [avatarType]="message.avatarType || 'initials'"
17404
- [avatarSrc]="message.avatarSrc || ''"
17405
- [showAvatar]="message.showAvatar"
17406
- [clusterPosition]="message.clusterPosition"
17407
- [attachments]="message.attachments"
17408
- [clickable]="false"
17409
- [isDeleted]="true"
17410
- [isNewMessage]="false"
17411
- >
17412
- </ds-mobile-message-bubble>
17413
- } @else if (message.content.trim()) {
17414
- <ds-mobile-message-bubble
17415
- [content]="message.content"
17416
- [isOwnMessage]="message.isOwnMessage"
17417
- [isInternal]="message.isInternal || false"
17418
- [internalMessageBadgeText]="lbl.internalMessageBadge"
17419
- [timestamp]="formatMessageTimestamp(message.timestamp)"
17420
- [showTimestamp]="selectedMessageId() === message.id"
17421
- [avatarInitials]="message.avatarInitials || ''"
17422
- [avatarType]="message.avatarType || 'initials'"
17423
- [avatarSrc]="message.avatarSrc || ''"
17424
- [showAvatar]="message.showAvatar && !(message.fileAttachments && message.fileAttachments.length > 0)"
17425
- [clusterPosition]="(message.fileAttachments && message.fileAttachments.length > 0) ? 'first' : message.clusterPosition"
17426
- [attachments]="message.attachments"
17427
- [clickable]="true"
17428
- [isNewMessage]="message.isNewMessage || false"
17429
- [showEditedHint]="!!message.editedAt"
17430
- [editedHintText]="lbl.editedHint"
17431
- (messageClick)="handleMessageClick(message.id)"
17432
- (attachmentClick)="handleAttachmentClick($event)"
17433
- (longPress)="handleMessageLongPress(message)"
17434
- >
17435
- </ds-mobile-message-bubble>
17352
+ } @else {
17353
+ @for (group of messagesWithDisplay(); track group.timestamp) {
17354
+ <!-- Timestamp Header -->
17355
+ <div class="timestamp-header">
17356
+ <span class="timestamp-text">{{ group.displayTimestamp }}</span>
17357
+ </div>
17358
+
17359
+ @if ($first && threadContext() === 'inquiry') {
17360
+ <ds-mobile-system-message-banner [message]="participant().name + ' har overtaget din henvendelse og vil kontakte dig snart.'" [afterTimestamp]="true">
17361
+ </ds-mobile-system-message-banner>
17436
17362
  }
17363
+ @for (message of group.messages; track message.id) {
17364
+ @if (message.systemKind) {
17365
+ <p class="chat-system-line">{{ formatActivityLine(message) }}</p>
17366
+ } @else if (message.senderId === 'system' && message.content.trim()) {
17367
+ <p class="chat-system-line">{{ message.content }}</p>
17368
+ } @else if (message.deletedAt) {
17369
+ <ds-mobile-message-bubble
17370
+ [content]="deletePlaceholder(message)"
17371
+ [isOwnMessage]="message.isOwnMessage"
17372
+ [isInternal]="message.isInternal || false"
17373
+ [internalMessageBadgeText]="lbl.internalMessageBadge"
17374
+ [timestamp]="formatMessageTimestamp(message.timestamp)"
17375
+ [showTimestamp]="selectedMessageId() === message.id"
17376
+ [avatarInitials]="message.avatarInitials || ''"
17377
+ [avatarType]="message.avatarType || 'initials'"
17378
+ [avatarSrc]="message.avatarSrc || ''"
17379
+ [showAvatar]="message.showAvatar"
17380
+ [clusterPosition]="message.clusterPosition"
17381
+ [attachments]="message.attachments"
17382
+ [clickable]="false"
17383
+ [isDeleted]="true"
17384
+ [isNewMessage]="false"
17385
+ >
17386
+ </ds-mobile-message-bubble>
17387
+ } @else if (message.content.trim()) {
17388
+ <ds-mobile-message-bubble
17389
+ [content]="message.content"
17390
+ [isOwnMessage]="message.isOwnMessage"
17391
+ [isInternal]="message.isInternal || false"
17392
+ [internalMessageBadgeText]="lbl.internalMessageBadge"
17393
+ [timestamp]="formatMessageTimestamp(message.timestamp)"
17394
+ [showTimestamp]="selectedMessageId() === message.id"
17395
+ [avatarInitials]="message.avatarInitials || ''"
17396
+ [avatarType]="message.avatarType || 'initials'"
17397
+ [avatarSrc]="message.avatarSrc || ''"
17398
+ [showAvatar]="message.showAvatar && !(message.fileAttachments && message.fileAttachments.length > 0)"
17399
+ [clusterPosition]="message.fileAttachments && message.fileAttachments.length > 0 ? 'first' : message.clusterPosition"
17400
+ [attachments]="message.attachments"
17401
+ [clickable]="true"
17402
+ [isNewMessage]="message.isNewMessage || false"
17403
+ [showEditedHint]="!!message.editedAt"
17404
+ [editedHintText]="lbl.editedHint"
17405
+ (messageClick)="handleMessageClick(message.id)"
17406
+ (attachmentClick)="handleAttachmentClick($event)"
17407
+ (longPress)="handleMessageLongPress(message)"
17408
+ >
17409
+ </ds-mobile-message-bubble>
17410
+ }
17437
17411
 
17438
- @if (!message.deletedAt && message.fileAttachments && message.fileAttachments.length > 0) {
17439
- <div
17440
- class="message-file-attachments"
17441
- [class.own-message]="message.isOwnMessage"
17442
- [class.attachment-only]="!message.content.trim()"
17443
- (click)="handleMessageClick(message.id)"
17444
- (touchstart)="startAttachmentLongPress(message)"
17445
- (touchend)="cancelAttachmentLongPress()"
17446
- (touchcancel)="cancelAttachmentLongPress()"
17447
- >
17448
- @for (fileAttachment of message.fileAttachments; track fileAttachment.id) {
17449
- @if (fileAttachment.type === 'image') {
17450
- <div
17451
- class="message-image-attachment"
17452
- (click)="handleImageClick(fileAttachment, message); $event.stopPropagation()"
17453
- >
17454
- <img [src]="fileAttachment.src" [alt]="fileAttachment.name || 'Image'" class="inline-image" />
17455
- </div>
17456
- } @else {
17457
- <ds-mobile-card-inline-file
17458
- [fileName]="fileAttachment.name || 'Unknown file'"
17459
- [fileSize]="fileAttachment.size || ''"
17460
- [variant]="getFileVariant(fileAttachment.type)"
17461
- [layout]="'compact'"
17462
- (fileClick)="handleFileAttachmentClick(fileAttachment)"
17463
- >
17464
- </ds-mobile-card-inline-file>
17412
+ @if (!message.deletedAt && message.fileAttachments && message.fileAttachments.length > 0) {
17413
+ <div
17414
+ class="message-file-attachments"
17415
+ [class.own-message]="message.isOwnMessage"
17416
+ [class.attachment-only]="!message.content.trim()"
17417
+ (click)="handleMessageClick(message.id)"
17418
+ (touchstart)="startAttachmentLongPress(message)"
17419
+ (touchend)="cancelAttachmentLongPress()"
17420
+ (touchcancel)="cancelAttachmentLongPress()"
17421
+ >
17422
+ @for (fileAttachment of message.fileAttachments; track fileAttachment.id) {
17423
+ @if (fileAttachment.type === 'image') {
17424
+ <div class="message-image-attachment" (click)="handleImageClick(fileAttachment, message); $event.stopPropagation()">
17425
+ <img [src]="fileAttachment.src" [alt]="fileAttachment.name || 'Image'" class="inline-image" />
17426
+ </div>
17427
+ } @else {
17428
+ <ds-mobile-card-inline-file
17429
+ [fileName]="fileAttachment.name || 'Unknown file'"
17430
+ [fileSize]="fileAttachment.size || ''"
17431
+ [variant]="getFileVariant(fileAttachment.type)"
17432
+ [layout]="'compact'"
17433
+ (fileClick)="handleFileAttachmentClick(fileAttachment)"
17434
+ >
17435
+ </ds-mobile-card-inline-file>
17436
+ }
17465
17437
  }
17466
- }
17467
- </div>
17438
+ </div>
17439
+ }
17468
17440
  }
17469
17441
  }
17470
17442
  }
17471
- }
17443
+ </div>
17472
17444
  </div>
17473
- </div>
17474
- </ds-mobile-section>
17445
+ </ds-mobile-section>
17475
17446
  }
17476
17447
 
17477
17448
  <!-- Fixed message composer -->
@@ -19973,31 +19944,31 @@ class DsMobileTabBarComponent {
19973
19944
  code: 'da',
19974
19945
  nativeName: 'Dansk',
19975
19946
  englishName: 'Danish',
19976
- flagIcon: '/Assets/country-flags/denmark.svg',
19947
+ flagIcon: '/assets/country-flags/denmark.svg',
19977
19948
  },
19978
19949
  {
19979
19950
  code: 'en',
19980
19951
  nativeName: 'English',
19981
19952
  englishName: 'English',
19982
- flagIcon: '/Assets/country-flags/united kingdom.svg',
19953
+ flagIcon: '/assets/country-flags/united-kingdom.svg',
19983
19954
  },
19984
19955
  {
19985
19956
  code: 'sv',
19986
19957
  nativeName: 'Svenska',
19987
19958
  englishName: 'Swedish',
19988
- flagIcon: '/Assets/country-flags/sweden.svg',
19959
+ flagIcon: '/assets/country-flags/sweden.svg',
19989
19960
  },
19990
19961
  {
19991
19962
  code: 'no',
19992
19963
  nativeName: 'Norsk',
19993
19964
  englishName: 'Norwegian',
19994
- flagIcon: '/Assets/country-flags/norway.svg',
19965
+ flagIcon: '/assets/country-flags/norway.svg',
19995
19966
  },
19996
19967
  {
19997
19968
  code: 'de',
19998
19969
  nativeName: 'Deutsch',
19999
19970
  englishName: 'German',
20000
- flagIcon: '/Assets/country-flags/germany.svg',
19971
+ flagIcon: '/assets/country-flags/germany.svg',
20001
19972
  },
20002
19973
  ],
20003
19974
  },