@forgeroute/ui 0.4.43 → 0.4.45

package/fesm2022/forgeroute-ui-messaging.mjs

@@ -4,7 +4,7 @@ import * as i1 from "@angular/forms";
 import { FormsModule } from "@angular/forms";
 import { HttpClient, HttpErrorResponse } from "@angular/common/http";
 import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
-import { AlertComponent, ButtonComponent, CheckboxComponent, ChipComponent, ComboboxComponent, ContactPickerComponent, DatetimeInputComponent, ErrorComponent, FORGEROUTE_CONFIG, FormRowComponent, FormSectionComponent, HintComponent, PillTabsComponent, RadioGroupComponent, SelectComponent, SidePanelComponent, TextInputComponent, TextareaInputComponent, ToastService, ToggleBadgeComponent, UiFieldValidity, createFieldReveal, getErrorMessage, requiredIssue } from "@forgeroute/ui";
+import { AlertComponent, ButtonComponent, CheckboxComponent, ChipComponent, ComboboxComponent, ContactPickerComponent, DatetimeInputComponent, ErrorComponent, FORGEROUTE_CONFIG, FormRowComponent, FormSectionComponent, HintComponent, PillTabsComponent, RadioGroupComponent, RichTextEditorComponent, SelectComponent, SidePanelComponent, TextInputComponent, TextareaInputComponent, ToastService, ToggleBadgeComponent, UiFieldValidity, createFieldReveal, getErrorMessage, requiredIssue } from "@forgeroute/ui";
 import { Subject, catchError, debounceTime, defer, distinctUntilChanged, map, of, switchMap, take } from "rxjs";
 let nextVideoPickerId = 0;
 var VideoPickerComponent = class VideoPickerComponent {
@@ -5491,8 +5491,12 @@ var SendInAppComponent = class SendInAppComponent {
 	constructor() {
 		this.destroyRef = inject(DestroyRef);
 		this.toast = inject(ToastService);
+		this.cdr = inject(ChangeDetectorRef);
 		this.contactName = input("", ...ngDevMode ? [{ debugName: "contactName" }] : /* istanbul ignore next */ []);
 		this.contactId = input("", ...ngDevMode ? [{ debugName: "contactId" }] : /* istanbul ignore next */ []);
+		this.contactEmail = input("", ...ngDevMode ? [{ debugName: "contactEmail" }] : /* istanbul ignore next */ []);
+		this.allowAttachments = input(false, ...ngDevMode ? [{ debugName: "allowAttachments" }] : /* istanbul ignore next */ []);
+		this.richText = input(false, ...ngDevMode ? [{ debugName: "richText" }] : /* istanbul ignore next */ []);
 		this.defaultSubject = input("", ...ngDevMode ? [{ debugName: "defaultSubject" }] : /* istanbul ignore next */ []);
 		this.defaultBody = input("", ...ngDevMode ? [{ debugName: "defaultBody" }] : /* istanbul ignore next */ []);
 		this.showSubject = input(true, ...ngDevMode ? [{ debugName: "showSubject" }] : /* istanbul ignore next */ []);
@@ -5505,18 +5509,50 @@ var SendInAppComponent = class SendInAppComponent {
 		this.sending = signal(false, ...ngDevMode ? [{ debugName: "sending" }] : /* istanbul ignore next */ []);
 		this.subject = "";
 		this.body = "";
+		this.attachments = [];
 	}
 	ngOnInit() {
 		this.subject = this.defaultSubject();
 		this.body = this.defaultBody();
 		this.notifyValid();
 	}
+	bodyText() {
+		if (!this.richText()) return this.body;
+		return (new DOMParser().parseFromString(this.body || "", "text/html").body.textContent ?? "").replace(/\u00a0/g, " ");
+	}
+	richTooLong() {
+		const max = this.maxLength();
+		return this.richText() && max != null && this.body.length > max;
+	}
 	get canSend() {
-		if (!this.body.trim() || this.showSubject() && !this.subject.trim()) return false;
+		if (!this.bodyText().trim() || this.showSubject() && !this.subject.trim()) return false;
 		if (this.showSubject() && this.subject.length > MAX_SUBJECT) return false;
 		const max = this.maxLength();
 		return max == null || this.body.length <= max;
 	}
+	onFilesSelected(event) {
+		const input = event.target;
+		const files = input.files ? Array.from(input.files) : [];
+		for (const file of files) {
+			const reader = new FileReader();
+			reader.onload = () => {
+				const base64 = String(reader.result).split(",")[1] ?? "";
+				const sizeLabel = file.size < 1048576 ? `${Math.round(file.size / 1024)} KB` : `${(file.size / 1048576).toFixed(1)} MB`;
+				this.attachments = [...this.attachments, {
+					filename: file.name,
+					content: base64,
+					contentType: file.type || "application/octet-stream",
+					sizeLabel
+				}];
+				this.cdr.markForCheck();
+			};
+			reader.readAsDataURL(file);
+		}
+		input.value = "";
+	}
+	removeAttachment(index) {
+		this.attachments = this.attachments.filter((_, i) => i !== index);
+	}
 	notifyValid() {
 		this.validChange.emit(!this.sending() && !!this.sendFn() && this.canSend);
 	}
@@ -5530,11 +5566,18 @@ var SendInAppComponent = class SendInAppComponent {
 			contactId: this.contactId() || void 0,
 			body: this.body.trim()
 		};
+		if (this.richText()) payload.bodyIsHtml = true;
+		if (this.attachments.length) payload.attachments = this.attachments.map(({ filename, content, contentType }) => ({
+			filename,
+			content,
+			contentType
+		}));
 		if (this.showSubject()) payload.subject = this.subject.trim();
 		send(payload).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
 			next: () => {
 				this.toast.show("Message sent");
 				this.sending.set(false);
+				this.attachments = [];
 				this.sent.emit();
 			},
 			error: (err) => {
@@ -5576,6 +5619,27 @@ var SendInAppComponent = class SendInAppComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				contactEmail: {
+					classPropertyName: "contactEmail",
+					publicName: "contactEmail",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				allowAttachments: {
+					classPropertyName: "allowAttachments",
+					publicName: "allowAttachments",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				richText: {
+					classPropertyName: "richText",
+					publicName: "richText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				defaultSubject: {
 					classPropertyName: "defaultSubject",
 					publicName: "defaultSubject",
@@ -5622,6 +5686,7 @@ var SendInAppComponent = class SendInAppComponent {
       <span class="sm-group-label">To</span>
       <div class="sm-to-card">
         <span class="sm-to-name">{{ contactName() }}</span>
+        @if (contactEmail()) { <span class="sm-to-email">{{ contactEmail() }}</span> }
       </div>
     </div>
     @if (showSubject()) {
@@ -5633,7 +5698,16 @@ var SendInAppComponent = class SendInAppComponent {
         [(ngModel)]="subject"
         (ngModelChange)="notifyValid()" />
     }
-    @if (limit(); as max) {
+    @if (richText()) {
+      <ui-rich-text-editor
+        label="Message"
+        [required]="true"
+        placeholder="Write your message..."
+        [minHeight]="180"
+        [error]="richTooLong() ? 'Too long (max ' + limit() + ' characters).' : ''"
+        [(ngModel)]="body"
+        (ngModelChange)="notifyValid()" />
+    } @else if (limit(); as max) {
       <ui-textarea-input
         label="Message"
         [required]="true"
@@ -5651,9 +5725,27 @@ var SendInAppComponent = class SendInAppComponent {
         [(ngModel)]="body"
         (ngModelChange)="notifyValid()" />
     }
+    @if (allowAttachments()) {
+      <div class="sm-group" data-testid="in-app-attachments">
+        <span class="sm-group-label">Attachments</span>
+        @if (attachments.length > 0) {
+          <div class="attach-chips">
+            @for (a of attachments; track $index; let i = $index) {
+              <div class="attach-chip">
+                <span class="attach-name">{{ a.filename }}</span>
+                <span class="attach-size">{{ a.sizeLabel }}</span>
+                <button class="attach-remove" type="button" (click)="removeAttachment(i)" [attr.aria-label]="'Remove ' + a.filename">&times;</button>
+              </div>
+            }
+          </div>
+        }
+        <input #fileInput type="file" multiple hidden data-testid="in-app-file-input" (change)="onFilesSelected($event)" />
+        <button type="button" class="attach-add-btn" (click)="fileInput.click()">Attach Files</button>
+      </div>
+    }
   `,
 			isInline: true,
-			styles: [":host{display:flex;flex-direction:column;gap:14px}.sm-group-label{display:block;font-size:.8125rem;font-weight:600;color:#334155;margin-bottom:6px}.sm-to-card{border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}.sm-to-name{font-size:.9375rem;font-weight:600;color:#1e293b;min-width:0;overflow-wrap:anywhere}\n"],
+			styles: [":host{display:flex;flex-direction:column;gap:14px}.sm-group-label{display:block;font-size:.8125rem;font-weight:600;color:#334155;margin-bottom:6px}.sm-to-card{border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}.sm-to-name{font-size:.9375rem;font-weight:600;color:#1e293b;min-width:0;overflow-wrap:anywhere}.sm-to-email{font-size:.8125rem;color:#64748b;min-width:0;overflow-wrap:anywhere}.attach-chips{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.attach-chip{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.attach-name{font-size:.8125rem;font-weight:500;color:#1e293b;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attach-size{font-size:.75rem;color:#94a3b8;flex-shrink:0}.attach-remove{position:relative;width:18px;height:18px;border:none;border-radius:50%;background:#e2e8f0;color:#475569;font-size:14px;line-height:1;cursor:pointer;padding:0;flex-shrink:0}.attach-remove:hover{background:#cbd5e1}.attach-add-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px dashed #cbd5e1;border-radius:8px;background:#fff;color:#334155;font-size:.8125rem;font-weight:500;cursor:pointer}.attach-add-btn:hover{background:#f8fafc;border-color:#94a3b8}@media(pointer:coarse){.attach-remove:after{content:\"\";position:absolute;inset:-13px}.attach-add-btn{min-height:44px}}\n"],
 			dependencies: [
 				{
 					kind: "ngmodule",
@@ -5748,6 +5840,24 @@ var SendInAppComponent = class SendInAppComponent {
 						"disabled"
 					],
 					outputs: ["invalidChange"]
+				},
+				{
+					kind: "component",
+					type: RichTextEditorComponent,
+					selector: "ui-rich-text-editor",
+					inputs: [
+						"label",
+						"ariaLabel",
+						"placeholder",
+						"required",
+						"readonly",
+						"hint",
+						"error",
+						"minHeight",
+						"maxHeight",
+						"hide",
+						"disabled"
+					]
 				}
 			],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -5768,13 +5878,15 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				FormsModule,
 				TextInputComponent,
-				TextareaInputComponent
+				TextareaInputComponent,
+				RichTextEditorComponent
 			],
 			template: `
     <div class="sm-group">
       <span class="sm-group-label">To</span>
       <div class="sm-to-card">
         <span class="sm-to-name">{{ contactName() }}</span>
+        @if (contactEmail()) { <span class="sm-to-email">{{ contactEmail() }}</span> }
       </div>
     </div>
     @if (showSubject()) {
@@ -5786,7 +5898,16 @@ i0.ɵɵngDeclareClassMetadata({
         [(ngModel)]="subject"
         (ngModelChange)="notifyValid()" />
     }
-    @if (limit(); as max) {
+    @if (richText()) {
+      <ui-rich-text-editor
+        label="Message"
+        [required]="true"
+        placeholder="Write your message..."
+        [minHeight]="180"
+        [error]="richTooLong() ? 'Too long (max ' + limit() + ' characters).' : ''"
+        [(ngModel)]="body"
+        (ngModelChange)="notifyValid()" />
+    } @else if (limit(); as max) {
       <ui-textarea-input
         label="Message"
         [required]="true"
@@ -5804,8 +5925,26 @@ i0.ɵɵngDeclareClassMetadata({
         [(ngModel)]="body"
         (ngModelChange)="notifyValid()" />
     }
+    @if (allowAttachments()) {
+      <div class="sm-group" data-testid="in-app-attachments">
+        <span class="sm-group-label">Attachments</span>
+        @if (attachments.length > 0) {
+          <div class="attach-chips">
+            @for (a of attachments; track $index; let i = $index) {
+              <div class="attach-chip">
+                <span class="attach-name">{{ a.filename }}</span>
+                <span class="attach-size">{{ a.sizeLabel }}</span>
+                <button class="attach-remove" type="button" (click)="removeAttachment(i)" [attr.aria-label]="'Remove ' + a.filename">&times;</button>
+              </div>
+            }
+          </div>
+        }
+        <input #fileInput type="file" multiple hidden data-testid="in-app-file-input" (change)="onFilesSelected($event)" />
+        <button type="button" class="attach-add-btn" (click)="fileInput.click()">Attach Files</button>
+      </div>
+    }
   `,
-			styles: [":host{display:flex;flex-direction:column;gap:14px}.sm-group-label{display:block;font-size:.8125rem;font-weight:600;color:#334155;margin-bottom:6px}.sm-to-card{border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}.sm-to-name{font-size:.9375rem;font-weight:600;color:#1e293b;min-width:0;overflow-wrap:anywhere}\n"]
+			styles: [":host{display:flex;flex-direction:column;gap:14px}.sm-group-label{display:block;font-size:.8125rem;font-weight:600;color:#334155;margin-bottom:6px}.sm-to-card{border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}.sm-to-name{font-size:.9375rem;font-weight:600;color:#1e293b;min-width:0;overflow-wrap:anywhere}.sm-to-email{font-size:.8125rem;color:#64748b;min-width:0;overflow-wrap:anywhere}.attach-chips{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.attach-chip{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.attach-name{font-size:.8125rem;font-weight:500;color:#1e293b;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attach-size{font-size:.75rem;color:#94a3b8;flex-shrink:0}.attach-remove{position:relative;width:18px;height:18px;border:none;border-radius:50%;background:#e2e8f0;color:#475569;font-size:14px;line-height:1;cursor:pointer;padding:0;flex-shrink:0}.attach-remove:hover{background:#cbd5e1}.attach-add-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px dashed #cbd5e1;border-radius:8px;background:#fff;color:#334155;font-size:.8125rem;font-weight:500;cursor:pointer}.attach-add-btn:hover{background:#f8fafc;border-color:#94a3b8}@media(pointer:coarse){.attach-remove:after{content:\"\";position:absolute;inset:-13px}.attach-add-btn{min-height:44px}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -5825,6 +5964,30 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		contactEmail: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contactEmail",
+				required: false
+			}]
+		}],
+		allowAttachments: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowAttachments",
+				required: false
+			}]
+		}],
+		richText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "richText",
+				required: false
+			}]
+		}],
 		defaultSubject: [{
 			type: i0.Input,
 			args: [{
@@ -7507,6 +7670,8 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
 		this.recipientMode = input("contact", ...ngDevMode ? [{ debugName: "recipientMode" }] : /* istanbul ignore next */ []);
 		this.sendMessage = input(null, ...ngDevMode ? [{ debugName: "sendMessage" }] : /* istanbul ignore next */ []);
 		this.maxBodyLength = input(null, ...ngDevMode ? [{ debugName: "maxBodyLength" }] : /* istanbul ignore next */ []);
+		this.inAppAttachments = input(false, ...ngDevMode ? [{ debugName: "inAppAttachments" }] : /* istanbul ignore next */ []);
+		this.inAppRichText = input(false, ...ngDevMode ? [{ debugName: "inAppRichText" }] : /* istanbul ignore next */ []);
 		this.showSubject = input(true, ...ngDevMode ? [{ debugName: "showSubject" }] : /* istanbul ignore next */ []);
 		this.showTemplates = input(true, ...ngDevMode ? [{ debugName: "showTemplates" }] : /* istanbul ignore next */ []);
 		this.showVideo = input(true, ...ngDevMode ? [{ debugName: "showVideo" }] : /* istanbul ignore next */ []);
@@ -7808,6 +7973,20 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				inAppAttachments: {
+					classPropertyName: "inAppAttachments",
+					publicName: "inAppAttachments",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				inAppRichText: {
+					classPropertyName: "inAppRichText",
+					publicName: "inAppRichText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				showSubject: {
 					classPropertyName: "showSubject",
 					publicName: "showSubject",
@@ -8077,6 +8256,9 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
             #sendInAppRef
             [contactName]="activeContact()!.name"
             [contactId]="activeContact()!.id"
+            [contactEmail]="activeContact()!.email ?? ''"
+            [allowAttachments]="inAppAttachments()"
+            [richText]="inAppRichText()"
             [defaultSubject]="defaultSubject()"
             [defaultBody]="defaultBody()"
             [showSubject]="showSubject()"
@@ -8244,6 +8426,9 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
 					inputs: [
 						"contactName",
 						"contactId",
+						"contactEmail",
+						"allowAttachments",
+						"richText",
 						"defaultSubject",
 						"defaultBody",
 						"showSubject",
@@ -8439,6 +8624,9 @@ i0.ɵɵngDeclareClassMetadata({
             #sendInAppRef
             [contactName]="activeContact()!.name"
             [contactId]="activeContact()!.id"
+            [contactEmail]="activeContact()!.email ?? ''"
+            [allowAttachments]="inAppAttachments()"
+            [richText]="inAppRichText()"
             [defaultSubject]="defaultSubject()"
             [defaultBody]="defaultBody()"
             [showSubject]="showSubject()"
@@ -8684,6 +8872,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		inAppAttachments: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inAppAttachments",
+				required: false
+			}]
+		}],
+		inAppRichText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inAppRichText",
+				required: false
+			}]
+		}],
 		showSubject: [{
 			type: i0.Input,
 			args: [{