@propbinder/mobile-design 0.2.85 → 0.2.87

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.
@@ -17,7 +17,7 @@ import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
17
17
  import { Capacitor } from '@capacitor/core';
18
18
  import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
19
19
  import { FilePicker } from '@capawesome/capacitor-file-picker';
20
- import { Subject } from 'rxjs';
20
+ import { Subject, isObservable } from 'rxjs';
21
21
  import { createAnimation } from '@ionic/core';
22
22
  import { Share } from '@capacitor/share';
23
23
  import Swiper from 'swiper';
@@ -8509,6 +8509,10 @@ class DsMobileMessageComposerComponent {
8509
8509
  * Whether to show the attachment button
8510
8510
  */
8511
8511
  showAttachmentButton = input(false, ...(ngDevMode ? [{ debugName: "showAttachmentButton" }] : []));
8512
+ /**
8513
+ * Whether to show the AI reply button
8514
+ */
8515
+ showAiButton = input(false, ...(ngDevMode ? [{ debugName: "showAiButton" }] : []));
8512
8516
  /**
8513
8517
  * Edit indicator text (when editing)
8514
8518
  */
@@ -8667,6 +8671,10 @@ class DsMobileMessageComposerComponent {
8667
8671
  * Parent components (like chat modal) can use this to scroll to bottom
8668
8672
  */
8669
8673
  attachmentsChanged = output();
8674
+ /**
8675
+ * Emits when the AI reply button is clicked
8676
+ */
8677
+ aiClick = output();
8670
8678
  ngAfterViewInit() {
8671
8679
  // Auto-focus input if requested
8672
8680
  if (this.autoFocus()) {
@@ -9141,8 +9149,39 @@ class DsMobileMessageComposerComponent {
9141
9149
  this.messageInputRef.nativeElement.focus();
9142
9150
  }
9143
9151
  }
9152
+ /**
9153
+ * Insert text into the composer, updating internal state and textarea sizing
9154
+ */
9155
+ insertText(text) {
9156
+ if (!text)
9157
+ return;
9158
+ // Get current text and selection position
9159
+ const currentText = this.messageText() || '';
9160
+ const textarea = this.messageInputRef?.nativeElement;
9161
+ if (textarea) {
9162
+ // If we have a selection, replace it. Otherwise append.
9163
+ // Wait, standard behavior for text insertion is usually appending or replacing all.
9164
+ // Let's replace the whole content if empty, or append to it if it has content,
9165
+ // or just replace entirely if that's safer for AI generated replies.
9166
+ // Usually AI reply generates a full response, replacing the current text or appending to it.
9167
+ // Let's set it directly as the new value, or append if there's already text.
9168
+ const newText = currentText ? `${currentText}\n\n${text}` : text;
9169
+ this.messageText.set(newText);
9170
+ // Auto-resize textarea to fit new content
9171
+ setTimeout(() => {
9172
+ textarea.style.height = 'auto';
9173
+ textarea.style.height = textarea.scrollHeight + 'px';
9174
+ textarea.focus();
9175
+ // Move cursor to the end
9176
+ textarea.selectionStart = textarea.selectionEnd = newText.length;
9177
+ }, 0);
9178
+ }
9179
+ else {
9180
+ this.messageText.set(text);
9181
+ }
9182
+ }
9144
9183
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileMessageComposerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
9145
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileMessageComposerComponent, isStandalone: true, selector: "ds-mobile-message-composer", inputs: { 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, sendButtonLabel: { classPropertyName: "sendButtonLabel", publicName: "sendButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, attachmentButtonLabel: { classPropertyName: "attachmentButtonLabel", publicName: "attachmentButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, showAttachmentButton: { classPropertyName: "showAttachmentButton", publicName: "showAttachmentButton", isSignal: true, isRequired: false, transformFunction: null }, editIndicatorText: { classPropertyName: "editIndicatorText", publicName: "editIndicatorText", isSignal: true, isRequired: false, transformFunction: null }, replyIndicatorText: { classPropertyName: "replyIndicatorText", publicName: "replyIndicatorText", isSignal: true, isRequired: false, transformFunction: null }, enableMentions: { classPropertyName: "enableMentions", publicName: "enableMentions", isSignal: true, isRequired: false, transformFunction: null }, mentionUsers: { classPropertyName: "mentionUsers", publicName: "mentionUsers", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSent: "messageSent", editCancelled: "editCancelled", replyCancelled: "replyCancelled", mentionSelected: "mentionSelected", attachmentClicked: "attachmentClicked", attachmentsChanged: "attachmentsChanged" }, viewQueries: [{ propertyName: "messageInputRef", first: true, predicate: ["messageInputEl"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: `
9184
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileMessageComposerComponent, isStandalone: true, selector: "ds-mobile-message-composer", inputs: { 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, sendButtonLabel: { classPropertyName: "sendButtonLabel", publicName: "sendButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, attachmentButtonLabel: { classPropertyName: "attachmentButtonLabel", publicName: "attachmentButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, showAttachmentButton: { classPropertyName: "showAttachmentButton", publicName: "showAttachmentButton", isSignal: true, isRequired: false, transformFunction: null }, showAiButton: { classPropertyName: "showAiButton", publicName: "showAiButton", isSignal: true, isRequired: false, transformFunction: null }, editIndicatorText: { classPropertyName: "editIndicatorText", publicName: "editIndicatorText", isSignal: true, isRequired: false, transformFunction: null }, replyIndicatorText: { classPropertyName: "replyIndicatorText", publicName: "replyIndicatorText", isSignal: true, isRequired: false, transformFunction: null }, enableMentions: { classPropertyName: "enableMentions", publicName: "enableMentions", isSignal: true, isRequired: false, transformFunction: null }, mentionUsers: { classPropertyName: "mentionUsers", publicName: "mentionUsers", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSent: "messageSent", editCancelled: "editCancelled", replyCancelled: "replyCancelled", mentionSelected: "mentionSelected", attachmentClicked: "attachmentClicked", attachmentsChanged: "attachmentsChanged", aiClick: "aiClick" }, viewQueries: [{ propertyName: "messageInputRef", first: true, predicate: ["messageInputEl"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: `
9146
9185
  <div class="message-composer">
9147
9186
  <!-- Edit indicator (optional) -->
9148
9187
  @if (editingMessage()) {
@@ -9267,6 +9306,20 @@ class DsMobileMessageComposerComponent {
9267
9306
  </ds-mobile-dropdown>
9268
9307
  }
9269
9308
 
9309
+ <!-- AI button (absolute positioned in top right, hides when send button appears) -->
9310
+ @if (showAiButton()) {
9311
+ <ds-icon-button
9312
+ icon="remixSparklingFill"
9313
+ variant="secondary"
9314
+ size="sm"
9315
+ (clicked)="aiClick.emit()"
9316
+ aria-label="AI Reply"
9317
+ [class.ai-button-inline]="true"
9318
+ [class.hide]="messageText().trim().length > 0 || attachments().length > 0"
9319
+ >
9320
+ </ds-icon-button>
9321
+ }
9322
+
9270
9323
  <!-- Send button (absolute positioned in top right, always rendered) -->
9271
9324
  <ds-icon-button
9272
9325
  icon="remixCheckLine"
@@ -9292,7 +9345,7 @@ class DsMobileMessageComposerComponent {
9292
9345
  (change)="handleFileSelect($event)"
9293
9346
  />
9294
9347
  </div>
9295
- `, isInline: true, styles: [":host{display:block}.message-composer{background:var(--color-background-neutral-primary, #ffffff);border-top:1px solid var(--border-color-default);border-bottom-left-radius:0;border-bottom-right-radius:0;padding:12px 16px;width:100%;display:flex;flex-direction:column;gap:8px}.edit-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-brand-subtle, #f0edfe);border-radius:8px;animation:slideDown .2s ease-out}.edit-indicator-content{display:flex;align-items:center;gap:8px;color:var(--color-accent, #6b5ff5);flex:1;min-width:0}.edit-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:18px;color:var(--color-accent, #6b5ff5)}.cancel-edit{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-accent, #6b5ff5);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-edit:active{background:var(--color-brand-subtle, #e0dbfe)}.reply-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:8px;animation:slideDown .2s ease-out}.reply-indicator-content{display:flex;align-items:center;gap:4px;color:var(--color-text-secondary, #737373);flex:1;min-width:0}.reply-to-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-author{color:var(--color-accent, #6b5ff5);font-weight:600}.cancel-reply{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary, #737373);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-reply:active{background:var(--color-background-neutral-secondary, #f5f5f5)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.attachment-previews-section{overflow:hidden;max-height:0;opacity:0;margin-left:-16px;margin-right:-16px;padding:0;pointer-events:none;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .28s ease,padding .35s cubic-bezier(.4,0,.2,1)}.attachment-previews-section.has-attachments{max-height:160px;opacity:1;padding:0 0 8px;pointer-events:auto}ds-mobile-attachment-preview{animation:attachment-appear var(--spring-bouncy) both;max-width:200px;margin-right:8px;overflow:hidden;flex-shrink:0;transition:max-width .6s var(--spring-curve-gentle),margin-right .6s var(--spring-curve-gentle)}ds-mobile-attachment-preview.is-exiting{animation:attachment-disappear .55s ease both;max-width:0;margin-right:0;pointer-events:none}@keyframes attachment-appear{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes attachment-disappear{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.6)}}.attachment-previews{display:flex;flex-wrap:nowrap;gap:0;overflow-x:auto;padding:0 16px;scrollbar-width:none;-ms-overflow-style:none}.attachment-previews::-webkit-scrollbar{display:none}.composer-content{display:flex;align-items:center;gap:12px;width:100%;position:relative}.composer-leading-button{flex-shrink:0}.composer-leading-button::ng-deep button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;transition:transform .3s ease}.composer-leading-button--open::ng-deep button{transform:rotate(45deg)}.composer-input-wrapper{flex:1;display:flex;align-items:flex-start;gap:8px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:24px;padding:12px 16px;min-height:44px;position:relative}.mention-user-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.mention-user-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:20px;color:var(--color-text-primary, #1a1a1a)}.mention-user-role{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373)}.composer-input{flex:1;border:none;background:transparent;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:20px;color:var(--color-text-primary, #1a1a1a);outline:none;resize:none;min-height:20px;max-height:120px;overflow-y:auto;padding:0;margin:0}.composer-input::placeholder{color:var(--color-text-tertiary, #a0a0a0);font-size:var(--font-size-sm)}.send-button-inline{position:absolute;top:6px;right:6px;z-index:10;flex-shrink:0;opacity:0;transform:translate(20px) scale(.8);pointer-events:none;transition:opacity .15s ease-in,transform .15s ease-in}.send-button-inline.show{opacity:1;transform:translate(0) scale(1);pointer-events:auto;animation:slideInFromRight var(--spring-bouncy)}.send-button-inline::ng-deep button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important}@keyframes slideInFromRight{0%{opacity:0;transform:translate(20px) scale(.8)}to{opacity:1;transform:translate(0) scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileAttachmentPreviewComponent, selector: "ds-mobile-attachment-preview", inputs: ["attachment"], outputs: ["remove"] }, { kind: "component", type: DsMobileDropdownComponent, selector: "ds-mobile-dropdown", inputs: ["trigger", "keepFocusOn", "items", "isOpen", "position", "align", "maxHeight", "emptyMessage", "ariaLabel", "maxWidth"], outputs: ["itemSelected", "closed"] }, { kind: "component", type: DsMobileMediaActionsPanelComponent, selector: "ds-mobile-media-actions-panel", inputs: ["items", "isOpen"], outputs: ["itemSelected"] }] });
9348
+ `, isInline: true, styles: [":host{display:block}.message-composer{background:var(--color-background-neutral-primary, #ffffff);border-top:1px solid var(--border-color-default);border-bottom-left-radius:0;border-bottom-right-radius:0;padding:12px 16px;width:100%;display:flex;flex-direction:column;gap:8px}.edit-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-brand-subtle, #f0edfe);border-radius:8px;animation:slideDown .2s ease-out}.edit-indicator-content{display:flex;align-items:center;gap:8px;color:var(--color-accent, #6b5ff5);flex:1;min-width:0}.edit-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:18px;color:var(--color-accent, #6b5ff5)}.cancel-edit{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-accent, #6b5ff5);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-edit:active{background:var(--color-brand-subtle, #e0dbfe)}.reply-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:8px;animation:slideDown .2s ease-out}.reply-indicator-content{display:flex;align-items:center;gap:4px;color:var(--color-text-secondary, #737373);flex:1;min-width:0}.reply-to-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-author{color:var(--color-accent, #6b5ff5);font-weight:600}.cancel-reply{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary, #737373);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-reply:active{background:var(--color-background-neutral-secondary, #f5f5f5)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.attachment-previews-section{overflow:hidden;max-height:0;opacity:0;margin-left:-16px;margin-right:-16px;padding:0;pointer-events:none;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .28s ease,padding .35s cubic-bezier(.4,0,.2,1)}.attachment-previews-section.has-attachments{max-height:160px;opacity:1;padding:0 0 8px;pointer-events:auto}ds-mobile-attachment-preview{animation:attachment-appear var(--spring-bouncy) both;max-width:200px;margin-right:8px;overflow:hidden;flex-shrink:0;transition:max-width .6s var(--spring-curve-gentle),margin-right .6s var(--spring-curve-gentle)}ds-mobile-attachment-preview.is-exiting{animation:attachment-disappear .55s ease both;max-width:0;margin-right:0;pointer-events:none}@keyframes attachment-appear{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes attachment-disappear{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.6)}}.attachment-previews{display:flex;flex-wrap:nowrap;gap:0;overflow-x:auto;padding:0 16px;scrollbar-width:none;-ms-overflow-style:none}.attachment-previews::-webkit-scrollbar{display:none}.composer-content{display:flex;align-items:center;gap:12px;width:100%;position:relative}.composer-leading-button{flex-shrink:0}.composer-leading-button::ng-deep button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;transition:transform .3s ease}.composer-leading-button--open::ng-deep button{transform:rotate(45deg)}.composer-input-wrapper{flex:1;display:flex;align-items:flex-start;gap:8px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:24px;padding:12px 16px;min-height:44px;position:relative}.mention-user-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.mention-user-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:20px;color:var(--color-text-primary, #1a1a1a)}.mention-user-role{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373)}.composer-input{flex:1;border:none;background:transparent;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:20px;color:var(--color-text-primary, #1a1a1a);outline:none;resize:none;min-height:20px;max-height:120px;overflow-y:auto;padding:0;margin:0}.composer-input::placeholder{color:var(--color-text-tertiary, #a0a0a0);font-size:var(--font-size-sm)}.send-button-inline{position:absolute;top:6px;right:6px;z-index:10;flex-shrink:0;opacity:0;transform:translate(20px) scale(.8);pointer-events:none;transition:opacity .15s ease-in,transform .15s ease-in}.send-button-inline.show{opacity:1;transform:translate(0) scale(1);pointer-events:auto;animation:slideInFromRight var(--spring-bouncy)}.send-button-inline::ng-deep button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important}@keyframes slideInFromRight{0%{opacity:0;transform:translate(20px) scale(.8)}to{opacity:1;transform:translate(0) scale(1)}}.ai-button-inline{position:absolute;top:6px;right:6px;z-index:9;flex-shrink:0;transition:opacity .15s ease-in,transform .15s ease-in}.ai-button-inline::ng-deep button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important;color:var(--color-primary-base, #6b5ff5)!important;background-color:var(--color-background-brand-subtle, #f0edfe)!important}.ai-button-inline.hide{opacity:0;transform:scale(.8);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileAttachmentPreviewComponent, selector: "ds-mobile-attachment-preview", inputs: ["attachment"], outputs: ["remove"] }, { kind: "component", type: DsMobileDropdownComponent, selector: "ds-mobile-dropdown", inputs: ["trigger", "keepFocusOn", "items", "isOpen", "position", "align", "maxHeight", "emptyMessage", "ariaLabel", "maxWidth"], outputs: ["itemSelected", "closed"] }, { kind: "component", type: DsMobileMediaActionsPanelComponent, selector: "ds-mobile-media-actions-panel", inputs: ["items", "isOpen"], outputs: ["itemSelected"] }] });
9296
9349
  }
9297
9350
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileMessageComposerComponent, decorators: [{
9298
9351
  type: Component,
@@ -9421,6 +9474,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
9421
9474
  </ds-mobile-dropdown>
9422
9475
  }
9423
9476
 
9477
+ <!-- AI button (absolute positioned in top right, hides when send button appears) -->
9478
+ @if (showAiButton()) {
9479
+ <ds-icon-button
9480
+ icon="remixSparklingFill"
9481
+ variant="secondary"
9482
+ size="sm"
9483
+ (clicked)="aiClick.emit()"
9484
+ aria-label="AI Reply"
9485
+ [class.ai-button-inline]="true"
9486
+ [class.hide]="messageText().trim().length > 0 || attachments().length > 0"
9487
+ >
9488
+ </ds-icon-button>
9489
+ }
9490
+
9424
9491
  <!-- Send button (absolute positioned in top right, always rendered) -->
9425
9492
  <ds-icon-button
9426
9493
  icon="remixCheckLine"
@@ -9446,14 +9513,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
9446
9513
  (change)="handleFileSelect($event)"
9447
9514
  />
9448
9515
  </div>
9449
- `, styles: [":host{display:block}.message-composer{background:var(--color-background-neutral-primary, #ffffff);border-top:1px solid var(--border-color-default);border-bottom-left-radius:0;border-bottom-right-radius:0;padding:12px 16px;width:100%;display:flex;flex-direction:column;gap:8px}.edit-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-brand-subtle, #f0edfe);border-radius:8px;animation:slideDown .2s ease-out}.edit-indicator-content{display:flex;align-items:center;gap:8px;color:var(--color-accent, #6b5ff5);flex:1;min-width:0}.edit-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:18px;color:var(--color-accent, #6b5ff5)}.cancel-edit{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-accent, #6b5ff5);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-edit:active{background:var(--color-brand-subtle, #e0dbfe)}.reply-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:8px;animation:slideDown .2s ease-out}.reply-indicator-content{display:flex;align-items:center;gap:4px;color:var(--color-text-secondary, #737373);flex:1;min-width:0}.reply-to-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-author{color:var(--color-accent, #6b5ff5);font-weight:600}.cancel-reply{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary, #737373);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-reply:active{background:var(--color-background-neutral-secondary, #f5f5f5)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.attachment-previews-section{overflow:hidden;max-height:0;opacity:0;margin-left:-16px;margin-right:-16px;padding:0;pointer-events:none;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .28s ease,padding .35s cubic-bezier(.4,0,.2,1)}.attachment-previews-section.has-attachments{max-height:160px;opacity:1;padding:0 0 8px;pointer-events:auto}ds-mobile-attachment-preview{animation:attachment-appear var(--spring-bouncy) both;max-width:200px;margin-right:8px;overflow:hidden;flex-shrink:0;transition:max-width .6s var(--spring-curve-gentle),margin-right .6s var(--spring-curve-gentle)}ds-mobile-attachment-preview.is-exiting{animation:attachment-disappear .55s ease both;max-width:0;margin-right:0;pointer-events:none}@keyframes attachment-appear{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes attachment-disappear{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.6)}}.attachment-previews{display:flex;flex-wrap:nowrap;gap:0;overflow-x:auto;padding:0 16px;scrollbar-width:none;-ms-overflow-style:none}.attachment-previews::-webkit-scrollbar{display:none}.composer-content{display:flex;align-items:center;gap:12px;width:100%;position:relative}.composer-leading-button{flex-shrink:0}.composer-leading-button::ng-deep button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;transition:transform .3s ease}.composer-leading-button--open::ng-deep button{transform:rotate(45deg)}.composer-input-wrapper{flex:1;display:flex;align-items:flex-start;gap:8px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:24px;padding:12px 16px;min-height:44px;position:relative}.mention-user-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.mention-user-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:20px;color:var(--color-text-primary, #1a1a1a)}.mention-user-role{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373)}.composer-input{flex:1;border:none;background:transparent;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:20px;color:var(--color-text-primary, #1a1a1a);outline:none;resize:none;min-height:20px;max-height:120px;overflow-y:auto;padding:0;margin:0}.composer-input::placeholder{color:var(--color-text-tertiary, #a0a0a0);font-size:var(--font-size-sm)}.send-button-inline{position:absolute;top:6px;right:6px;z-index:10;flex-shrink:0;opacity:0;transform:translate(20px) scale(.8);pointer-events:none;transition:opacity .15s ease-in,transform .15s ease-in}.send-button-inline.show{opacity:1;transform:translate(0) scale(1);pointer-events:auto;animation:slideInFromRight var(--spring-bouncy)}.send-button-inline::ng-deep button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important}@keyframes slideInFromRight{0%{opacity:0;transform:translate(20px) scale(.8)}to{opacity:1;transform:translate(0) scale(1)}}\n"] }]
9450
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { 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 }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], sendButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonLabel", required: false }] }], attachmentButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachmentButtonLabel", required: false }] }], showAttachmentButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAttachmentButton", required: false }] }], editIndicatorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "editIndicatorText", required: false }] }], replyIndicatorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "replyIndicatorText", required: false }] }], enableMentions: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMentions", required: false }] }], mentionUsers: [{ type: i0.Input, args: [{ isSignal: true, alias: "mentionUsers", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], messageInputRef: [{
9516
+ `, styles: [":host{display:block}.message-composer{background:var(--color-background-neutral-primary, #ffffff);border-top:1px solid var(--border-color-default);border-bottom-left-radius:0;border-bottom-right-radius:0;padding:12px 16px;width:100%;display:flex;flex-direction:column;gap:8px}.edit-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-brand-subtle, #f0edfe);border-radius:8px;animation:slideDown .2s ease-out}.edit-indicator-content{display:flex;align-items:center;gap:8px;color:var(--color-accent, #6b5ff5);flex:1;min-width:0}.edit-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:18px;color:var(--color-accent, #6b5ff5)}.cancel-edit{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-accent, #6b5ff5);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-edit:active{background:var(--color-brand-subtle, #e0dbfe)}.reply-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:8px;animation:slideDown .2s ease-out}.reply-indicator-content{display:flex;align-items:center;gap:4px;color:var(--color-text-secondary, #737373);flex:1;min-width:0}.reply-to-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-author{color:var(--color-accent, #6b5ff5);font-weight:600}.cancel-reply{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary, #737373);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-reply:active{background:var(--color-background-neutral-secondary, #f5f5f5)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.attachment-previews-section{overflow:hidden;max-height:0;opacity:0;margin-left:-16px;margin-right:-16px;padding:0;pointer-events:none;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .28s ease,padding .35s cubic-bezier(.4,0,.2,1)}.attachment-previews-section.has-attachments{max-height:160px;opacity:1;padding:0 0 8px;pointer-events:auto}ds-mobile-attachment-preview{animation:attachment-appear var(--spring-bouncy) both;max-width:200px;margin-right:8px;overflow:hidden;flex-shrink:0;transition:max-width .6s var(--spring-curve-gentle),margin-right .6s var(--spring-curve-gentle)}ds-mobile-attachment-preview.is-exiting{animation:attachment-disappear .55s ease both;max-width:0;margin-right:0;pointer-events:none}@keyframes attachment-appear{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes attachment-disappear{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.6)}}.attachment-previews{display:flex;flex-wrap:nowrap;gap:0;overflow-x:auto;padding:0 16px;scrollbar-width:none;-ms-overflow-style:none}.attachment-previews::-webkit-scrollbar{display:none}.composer-content{display:flex;align-items:center;gap:12px;width:100%;position:relative}.composer-leading-button{flex-shrink:0}.composer-leading-button::ng-deep button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;transition:transform .3s ease}.composer-leading-button--open::ng-deep button{transform:rotate(45deg)}.composer-input-wrapper{flex:1;display:flex;align-items:flex-start;gap:8px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:24px;padding:12px 16px;min-height:44px;position:relative}.mention-user-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.mention-user-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:20px;color:var(--color-text-primary, #1a1a1a)}.mention-user-role{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373)}.composer-input{flex:1;border:none;background:transparent;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:20px;color:var(--color-text-primary, #1a1a1a);outline:none;resize:none;min-height:20px;max-height:120px;overflow-y:auto;padding:0;margin:0}.composer-input::placeholder{color:var(--color-text-tertiary, #a0a0a0);font-size:var(--font-size-sm)}.send-button-inline{position:absolute;top:6px;right:6px;z-index:10;flex-shrink:0;opacity:0;transform:translate(20px) scale(.8);pointer-events:none;transition:opacity .15s ease-in,transform .15s ease-in}.send-button-inline.show{opacity:1;transform:translate(0) scale(1);pointer-events:auto;animation:slideInFromRight var(--spring-bouncy)}.send-button-inline::ng-deep button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important}@keyframes slideInFromRight{0%{opacity:0;transform:translate(20px) scale(.8)}to{opacity:1;transform:translate(0) scale(1)}}.ai-button-inline{position:absolute;top:6px;right:6px;z-index:9;flex-shrink:0;transition:opacity .15s ease-in,transform .15s ease-in}.ai-button-inline::ng-deep button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important;color:var(--color-primary-base, #6b5ff5)!important;background-color:var(--color-background-brand-subtle, #f0edfe)!important}.ai-button-inline.hide{opacity:0;transform:scale(.8);pointer-events:none}\n"] }]
9517
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { 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 }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], sendButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sendButtonLabel", required: false }] }], attachmentButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachmentButtonLabel", required: false }] }], showAttachmentButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAttachmentButton", required: false }] }], showAiButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAiButton", required: false }] }], editIndicatorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "editIndicatorText", required: false }] }], replyIndicatorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "replyIndicatorText", required: false }] }], enableMentions: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMentions", required: false }] }], mentionUsers: [{ type: i0.Input, args: [{ isSignal: true, alias: "mentionUsers", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], messageInputRef: [{
9451
9518
  type: ViewChild,
9452
9519
  args: ['messageInputEl']
9453
9520
  }], fileInput: [{
9454
9521
  type: ViewChild,
9455
9522
  args: ['fileInput']
9456
- }], messageSent: [{ type: i0.Output, args: ["messageSent"] }], editCancelled: [{ type: i0.Output, args: ["editCancelled"] }], replyCancelled: [{ type: i0.Output, args: ["replyCancelled"] }], mentionSelected: [{ type: i0.Output, args: ["mentionSelected"] }], attachmentClicked: [{ type: i0.Output, args: ["attachmentClicked"] }], attachmentsChanged: [{ type: i0.Output, args: ["attachmentsChanged"] }] } });
9523
+ }], messageSent: [{ type: i0.Output, args: ["messageSent"] }], editCancelled: [{ type: i0.Output, args: ["editCancelled"] }], replyCancelled: [{ type: i0.Output, args: ["replyCancelled"] }], mentionSelected: [{ type: i0.Output, args: ["mentionSelected"] }], attachmentClicked: [{ type: i0.Output, args: ["attachmentClicked"] }], attachmentsChanged: [{ type: i0.Output, args: ["attachmentsChanged"] }], aiClick: [{ type: i0.Output, args: ["aiClick"] }] } });
9457
9524
 
9458
9525
  /**
9459
9526
  * DsMobileMessageBubbleComponent
@@ -14515,7 +14582,7 @@ class DsMobileLightboxImageComponent {
14515
14582
  />
14516
14583
  </div>
14517
14584
  </div>
14518
- `, isInline: true, 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-base);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}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important;padding:0!important}:host ::ng-deep ds-textarea.ghost-input-clean .textarea-container{padding:0!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}:host{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10000}.lightbox-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000fa;z-index:10000;display:flex;flex-direction:column;touch-action:none;animation:fadeIn .2s ease-out}.lightbox-overlay.zoomed{overflow:hidden}.lightbox-content{display:block;height:100vh;width:100vw;position:absolute;inset:0}.lightbox-content::part(scroll){display:flex;flex-direction:column;height:100%;overflow:hidden}.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%}.lightbox-content.zoomed{overflow:hidden}.lightbox-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 16px;background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 80%,transparent 100%);pointer-events:none}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-name{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.close-button,.share-button{pointer-events:auto;flex-shrink:0;border-radius:50%}.close-button::ng-deep button,.share-button::ng-deep button{color:#fff!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:50%!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;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}.close-button::ng-deep button:hover,.share-button::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.close-button::ng-deep button:active,.share-button::ng-deep button:active{background:#fff3!important;transform:scale(.98)}.close-button::ng-deep svg,.share-button::ng-deep svg{color:#fff!important;fill:#fff!important}.swiper-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}.swiper-wrapper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lightbox-image{max-width:min(640px,100%);max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out;transform-origin:center center}.lightbox-overlay.zoomed .swiper-container{touch-action:none}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.loading-spinner ion-spinner{--color: rgba(255, 255, 255, .8);width:48px;height:48px}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;color:#fffc;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:500;padding:20px;background:#00000080;border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-bottom-section{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px 12px;pointer-events:none}.nav-button,.counter{pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;padding:0;margin:0;outline:none}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px}.counter{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;padding:10px 16px;background:#00000080;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-bottom-section{padding-bottom:env(safe-area-inset-bottom)}}.lightbox-footer{display:flex;padding:12px 20px 20px;pointer-events:none}.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}.action-buttons-left{display:flex;align-items:center;gap:16px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-with-count::ng-deep button,.action-button-share::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover,.action-button-with-count::ng-deep button:hover,.action-button-share::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active,.action-button-with-count::ng-deep button:active,.action-button-share::ng-deep button:active{transform:scale(.98)}.action-button-like::ng-deep button svg,.action-button-comment::ng-deep button svg,.action-button-with-count::ng-deep button svg,.action-button-share::ng-deep button svg,.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon,.action-button-like::ng-deep button .btn__content,.action-button-comment::ng-deep button .btn__content,.action-button-with-count::ng-deep button .btn__content{color:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg,.action-button-with-count::ng-deep button .btn__icon svg,.action-button-share::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.action-button-like[data-liked=true]::ng-deep button svg{fill:#f91880!important;color:#f91880!important}.action-button-like[data-liked=true]::ng-deep button{border-color:#f918804d!important}.action-button-like,.action-button-comment,.action-button-share{flex-shrink:0;border-radius:50%}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-share::ng-deep button{border-radius:50%!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}@media (min-width: 768px){.lightbox-header{padding:24px}.close-button{width:48px;height:48px}.lightbox-controls{padding:20px 24px 16px}.nav-button{width:48px;height:48px}.counter{font-size:var(--font-size-base);padding:12px 20px}.lightbox-footer{padding:16px 24px 24px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{height:48px;padding:0 20px}.action-button-share::ng-deep button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.image-wrapper,.nav-button,.lightbox-caption{transition:none}}.nav-button:focus-visible{outline:2px solid white;outline-offset:2px}\n"], dependencies: [{ kind: "component", type: DsMobileGlassSpinnerComponent, selector: "ds-mobile-glass-spinner", inputs: ["spinnerSize", "borderRadius"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileLightboxHeaderComponent, selector: "ds-mobile-lightbox-header", inputs: ["author", "showDownload"], outputs: ["closeClick", "shareClick", "downloadClick"] }, { kind: "component", type: DsMobileLightboxFooterComponent, selector: "ds-mobile-lightbox-footer", inputs: ["showNavigation", "currentIndex", "totalImages", "showActions", "isLiked", "likeCount", "commentCount"], outputs: ["prevClick", "nextClick", "likeClick", "commentClick"] }] });
14585
+ `, isInline: true, 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-base);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}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important;padding:0!important}:host ::ng-deep ds-textarea.ghost-input-clean .textarea-container{padding:0!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}:host{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10000}.lightbox-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000fa;z-index:10000;display:flex;flex-direction:column;touch-action:none;animation:fadeIn .2s ease-out}.lightbox-overlay.zoomed{overflow:hidden}.lightbox-content{display:block;height:100vh;width:100vw;position:absolute;inset:0}.lightbox-content::part(scroll){display:flex;flex-direction:column;height:100%;overflow:hidden}.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%}.lightbox-content.zoomed{overflow:hidden}.lightbox-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 16px;background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 80%,transparent 100%);pointer-events:none}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-name{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.close-button,.share-button{pointer-events:auto;flex-shrink:0;border-radius:50%}.close-button::ng-deep button,.share-button::ng-deep button{color:#fff!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:50%!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;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}.close-button::ng-deep button:hover,.share-button::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.close-button::ng-deep button:active,.share-button::ng-deep button:active{background:#fff3!important;transform:scale(.98)}.close-button::ng-deep svg,.share-button::ng-deep svg{color:#fff!important;fill:#fff!important}.swiper-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}.swiper-wrapper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lightbox-image{max-width:min(640px,100%);max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out;transform-origin:center center}.lightbox-overlay.zoomed .swiper-container{touch-action:none}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.loading-spinner ion-spinner{--color: rgba(255, 255, 255, .8);width:48px;height:48px}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;color:#fffc;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:500;padding:20px;background:#00000080;border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-bottom-section{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px 12px;pointer-events:none}.nav-button,.counter{pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;padding:0;margin:0;outline:none}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px}.counter{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;padding:10px 16px;background:#00000080;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-bottom-section{padding-bottom:env(safe-area-inset-bottom)}}.lightbox-footer{display:flex;padding:12px 20px 20px;pointer-events:none}.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}.action-buttons-left{display:flex;align-items:center;gap:16px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-with-count::ng-deep button,.action-button-share::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover,.action-button-with-count::ng-deep button:hover,.action-button-share::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active,.action-button-with-count::ng-deep button:active,.action-button-share::ng-deep button:active{transform:scale(.98)}.action-button-like::ng-deep button svg,.action-button-comment::ng-deep button svg,.action-button-with-count::ng-deep button svg,.action-button-share::ng-deep button svg,.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon,.action-button-like::ng-deep button .btn__content,.action-button-comment::ng-deep button .btn__content,.action-button-with-count::ng-deep button .btn__content{color:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg,.action-button-with-count::ng-deep button .btn__icon svg,.action-button-share::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.action-button-like[data-liked=true]::ng-deep button svg{fill:#f91880!important;color:#f91880!important}.action-button-like[data-liked=true]::ng-deep button{border-color:#f918804d!important}.action-button-like,.action-button-comment,.action-button-share{flex-shrink:0;border-radius:50%}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-share::ng-deep button{border-radius:50%!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}@media (min-width: 768px){.lightbox-header{padding:24px}.close-button{width:48px;height:48px}.lightbox-controls{padding:20px 24px 16px}.nav-button{width:48px;height:48px}.counter{font-size:var(--font-size-base);padding:12px 20px}.lightbox-footer{padding:16px 24px 24px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{height:48px;padding:0 20px}.action-button-share::ng-deep button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.image-wrapper,.nav-button,.lightbox-caption{transition:none}}.nav-button:focus-visible{outline:2px solid white;outline-offset:2px}.lightbox-description-container{position:absolute;bottom:85px;left:16px;right:16px;max-height:30vh;overflow-y:auto;background:#fff;border-radius:16px;padding:16px;color:#111827;z-index:90;opacity:0;visibility:hidden;transition:all .3s ease;transform:translateY(10px);pointer-events:auto;box-shadow:0 4px 24px #00000040}.lightbox-description-container.show{opacity:1;visibility:visible;transform:translateY(0)}.description-loader{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0}.description-loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#6b7280}.description-error{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:12px 0}.description-error span{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#111827}.description-error .retry-button{background:var(--color-accent, #6B5FF5);border:none;color:#fff;border-radius:20px;padding:6px 16px;font-size:var(--font-size-xs);cursor:pointer;font-family:Brockmann,sans-serif;transition:background .2s}.description-error .retry-button:active{background:var(--color-accent-dark, #5A4EE3)}.ai-description-header{display:flex;align-items:center;gap:6px;margin-bottom:8px;color:var(--color-accent, #6B5FF5);font-family:Brockmann,sans-serif;font-weight:600;font-size:var(--font-size-sm)}.ai-description-header ds-icon::ng-deep svg{fill:var(--color-accent, #6B5FF5);color:var(--color-accent, #6B5FF5)}.description-content p{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:1.5;color:#111827;white-space:pre-wrap;margin:0}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-description-container{bottom:calc(85px + env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "component", type: DsMobileGlassSpinnerComponent, selector: "ds-mobile-glass-spinner", inputs: ["spinnerSize", "borderRadius"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileLightboxHeaderComponent, selector: "ds-mobile-lightbox-header", inputs: ["author", "showDownload"], outputs: ["closeClick", "shareClick", "downloadClick"] }, { kind: "component", type: DsMobileLightboxFooterComponent, selector: "ds-mobile-lightbox-footer", inputs: ["showNavigation", "currentIndex", "totalImages", "showActions", "isLiked", "likeCount", "commentCount"], outputs: ["prevClick", "nextClick", "likeClick", "commentClick"] }] });
14519
14586
  }
14520
14587
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxImageComponent, decorators: [{
14521
14588
  type: Component,
@@ -14579,12 +14646,584 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
14579
14646
  />
14580
14647
  </div>
14581
14648
  </div>
14582
- `, 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-base);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}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important;padding:0!important}:host ::ng-deep ds-textarea.ghost-input-clean .textarea-container{padding:0!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}:host{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10000}.lightbox-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000fa;z-index:10000;display:flex;flex-direction:column;touch-action:none;animation:fadeIn .2s ease-out}.lightbox-overlay.zoomed{overflow:hidden}.lightbox-content{display:block;height:100vh;width:100vw;position:absolute;inset:0}.lightbox-content::part(scroll){display:flex;flex-direction:column;height:100%;overflow:hidden}.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%}.lightbox-content.zoomed{overflow:hidden}.lightbox-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 16px;background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 80%,transparent 100%);pointer-events:none}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-name{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.close-button,.share-button{pointer-events:auto;flex-shrink:0;border-radius:50%}.close-button::ng-deep button,.share-button::ng-deep button{color:#fff!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:50%!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;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}.close-button::ng-deep button:hover,.share-button::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.close-button::ng-deep button:active,.share-button::ng-deep button:active{background:#fff3!important;transform:scale(.98)}.close-button::ng-deep svg,.share-button::ng-deep svg{color:#fff!important;fill:#fff!important}.swiper-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}.swiper-wrapper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lightbox-image{max-width:min(640px,100%);max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out;transform-origin:center center}.lightbox-overlay.zoomed .swiper-container{touch-action:none}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.loading-spinner ion-spinner{--color: rgba(255, 255, 255, .8);width:48px;height:48px}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;color:#fffc;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:500;padding:20px;background:#00000080;border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-bottom-section{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px 12px;pointer-events:none}.nav-button,.counter{pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;padding:0;margin:0;outline:none}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px}.counter{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;padding:10px 16px;background:#00000080;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-bottom-section{padding-bottom:env(safe-area-inset-bottom)}}.lightbox-footer{display:flex;padding:12px 20px 20px;pointer-events:none}.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}.action-buttons-left{display:flex;align-items:center;gap:16px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-with-count::ng-deep button,.action-button-share::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover,.action-button-with-count::ng-deep button:hover,.action-button-share::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active,.action-button-with-count::ng-deep button:active,.action-button-share::ng-deep button:active{transform:scale(.98)}.action-button-like::ng-deep button svg,.action-button-comment::ng-deep button svg,.action-button-with-count::ng-deep button svg,.action-button-share::ng-deep button svg,.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon,.action-button-like::ng-deep button .btn__content,.action-button-comment::ng-deep button .btn__content,.action-button-with-count::ng-deep button .btn__content{color:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg,.action-button-with-count::ng-deep button .btn__icon svg,.action-button-share::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.action-button-like[data-liked=true]::ng-deep button svg{fill:#f91880!important;color:#f91880!important}.action-button-like[data-liked=true]::ng-deep button{border-color:#f918804d!important}.action-button-like,.action-button-comment,.action-button-share{flex-shrink:0;border-radius:50%}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-share::ng-deep button{border-radius:50%!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}@media (min-width: 768px){.lightbox-header{padding:24px}.close-button{width:48px;height:48px}.lightbox-controls{padding:20px 24px 16px}.nav-button{width:48px;height:48px}.counter{font-size:var(--font-size-base);padding:12px 20px}.lightbox-footer{padding:16px 24px 24px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{height:48px;padding:0 20px}.action-button-share::ng-deep button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.image-wrapper,.nav-button,.lightbox-caption{transition:none}}.nav-button:focus-visible{outline:2px solid white;outline-offset:2px}\n"] }]
14649
+ `, 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-base);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}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important;padding:0!important}:host ::ng-deep ds-textarea.ghost-input-clean .textarea-container{padding:0!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}:host{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10000}.lightbox-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000fa;z-index:10000;display:flex;flex-direction:column;touch-action:none;animation:fadeIn .2s ease-out}.lightbox-overlay.zoomed{overflow:hidden}.lightbox-content{display:block;height:100vh;width:100vw;position:absolute;inset:0}.lightbox-content::part(scroll){display:flex;flex-direction:column;height:100%;overflow:hidden}.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%}.lightbox-content.zoomed{overflow:hidden}.lightbox-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 16px;background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 80%,transparent 100%);pointer-events:none}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-name{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.close-button,.share-button{pointer-events:auto;flex-shrink:0;border-radius:50%}.close-button::ng-deep button,.share-button::ng-deep button{color:#fff!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:50%!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;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}.close-button::ng-deep button:hover,.share-button::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.close-button::ng-deep button:active,.share-button::ng-deep button:active{background:#fff3!important;transform:scale(.98)}.close-button::ng-deep svg,.share-button::ng-deep svg{color:#fff!important;fill:#fff!important}.swiper-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}.swiper-wrapper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lightbox-image{max-width:min(640px,100%);max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out;transform-origin:center center}.lightbox-overlay.zoomed .swiper-container{touch-action:none}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.loading-spinner ion-spinner{--color: rgba(255, 255, 255, .8);width:48px;height:48px}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;color:#fffc;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:500;padding:20px;background:#00000080;border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-bottom-section{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px 12px;pointer-events:none}.nav-button,.counter{pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;padding:0;margin:0;outline:none}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px}.counter{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;padding:10px 16px;background:#00000080;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-bottom-section{padding-bottom:env(safe-area-inset-bottom)}}.lightbox-footer{display:flex;padding:12px 20px 20px;pointer-events:none}.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}.action-buttons-left{display:flex;align-items:center;gap:16px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-with-count::ng-deep button,.action-button-share::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover,.action-button-with-count::ng-deep button:hover,.action-button-share::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active,.action-button-with-count::ng-deep button:active,.action-button-share::ng-deep button:active{transform:scale(.98)}.action-button-like::ng-deep button svg,.action-button-comment::ng-deep button svg,.action-button-with-count::ng-deep button svg,.action-button-share::ng-deep button svg,.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon,.action-button-like::ng-deep button .btn__content,.action-button-comment::ng-deep button .btn__content,.action-button-with-count::ng-deep button .btn__content{color:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg,.action-button-with-count::ng-deep button .btn__icon svg,.action-button-share::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.action-button-like[data-liked=true]::ng-deep button svg{fill:#f91880!important;color:#f91880!important}.action-button-like[data-liked=true]::ng-deep button{border-color:#f918804d!important}.action-button-like,.action-button-comment,.action-button-share{flex-shrink:0;border-radius:50%}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-share::ng-deep button{border-radius:50%!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}@media (min-width: 768px){.lightbox-header{padding:24px}.close-button{width:48px;height:48px}.lightbox-controls{padding:20px 24px 16px}.nav-button{width:48px;height:48px}.counter{font-size:var(--font-size-base);padding:12px 20px}.lightbox-footer{padding:16px 24px 24px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{height:48px;padding:0 20px}.action-button-share::ng-deep button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.image-wrapper,.nav-button,.lightbox-caption{transition:none}}.nav-button:focus-visible{outline:2px solid white;outline-offset:2px}.lightbox-description-container{position:absolute;bottom:85px;left:16px;right:16px;max-height:30vh;overflow-y:auto;background:#fff;border-radius:16px;padding:16px;color:#111827;z-index:90;opacity:0;visibility:hidden;transition:all .3s ease;transform:translateY(10px);pointer-events:auto;box-shadow:0 4px 24px #00000040}.lightbox-description-container.show{opacity:1;visibility:visible;transform:translateY(0)}.description-loader{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0}.description-loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#6b7280}.description-error{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:12px 0}.description-error span{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#111827}.description-error .retry-button{background:var(--color-accent, #6B5FF5);border:none;color:#fff;border-radius:20px;padding:6px 16px;font-size:var(--font-size-xs);cursor:pointer;font-family:Brockmann,sans-serif;transition:background .2s}.description-error .retry-button:active{background:var(--color-accent-dark, #5A4EE3)}.ai-description-header{display:flex;align-items:center;gap:6px;margin-bottom:8px;color:var(--color-accent, #6B5FF5);font-family:Brockmann,sans-serif;font-weight:600;font-size:var(--font-size-sm)}.ai-description-header ds-icon::ng-deep svg{fill:var(--color-accent, #6B5FF5);color:var(--color-accent, #6B5FF5)}.description-content p{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:1.5;color:#111827;white-space:pre-wrap;margin:0}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-description-container{bottom:calc(85px + env(safe-area-inset-bottom))}}\n"] }]
14583
14650
  }], ctorParameters: () => [{ type: i1.GestureController }], propDecorators: { swiperContainer: [{
14584
14651
  type: ViewChild,
14585
14652
  args: ['swiperContainer', { read: ElementRef }]
14586
14653
  }] } });
14587
14654
 
14655
+ /**
14656
+ * DsMobileLightboxImageWithDescriptionComponent
14657
+ *
14658
+ * Full-screen image lightbox component with Swiper.js navigation, pinch-zoom, and AI descriptions.
14659
+ */
14660
+ class DsMobileLightboxImageWithDescriptionComponent {
14661
+ gestureCtrl;
14662
+ images = [];
14663
+ author;
14664
+ initialIndex = 0;
14665
+ enableZoom = true;
14666
+ showControls = true;
14667
+ enableSwipe = true;
14668
+ showInfo = true;
14669
+ showActions = false;
14670
+ showDownload = false;
14671
+ onDownload;
14672
+ animation = 'fade';
14673
+ onCloseRequested;
14674
+ swiperContainer;
14675
+ currentIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentIndex" }] : []));
14676
+ isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
14677
+ isZoomed = signal(false, ...(ngDevMode ? [{ debugName: "isZoomed" }] : []));
14678
+ isSwiping = signal(false, ...(ngDevMode ? [{ debugName: "isSwiping" }] : []));
14679
+ isLiked = signal(false, ...(ngDevMode ? [{ debugName: "isLiked" }] : []));
14680
+ likeCount = signal(0, ...(ngDevMode ? [{ debugName: "likeCount" }] : []));
14681
+ commentCount = signal(0, ...(ngDevMode ? [{ debugName: "commentCount" }] : []));
14682
+ descriptionText = signal(null, ...(ngDevMode ? [{ debugName: "descriptionText" }] : []));
14683
+ descriptionError = signal(false, ...(ngDevMode ? [{ debugName: "descriptionError" }] : []));
14684
+ hasError = signal(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
14685
+ descriptionSubscription;
14686
+ // Computed
14687
+ currentImage = computed(() => this.images[this.currentIndex()], ...(ngDevMode ? [{ debugName: "currentImage" }] : []));
14688
+ swiper;
14689
+ zoomData = new Map();
14690
+ constructor(gestureCtrl) {
14691
+ this.gestureCtrl = gestureCtrl;
14692
+ }
14693
+ ngOnInit() {
14694
+ // Set initial index from the passed property
14695
+ if (this.initialIndex !== undefined) {
14696
+ this.currentIndex.set(this.initialIndex);
14697
+ }
14698
+ // Initialize action states from current image
14699
+ const currentImg = this.images[this.currentIndex()];
14700
+ if (currentImg) {
14701
+ this.isLiked.set(currentImg.isLiked ?? false);
14702
+ this.likeCount.set(currentImg.likeCount ?? 0);
14703
+ this.commentCount.set(currentImg.commentCount ?? 0);
14704
+ }
14705
+ // Load description for initial image
14706
+ this.loadDescription(this.currentIndex());
14707
+ }
14708
+ ngAfterViewInit() {
14709
+ setTimeout(() => {
14710
+ this.initializeSwiper();
14711
+ this.initializeZoomGestures();
14712
+ }, 100);
14713
+ }
14714
+ ngOnDestroy() {
14715
+ // Clean up Swiper
14716
+ if (this.swiper) {
14717
+ this.swiper.destroy();
14718
+ this.swiper = undefined;
14719
+ }
14720
+ }
14721
+ /**
14722
+ * Initialize Swiper for image navigation
14723
+ */
14724
+ initializeSwiper() {
14725
+ if (!this.swiperContainer) {
14726
+ console.error('[Lightbox] Swiper container not found');
14727
+ return;
14728
+ }
14729
+ const swiperOptions = {
14730
+ initialSlide: this.initialIndex,
14731
+ speed: 300,
14732
+ resistance: true,
14733
+ resistanceRatio: 0.85,
14734
+ slidesPerView: 1,
14735
+ spaceBetween: 0,
14736
+ touchRatio: 1,
14737
+ longSwipesRatio: 0.5,
14738
+ threshold: 10,
14739
+ on: {
14740
+ slideChange: (swiper) => {
14741
+ this.currentIndex.set(swiper.activeIndex);
14742
+ this.updateActionStates();
14743
+ this.loadDescription(swiper.activeIndex);
14744
+ // Check if the image is already loaded
14745
+ const currentSlide = swiper.slides[swiper.activeIndex];
14746
+ const img = currentSlide?.querySelector('img');
14747
+ if (img && img.complete && img.naturalHeight !== 0) {
14748
+ // Image is already loaded
14749
+ this.isLoading.set(false);
14750
+ }
14751
+ },
14752
+ slideChangeTransitionStart: () => {
14753
+ // Don't show loading spinner if image is already loaded
14754
+ const currentSlide = this.swiper?.slides[this.swiper.activeIndex];
14755
+ const img = currentSlide?.querySelector('img');
14756
+ if (!img || !img.complete || img.naturalHeight === 0) {
14757
+ this.isLoading.set(true);
14758
+ }
14759
+ }
14760
+ }
14761
+ };
14762
+ this.swiper = new Swiper(this.swiperContainer.nativeElement, swiperOptions);
14763
+ // Check if the initial image is already loaded
14764
+ setTimeout(() => {
14765
+ const currentSlide = this.swiper?.slides[this.currentIndex()];
14766
+ const img = currentSlide?.querySelector('img');
14767
+ if (img && img.complete && img.naturalHeight !== 0) {
14768
+ this.isLoading.set(false);
14769
+ }
14770
+ }, 0);
14771
+ }
14772
+ /**
14773
+ * Initialize pinch-zoom gestures for all slides
14774
+ */
14775
+ initializeZoomGestures() {
14776
+ if (!this.enableZoom)
14777
+ return;
14778
+ const slides = this.swiperContainer.nativeElement.querySelectorAll('.image-zoom-container');
14779
+ slides.forEach((slide, index) => {
14780
+ this.initializeZoomForSlide(slide, index);
14781
+ });
14782
+ }
14783
+ /**
14784
+ * Initialize zoom gestures for a specific slide
14785
+ */
14786
+ initializeZoomForSlide(container, index) {
14787
+ let initialDistance = 0;
14788
+ let initialScale = 1;
14789
+ let currentScale = 1;
14790
+ let lastTap = 0;
14791
+ // Double-tap to zoom
14792
+ container.addEventListener('click', (event) => {
14793
+ const now = Date.now();
14794
+ const timeSinceLastTap = now - lastTap;
14795
+ if (timeSinceLastTap < 300 && timeSinceLastTap > 0) {
14796
+ event.preventDefault();
14797
+ this.toggleZoom(container, index);
14798
+ }
14799
+ lastTap = now;
14800
+ });
14801
+ // Pinch to zoom
14802
+ const getTouchDistance = (touches) => {
14803
+ const dx = touches[0].clientX - touches[1].clientX;
14804
+ const dy = touches[0].clientY - touches[1].clientY;
14805
+ return Math.sqrt(dx * dx + dy * dy);
14806
+ };
14807
+ container.addEventListener('touchstart', (event) => {
14808
+ if (event.touches.length === 2) {
14809
+ event.preventDefault();
14810
+ initialDistance = getTouchDistance(event.touches);
14811
+ const zoomData = this.zoomData.get(index) || { scale: 1, x: 0, y: 0 };
14812
+ initialScale = zoomData.scale;
14813
+ // Disable Swiper when zooming
14814
+ if (this.swiper) {
14815
+ this.swiper.allowTouchMove = false;
14816
+ }
14817
+ }
14818
+ }, { passive: false });
14819
+ container.addEventListener('touchmove', (event) => {
14820
+ if (event.touches.length === 2) {
14821
+ event.preventDefault();
14822
+ const currentDistance = getTouchDistance(event.touches);
14823
+ const pinchScale = currentDistance / initialDistance;
14824
+ currentScale = Math.max(1, Math.min(initialScale * pinchScale, 4));
14825
+ const img = container.querySelector('img');
14826
+ if (img) {
14827
+ img.style.transform = `scale(${currentScale})`;
14828
+ }
14829
+ if (currentScale > 1) {
14830
+ this.isZoomed.set(true);
14831
+ }
14832
+ else {
14833
+ this.isZoomed.set(false);
14834
+ }
14835
+ }
14836
+ }, { passive: false });
14837
+ container.addEventListener('touchend', (event) => {
14838
+ if (event.touches.length < 2) {
14839
+ // Save zoom state
14840
+ this.zoomData.set(index, { scale: currentScale, x: 0, y: 0 });
14841
+ // Re-enable Swiper if not zoomed
14842
+ if (this.swiper && currentScale <= 1) {
14843
+ this.swiper.allowTouchMove = true;
14844
+ }
14845
+ }
14846
+ });
14847
+ }
14848
+ /**
14849
+ * Toggle zoom on double-tap
14850
+ */
14851
+ toggleZoom(container, index) {
14852
+ const zoomData = this.zoomData.get(index) || { scale: 1, x: 0, y: 0 };
14853
+ const img = container.querySelector('img');
14854
+ if (!img)
14855
+ return;
14856
+ if (zoomData.scale > 1) {
14857
+ // Zoom out
14858
+ img.style.transform = 'scale(1)';
14859
+ this.zoomData.set(index, { scale: 1, x: 0, y: 0 });
14860
+ this.isZoomed.set(false);
14861
+ if (this.swiper) {
14862
+ this.swiper.allowTouchMove = true;
14863
+ }
14864
+ }
14865
+ else {
14866
+ // Zoom in
14867
+ img.style.transform = 'scale(2)';
14868
+ this.zoomData.set(index, { scale: 2, x: 0, y: 0 });
14869
+ this.isZoomed.set(true);
14870
+ if (this.swiper) {
14871
+ this.swiper.allowTouchMove = false;
14872
+ }
14873
+ }
14874
+ }
14875
+ /**
14876
+ * Update action states (like, comments) when slide changes
14877
+ */
14878
+ updateActionStates() {
14879
+ const currentImg = this.images[this.currentIndex()];
14880
+ if (currentImg) {
14881
+ this.isLiked.set(currentImg.isLiked ?? false);
14882
+ this.likeCount.set(currentImg.likeCount ?? 0);
14883
+ this.commentCount.set(currentImg.commentCount ?? 0);
14884
+ }
14885
+ }
14886
+ /**
14887
+ * Close the lightbox
14888
+ */
14889
+ close() {
14890
+ if (this.onCloseRequested) {
14891
+ this.onCloseRequested();
14892
+ }
14893
+ }
14894
+ /**
14895
+ * Load description for the current slide
14896
+ */
14897
+ async loadDescription(index) {
14898
+ const currentImg = this.images[index];
14899
+ // Reset state
14900
+ this.descriptionText.set(null);
14901
+ this.descriptionError.set(false);
14902
+ if (this.descriptionSubscription) {
14903
+ this.descriptionSubscription.unsubscribe();
14904
+ this.descriptionSubscription = undefined;
14905
+ }
14906
+ if (!currentImg || !currentImg.lazyDescription) {
14907
+ return;
14908
+ }
14909
+ try {
14910
+ const result = currentImg.lazyDescription();
14911
+ if (isObservable(result)) {
14912
+ this.descriptionSubscription = result.subscribe({
14913
+ next: (text) => {
14914
+ this.descriptionText.set(text);
14915
+ },
14916
+ error: (err) => {
14917
+ console.error('[Lightbox] Failed to load description via observable', err);
14918
+ this.descriptionError.set(true);
14919
+ }
14920
+ });
14921
+ }
14922
+ else {
14923
+ const text = await result;
14924
+ // Verify index is still the same after await
14925
+ if (this.currentIndex() === index) {
14926
+ this.descriptionText.set(text);
14927
+ }
14928
+ }
14929
+ }
14930
+ catch (err) {
14931
+ console.error('[Lightbox] Failed to load description', err);
14932
+ if (this.currentIndex() === index) {
14933
+ this.descriptionError.set(true);
14934
+ }
14935
+ }
14936
+ }
14937
+ /**
14938
+ * Handle share button click
14939
+ */
14940
+ async onShare() {
14941
+ console.log('[Lightbox] Share button clicked');
14942
+ const currentImg = this.currentImage();
14943
+ if (!currentImg?.src) {
14944
+ console.warn('[Lightbox] No image to share');
14945
+ return;
14946
+ }
14947
+ try {
14948
+ // Check if Web Share API is available (for browser)
14949
+ if (navigator.share) {
14950
+ await navigator.share({
14951
+ title: currentImg.title || 'Shared Image',
14952
+ text: currentImg.description || '',
14953
+ url: currentImg.src,
14954
+ });
14955
+ console.log('[Lightbox] Shared via Web Share API');
14956
+ }
14957
+ else {
14958
+ // Fallback to Capacitor Share API (for native apps)
14959
+ await Share.share({
14960
+ title: currentImg.title || 'Shared Image',
14961
+ url: currentImg.src,
14962
+ dialogTitle: 'Share Image',
14963
+ });
14964
+ console.log('[Lightbox] Shared via Capacitor Share API');
14965
+ }
14966
+ }
14967
+ catch (error) {
14968
+ // User cancellation is expected and not an error
14969
+ if (error?.message?.includes('cancel') || error?.code === 'USER_CANCELLED') {
14970
+ console.log('[Lightbox] Share cancelled by user');
14971
+ return;
14972
+ }
14973
+ console.error('[Lightbox] Share failed:', error);
14974
+ }
14975
+ }
14976
+ /**
14977
+ * Handle download action
14978
+ */
14979
+ onDownloadAction() {
14980
+ console.log('[Lightbox] Download button clicked');
14981
+ const currentImg = this.currentImage();
14982
+ if (!currentImg?.src) {
14983
+ console.warn('[Lightbox] No image to download');
14984
+ return;
14985
+ }
14986
+ if (this.onDownload) {
14987
+ this.onDownload(currentImg);
14988
+ }
14989
+ }
14990
+ /**
14991
+ * Handle like button toggle
14992
+ */
14993
+ onLikeToggle() {
14994
+ console.log('[Lightbox] Like button toggled');
14995
+ this.isLiked.update(liked => !liked);
14996
+ if (this.isLiked()) {
14997
+ this.likeCount.update(count => count + 1);
14998
+ }
14999
+ else {
15000
+ this.likeCount.update(count => Math.max(0, count - 1));
15001
+ }
15002
+ }
15003
+ /**
15004
+ * Handle reply/comment button click
15005
+ */
15006
+ onReply() {
15007
+ console.log('[Lightbox] Reply button clicked');
15008
+ if (this.onCloseRequested) {
15009
+ this.onCloseRequested();
15010
+ }
15011
+ }
15012
+ /**
15013
+ * Navigate to the next image
15014
+ */
15015
+ nextImage() {
15016
+ if (this.swiper && this.currentIndex() < this.images.length - 1) {
15017
+ this.swiper.slideNext();
15018
+ }
15019
+ }
15020
+ /**
15021
+ * Navigate to the previous image
15022
+ */
15023
+ previousImage() {
15024
+ if (this.swiper && this.currentIndex() > 0) {
15025
+ this.swiper.slidePrev();
15026
+ }
15027
+ }
15028
+ /**
15029
+ * Handle image load success
15030
+ */
15031
+ onImageLoad(index) {
15032
+ if (index === this.currentIndex()) {
15033
+ this.isLoading.set(false);
15034
+ }
15035
+ }
15036
+ /**
15037
+ * Handle image load error
15038
+ */
15039
+ onImageError(index) {
15040
+ if (index === this.currentIndex()) {
15041
+ console.error(`[Lightbox] Image ${index} failed to load`);
15042
+ this.isLoading.set(false);
15043
+ this.hasError.set(true);
15044
+ }
15045
+ }
15046
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxImageWithDescriptionComponent, deps: [{ token: i1.GestureController }], target: i0.ɵɵFactoryTarget.Component });
15047
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileLightboxImageWithDescriptionComponent, isStandalone: true, selector: "ds-mobile-lightbox-image-with-description", inputs: { images: "images", author: "author", initialIndex: "initialIndex", enableZoom: "enableZoom", showControls: "showControls", enableSwipe: "enableSwipe", showInfo: "showInfo", showActions: "showActions", showDownload: "showDownload", onDownload: "onDownload", animation: "animation", onCloseRequested: "onCloseRequested" }, viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: `
15048
+ <div class="lightbox-overlay"
15049
+ [class.zoomed]="isZoomed()">
15050
+
15051
+ <div class="lightbox-wrapper">
15052
+ <ds-mobile-lightbox-header
15053
+ [author]="author"
15054
+ [showDownload]="showDownload"
15055
+ (closeClick)="close()"
15056
+ (shareClick)="onShare()"
15057
+ (downloadClick)="onDownloadAction()"
15058
+ />
15059
+
15060
+ <div class="swiper-container" #swiperContainer>
15061
+ <div class="swiper-wrapper">
15062
+ @for (image of images; track image.src; let i = $index) {
15063
+ <div class="swiper-slide">
15064
+ <div class="image-zoom-container" [attr.data-index]="i">
15065
+ <img
15066
+ [src]="image.src"
15067
+ [alt]="image.alt || 'Lightbox image'"
15068
+ class="lightbox-image"
15069
+ (load)="onImageLoad(i)"
15070
+ (error)="onImageError(i)">
15071
+ </div>
15072
+ </div>
15073
+ }
15074
+ </div>
15075
+ </div>
15076
+
15077
+ @if (isLoading()) {
15078
+ <div class="loading-spinner">
15079
+ <ds-mobile-glass-spinner [spinnerSize]="32"></ds-mobile-glass-spinner>
15080
+ </div>
15081
+ }
15082
+
15083
+ <!-- AI Description Overlay -->
15084
+ <div class="lightbox-description-container"
15085
+ [class.show]="showInfo && !isSwiping() && (descriptionError() || (descriptionText() && descriptionText()!.trim().length > 0))">
15086
+ @if (descriptionError()) {
15087
+ <div class="description-error">
15088
+ <span>Kunne ikke hente beskrivelse.</span>
15089
+ <button class="retry-button" (click)="loadDescription(currentIndex())">Prøv igen</button>
15090
+ </div>
15091
+ } @else if (descriptionText() && descriptionText()!.trim().length > 0) {
15092
+ <div class="description-content">
15093
+ <div class="ai-description-header">
15094
+ <ds-icon name="remixSparklingFill" size="16px"></ds-icon>
15095
+ <span>AI Beskrivelse</span>
15096
+ </div>
15097
+ <p>{{ descriptionText() }}</p>
15098
+ </div>
15099
+ }
15100
+ </div>
15101
+
15102
+ <ds-mobile-lightbox-footer
15103
+ [showNavigation]="showControls && images.length > 1"
15104
+ [showActions]="showActions"
15105
+ [currentIndex]="currentIndex()"
15106
+ [totalImages]="images.length"
15107
+ [isLiked]="isLiked()"
15108
+ [likeCount]="likeCount()"
15109
+ [commentCount]="commentCount()"
15110
+ (prevClick)="previousImage()"
15111
+ (nextClick)="nextImage()"
15112
+ (likeClick)="onLikeToggle()"
15113
+ (commentClick)="onReply()"
15114
+ />
15115
+ </div>
15116
+ </div>
15117
+ `, isInline: true, 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-base);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}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important;padding:0!important}:host ::ng-deep ds-textarea.ghost-input-clean .textarea-container{padding:0!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}:host{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10000}.lightbox-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000fa;z-index:10000;display:flex;flex-direction:column;touch-action:none;animation:fadeIn .2s ease-out}.lightbox-overlay.zoomed{overflow:hidden}.lightbox-content{display:block;height:100vh;width:100vw;position:absolute;inset:0}.lightbox-content::part(scroll){display:flex;flex-direction:column;height:100%;overflow:hidden}.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%}.lightbox-content.zoomed{overflow:hidden}.lightbox-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 16px;background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 80%,transparent 100%);pointer-events:none}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-name{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.close-button,.share-button{pointer-events:auto;flex-shrink:0;border-radius:50%}.close-button::ng-deep button,.share-button::ng-deep button{color:#fff!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:50%!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;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}.close-button::ng-deep button:hover,.share-button::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.close-button::ng-deep button:active,.share-button::ng-deep button:active{background:#fff3!important;transform:scale(.98)}.close-button::ng-deep svg,.share-button::ng-deep svg{color:#fff!important;fill:#fff!important}.swiper-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}.swiper-wrapper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lightbox-image{max-width:min(640px,100%);max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out;transform-origin:center center}.lightbox-overlay.zoomed .swiper-container{touch-action:none}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.loading-spinner ion-spinner{--color: rgba(255, 255, 255, .8);width:48px;height:48px}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;color:#fffc;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:500;padding:20px;background:#00000080;border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-bottom-section{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px 12px;pointer-events:none}.nav-button,.counter{pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;padding:0;margin:0;outline:none}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px}.counter{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;padding:10px 16px;background:#00000080;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-bottom-section{padding-bottom:env(safe-area-inset-bottom)}}.lightbox-footer{display:flex;padding:12px 20px 20px;pointer-events:none}.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}.action-buttons-left{display:flex;align-items:center;gap:16px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-with-count::ng-deep button,.action-button-share::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover,.action-button-with-count::ng-deep button:hover,.action-button-share::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active,.action-button-with-count::ng-deep button:active,.action-button-share::ng-deep button:active{transform:scale(.98)}.action-button-like::ng-deep button svg,.action-button-comment::ng-deep button svg,.action-button-with-count::ng-deep button svg,.action-button-share::ng-deep button svg,.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon,.action-button-like::ng-deep button .btn__content,.action-button-comment::ng-deep button .btn__content,.action-button-with-count::ng-deep button .btn__content{color:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg,.action-button-with-count::ng-deep button .btn__icon svg,.action-button-share::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.action-button-like[data-liked=true]::ng-deep button svg{fill:#f91880!important;color:#f91880!important}.action-button-like[data-liked=true]::ng-deep button{border-color:#f918804d!important}.action-button-like,.action-button-comment,.action-button-share{flex-shrink:0;border-radius:50%}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-share::ng-deep button{border-radius:50%!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}@media (min-width: 768px){.lightbox-header{padding:24px}.close-button{width:48px;height:48px}.lightbox-controls{padding:20px 24px 16px}.nav-button{width:48px;height:48px}.counter{font-size:var(--font-size-base);padding:12px 20px}.lightbox-footer{padding:16px 24px 24px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{height:48px;padding:0 20px}.action-button-share::ng-deep button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.image-wrapper,.nav-button,.lightbox-caption{transition:none}}.nav-button:focus-visible{outline:2px solid white;outline-offset:2px}.lightbox-description-container{position:absolute;bottom:85px;left:16px;right:16px;max-height:30vh;overflow-y:auto;background:#fff;border-radius:16px;padding:16px;color:#111827;z-index:90;opacity:0;visibility:hidden;transition:all .3s ease;transform:translateY(10px);pointer-events:auto;box-shadow:0 4px 24px #00000040}.lightbox-description-container.show{opacity:1;visibility:visible;transform:translateY(0)}.description-loader{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0}.description-loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#6b7280}.description-error{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:12px 0}.description-error span{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#111827}.description-error .retry-button{background:var(--color-accent, #6B5FF5);border:none;color:#fff;border-radius:20px;padding:6px 16px;font-size:var(--font-size-xs);cursor:pointer;font-family:Brockmann,sans-serif;transition:background .2s}.description-error .retry-button:active{background:var(--color-accent-dark, #5A4EE3)}.ai-description-header{display:flex;align-items:center;gap:6px;margin-bottom:8px;color:var(--color-accent, #6B5FF5);font-family:Brockmann,sans-serif;font-weight:600;font-size:var(--font-size-sm)}.ai-description-header ds-icon::ng-deep svg{fill:var(--color-accent, #6B5FF5);color:var(--color-accent, #6B5FF5)}.description-content p{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:1.5;color:#111827;white-space:pre-wrap;margin:0}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-description-container{bottom:calc(85px + env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "component", type: DsMobileGlassSpinnerComponent, selector: "ds-mobile-glass-spinner", inputs: ["spinnerSize", "borderRadius"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileLightboxHeaderComponent, selector: "ds-mobile-lightbox-header", inputs: ["author", "showDownload"], outputs: ["closeClick", "shareClick", "downloadClick"] }, { kind: "component", type: DsMobileLightboxFooterComponent, selector: "ds-mobile-lightbox-footer", inputs: ["showNavigation", "currentIndex", "totalImages", "showActions", "isLiked", "likeCount", "commentCount"], outputs: ["prevClick", "nextClick", "likeClick", "commentClick"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
15118
+ }
15119
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxImageWithDescriptionComponent, decorators: [{
15120
+ type: Component,
15121
+ args: [{ selector: 'ds-mobile-lightbox-image-with-description', standalone: true, imports: [
15122
+ DsMobileGlassSpinnerComponent,
15123
+ CommonModule,
15124
+ DsMobileLightboxHeaderComponent,
15125
+ DsMobileLightboxFooterComponent,
15126
+ DsIconComponent
15127
+ ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
15128
+ <div class="lightbox-overlay"
15129
+ [class.zoomed]="isZoomed()">
15130
+
15131
+ <div class="lightbox-wrapper">
15132
+ <ds-mobile-lightbox-header
15133
+ [author]="author"
15134
+ [showDownload]="showDownload"
15135
+ (closeClick)="close()"
15136
+ (shareClick)="onShare()"
15137
+ (downloadClick)="onDownloadAction()"
15138
+ />
15139
+
15140
+ <div class="swiper-container" #swiperContainer>
15141
+ <div class="swiper-wrapper">
15142
+ @for (image of images; track image.src; let i = $index) {
15143
+ <div class="swiper-slide">
15144
+ <div class="image-zoom-container" [attr.data-index]="i">
15145
+ <img
15146
+ [src]="image.src"
15147
+ [alt]="image.alt || 'Lightbox image'"
15148
+ class="lightbox-image"
15149
+ (load)="onImageLoad(i)"
15150
+ (error)="onImageError(i)">
15151
+ </div>
15152
+ </div>
15153
+ }
15154
+ </div>
15155
+ </div>
15156
+
15157
+ @if (isLoading()) {
15158
+ <div class="loading-spinner">
15159
+ <ds-mobile-glass-spinner [spinnerSize]="32"></ds-mobile-glass-spinner>
15160
+ </div>
15161
+ }
15162
+
15163
+ <!-- AI Description Overlay -->
15164
+ <div class="lightbox-description-container"
15165
+ [class.show]="showInfo && !isSwiping() && (descriptionError() || (descriptionText() && descriptionText()!.trim().length > 0))">
15166
+ @if (descriptionError()) {
15167
+ <div class="description-error">
15168
+ <span>Kunne ikke hente beskrivelse.</span>
15169
+ <button class="retry-button" (click)="loadDescription(currentIndex())">Prøv igen</button>
15170
+ </div>
15171
+ } @else if (descriptionText() && descriptionText()!.trim().length > 0) {
15172
+ <div class="description-content">
15173
+ <div class="ai-description-header">
15174
+ <ds-icon name="remixSparklingFill" size="16px"></ds-icon>
15175
+ <span>AI Beskrivelse</span>
15176
+ </div>
15177
+ <p>{{ descriptionText() }}</p>
15178
+ </div>
15179
+ }
15180
+ </div>
15181
+
15182
+ <ds-mobile-lightbox-footer
15183
+ [showNavigation]="showControls && images.length > 1"
15184
+ [showActions]="showActions"
15185
+ [currentIndex]="currentIndex()"
15186
+ [totalImages]="images.length"
15187
+ [isLiked]="isLiked()"
15188
+ [likeCount]="likeCount()"
15189
+ [commentCount]="commentCount()"
15190
+ (prevClick)="previousImage()"
15191
+ (nextClick)="nextImage()"
15192
+ (likeClick)="onLikeToggle()"
15193
+ (commentClick)="onReply()"
15194
+ />
15195
+ </div>
15196
+ </div>
15197
+ `, 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-base);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}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important;padding:0!important}:host ::ng-deep ds-textarea.ghost-input-clean .textarea-container{padding:0!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}:host{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10000}.lightbox-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000fa;z-index:10000;display:flex;flex-direction:column;touch-action:none;animation:fadeIn .2s ease-out}.lightbox-overlay.zoomed{overflow:hidden}.lightbox-content{display:block;height:100vh;width:100vw;position:absolute;inset:0}.lightbox-content::part(scroll){display:flex;flex-direction:column;height:100%;overflow:hidden}.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%}.lightbox-content.zoomed{overflow:hidden}.lightbox-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 16px;background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 80%,transparent 100%);pointer-events:none}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-name{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.close-button,.share-button{pointer-events:auto;flex-shrink:0;border-radius:50%}.close-button::ng-deep button,.share-button::ng-deep button{color:#fff!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:50%!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;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}.close-button::ng-deep button:hover,.share-button::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.close-button::ng-deep button:active,.share-button::ng-deep button:active{background:#fff3!important;transform:scale(.98)}.close-button::ng-deep svg,.share-button::ng-deep svg{color:#fff!important;fill:#fff!important}.swiper-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}.swiper-wrapper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lightbox-image{max-width:min(640px,100%);max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out;transform-origin:center center}.lightbox-overlay.zoomed .swiper-container{touch-action:none}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.loading-spinner ion-spinner{--color: rgba(255, 255, 255, .8);width:48px;height:48px}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;color:#fffc;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:500;padding:20px;background:#00000080;border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-bottom-section{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px 12px;pointer-events:none}.nav-button,.counter{pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;padding:0;margin:0;outline:none}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px}.counter{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;padding:10px 16px;background:#00000080;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-bottom-section{padding-bottom:env(safe-area-inset-bottom)}}.lightbox-footer{display:flex;padding:12px 20px 20px;pointer-events:none}.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}.action-buttons-left{display:flex;align-items:center;gap:16px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-with-count::ng-deep button,.action-button-share::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover,.action-button-with-count::ng-deep button:hover,.action-button-share::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active,.action-button-with-count::ng-deep button:active,.action-button-share::ng-deep button:active{transform:scale(.98)}.action-button-like::ng-deep button svg,.action-button-comment::ng-deep button svg,.action-button-with-count::ng-deep button svg,.action-button-share::ng-deep button svg,.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon,.action-button-like::ng-deep button .btn__content,.action-button-comment::ng-deep button .btn__content,.action-button-with-count::ng-deep button .btn__content{color:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg,.action-button-with-count::ng-deep button .btn__icon svg,.action-button-share::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.action-button-like[data-liked=true]::ng-deep button svg{fill:#f91880!important;color:#f91880!important}.action-button-like[data-liked=true]::ng-deep button{border-color:#f918804d!important}.action-button-like,.action-button-comment,.action-button-share{flex-shrink:0;border-radius:50%}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-share::ng-deep button{border-radius:50%!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}@media (min-width: 768px){.lightbox-header{padding:24px}.close-button{width:48px;height:48px}.lightbox-controls{padding:20px 24px 16px}.nav-button{width:48px;height:48px}.counter{font-size:var(--font-size-base);padding:12px 20px}.lightbox-footer{padding:16px 24px 24px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{height:48px;padding:0 20px}.action-button-share::ng-deep button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.image-wrapper,.nav-button,.lightbox-caption{transition:none}}.nav-button:focus-visible{outline:2px solid white;outline-offset:2px}.lightbox-description-container{position:absolute;bottom:85px;left:16px;right:16px;max-height:30vh;overflow-y:auto;background:#fff;border-radius:16px;padding:16px;color:#111827;z-index:90;opacity:0;visibility:hidden;transition:all .3s ease;transform:translateY(10px);pointer-events:auto;box-shadow:0 4px 24px #00000040}.lightbox-description-container.show{opacity:1;visibility:visible;transform:translateY(0)}.description-loader{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0}.description-loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#6b7280}.description-error{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:12px 0}.description-error span{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#111827}.description-error .retry-button{background:var(--color-accent, #6B5FF5);border:none;color:#fff;border-radius:20px;padding:6px 16px;font-size:var(--font-size-xs);cursor:pointer;font-family:Brockmann,sans-serif;transition:background .2s}.description-error .retry-button:active{background:var(--color-accent-dark, #5A4EE3)}.ai-description-header{display:flex;align-items:center;gap:6px;margin-bottom:8px;color:var(--color-accent, #6B5FF5);font-family:Brockmann,sans-serif;font-weight:600;font-size:var(--font-size-sm)}.ai-description-header ds-icon::ng-deep svg{fill:var(--color-accent, #6B5FF5);color:var(--color-accent, #6B5FF5)}.description-content p{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:1.5;color:#111827;white-space:pre-wrap;margin:0}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-description-container{bottom:calc(85px + env(safe-area-inset-bottom))}}\n"] }]
15198
+ }], ctorParameters: () => [{ type: i1.GestureController }], propDecorators: { images: [{
15199
+ type: Input
15200
+ }], author: [{
15201
+ type: Input
15202
+ }], initialIndex: [{
15203
+ type: Input
15204
+ }], enableZoom: [{
15205
+ type: Input
15206
+ }], showControls: [{
15207
+ type: Input
15208
+ }], enableSwipe: [{
15209
+ type: Input
15210
+ }], showInfo: [{
15211
+ type: Input
15212
+ }], showActions: [{
15213
+ type: Input
15214
+ }], showDownload: [{
15215
+ type: Input
15216
+ }], onDownload: [{
15217
+ type: Input
15218
+ }], animation: [{
15219
+ type: Input
15220
+ }], onCloseRequested: [{
15221
+ type: Input
15222
+ }], swiperContainer: [{
15223
+ type: ViewChild,
15224
+ args: ['swiperContainer', { read: ElementRef }]
15225
+ }] } });
15226
+
14588
15227
  /**
14589
15228
  * DsMobileLightboxPdfComponent
14590
15229
  *
@@ -15088,6 +15727,49 @@ class DsMobileLightboxService {
15088
15727
  // Return dismiss function
15089
15728
  return () => this.close();
15090
15729
  }
15730
+ /**
15731
+ * Open the image lightbox with one or more images that support descriptions
15732
+ *
15733
+ * @param options Configuration options for the image lightbox with descriptions
15734
+ * @returns Promise that resolves to a dismiss function
15735
+ */
15736
+ async openImagesWithDescription(options) {
15737
+ console.log('[Lightbox] Opening images with description with options:', options);
15738
+ // Close any existing lightbox
15739
+ if (this.currentLightbox) {
15740
+ this.close();
15741
+ }
15742
+ // Create the component
15743
+ const componentRef = createComponent(DsMobileLightboxImageWithDescriptionComponent, {
15744
+ environmentInjector: this.injector
15745
+ });
15746
+ // Set component props
15747
+ componentRef.instance.images = options.images;
15748
+ componentRef.instance.author = options.author;
15749
+ componentRef.instance.initialIndex = options.initialIndex ?? 0;
15750
+ componentRef.instance.enableZoom = options.enableZoom !== false;
15751
+ componentRef.instance.showControls = options.showControls !== false;
15752
+ componentRef.instance.enableSwipe = options.enableSwipe !== false;
15753
+ componentRef.instance.showInfo = options.showInfo !== false;
15754
+ componentRef.instance.showActions = options.showActions ?? false;
15755
+ componentRef.instance.showDownload = options.showDownload ?? false;
15756
+ componentRef.instance.onDownload = options.onDownload;
15757
+ componentRef.instance.animation = options.animation ?? 'fade';
15758
+ // Set up close callback
15759
+ componentRef.instance.onCloseRequested = () => {
15760
+ this.close();
15761
+ };
15762
+ // Attach to application
15763
+ this.appRef.attachView(componentRef.hostView);
15764
+ // Append to body
15765
+ const domElem = componentRef.hostView.rootNodes[0];
15766
+ document.body.appendChild(domElem);
15767
+ // Store reference
15768
+ this.currentLightbox = componentRef;
15769
+ console.log('[Lightbox] Image with description lightbox rendered');
15770
+ // Return dismiss function
15771
+ return () => this.close();
15772
+ }
15091
15773
  /**
15092
15774
  * Open the PDF lightbox (opens native PDF viewer)
15093
15775
  *
@@ -15178,6 +15860,7 @@ const DEFAULT_CHAT_LABELS = {
15178
15860
  closeButtonLabel: 'Luk chat',
15179
15861
  backAriaLabel: 'Tilbage',
15180
15862
  addMembersSearchPlaceholder: 'Søg efter beboer eller adresse',
15863
+ aiReplyError: 'Kunne ikke generere AI svar. Prøv igen senere.',
15181
15864
  };
15182
15865
  /**
15183
15866
  * DsMobileChatModalComponent
@@ -15224,6 +15907,8 @@ class DsMobileChatModalComponent {
15224
15907
  * Back button click event
15225
15908
  */
15226
15909
  back = new EventEmitter();
15910
+ // Local error state for overriding the input error (e.g. for AI failures)
15911
+ localError = signal(undefined, ...(ngDevMode ? [{ debugName: "localError" }] : []));
15227
15912
  // Signal for reactive chat data
15228
15913
  participant = signal({
15229
15914
  id: '',
@@ -15388,14 +16073,33 @@ class DsMobileChatModalComponent {
15388
16073
  }
15389
16074
  catch (e) {
15390
16075
  console.log('[ChatModal] Could not check scroll position:', e);
15391
- // The provided snippet was syntactically incorrect for this location.
15392
- // Assuming the intent was to add `auto-height` to the modal's CSS class,
15393
- // this change should be applied where the modal is opened or in its template.
15394
- // As per the instruction, the `isAutoHeight` property is added to the component.
15395
16076
  }
15396
16077
  }
15397
16078
  return true;
15398
16079
  }
16080
+ /**
16081
+ * Handle AI reply button click
16082
+ */
16083
+ async handleAiClick() {
16084
+ if (this.chatData.onAiReplyClick) {
16085
+ try {
16086
+ this.localError.set(undefined);
16087
+ const generatedText = await this.chatData.onAiReplyClick();
16088
+ if (generatedText && typeof generatedText === 'string') {
16089
+ // Insert the returned text directly into the composer
16090
+ this.messageComposer?.insertText(generatedText);
16091
+ }
16092
+ }
16093
+ catch (error) {
16094
+ console.error('AI reply action failed', error);
16095
+ this.localError.set(this.lbl.aiReplyError);
16096
+ // Auto-hide the error after 5 seconds
16097
+ setTimeout(() => {
16098
+ this.localError.set(undefined);
16099
+ }, 5000);
16100
+ }
16101
+ }
16102
+ }
15399
16103
  /**
15400
16104
  * Scroll to bottom of messages
15401
16105
  */
@@ -16012,7 +16716,7 @@ class DsMobileChatModalComponent {
16012
16716
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileChatModalComponent, isStandalone: true, selector: "ds-mobile-chat-modal", inputs: { chatData: "chatData", loading: "loading", error: "error" }, outputs: { back: "back" }, host: { properties: { "class.chat-modal--settings": "groupPanelView() !== \"chat\"", "class.chat-modal--add-members": "groupPanelView() === \"add-members\"" } }, viewQueries: [{ propertyName: "messageComposer", first: true, predicate: ["messageComposer"], descendants: true }, { propertyName: "groupPanels", first: true, predicate: ["groupPanels"], descendants: true }], ngImport: i0, template: `
16013
16717
  <ds-mobile-modal-base
16014
16718
  [loading]="loading"
16015
- [error]="error"
16719
+ [error]="localError() || error"
16016
16720
  [showHeader]="true"
16017
16721
  [headerTitle]="groupHeaderTitle()"
16018
16722
  [headerMeta]="groupHeaderMeta()"
@@ -16261,6 +16965,8 @@ class DsMobileChatModalComponent {
16261
16965
  [editIndicatorText]="lbl.composerEditIndicator"
16262
16966
  [autoFocus]="autoFocus()"
16263
16967
  [showAttachmentButton]="true"
16968
+ [showAiButton]="!!chatData.onAiReplyClick"
16969
+ (aiClick)="handleAiClick()"
16264
16970
  (messageSent)="handleMessageSent($event)"
16265
16971
  (editCancelled)="handleEditCancelled()"
16266
16972
  (attachmentClicked)="handleComposerAttachmentClick()"
@@ -16269,7 +16975,7 @@ class DsMobileChatModalComponent {
16269
16975
  </ds-mobile-message-composer>
16270
16976
  </div>
16271
16977
  </ds-mobile-modal-base>
16272
- `, isInline: true, 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-base);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}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important;padding:0!important}:host ::ng-deep ds-textarea.ghost-input-clean .textarea-container{padding:0!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}\n", ":host ::ng-deep .modal-content-container{padding-top:0}:host-context(.chat-modal--settings) ::ng-deep .modal-header{border-bottom:none}:host-context(.chat-modal--add-members) ::ng-deep .modal-header{border-bottom:1px solid var(--border-color-default)}.chat-messages-container{display:flex;flex-direction:column;width:100%}.chat-system-line{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;line-height:1.35;color:var(--text-color-default-tertiary, #737373);text-align:center;margin:8px 24px}.chat-avatar-section{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 0 0;background:var(--color-background-neutral-primary, #ffffff)}.chat-avatar-info{display:flex;flex-direction:column;align-items:center;gap:4px}.chat-avatar-name{display:flex;align-items:center;gap:6px;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a)}.chat-avatar-role{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;color:var(--color-text-secondary, #666666)}.chat-avatar-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:4px}.messages-list{display:flex;flex-direction:column;width:100%;padding:16px 0 0;align-items:stretch}.messages-list ds-mobile-message-bubble{width:100%;display:flex}.timestamp-header{display:flex;justify-content:center;margin:16px 0 8px}.timestamp-text{font-family:Brockmann,sans-serif;font-size:12px;font-weight:400;color:var(--color-text-secondary);padding:4px 12px}.message-file-attachments{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;padding:0 20px 0 60px;max-width:100%}.message-file-attachments.own-message{padding:0 0 0 96px;align-items:flex-end}.message-file-attachments ds-mobile-card-inline-file{max-width:280px;width:100%}.message-image-attachment{width:96px;height:96px;cursor:pointer;border-radius:12px;overflow:hidden;position:relative;transition:transform .2s ease;border:1px solid var(--border-color-default, #e5e5e5)}.message-image-attachment:active{transform:scale(.98)}.message-image-attachment .inline-image{width:100%;height:100%;display:block;-o-object-fit:cover;object-fit:cover}.group-settings-back-btn{flex-shrink:0;border-radius:50%}.group-settings-back-btn::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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsAvatarWithBadgeComponent, selector: "ds-avatar-with-badge", inputs: ["type", "size", "initials", "src", "iconName", "showBadge", "badgePosition"] }, { kind: "component", type: DsMobileVendorAvatarComponent, selector: "ds-mobile-vendor-avatar", inputs: ["name", "logo", "size"] }, { kind: "component", type: DsMobileMessageComposerComponent, selector: "ds-mobile-message-composer", inputs: ["avatarInitials", "avatarType", "avatarSrc", "placeholder", "sendButtonLabel", "attachmentButtonLabel", "showAttachmentButton", "editIndicatorText", "replyIndicatorText", "enableMentions", "mentionUsers", "autoFocus"], outputs: ["messageSent", "editCancelled", "replyCancelled", "mentionSelected", "attachmentClicked", "attachmentsChanged"] }, { kind: "component", type: DsMobileMessageBubbleComponent, selector: "ds-mobile-message-bubble", inputs: ["content", "isOwnMessage", "senderName", "timestamp", "showTimestamp", "avatarInitials", "avatarType", "avatarSrc", "showAvatar", "clusterPosition", "attachments", "clickable", "isNewMessage", "isDeleted", "showEditedHint", "editedHintText"], outputs: ["attachmentClick", "longPress", "messageClick"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["headerTitleInteractive", "showHeader"], outputs: ["titleClick"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout", "fileUrl"], outputs: ["fileClick"] }, { kind: "component", type: DsMobileSystemMessageBannerComponent, selector: "ds-mobile-system-message-banner", inputs: ["message", "iconName", "afterTimestamp"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileGroupAvatarStackComponent, selector: "ds-mobile-group-avatar-stack", inputs: ["members", "customAvatarUrl", "size", "layout", "currentUserId"] }, { kind: "component", type: DsMobileListSearchComponent, selector: "ds-mobile-list-search", inputs: ["placeholder", "ariaLabel", "value", "showDivider"], outputs: ["valueChange"] }, { kind: "component", type: DsMobileChatGroupPanelsComponent, selector: "ds-mobile-chat-group-panels", inputs: ["panelView", "group", "membersForStack", "participantName", "currentUserId", "isAdmin", "canEditGroupDetails", "canAddGroupMembers", "canLeaveGroup", "canRemoveMember", "canMessageMember", "allTenantsForPicker", "searchQuery", "labels"], outputs: ["navigateTo", "renameGroup", "setGroupAvatarUrl", "addMembers", "removeMember", "messageMember", "leaveGroup"] }] });
16978
+ `, isInline: true, 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-base);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}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important;padding:0!important}:host ::ng-deep ds-textarea.ghost-input-clean .textarea-container{padding:0!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}\n", ":host ::ng-deep .modal-content-container{padding-top:0}:host-context(.chat-modal--settings) ::ng-deep .modal-header{border-bottom:none}:host-context(.chat-modal--add-members) ::ng-deep .modal-header{border-bottom:1px solid var(--border-color-default)}.chat-messages-container{display:flex;flex-direction:column;width:100%}.chat-system-line{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;line-height:1.35;color:var(--text-color-default-tertiary, #737373);text-align:center;margin:8px 24px}.chat-avatar-section{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 0 0;background:var(--color-background-neutral-primary, #ffffff)}.chat-avatar-info{display:flex;flex-direction:column;align-items:center;gap:4px}.chat-avatar-name{display:flex;align-items:center;gap:6px;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a)}.chat-avatar-role{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;color:var(--color-text-secondary, #666666)}.chat-avatar-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:4px}.messages-list{display:flex;flex-direction:column;width:100%;padding:16px 0 0;align-items:stretch}.messages-list ds-mobile-message-bubble{width:100%;display:flex}.timestamp-header{display:flex;justify-content:center;margin:16px 0 8px}.timestamp-text{font-family:Brockmann,sans-serif;font-size:12px;font-weight:400;color:var(--color-text-secondary);padding:4px 12px}.message-file-attachments{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;padding:0 20px 0 60px;max-width:100%}.message-file-attachments.own-message{padding:0 0 0 96px;align-items:flex-end}.message-file-attachments ds-mobile-card-inline-file{max-width:280px;width:100%}.message-image-attachment{width:96px;height:96px;cursor:pointer;border-radius:12px;overflow:hidden;position:relative;transition:transform .2s ease;border:1px solid var(--border-color-default, #e5e5e5)}.message-image-attachment:active{transform:scale(.98)}.message-image-attachment .inline-image{width:100%;height:100%;display:block;-o-object-fit:cover;object-fit:cover}.group-settings-back-btn{flex-shrink:0;border-radius:50%}.group-settings-back-btn::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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsAvatarWithBadgeComponent, selector: "ds-avatar-with-badge", inputs: ["type", "size", "initials", "src", "iconName", "showBadge", "badgePosition"] }, { kind: "component", type: DsMobileVendorAvatarComponent, selector: "ds-mobile-vendor-avatar", inputs: ["name", "logo", "size"] }, { kind: "component", type: DsMobileMessageComposerComponent, selector: "ds-mobile-message-composer", inputs: ["avatarInitials", "avatarType", "avatarSrc", "placeholder", "sendButtonLabel", "attachmentButtonLabel", "showAttachmentButton", "showAiButton", "editIndicatorText", "replyIndicatorText", "enableMentions", "mentionUsers", "autoFocus"], outputs: ["messageSent", "editCancelled", "replyCancelled", "mentionSelected", "attachmentClicked", "attachmentsChanged", "aiClick"] }, { kind: "component", type: DsMobileMessageBubbleComponent, selector: "ds-mobile-message-bubble", inputs: ["content", "isOwnMessage", "senderName", "timestamp", "showTimestamp", "avatarInitials", "avatarType", "avatarSrc", "showAvatar", "clusterPosition", "attachments", "clickable", "isNewMessage", "isDeleted", "showEditedHint", "editedHintText"], outputs: ["attachmentClick", "longPress", "messageClick"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["headerTitleInteractive", "showHeader"], outputs: ["titleClick"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout", "fileUrl"], outputs: ["fileClick"] }, { kind: "component", type: DsMobileSystemMessageBannerComponent, selector: "ds-mobile-system-message-banner", inputs: ["message", "iconName", "afterTimestamp"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileGroupAvatarStackComponent, selector: "ds-mobile-group-avatar-stack", inputs: ["members", "customAvatarUrl", "size", "layout", "currentUserId"] }, { kind: "component", type: DsMobileListSearchComponent, selector: "ds-mobile-list-search", inputs: ["placeholder", "ariaLabel", "value", "showDivider"], outputs: ["valueChange"] }, { kind: "component", type: DsMobileChatGroupPanelsComponent, selector: "ds-mobile-chat-group-panels", inputs: ["panelView", "group", "membersForStack", "participantName", "currentUserId", "isAdmin", "canEditGroupDetails", "canAddGroupMembers", "canLeaveGroup", "canRemoveMember", "canMessageMember", "allTenantsForPicker", "searchQuery", "labels"], outputs: ["navigateTo", "renameGroup", "setGroupAvatarUrl", "addMembers", "removeMember", "messageMember", "leaveGroup"] }] });
16273
16979
  }
16274
16980
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileChatModalComponent, decorators: [{
16275
16981
  type: Component,
@@ -16294,7 +17000,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
16294
17000
  }, template: `
16295
17001
  <ds-mobile-modal-base
16296
17002
  [loading]="loading"
16297
- [error]="error"
17003
+ [error]="localError() || error"
16298
17004
  [showHeader]="true"
16299
17005
  [headerTitle]="groupHeaderTitle()"
16300
17006
  [headerMeta]="groupHeaderMeta()"
@@ -16543,6 +17249,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
16543
17249
  [editIndicatorText]="lbl.composerEditIndicator"
16544
17250
  [autoFocus]="autoFocus()"
16545
17251
  [showAttachmentButton]="true"
17252
+ [showAiButton]="!!chatData.onAiReplyClick"
17253
+ (aiClick)="handleAiClick()"
16546
17254
  (messageSent)="handleMessageSent($event)"
16547
17255
  (editCancelled)="handleEditCancelled()"
16548
17256
  (attachmentClicked)="handleComposerAttachmentClick()"
@@ -30074,6 +30782,7 @@ class MobileHomePageComponent {
30074
30782
  familyAccessService;
30075
30783
  peerMessaging;
30076
30784
  peerChat;
30785
+ lightboxService;
30077
30786
  pageComponent;
30078
30787
  isPeerGroupConversation = isPeerGroupConversation;
30079
30788
  // isLoading is owned by PageLoadingService so the layout can react to it
@@ -30095,7 +30804,7 @@ class MobileHomePageComponent {
30095
30804
  modalCtrl = inject(ModalController);
30096
30805
  vendorModal = inject(DsMobileServiceVendorModalService);
30097
30806
  newInquiryModal = inject(DsMobileNewInquiryModalService);
30098
- constructor(router, navCtrl, userService, postsService, postModal, trackingPermissionService, bottomSheet, familyAccessService, peerMessaging, peerChat) {
30807
+ constructor(router, navCtrl, userService, postsService, postModal, trackingPermissionService, bottomSheet, familyAccessService, peerMessaging, peerChat, lightboxService) {
30099
30808
  this.router = router;
30100
30809
  this.navCtrl = navCtrl;
30101
30810
  this.userService = userService;
@@ -30106,6 +30815,7 @@ class MobileHomePageComponent {
30106
30815
  this.familyAccessService = familyAccessService;
30107
30816
  this.peerMessaging = peerMessaging;
30108
30817
  this.peerChat = peerChat;
30818
+ this.lightboxService = lightboxService;
30109
30819
  console.log('MobileHomePageComponent constructor');
30110
30820
  }
30111
30821
  ngOnInit() {
@@ -30250,7 +30960,7 @@ class MobileHomePageComponent {
30250
30960
  }
30251
30961
  }
30252
30962
  }
30253
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileHomePageComponent, deps: [{ token: i1$3.Router }, { token: i1.NavController }, { token: UserService }, { token: PostsService }, { token: DsMobilePostDetailModalService }, { token: TrackingPermissionService }, { token: DsMobileBottomSheetService }, { token: FamilyAccessService }, { token: PeerMessagingService }, { token: PeerChatLauncherService }], target: i0.ɵɵFactoryTarget.Component });
30963
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileHomePageComponent, deps: [{ token: i1$3.Router }, { token: i1.NavController }, { token: UserService }, { token: PostsService }, { token: DsMobilePostDetailModalService }, { token: TrackingPermissionService }, { token: DsMobileBottomSheetService }, { token: FamilyAccessService }, { token: PeerMessagingService }, { token: PeerChatLauncherService }, { token: DsMobileLightboxService }], target: i0.ɵɵFactoryTarget.Component });
30254
30964
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MobileHomePageComponent, isStandalone: true, selector: "app-home-page", viewQueries: [{ propertyName: "pageComponent", first: true, predicate: ["pageComponent"], descendants: true }], ngImport: i0, template: `
30255
30965
  <!-- Full-screen loading state (first entry) — rendered by layout, not here -->
30256
30966
 
@@ -30710,7 +31420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
30710
31420
  } <!-- end @if (!isCoveringScreen()) -->
30711
31421
 
30712
31422
  `, styles: [".posts-list,.messages-preview-list{display:flex;flex-direction:column}.property-banner-nav{display:block;width:100%;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}.property-banner-nav:focus-visible{outline:2px solid var(--color-accent, #6B5FF5);outline-offset:2px}.inquiries-list,.services-preview-list{display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.empty-state ds-button{display:block;margin-top:16px}.empty-state ds-button::ng-deep .btn{width:100%;border-radius:9999px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.welcome-toast{padding:10px 14px;border-radius:12px;background:var(--color-background-brand-secondary, #EEF0FF);display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:500;color:var(--color-accent, #6B5FF5);animation:slideDown .2s ease-out}.toast-icon{width:20px;height:20px;border-radius:50%;background:var(--color-accent, #6B5FF5);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;margin-top:1px}.welcome-toast-content{flex:1;display:flex;flex-direction:column;gap:2px}.welcome-toast-heading{font-family:Brockmann,sans-serif;font-size:14px;font-weight:600;color:var(--color-brand-content, #3B3691);margin:0}.welcome-toast-text{font-family:Brockmann,sans-serif;font-size:13px;line-height:1.4;color:var(--color-brand-content, #3B3691);margin:0;opacity:.8}.welcome-toast-text strong{font-weight:600;opacity:1}.toast-dismiss{margin-left:auto;background:none;border:none;cursor:pointer;flex-shrink:0;color:var(--color-accent, #6B5FF5);display:flex;align-items:center;justify-content:center}.home-content--animating{animation:homeReveal .3s var(--spring-curve-smooth) both}@keyframes homeReveal{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translateY(0)}}\n"] }]
30713
- }], ctorParameters: () => [{ type: i1$3.Router }, { type: i1.NavController }, { type: UserService }, { type: PostsService }, { type: DsMobilePostDetailModalService }, { type: TrackingPermissionService }, { type: DsMobileBottomSheetService }, { type: FamilyAccessService }, { type: PeerMessagingService }, { type: PeerChatLauncherService }], propDecorators: { pageComponent: [{
31423
+ }], ctorParameters: () => [{ type: i1$3.Router }, { type: i1.NavController }, { type: UserService }, { type: PostsService }, { type: DsMobilePostDetailModalService }, { type: TrackingPermissionService }, { type: DsMobileBottomSheetService }, { type: FamilyAccessService }, { type: PeerMessagingService }, { type: PeerChatLauncherService }, { type: DsMobileLightboxService }], propDecorators: { pageComponent: [{
30714
31424
  type: ViewChild,
30715
31425
  args: ['pageComponent']
30716
31426
  }] } });
@@ -31198,7 +31908,12 @@ class MobileInquiryDetailPageComponent {
31198
31908
  currentUserId: 'current-user',
31199
31909
  currentUserInitials: this.userService.avatarInitials(),
31200
31910
  currentUserAvatarType: 'initials',
31201
- autoFocus: false
31911
+ autoFocus: false,
31912
+ onAiReplyClick: async () => {
31913
+ // Mock AI reply delay
31914
+ await new Promise(resolve => setTimeout(resolve, 1500));
31915
+ throw new Error("API Connection Failed");
31916
+ }
31202
31917
  };
31203
31918
  await this.chatModal.open(chatData);
31204
31919
  }
@@ -31230,6 +31945,11 @@ class MobileInquiryDetailPageComponent {
31230
31945
  currentUserInitials: this.userService.avatarInitials(),
31231
31946
  currentUserAvatarType: 'initials',
31232
31947
  autoFocus: true,
31948
+ onAiReplyClick: async () => {
31949
+ // Mock AI reply delay
31950
+ await new Promise(resolve => setTimeout(resolve, 1500));
31951
+ throw new Error("API Connection Failed");
31952
+ }
31233
31953
  };
31234
31954
  await this.chatModal.open(chatData);
31235
31955
  }
@@ -36355,5 +37075,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
36355
37075
  * Generated bundle index. Do not edit.
36356
37076
  */
36357
37077
 
36358
- export { AcceptInvitePageComponent, ActionCommentComponent, ActionLikeComponent, AvatarUploadPageComponent, BaseModalService, ContentRowComponent, CreateAccountPageComponent, DEFAULT_SERVICE_PAGE_LABELS, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileAccessSheetComponent, DsMobileActionListItemComponent, DsMobileActionsBottomSheetComponent, DsMobileAddGroupTenantsModalComponent, DsMobileAppLoadingComponent, DsMobileAttachmentPreviewComponent, DsMobileBookingConfirmationWrapperComponent, DsMobileBookingModalComponent, DsMobileBookingModalService, DsMobileBookingSummaryComponent, DsMobileBottomSheetHeaderComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCapacitySheetComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileCommunityAdminPickerComponent, DsMobileCommunityAdminsModalComponent, DsMobileConfirmationSheetComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileCreateGroupModalComponent, DsMobileDropdownComponent, DsMobileEditGroupModalComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileFacilityArchiveConfirmationComponent, DsMobileFacilityCreationConfirmationWrapperComponent, DsMobileFacilityCreationModalComponent, DsMobileFacilityCreationModalService, DsMobileFacilityDeleteConfirmationComponent, DsMobileFacilityDetailModalComponent, DsMobileFacilityDetailModalService, DsMobileFileAttachmentComponent, DsMobileGlassSpinnerComponent, DsMobileGroupAvatarStackComponent, DsMobileGroupMembersModalComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileImagePlaceholderComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemBookingComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileListSearchComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMediaActionsPanelComponent, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobilePillComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobilePriceSheetComponent, DsMobileProfileActionsSheetComponent, DsMobilePromptBottomSheetComponent, DsMobilePropertyBannerComponent, DsMobileRichTextEditorComponent, DsMobileSectionComponent, DsMobileServiceVendorModalService, DsMobileServiceVendorSheetComponent, DsMobileSwiperComponent, DsMobileSwiperWithNavComponent, DsMobileSystemMessageBannerComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsMobileTenantPickerModalComponent, DsMobileWhenCanBookSheetComponent, DsMobileWhoCanBookSheetComponent, DsTextInputComponent, FamilyAccessPageComponent, FamilyAccessService, InquiriesService, InviteSuccessPageComponent, MediaPickerService, MobileBookingPageComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PageLoadingService, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, PostsService, SectionHeaderComponent, ServicesPageComponent, SignInPageComponent, SignInToAcceptPageComponent, TenantChatPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, TrackingPermissionService, UserService, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition };
37078
+ export { AcceptInvitePageComponent, ActionCommentComponent, ActionLikeComponent, AvatarUploadPageComponent, BaseModalService, ContentRowComponent, CreateAccountPageComponent, DEFAULT_SERVICE_PAGE_LABELS, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileAccessSheetComponent, DsMobileActionListItemComponent, DsMobileActionsBottomSheetComponent, DsMobileAddGroupTenantsModalComponent, DsMobileAppLoadingComponent, DsMobileAttachmentPreviewComponent, DsMobileBookingConfirmationWrapperComponent, DsMobileBookingModalComponent, DsMobileBookingModalService, DsMobileBookingSummaryComponent, DsMobileBottomSheetHeaderComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCapacitySheetComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileCommunityAdminPickerComponent, DsMobileCommunityAdminsModalComponent, DsMobileConfirmationSheetComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileCreateGroupModalComponent, DsMobileDropdownComponent, DsMobileEditGroupModalComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileFacilityArchiveConfirmationComponent, DsMobileFacilityCreationConfirmationWrapperComponent, DsMobileFacilityCreationModalComponent, DsMobileFacilityCreationModalService, DsMobileFacilityDeleteConfirmationComponent, DsMobileFacilityDetailModalComponent, DsMobileFacilityDetailModalService, DsMobileFileAttachmentComponent, DsMobileGlassSpinnerComponent, DsMobileGroupAvatarStackComponent, DsMobileGroupMembersModalComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileImagePlaceholderComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemBookingComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxImageWithDescriptionComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileListSearchComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMediaActionsPanelComponent, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobilePillComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobilePriceSheetComponent, DsMobileProfileActionsSheetComponent, DsMobilePromptBottomSheetComponent, DsMobilePropertyBannerComponent, DsMobileRichTextEditorComponent, DsMobileSectionComponent, DsMobileServiceVendorModalService, DsMobileServiceVendorSheetComponent, DsMobileSwiperComponent, DsMobileSwiperWithNavComponent, DsMobileSystemMessageBannerComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsMobileTenantPickerModalComponent, DsMobileWhenCanBookSheetComponent, DsMobileWhoCanBookSheetComponent, DsTextInputComponent, FamilyAccessPageComponent, FamilyAccessService, InquiriesService, InviteSuccessPageComponent, MediaPickerService, MobileBookingPageComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PageLoadingService, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, PostsService, SectionHeaderComponent, ServicesPageComponent, SignInPageComponent, SignInToAcceptPageComponent, TenantChatPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, TrackingPermissionService, UserService, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition };
36359
37079
  //# sourceMappingURL=propbinder-mobile-design.mjs.map