@propbinder/mobile-design 0.2.2 → 0.2.3

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 +67 -63
  2. package/fesm2022/propbinder-mobile-design.mjs.map +1 -1
  3. package/index.d.ts +2 -2
  4. package/package.json +1 -1
package/fesm2022/propbinder-mobile-design.mjs CHANGED
@@ -4275,48 +4275,50 @@ class DsMobileMessageBubbleComponent {
4275
4275
  this.longPress.emit();
4276
4276
  }
4277
4277
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileMessageBubbleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4278
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileMessageBubbleComponent, isStandalone: true, selector: "ds-mobile-message-bubble", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, isOwnMessage: { classPropertyName: "isOwnMessage", publicName: "isOwnMessage", isSignal: true, isRequired: false, transformFunction: null }, senderName: { classPropertyName: "senderName", publicName: "senderName", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: true, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, avatarType: { classPropertyName: "avatarType", publicName: "avatarType", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { attachmentClick: "attachmentClick", longPress: "longPress" }, host: { listeners: { "touchstart": "handleTouchStart($event)", "touchend": "handleTouchEnd($event)", "touchmove": "handleTouchMove($event)", "contextmenu": "handleContextMenu($event)" }, properties: { "class.is-own-message": "isOwnMessage()", "class.has-attachments": "attachments() && attachments()!.length > 0" } }, ngImport: i0, template: `
4279
- <div class="avatar-wrapper">
4280
- <ds-avatar
4281
- [initials]="avatarInitials()"
4282
- [type]="avatarType()"
4283
- [src]="avatarSrc()"
4284
- size="sm" />
4278
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileMessageBubbleComponent, isStandalone: true, selector: "ds-mobile-message-bubble", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, isOwnMessage: { classPropertyName: "isOwnMessage", publicName: "isOwnMessage", isSignal: true, isRequired: false, transformFunction: null }, senderName: { classPropertyName: "senderName", publicName: "senderName", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: true, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, avatarType: { classPropertyName: "avatarType", publicName: "avatarType", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { attachmentClick: "attachmentClick", longPress: "longPress" }, host: { listeners: { "touchstart": "handleTouchStart($event)", "touchend": "handleTouchEnd($event)", "touchmove": "handleTouchMove($event)", "contextmenu": "handleContextMenu($event)" }, properties: { "class.is-own-message": "isOwnMessage()", "class.has-attachments": "attachments() && attachments()!.length > 0" } }, ngImport: i0, template: `<div class="avatar-wrapper">
4279
+ <ds-avatar [initials]="avatarInitials()" [type]="avatarType()" [src]="avatarSrc()" size="sm" />
4285
4280
  </div>
4286
-
4287
- <div class="message-content-wrapper">
4281
+
4282
+ <div class="message-content-wrapper">
4288
4283
  <div class="message-bubble">
4284
+ <!-- Text -->
4289
4285
  <p class="message-text">{{ content() }}</p>
4290
-
4286
+
4291
4287
  <!-- Attachments -->
4292
4288
  @if (attachments() && attachments()!.length > 0) {
4293
- <div class="attachments">
4294
- @for (attachment of attachments(); track attachment.id) {
4295
- <div
4296
- class="attachment-item"
4297
- (click)="handleAttachmentClick(attachment)">
4298
- <div class="attachment-icon">
4299
- @if (attachment.type === 'image') {
4300
- <ds-icon name="remixImageLine" size="16px" />
4301
- } @else if (attachment.type === 'pdf') {
4302
- <ds-icon name="remixFilePdfLine" size="16px" />
4303
- } @else {
4304
- <ds-icon name="remixFileLine" size="16px" />
4305
- }
4306
- </div>
4307
- <span class="attachment-name">{{ attachment.name }}</span>
4308
- </div>
4309
- }
4289
+ <div class="attachments">
4290
+ @for (attachment of attachments(); track attachment.id) {
4291
+
4292
+ <!-- IMAGE attachment (thumbnail) -->
4293
+ @if (attachment.type === 'image') {
4294
+ <img class="image-attachment" [src]="attachment.thumbnail || attachment.url" [alt]="attachment.name" (click)="handleAttachmentClick(attachment)" />
4295
+ }
4296
+
4297
+ <!-- PDF / FILE attachment -->
4298
+ @else {
4299
+ <div class="attachment-item" (click)="handleAttachmentClick(attachment)">
4300
+ <div class="attachment-icon">
4301
+ @if (attachment.type === 'pdf') {
4302
+ <ds-icon name="remixFilePdfLine" size="16px" />
4303
+ } @else {
4304
+ <ds-icon name="remixFileLine" size="16px" />
4305
+ }
4306
+ </div>
4307
+
4308
+ <span class="attachment-name">
4309
+ {{ attachment.name }}
4310
+ </span>
4310
4311
  </div>
4312
+ } }
4313
+ </div>
4311
4314
  }
4312
-
4313
- <!-- Timestamp inside bubble -->
4315
+
4316
+ <!-- Timestamp -->
4314
4317
  <div class="message-footer">
4315
4318
  <span class="timestamp">{{ timestamp() }}</span>
4316
4319
  </div>
4317
4320
  </div>
4318
- </div>
4319
- `, isInline: true, styles: [":host{display:flex;gap:8px;margin-bottom:12px;width:100%;align-items:flex-end;box-sizing:border-box}:host:not(.is-own-message){justify-content:flex-start!important;flex-direction:row!important}:host.is-own-message{justify-content:flex-end!important;flex-direction:row-reverse!important;margin-left:auto!important;margin-right:0!important}.avatar-wrapper{flex-shrink:0;display:flex;align-items:flex-end}.message-content-wrapper{display:flex;flex-direction:column;gap:4px;max-width:75%;min-width:0}:host:not(.is-own-message) .message-content-wrapper{align-items:flex-start}:host.is-own-message .message-content-wrapper{align-items:flex-end!important;margin-left:auto!important;margin-right:0!important}.message-bubble{padding:10px 14px 6px;border-radius:16px;position:relative;word-wrap:break-word;white-space:pre-wrap;max-width:100%;display:flex;flex-direction:column;gap:8px}:host:not(.is-own-message) .message-bubble{background:var(--color-background-neutral-primary, #ffffff);border:1px solid var(--border-color-default, #e5e5e5)}:host.is-own-message .message-bubble{background:var(--color-primary-surface, var(--color-brand-base, #6B5FF5));color:var(--color-primary-content, #ffffff)}.message-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:20px;letter-spacing:-.3px;margin:0}:host:not(.is-own-message) .message-text{color:var(--color-text-primary, #1a1a1a)}:host.is-own-message .message-text{color:var(--color-primary-content, #ffffff)}.attachments{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}:host:not(.is-own-message) .attachments{justify-content:flex-start}:host.is-own-message .attachments{justify-content:flex-end}.attachment-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:8px;border:1px solid var(--border-color-default, #e5e5e5);cursor:pointer;transition:background .2s ease}:host.is-own-message .attachment-item{background:#fff3;border-color:#ffffff4d}.attachment-item:active{background:var(--color-background-neutral-secondary-hover, #ebebeb)}:host.is-own-message .attachment-item:active{background:#ffffff4d}.attachment-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:var(--color-background-neutral-primary, #ffffff)}:host.is-own-message .attachment-icon{background:#ffffff4d}.attachment-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:500;line-height:16px;color:var(--color-text-primary, #1a1a1a);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.is-own-message .attachment-name{color:var(--color-text-on-brand, #ffffff)}.message-footer{display:flex;align-items:center;gap:4px;margin-top:2px;align-self:flex-end}:host:not(.is-own-message) .message-footer{align-self:flex-start}.timestamp{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:14px}:host:not(.is-own-message) .timestamp{color:var(--color-text-tertiary, #a0a0a0)}:host.is-own-message .timestamp{color:var(--color-primary-content, #ffffff);opacity:.8}:host{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
4321
+ </div>`, isInline: true, styles: [":host{display:flex;gap:8px;margin-bottom:12px;width:100%;align-items:flex-end;box-sizing:border-box}:host:not(.is-own-message){justify-content:flex-start!important;flex-direction:row!important}:host.is-own-message{justify-content:flex-end!important;flex-direction:row-reverse!important;margin-left:auto!important;margin-right:0!important}.avatar-wrapper{flex-shrink:0;display:flex;align-items:flex-end}.message-content-wrapper{display:flex;flex-direction:column;gap:4px;max-width:75%;min-width:0}:host:not(.is-own-message) .message-content-wrapper{align-items:flex-start}:host.is-own-message .message-content-wrapper{align-items:flex-end!important;margin-left:auto!important;margin-right:0!important}.message-bubble{padding:10px 14px 6px;border-radius:16px;position:relative;word-wrap:break-word;white-space:pre-wrap;max-width:100%;display:flex;flex-direction:column;gap:8px}:host:not(.is-own-message) .message-bubble{background:var(--color-background-neutral-primary, #ffffff);border:1px solid var(--border-color-default, #e5e5e5)}:host.is-own-message .message-bubble{background:var(--color-primary-surface, var(--color-brand-base, #6b5ff5));color:var(--color-primary-content, #ffffff)}.message-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:20px;letter-spacing:-.3px;margin:0}:host:not(.is-own-message) .message-text{color:var(--color-text-primary, #1a1a1a)}:host.is-own-message .message-text{color:var(--color-primary-content, #ffffff)}.attachments{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}:host:not(.is-own-message) .attachments{justify-content:flex-start}:host.is-own-message .attachments{justify-content:flex-end}.attachment-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:8px;border:1px solid var(--border-color-default, #e5e5e5);cursor:pointer;transition:background .2s ease}:host.is-own-message .attachment-item{background:#fff3;border-color:#ffffff4d}.attachment-item:active{background:var(--color-background-neutral-secondary-hover, #ebebeb)}:host.is-own-message .attachment-item:active{background:#ffffff4d}.attachment-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:var(--color-background-neutral-primary, #ffffff)}:host.is-own-message .attachment-icon{background:#ffffff4d}.attachment-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:500;line-height:16px;color:var(--color-text-primary, #1a1a1a);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.is-own-message .attachment-name{color:var(--color-text-on-brand, #ffffff)}.message-footer{display:flex;align-items:center;gap:4px;margin-top:2px;align-self:flex-end}:host:not(.is-own-message) .message-footer{align-self:flex-start}.timestamp{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:14px}:host:not(.is-own-message) .timestamp{color:var(--color-text-tertiary, #a0a0a0)}:host.is-own-message .timestamp{color:var(--color-primary-content, #ffffff);opacity:.8}:host{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.image-attachment{max-width:180px;max-height:140px;border-radius:12px;object-fit:cover;cursor:pointer;border:1px solid var(--border-color-default, #e5e5e5)}:host.is-own-message .image-attachment{border-color:#fff6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
4320
4322
  }
4321
4323
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileMessageBubbleComponent, decorators: [{
4322
4324
  type: Component,
@@ -4326,49 +4328,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
4326
4328
  '(touchstart)': 'handleTouchStart($event)',
4327
4329
  '(touchend)': 'handleTouchEnd($event)',
4328
4330
  '(touchmove)': 'handleTouchMove($event)',
4329
- '(contextmenu)': 'handleContextMenu($event)'
4330
- }, template: `
4331
- <div class="avatar-wrapper">
4332
- <ds-avatar
4333
- [initials]="avatarInitials()"
4334
- [type]="avatarType()"
4335
- [src]="avatarSrc()"
4336
- size="sm" />
4331
+ '(contextmenu)': 'handleContextMenu($event)',
4332
+ }, template: `<div class="avatar-wrapper">
4333
+ <ds-avatar [initials]="avatarInitials()" [type]="avatarType()" [src]="avatarSrc()" size="sm" />
4337
4334
  </div>
4338
-
4339
- <div class="message-content-wrapper">
4335
+
4336
+ <div class="message-content-wrapper">
4340
4337
  <div class="message-bubble">
4338
+ <!-- Text -->
4341
4339
  <p class="message-text">{{ content() }}</p>
4342
-
4340
+
4343
4341
  <!-- Attachments -->
4344
4342
  @if (attachments() && attachments()!.length > 0) {
4345
- <div class="attachments">
4346
- @for (attachment of attachments(); track attachment.id) {
4347
- <div
4348
- class="attachment-item"
4349
- (click)="handleAttachmentClick(attachment)">
4350
- <div class="attachment-icon">
4351
- @if (attachment.type === 'image') {
4352
- <ds-icon name="remixImageLine" size="16px" />
4353
- } @else if (attachment.type === 'pdf') {
4354
- <ds-icon name="remixFilePdfLine" size="16px" />
4355
- } @else {
4356
- <ds-icon name="remixFileLine" size="16px" />
4357
- }
4358
- </div>
4359
- <span class="attachment-name">{{ attachment.name }}</span>
4360
- </div>
4361
- }
4343
+ <div class="attachments">
4344
+ @for (attachment of attachments(); track attachment.id) {
4345
+
4346
+ <!-- IMAGE attachment (thumbnail) -->
4347
+ @if (attachment.type === 'image') {
4348
+ <img class="image-attachment" [src]="attachment.thumbnail || attachment.url" [alt]="attachment.name" (click)="handleAttachmentClick(attachment)" />
4349
+ }
4350
+
4351
+ <!-- PDF / FILE attachment -->
4352
+ @else {
4353
+ <div class="attachment-item" (click)="handleAttachmentClick(attachment)">
4354
+ <div class="attachment-icon">
4355
+ @if (attachment.type === 'pdf') {
4356
+ <ds-icon name="remixFilePdfLine" size="16px" />
4357
+ } @else {
4358
+ <ds-icon name="remixFileLine" size="16px" />
4359
+ }
4360
+ </div>
4361
+
4362
+ <span class="attachment-name">
4363
+ {{ attachment.name }}
4364
+ </span>
4362
4365
  </div>
4366
+ } }
4367
+ </div>
4363
4368
  }
4364
-
4365
- <!-- Timestamp inside bubble -->
4369
+
4370
+ <!-- Timestamp -->
4366
4371
  <div class="message-footer">
4367
4372
  <span class="timestamp">{{ timestamp() }}</span>
4368
4373
  </div>
4369
4374
  </div>
4370
- </div>
4371
- `, styles: [":host{display:flex;gap:8px;margin-bottom:12px;width:100%;align-items:flex-end;box-sizing:border-box}:host:not(.is-own-message){justify-content:flex-start!important;flex-direction:row!important}:host.is-own-message{justify-content:flex-end!important;flex-direction:row-reverse!important;margin-left:auto!important;margin-right:0!important}.avatar-wrapper{flex-shrink:0;display:flex;align-items:flex-end}.message-content-wrapper{display:flex;flex-direction:column;gap:4px;max-width:75%;min-width:0}:host:not(.is-own-message) .message-content-wrapper{align-items:flex-start}:host.is-own-message .message-content-wrapper{align-items:flex-end!important;margin-left:auto!important;margin-right:0!important}.message-bubble{padding:10px 14px 6px;border-radius:16px;position:relative;word-wrap:break-word;white-space:pre-wrap;max-width:100%;display:flex;flex-direction:column;gap:8px}:host:not(.is-own-message) .message-bubble{background:var(--color-background-neutral-primary, #ffffff);border:1px solid var(--border-color-default, #e5e5e5)}:host.is-own-message .message-bubble{background:var(--color-primary-surface, var(--color-brand-base, #6B5FF5));color:var(--color-primary-content, #ffffff)}.message-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:20px;letter-spacing:-.3px;margin:0}:host:not(.is-own-message) .message-text{color:var(--color-text-primary, #1a1a1a)}:host.is-own-message .message-text{color:var(--color-primary-content, #ffffff)}.attachments{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}:host:not(.is-own-message) .attachments{justify-content:flex-start}:host.is-own-message .attachments{justify-content:flex-end}.attachment-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:8px;border:1px solid var(--border-color-default, #e5e5e5);cursor:pointer;transition:background .2s ease}:host.is-own-message .attachment-item{background:#fff3;border-color:#ffffff4d}.attachment-item:active{background:var(--color-background-neutral-secondary-hover, #ebebeb)}:host.is-own-message .attachment-item:active{background:#ffffff4d}.attachment-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:var(--color-background-neutral-primary, #ffffff)}:host.is-own-message .attachment-icon{background:#ffffff4d}.attachment-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:500;line-height:16px;color:var(--color-text-primary, #1a1a1a);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.is-own-message .attachment-name{color:var(--color-text-on-brand, #ffffff)}.message-footer{display:flex;align-items:center;gap:4px;margin-top:2px;align-self:flex-end}:host:not(.is-own-message) .message-footer{align-self:flex-start}.timestamp{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:14px}:host:not(.is-own-message) .timestamp{color:var(--color-text-tertiary, #a0a0a0)}:host.is-own-message .timestamp{color:var(--color-primary-content, #ffffff);opacity:.8}:host{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}\n"] }]
4375
+ </div>`, styles: [":host{display:flex;gap:8px;margin-bottom:12px;width:100%;align-items:flex-end;box-sizing:border-box}:host:not(.is-own-message){justify-content:flex-start!important;flex-direction:row!important}:host.is-own-message{justify-content:flex-end!important;flex-direction:row-reverse!important;margin-left:auto!important;margin-right:0!important}.avatar-wrapper{flex-shrink:0;display:flex;align-items:flex-end}.message-content-wrapper{display:flex;flex-direction:column;gap:4px;max-width:75%;min-width:0}:host:not(.is-own-message) .message-content-wrapper{align-items:flex-start}:host.is-own-message .message-content-wrapper{align-items:flex-end!important;margin-left:auto!important;margin-right:0!important}.message-bubble{padding:10px 14px 6px;border-radius:16px;position:relative;word-wrap:break-word;white-space:pre-wrap;max-width:100%;display:flex;flex-direction:column;gap:8px}:host:not(.is-own-message) .message-bubble{background:var(--color-background-neutral-primary, #ffffff);border:1px solid var(--border-color-default, #e5e5e5)}:host.is-own-message .message-bubble{background:var(--color-primary-surface, var(--color-brand-base, #6b5ff5));color:var(--color-primary-content, #ffffff)}.message-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:20px;letter-spacing:-.3px;margin:0}:host:not(.is-own-message) .message-text{color:var(--color-text-primary, #1a1a1a)}:host.is-own-message .message-text{color:var(--color-primary-content, #ffffff)}.attachments{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}:host:not(.is-own-message) .attachments{justify-content:flex-start}:host.is-own-message .attachments{justify-content:flex-end}.attachment-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:8px;border:1px solid var(--border-color-default, #e5e5e5);cursor:pointer;transition:background .2s ease}:host.is-own-message .attachment-item{background:#fff3;border-color:#ffffff4d}.attachment-item:active{background:var(--color-background-neutral-secondary-hover, #ebebeb)}:host.is-own-message .attachment-item:active{background:#ffffff4d}.attachment-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:var(--color-background-neutral-primary, #ffffff)}:host.is-own-message .attachment-icon{background:#ffffff4d}.attachment-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:500;line-height:16px;color:var(--color-text-primary, #1a1a1a);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.is-own-message .attachment-name{color:var(--color-text-on-brand, #ffffff)}.message-footer{display:flex;align-items:center;gap:4px;margin-top:2px;align-self:flex-end}:host:not(.is-own-message) .message-footer{align-self:flex-start}.timestamp{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:14px}:host:not(.is-own-message) .timestamp{color:var(--color-text-tertiary, #a0a0a0)}:host.is-own-message .timestamp{color:var(--color-primary-content, #ffffff);opacity:.8}:host{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.image-attachment{max-width:180px;max-height:140px;border-radius:12px;object-fit:cover;cursor:pointer;border:1px solid var(--border-color-default, #e5e5e5)}:host.is-own-message .image-attachment{border-color:#fff6}\n"] }]
4372
4376
  }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], isOwnMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOwnMessage", required: false }] }], senderName: [{ type: i0.Input, args: [{ isSignal: true, alias: "senderName", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: true }] }], avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], avatarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarType", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], attachmentClick: [{ type: i0.Output, args: ["attachmentClick"] }], longPress: [{ type: i0.Output, args: ["longPress"] }] } });
4373
4377
 
4374
4378
  /**