@propbinder/mobile-design 0.2.2 → 0.2.4

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 +201 -181
  2. package/fesm2022/propbinder-mobile-design.mjs.map +1 -1
  3. package/index.d.ts +4 -3
  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
  /**
@@ -9069,6 +9073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
9069
9073
  */
9070
9074
  class DsMobileChatModalComponent {
9071
9075
  modalController;
9076
+ lightbox;
9072
9077
  // Chat data passed from service
9073
9078
  chatData;
9074
9079
  /**
@@ -9083,15 +9088,16 @@ class DsMobileChatModalComponent {
9083
9088
  participant = signal({
9084
9089
  id: '',
9085
9090
  name: '',
9086
- avatarInitials: ''
9091
+ avatarInitials: '',
9087
9092
  }, ...(ngDevMode ? [{ debugName: "participant" }] : []));
9088
9093
  messages = signal([], ...(ngDevMode ? [{ debugName: "messages" }] : []));
9089
9094
  currentUserInitials = signal('', ...(ngDevMode ? [{ debugName: "currentUserInitials" }] : []));
9090
9095
  currentUserAvatarType = signal('initials', ...(ngDevMode ? [{ debugName: "currentUserAvatarType" }] : []));
9091
9096
  currentUserAvatarSrc = signal('', ...(ngDevMode ? [{ debugName: "currentUserAvatarSrc" }] : []));
9092
9097
  autoFocus = signal(false, ...(ngDevMode ? [{ debugName: "autoFocus" }] : []));
9093
- constructor(modalController) {
9098
+ constructor(modalController, lightbox) {
9094
9099
  this.modalController = modalController;
9100
+ this.lightbox = lightbox;
9095
9101
  }
9096
9102
  ngOnInit() {
9097
9103
  // Initialize chat data from input
@@ -9143,7 +9149,7 @@ class DsMobileChatModalComponent {
9143
9149
  isOwnMessage: true,
9144
9150
  avatarInitials: this.currentUserInitials(),
9145
9151
  avatarType: this.currentUserAvatarType(),
9146
- avatarSrc: this.currentUserAvatarSrc()
9152
+ avatarSrc: this.currentUserAvatarSrc(),
9147
9153
  };
9148
9154
  // Add message to list
9149
9155
  const updatedMessages = [...this.messages(), newMessage];
@@ -9159,8 +9165,50 @@ class DsMobileChatModalComponent {
9159
9165
  * Handle attachment click
9160
9166
  */
9161
9167
  handleAttachmentClick(attachment) {
9162
- console.log('[ChatModal] Attachment clicked:', attachment);
9163
- // In a real app, you would open the attachment (image viewer, PDF viewer, etc.)
9168
+ if (attachment.type !== 'image') {
9169
+ if (attachment.url) {
9170
+ window.open(attachment.url, '_blank', 'noopener,noreferrer');
9171
+ }
9172
+ return;
9173
+ }
9174
+ const msgs = this.messages();
9175
+ const allImages = [];
9176
+ for (const m of msgs) {
9177
+ for (const att of m.attachments ?? []) {
9178
+ if (att.type === 'image') {
9179
+ allImages.push({ msg: m, att });
9180
+ }
9181
+ }
9182
+ }
9183
+ const initialIndex = Math.max(0, allImages.findIndex((x) => x.att.id === attachment.id));
9184
+ const images = allImages.map((x) => ({
9185
+ type: 'image',
9186
+ src: x.att.url,
9187
+ title: x.att.name,
9188
+ alt: x.att.name,
9189
+ thumbnail: x.att.thumbnail,
9190
+ }));
9191
+ const ownerMessage = allImages[initialIndex]?.msg;
9192
+ const author = ownerMessage
9193
+ ? {
9194
+ name: ownerMessage.senderName,
9195
+ role: ownerMessage.senderRole,
9196
+ timestamp: ownerMessage.timestamp,
9197
+ avatarInitials: ownerMessage.avatarInitials,
9198
+ avatarSrc: ownerMessage.avatarSrc,
9199
+ avatarType: ownerMessage.avatarType === 'photo' || ownerMessage.avatarType === 'initials' ? ownerMessage.avatarType : undefined,
9200
+ }
9201
+ : undefined;
9202
+ this.lightbox.openImages({
9203
+ images,
9204
+ author,
9205
+ initialIndex,
9206
+ enableZoom: true,
9207
+ enableSwipe: true,
9208
+ showControls: true,
9209
+ showInfo: true,
9210
+ animation: 'fade',
9211
+ });
9164
9212
  }
9165
9213
  /**
9166
9214
  * Handle message long press
@@ -9169,7 +9217,7 @@ class DsMobileChatModalComponent {
9169
9217
  console.log('[ChatModal] Message long pressed:', message);
9170
9218
  // In a real app, you would show an action sheet with options (copy, delete, etc.)
9171
9219
  }
9172
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileChatModalComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
9220
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileChatModalComponent, deps: [{ token: i1.ModalController }, { token: DsMobileLightboxService }], target: i0.ɵɵFactoryTarget.Component });
9173
9221
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileChatModalComponent, isStandalone: true, selector: "ds-mobile-chat-modal", inputs: { chatData: "chatData", loading: "loading", error: "error" }, ngImport: i0, template: `
9174
9222
  <ion-content [fullscreen]="true" [scrollY]="true" class="chat-modal-content">
9175
9223
  <div class="chat-modal-wrapper">
@@ -9182,77 +9230,67 @@ class DsMobileChatModalComponent {
9182
9230
  [initials]="participant().avatarInitials || ''"
9183
9231
  [type]="participant().avatarType || 'initials'"
9184
9232
  [src]="participant().avatarSrc || ''"
9185
- size="md"
9186
- />
9233
+ size="md" />
9187
9234
  <div class="participant-details">
9188
9235
  <div class="author-name">{{ participant().name }}</div>
9189
9236
  @if (participant().role) {
9190
- <div class="author-meta">{{ participant().role }}</div>
9237
+ <div class="author-meta">{{ participant().role }}</div>
9191
9238
  }
9192
9239
  </div>
9193
9240
  </div>
9194
-
9241
+
9195
9242
  <!-- Close button -->
9196
- <ds-icon-button
9197
- icon="remixCloseLine"
9198
- variant="secondary"
9199
- size="lg"
9200
- (clicked)="close()"
9201
- class="close-button"
9202
- aria-label="Close chat">
9203
- </ds-icon-button>
9243
+ <ds-icon-button icon="remixCloseLine" variant="secondary" size="lg" (clicked)="close()" class="close-button" aria-label="Close chat"> </ds-icon-button>
9204
9244
  </div>
9205
9245
  </div>
9206
9246
 
9207
9247
  <!-- Messages thread -->
9208
9248
  <div class="chat-messages-container">
9209
9249
  @if (loading) {
9210
- <!-- Loading State -->
9211
- <div class="chat-loading-state">
9212
- <div class="loading-spinner"></div>
9213
- <p class="loading-text">Loading messages...</p>
9214
- </div>
9250
+ <!-- Loading State -->
9251
+ <div class="chat-loading-state">
9252
+ <div class="loading-spinner"></div>
9253
+ <p class="loading-text">Loading messages...</p>
9254
+ </div>
9215
9255
  } @else if (error) {
9216
- <!-- Error State -->
9217
- <div class="chat-error-state">
9218
- <ds-icon name="remixErrorWarningLine" size="48px" [style.color]="'var(--color-destructive-base)'" />
9219
- <h3 class="error-state-title">Error loading messages</h3>
9220
- <p class="error-state-description">{{ error }}</p>
9221
- </div>
9256
+ <!-- Error State -->
9257
+ <div class="chat-error-state">
9258
+ <ds-icon name="remixErrorWarningLine" size="48px" [style.color]="'var(--color-destructive-base)'" />
9259
+ <h3 class="error-state-title">Error loading messages</h3>
9260
+ <p class="error-state-description">{{ error }}</p>
9261
+ </div>
9222
9262
  } @else {
9223
- <!-- Messages List -->
9224
- <div class="messages-list">
9225
- @if (messages().length === 0) {
9226
- <!-- Empty State -->
9227
- <div class="messages-empty-state">
9228
- <h3 class="empty-state-title">No messages yet</h3>
9229
- <p class="empty-state-description">Start the conversation by sending a message</p>
9230
- </div>
9231
- } @else {
9232
- @for (message of messages(); track message.id) {
9233
- <ds-mobile-message-bubble
9234
- [content]="message.content"
9235
- [isOwnMessage]="message.isOwnMessage"
9236
- [timestamp]="message.timestamp"
9237
- [avatarInitials]="message.avatarInitials || ''"
9238
- [avatarType]="message.avatarType || 'initials'"
9239
- [avatarSrc]="message.avatarSrc || ''"
9240
- [attachments]="message.attachments"
9241
- [clickable]="true"
9242
- (attachmentClick)="handleAttachmentClick($event)"
9243
- (longPress)="handleMessageLongPress(message)">
9244
- </ds-mobile-message-bubble>
9245
- }
9246
- }
9263
+ <!-- Messages List -->
9264
+ <div class="messages-list">
9265
+ @if (messages().length === 0) {
9266
+ <!-- Empty State -->
9267
+ <div class="messages-empty-state">
9268
+ <h3 class="empty-state-title">No messages yet</h3>
9269
+ <p class="empty-state-description">Start the conversation by sending a message</p>
9247
9270
  </div>
9248
-
9249
- <!-- Bottom spacer for fixed composer -->
9250
- <div class="composer-spacer"></div>
9271
+ } @else { @for (message of messages(); track message.id) {
9272
+ <ds-mobile-message-bubble
9273
+ [content]="message.content"
9274
+ [isOwnMessage]="message.isOwnMessage"
9275
+ [timestamp]="message.timestamp"
9276
+ [avatarInitials]="message.avatarInitials || ''"
9277
+ [avatarType]="message.avatarType || 'initials'"
9278
+ [avatarSrc]="message.avatarSrc || ''"
9279
+ [attachments]="message.attachments"
9280
+ [clickable]="true"
9281
+ (attachmentClick)="handleAttachmentClick($event)"
9282
+ (longPress)="handleMessageLongPress(message)">
9283
+ </ds-mobile-message-bubble>
9284
+ } }
9285
+ </div>
9286
+
9287
+ <!-- Bottom spacer for fixed composer -->
9288
+ <div class="composer-spacer"></div>
9251
9289
  }
9252
9290
  </div>
9253
9291
  </div>
9254
9292
  </ion-content>
9255
-
9293
+
9256
9294
  <!-- Fixed message composer -->
9257
9295
  @if (!loading && !error) {
9258
9296
  <div class="message-composer-fixed">
@@ -9270,15 +9308,7 @@ class DsMobileChatModalComponent {
9270
9308
  }
9271
9309
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileChatModalComponent, decorators: [{
9272
9310
  type: Component,
9273
- args: [{ selector: 'ds-mobile-chat-modal', standalone: true, imports: [
9274
- CommonModule,
9275
- IonContent,
9276
- DsIconButtonComponent,
9277
- DsIconComponent,
9278
- DsAvatarWithBadgeComponent,
9279
- DsMobileMessageComposerComponent,
9280
- DsMobileMessageBubbleComponent
9281
- ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
9311
+ args: [{ selector: 'ds-mobile-chat-modal', standalone: true, imports: [CommonModule, IonContent, DsIconButtonComponent, DsIconComponent, DsAvatarWithBadgeComponent, DsMobileMessageComposerComponent, DsMobileMessageBubbleComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
9282
9312
  <ion-content [fullscreen]="true" [scrollY]="true" class="chat-modal-content">
9283
9313
  <div class="chat-modal-wrapper">
9284
9314
  <!-- Header with participant info -->
@@ -9290,77 +9320,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
9290
9320
  [initials]="participant().avatarInitials || ''"
9291
9321
  [type]="participant().avatarType || 'initials'"
9292
9322
  [src]="participant().avatarSrc || ''"
9293
- size="md"
9294
- />
9323
+ size="md" />
9295
9324
  <div class="participant-details">
9296
9325
  <div class="author-name">{{ participant().name }}</div>
9297
9326
  @if (participant().role) {
9298
- <div class="author-meta">{{ participant().role }}</div>
9327
+ <div class="author-meta">{{ participant().role }}</div>
9299
9328
  }
9300
9329
  </div>
9301
9330
  </div>
9302
-
9331
+
9303
9332
  <!-- Close button -->
9304
- <ds-icon-button
9305
- icon="remixCloseLine"
9306
- variant="secondary"
9307
- size="lg"
9308
- (clicked)="close()"
9309
- class="close-button"
9310
- aria-label="Close chat">
9311
- </ds-icon-button>
9333
+ <ds-icon-button icon="remixCloseLine" variant="secondary" size="lg" (clicked)="close()" class="close-button" aria-label="Close chat"> </ds-icon-button>
9312
9334
  </div>
9313
9335
  </div>
9314
9336
 
9315
9337
  <!-- Messages thread -->
9316
9338
  <div class="chat-messages-container">
9317
9339
  @if (loading) {
9318
- <!-- Loading State -->
9319
- <div class="chat-loading-state">
9320
- <div class="loading-spinner"></div>
9321
- <p class="loading-text">Loading messages...</p>
9322
- </div>
9340
+ <!-- Loading State -->
9341
+ <div class="chat-loading-state">
9342
+ <div class="loading-spinner"></div>
9343
+ <p class="loading-text">Loading messages...</p>
9344
+ </div>
9323
9345
  } @else if (error) {
9324
- <!-- Error State -->
9325
- <div class="chat-error-state">
9326
- <ds-icon name="remixErrorWarningLine" size="48px" [style.color]="'var(--color-destructive-base)'" />
9327
- <h3 class="error-state-title">Error loading messages</h3>
9328
- <p class="error-state-description">{{ error }}</p>
9329
- </div>
9346
+ <!-- Error State -->
9347
+ <div class="chat-error-state">
9348
+ <ds-icon name="remixErrorWarningLine" size="48px" [style.color]="'var(--color-destructive-base)'" />
9349
+ <h3 class="error-state-title">Error loading messages</h3>
9350
+ <p class="error-state-description">{{ error }}</p>
9351
+ </div>
9330
9352
  } @else {
9331
- <!-- Messages List -->
9332
- <div class="messages-list">
9333
- @if (messages().length === 0) {
9334
- <!-- Empty State -->
9335
- <div class="messages-empty-state">
9336
- <h3 class="empty-state-title">No messages yet</h3>
9337
- <p class="empty-state-description">Start the conversation by sending a message</p>
9338
- </div>
9339
- } @else {
9340
- @for (message of messages(); track message.id) {
9341
- <ds-mobile-message-bubble
9342
- [content]="message.content"
9343
- [isOwnMessage]="message.isOwnMessage"
9344
- [timestamp]="message.timestamp"
9345
- [avatarInitials]="message.avatarInitials || ''"
9346
- [avatarType]="message.avatarType || 'initials'"
9347
- [avatarSrc]="message.avatarSrc || ''"
9348
- [attachments]="message.attachments"
9349
- [clickable]="true"
9350
- (attachmentClick)="handleAttachmentClick($event)"
9351
- (longPress)="handleMessageLongPress(message)">
9352
- </ds-mobile-message-bubble>
9353
- }
9354
- }
9353
+ <!-- Messages List -->
9354
+ <div class="messages-list">
9355
+ @if (messages().length === 0) {
9356
+ <!-- Empty State -->
9357
+ <div class="messages-empty-state">
9358
+ <h3 class="empty-state-title">No messages yet</h3>
9359
+ <p class="empty-state-description">Start the conversation by sending a message</p>
9355
9360
  </div>
9356
-
9357
- <!-- Bottom spacer for fixed composer -->
9358
- <div class="composer-spacer"></div>
9361
+ } @else { @for (message of messages(); track message.id) {
9362
+ <ds-mobile-message-bubble
9363
+ [content]="message.content"
9364
+ [isOwnMessage]="message.isOwnMessage"
9365
+ [timestamp]="message.timestamp"
9366
+ [avatarInitials]="message.avatarInitials || ''"
9367
+ [avatarType]="message.avatarType || 'initials'"
9368
+ [avatarSrc]="message.avatarSrc || ''"
9369
+ [attachments]="message.attachments"
9370
+ [clickable]="true"
9371
+ (attachmentClick)="handleAttachmentClick($event)"
9372
+ (longPress)="handleMessageLongPress(message)">
9373
+ </ds-mobile-message-bubble>
9374
+ } }
9375
+ </div>
9376
+
9377
+ <!-- Bottom spacer for fixed composer -->
9378
+ <div class="composer-spacer"></div>
9359
9379
  }
9360
9380
  </div>
9361
9381
  </div>
9362
9382
  </ion-content>
9363
-
9383
+
9364
9384
  <!-- Fixed message composer -->
9365
9385
  @if (!loading && !error) {
9366
9386
  <div class="message-composer-fixed">
@@ -9375,7 +9395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
9375
9395
  </div>
9376
9396
  }
9377
9397
  `, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-sm);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}\n", ":host{display:block;position:relative;height:100%;width:100%;max-width:640px;margin:0 auto}.chat-modal-content{--background: var(--color-background-neutral-primary, #ffffff)}.chat-modal-wrapper{display:flex;flex-direction:column;min-height:100%;min-height:100dvh;background:var(--color-background-neutral-primary, #ffffff);width:100%}.chat-modal-header{position:sticky;top:0;z-index:10;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default);padding:0 16px}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px}.participant-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.participant-details{display:flex;flex-direction:column;min-width:0;flex:1}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.chat-messages-container{background:var(--color-background-neutral-secondary, #f5f5f5);display:flex;flex-direction:column;gap:16px;width:100%;max-width:640px;margin:0 auto;padding:16px 0 20px;flex:1}.messages-list{display:flex;flex-direction:column;width:100%;padding:0 20px;align-items:stretch}.messages-list ds-mobile-message-bubble{width:100%;display:flex}.messages-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin:0}.composer-spacer{height:calc(81px + env(safe-area-inset-bottom,0px))}.message-composer-fixed{position:fixed;bottom:0;left:0;right:0;z-index:1000;pointer-events:none;transform:translateY(calc(-1 * var(--keyboard-height, 0px)));transition:transform .3s ease-out;max-width:100vw}.message-composer-fixed ds-mobile-message-composer{pointer-events:auto;box-shadow:100px 150px 0 150px var(--color-background-neutral-primary, #ffffff)}.chat-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-background-neutral-secondary, #f0f0f0);border-top-color:var(--color-primary-base, #2563eb);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin-top:16px}.chat-error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:16px}.error-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a);margin:0}.error-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin:0}@supports (padding: env(safe-area-inset-bottom)){.chat-messages-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"] }]
9378
- }], ctorParameters: () => [{ type: i1.ModalController }], propDecorators: { chatData: [{
9398
+ }], ctorParameters: () => [{ type: i1.ModalController }, { type: DsMobileLightboxService }], propDecorators: { chatData: [{
9379
9399
  type: Input
9380
9400
  }], loading: [{
9381
9401
  type: Input