stream-chat-angular 4.6.0 → 4.8.0
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.
- package/assets/version.d.ts +1 -1
- package/bundles/stream-chat-angular.umd.js +27 -24
- package/bundles/stream-chat-angular.umd.js.map +1 -1
- package/esm2015/assets/version.js +2 -2
- package/esm2015/lib/attachment-configuration.service.js +26 -23
- package/esm2015/lib/attachment-list/attachment-list.component.js +2 -2
- package/esm2015/lib/types.js +1 -1
- package/fesm2015/stream-chat-angular.js +27 -24
- package/fesm2015/stream-chat-angular.js.map +1 -1
- package/lib/attachment-configuration.service.d.ts +3 -3
- package/lib/attachment-list/attachment-list.component.d.ts +3 -3
- package/lib/types.d.ts +5 -1
- package/package.json +1 -1
- package/src/assets/styles/css/index.css +1 -1
- package/src/assets/styles/css/index.css.map +1 -1
- package/src/assets/styles/scss/Attachment.scss +45 -20
- package/src/assets/styles/scss/Audio.scss +1 -0
- package/src/assets/styles/scss/ChannelList.scss +14 -0
- package/src/assets/styles/scss/ChannelSearch.scss +8 -8
- package/src/assets/styles/scss/Message.scss +26 -41
- package/src/assets/styles/scss/MessageCommerce.scss +1 -1
- package/src/assets/styles/scss/Thread.scss +39 -2
- package/src/assets/styles/scss/VirtualMessage.scss +2 -6
- package/src/assets/styles/v2/css/index.css +1 -1
- package/src/assets/styles/v2/css/index.css.map +1 -1
- package/src/assets/styles/v2/css/index.layout.css +1 -1
- package/src/assets/styles/v2/css/index.layout.css.map +1 -1
- package/src/assets/styles/v2/scss/AttachmentList/AttachmentList-layout.scss +18 -13
- package/src/assets/styles/v2/scss/ChannelList/ChannelList-layout.scss +14 -0
- package/src/assets/styles/v2/scss/ChannelSearch/ChannelSearch-layout.scss +68 -51
- package/src/assets/styles/v2/scss/ChannelSearch/ChannelSearch-theme.scss +48 -0
- package/src/assets/styles/v2/scss/MessageList/MessageList-layout.scss +1 -4
- package/src/assets/styles/v2/scss/MessageList/VirtualizedMessageList-layout.scss +21 -0
- package/src/assets/styles/v2/scss/MessageList/VirtualizedMessageList-theme.scss +9 -0
- package/src/assets/styles/v2/scss/Notification/NotificationList-theme.scss +2 -2
- package/src/assets/styles/v2/scss/Tooltip/Tooltip-layout.scss +1 -1
- package/src/assets/styles/v2/scss/_utils.scss +8 -0
- package/src/assets/version.ts +1 -1
package/assets/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const version = "4.
|
|
1
|
+
export declare const version = "4.8.0";
|
|
@@ -355,7 +355,7 @@
|
|
|
355
355
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
356
356
|
}
|
|
357
357
|
|
|
358
|
-
var version = '4.
|
|
358
|
+
var version = '4.8.0';
|
|
359
359
|
|
|
360
360
|
/**
|
|
361
361
|
* The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
|
|
@@ -2406,8 +2406,14 @@
|
|
|
2406
2406
|
attachment.thumb_url ||
|
|
2407
2407
|
attachment.image_url ||
|
|
2408
2408
|
''));
|
|
2409
|
+
var originalHeight = Number(url.searchParams.get('oh')) > 1
|
|
2410
|
+
? Number(url.searchParams.get('oh'))
|
|
2411
|
+
: 1000000;
|
|
2412
|
+
var originalWidth = Number(url.searchParams.get('ow')) > 1
|
|
2413
|
+
? Number(url.searchParams.get('ow'))
|
|
2414
|
+
: 1000000;
|
|
2409
2415
|
var displayWarning = location === 'gallery' || location === 'single';
|
|
2410
|
-
var
|
|
2416
|
+
var sizeRestriction = this.getSizingRestrictions(url, element, displayWarning);
|
|
2411
2417
|
if (sizeRestriction) {
|
|
2412
2418
|
// Apply 2x for retina displays
|
|
2413
2419
|
sizeRestriction.height *= 2;
|
|
@@ -2417,7 +2423,9 @@
|
|
|
2417
2423
|
return {
|
|
2418
2424
|
url: url.href,
|
|
2419
2425
|
width: '',
|
|
2420
|
-
height:
|
|
2426
|
+
height: '',
|
|
2427
|
+
originalHeight: originalHeight,
|
|
2428
|
+
originalWidth: originalWidth,
|
|
2421
2429
|
};
|
|
2422
2430
|
};
|
|
2423
2431
|
/**
|
|
@@ -2429,29 +2437,35 @@
|
|
|
2429
2437
|
if (this.customVideoAttachmentConfigurationHandler) {
|
|
2430
2438
|
return this.customVideoAttachmentConfigurationHandler(attachment, element);
|
|
2431
2439
|
}
|
|
2432
|
-
var attachmentHeight = "";
|
|
2433
2440
|
var thumbUrl = undefined;
|
|
2441
|
+
var originalHeight = 1000000;
|
|
2442
|
+
var originalWidth = 1000000;
|
|
2434
2443
|
if (attachment.thumb_url && this.shouldGenerateVideoThumbnail) {
|
|
2435
2444
|
var url = new URL(attachment.thumb_url);
|
|
2445
|
+
originalHeight =
|
|
2446
|
+
Number(url.searchParams.get('oh')) > 1
|
|
2447
|
+
? Number(url.searchParams.get('oh'))
|
|
2448
|
+
: originalHeight;
|
|
2449
|
+
originalWidth =
|
|
2450
|
+
Number(url.searchParams.get('ow')) > 1
|
|
2451
|
+
? Number(url.searchParams.get('ow'))
|
|
2452
|
+
: originalWidth;
|
|
2436
2453
|
var displayWarning = true;
|
|
2437
|
-
var
|
|
2454
|
+
var sizeRestriction = this.getSizingRestrictions(url, element, displayWarning);
|
|
2438
2455
|
if (sizeRestriction) {
|
|
2439
2456
|
sizeRestriction.height *= 2;
|
|
2440
2457
|
sizeRestriction.width *= 2;
|
|
2441
2458
|
this.addResizingParamsToUrl(sizeRestriction, url);
|
|
2442
2459
|
}
|
|
2443
2460
|
thumbUrl = url.href;
|
|
2444
|
-
attachmentHeight = height;
|
|
2445
|
-
}
|
|
2446
|
-
else {
|
|
2447
|
-
var cssSizeRestriction = this.getCSSSizeRestriction(element);
|
|
2448
|
-
attachmentHeight = (cssSizeRestriction.maxHeight || cssSizeRestriction.height || '') + "px";
|
|
2449
2461
|
}
|
|
2450
2462
|
return {
|
|
2451
2463
|
url: attachment.asset_url || '',
|
|
2452
2464
|
width: '',
|
|
2453
|
-
height:
|
|
2465
|
+
height: '',
|
|
2454
2466
|
thumbUrl: thumbUrl,
|
|
2467
|
+
originalHeight: originalHeight,
|
|
2468
|
+
originalWidth: originalWidth,
|
|
2455
2469
|
};
|
|
2456
2470
|
};
|
|
2457
2471
|
/**
|
|
@@ -2495,20 +2509,9 @@
|
|
|
2495
2509
|
var originalWidth = Number(urlParams.get('ow')) || 1;
|
|
2496
2510
|
var cssSizeRestriction = this.getCSSSizeRestriction(htmlElement);
|
|
2497
2511
|
var sizeRestriction;
|
|
2498
|
-
var height = '';
|
|
2499
2512
|
if ((cssSizeRestriction.maxHeight || cssSizeRestriction.height) &&
|
|
2500
2513
|
cssSizeRestriction.maxWidth) {
|
|
2501
2514
|
sizeRestriction = this.getSizeRestrictions(originalHeight, originalWidth, (cssSizeRestriction.maxHeight || cssSizeRestriction.height), cssSizeRestriction.maxWidth);
|
|
2502
|
-
if (cssSizeRestriction.maxHeight) {
|
|
2503
|
-
var heightNum = originalHeight > 1 && originalWidth > 1
|
|
2504
|
-
? originalHeight <= cssSizeRestriction.maxHeight &&
|
|
2505
|
-
originalWidth <= cssSizeRestriction.maxWidth
|
|
2506
|
-
? originalHeight
|
|
2507
|
-
: Math.round(Math.min(cssSizeRestriction.maxHeight, (cssSizeRestriction.maxWidth / originalWidth) *
|
|
2508
|
-
originalHeight))
|
|
2509
|
-
: cssSizeRestriction.maxHeight;
|
|
2510
|
-
height = heightNum + "px";
|
|
2511
|
-
}
|
|
2512
2515
|
}
|
|
2513
2516
|
else {
|
|
2514
2517
|
sizeRestriction = undefined;
|
|
@@ -2516,7 +2519,7 @@
|
|
|
2516
2519
|
console.warn("Invalid value set for height/max-height and/or max-width for HTML element, this can cause scrolling issues inside the message list, more info https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#image-and-video-sizing");
|
|
2517
2520
|
}
|
|
2518
2521
|
}
|
|
2519
|
-
return
|
|
2522
|
+
return sizeRestriction;
|
|
2520
2523
|
};
|
|
2521
2524
|
AttachmentConfigurationService.prototype.getSizeRestrictions = function (originalHeight, originalWidth, maxHeight, maxWidth) {
|
|
2522
2525
|
return {
|
|
@@ -3449,7 +3452,7 @@
|
|
|
3449
3452
|
return AttachmentListComponent;
|
|
3450
3453
|
}());
|
|
3451
3454
|
AttachmentListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }, { token: AttachmentConfigurationService }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
3452
|
-
AttachmentListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"orderedAttachments.length > 0\" class=\"str-chat__attachment-list\">\n <ng-container\n *ngFor=\"let attachment of orderedAttachments; trackBy: trackByUrl\"\n >\n <div\n data-testclass=\"attachment-container\"\n class=\"str-chat__message-attachment str-chat__message-attachment--{{\n attachment.type\n }} str-chat__message-attachment-dynamic-size\"\n [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n [class.str-chat-angular__message-attachment-file-single]=\"\n isFile(attachment)\n \"\n [class.str-chat__message-attachment-with-actions]=\"\n attachment.actions && attachment.actions.length > 0\n \"\n [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n >\n <img\n #imgElement\n *ngIf=\"isImage(attachment)\"\n class=\"str-chat__message-attachment--img\"\n data-testclass=\"image\"\n [src]=\"\n getImageAttachmentConfiguration(attachment, 'single', imgElement).url\n \"\n [alt]=\"attachment?.fallback\"\n (click)=\"openImageModal([attachment])\"\n (keyup.enter)=\"openImageModal([attachment])\"\n [ngStyle]=\"{\n height: getImageAttachmentConfiguration(\n attachment,\n 'single',\n imgElement\n ).height,\n width: getImageAttachmentConfiguration(\n attachment,\n 'single',\n imgElement\n ).width\n }\"\n />\n <div\n class=\"str-chat__gallery\"\n data-testid=\"image-gallery\"\n *ngIf=\"isGallery(attachment)\"\n [class.str-chat__gallery--square]=\"(attachment?.images)!.length > 3\"\n [class.str-chat__gallery-two-rows]=\"(attachment?.images)!.length > 2\"\n >\n <ng-container\n *ngFor=\"\n let galleryImage of attachment.images;\n let index = index;\n let isLast = last;\n trackBy: trackByImageUrl\n \"\n >\n <button\n *ngIf=\"index < 3 || (index === 3 && isLast)\"\n class=\"str-chat__gallery-image\"\n data-testclass=\"gallery-image\"\n (click)=\"openImageModal(attachment.images!, index)\"\n (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n [class.str-chat__message-attachment--svg-image]=\"\n isSvg(galleryImage)\n \"\n >\n <img\n #imgElement\n [src]=\"\n getImageAttachmentConfiguration(\n galleryImage,\n 'gallery',\n imgElement\n ).url\n \"\n [alt]=\"galleryImage.fallback\"\n [ngStyle]=\"{\n height: getImageAttachmentConfiguration(\n galleryImage,\n 'gallery',\n imgElement\n ).height,\n width: getImageAttachmentConfiguration(\n galleryImage,\n 'gallery',\n imgElement\n ).width\n }\"\n />\n </button>\n <button\n #element\n *ngIf=\"index === 3 && !isLast\"\n class=\"str-chat__gallery-placeholder\"\n data-testclass=\"gallery-image\"\n data-testid=\"more-image-button\"\n (click)=\"openImageModal(attachment.images!, index)\"\n (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n [class.str-chat__message-attachment--svg-image]=\"\n isSvg(galleryImage)\n \"\n [ngStyle]=\"{\n 'background-image':\n 'url(' +\n getImageAttachmentConfiguration(\n galleryImage,\n 'gallery',\n element\n ).url +\n ')',\n height: getImageAttachmentConfiguration(\n galleryImage,\n 'gallery',\n element\n ).height,\n width: getImageAttachmentConfiguration(\n galleryImage,\n 'gallery',\n element\n ).width\n }\"\n >\n <p\n [innerHTML]=\"\n 'streamChat.{{ imageCount }} more'\n | translate: { imageCount: attachment!.images!.length - 4 }\n \"\n ></p>\n </button>\n </ng-container>\n </div>\n <div class=\"str-chat__player-wrapper\" *ngIf=\"isVideo(attachment)\">\n <video\n #videoElement\n class=\"str-chat__video-angular\"\n controls\n data-testclass=\"video-attachment\"\n [src]=\"getVideoAttachmentConfiguration(attachment, videoElement).url\"\n [ngStyle]=\"{\n height: getVideoAttachmentConfiguration(attachment, videoElement)\n .height,\n width: getVideoAttachmentConfiguration(attachment, videoElement)\n .width\n }\"\n [poster]=\"\n getVideoAttachmentConfiguration(attachment, videoElement).thumbUrl\n \"\n ></video>\n </div>\n <div\n *ngIf=\"isFile(attachment)\"\n class=\"\n str-chat__message-attachment-file--item\n str-chat-angular__message-attachment-file-single\n \"\n >\n <stream-icon-placeholder\n *ngIf=\"themeVersion === '1'\"\n icon=\"file\"\n [size]=\"30\"\n ></stream-icon-placeholder>\n <stream-icon-placeholder\n *ngIf=\"themeVersion === '2'\"\n icon=\"unspecified-filetype\"\n [size]=\"30\"\n ></stream-icon-placeholder>\n <div class=\"str-chat__message-attachment-file--item-text\">\n <div class=\"str-chat__message-attachment-file--item-first-row\">\n <div\n data-testclass=\"file-title\"\n class=\"str-chat__message-attachment-file--item-name\"\n >\n {{ attachment.title }}\n </div>\n <a\n class=\"str-chat__message-attachment-file--item-download\"\n data-testclass=\"file-link\"\n download\n href=\"{{ attachment.asset_url }}\"\n target=\"_blank\"\n >\n <stream-icon-placeholder\n class=\"str-chat__message-attachment-download-icon\"\n icon=\"download\"\n ></stream-icon-placeholder>\n </a>\n </div>\n <span\n class=\"str-chat__message-attachment-file--item-size\"\n data-testclass=\"size\"\n *ngIf=\"hasFileSize(attachment)\"\n >{{ getFileSize(attachment) }}</span\n >\n </div>\n </div>\n <div\n *ngIf=\"\n isCard(attachment) &&\n getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n \"\n class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n attachment.type\n }}\"\n >\n <div\n *ngIf=\"attachmentConfiguration.url\"\n class=\"str-chat__message-attachment-card--header\"\n >\n <img\n data-testclass=\"card-img\"\n alt=\"{{ attachmentConfiguration.url }}\"\n src=\"{{ attachmentConfiguration.url }}\"\n [ngStyle]=\"{\n height: attachmentConfiguration.height,\n width: attachmentConfiguration.width\n }\"\n />\n </div>\n <div class=\"str-chat__message-attachment-card--content\">\n <div class=\"str-chat__message-attachment-card--flex\">\n <div\n *ngIf=\"attachment.title\"\n data-testclass=\"card-title\"\n class=\"str-chat__message-attachment-card--title\"\n >\n {{ attachment.title }}\n </div>\n <div\n *ngIf=\"attachment.text\"\n class=\"str-chat__message-attachment-card--text\"\n data-testclass=\"card-text\"\n >\n {{ attachment.text }}\n </div>\n <a\n class=\"str-chat__message-attachment-card--url\"\n *ngIf=\"attachment.title_link || attachment.og_scrape_url\"\n data-testclass=\"url-link\"\n noopener\n noreferrer\n href=\"{{ attachment.title_link || attachment.og_scrape_url }}\"\n target=\"_blank\"\n >\n {{ trimUrl(attachment.title_link || attachment.og_scrape_url) }}\n </a>\n </div>\n </div>\n </div>\n <div\n class=\"str-chat__message-attachment-actions\"\n *ngIf=\"attachment.actions && attachment.actions.length > 0\"\n >\n <div class=\"str-chat__message-attachment-actions-form\">\n <button\n *ngFor=\"\n let action of attachment.actions;\n trackBy: trackByActionValue\n \"\n class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n action.style\n }}\"\n data-testclass=\"attachment-action\"\n (click)=\"sendAction(action)\"\n (keyup.enter)=\"sendAction(action)\"\n >\n {{ action.text }}\n </button>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n <ng-container\n *ngTemplateOutlet=\"\n (customTemplatesService.modalTemplate$ | async) || defaultModal;\n context: getModalContext()\n \"\n ></ng-container>\n </ng-container>\n</div>\n\n<ng-template\n #defaultModal\n let-isOpen=\"isOpen\"\n let-isOpenChangeHandler=\"isOpenChangeHandler\"\n let-content=\"content\"\n>\n <stream-modal\n class=\"stream-chat-angular__image-modal-host\"\n [isOpen]=\"isOpen\"\n (isOpenChange)=\"isOpenChangeHandler($event)\"\n [content]=\"content\"\n >\n </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n <div class=\"stream-chat-angular__image-modal str-chat__image-carousel\">\n <button\n class=\"\n stream-chat-angular__image-modal-stepper\n str-chat__image-carousel-stepper\n \"\n [ngStyle]=\"{\n visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n }\"\n data-testid=\"image-modal-prev\"\n type=\"button\"\n (click)=\"stepImages(-1)\"\n (keyup.enter)=\"stepImages(-1)\"\n >\n <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n </button>\n <img\n #imgElement\n class=\"\n stream-chat-angular__image-modal-image\n str-chat__image-carousel-image\n \"\n data-testid=\"modal-image\"\n [src]=\"\n getCarouselImageAttachmentConfiguration(\n imagesToView[imagesToViewCurrentIndex],\n imgElement\n ).url\n \"\n [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n [ngStyle]=\"{\n width: getCarouselImageAttachmentConfiguration(\n imagesToView[imagesToViewCurrentIndex],\n imgElement\n ).width,\n height: getCarouselImageAttachmentConfiguration(\n imagesToView[imagesToViewCurrentIndex],\n imgElement\n ).height\n }\"\n />\n <button\n class=\"\n stream-chat-angular__image-modal-stepper\n str-chat__image-carousel-stepper\n \"\n type=\"button\"\n [ngStyle]=\"{\n visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n }\"\n data-testid=\"image-modal-next\"\n (click)=\"stepImages(1)\"\n (keyup.enter)=\"stepImages(1)\"\n >\n <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n </button>\n </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i6__namespace.TranslatePipe, "async": i4__namespace.AsyncPipe } });
|
|
3455
|
+
AttachmentListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"orderedAttachments.length > 0\" class=\"str-chat__attachment-list\">\n <ng-container\n *ngFor=\"let attachment of orderedAttachments; trackBy: trackByUrl\"\n >\n <div\n data-testclass=\"attachment-container\"\n class=\"str-chat__message-attachment str-chat__message-attachment--{{\n attachment.type\n }} str-chat__message-attachment-dynamic-size\"\n [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n [class.str-chat-angular__message-attachment-file-single]=\"\n isFile(attachment)\n \"\n [class.str-chat__message-attachment-with-actions]=\"\n attachment.actions && attachment.actions.length > 0\n \"\n [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n >\n <img\n #imgElement\n *ngIf=\"isImage(attachment)\"\n class=\"str-chat__message-attachment--img\"\n data-testclass=\"image\"\n [src]=\"\n getImageAttachmentConfiguration(attachment, 'single', imgElement).url\n \"\n [alt]=\"attachment?.fallback\"\n (click)=\"openImageModal([attachment])\"\n (keyup.enter)=\"openImageModal([attachment])\"\n [style.--original-height]=\"\n getImageAttachmentConfiguration(attachment, 'single', imgElement)\n .originalHeight\n \"\n [style.--original-width]=\"\n getImageAttachmentConfiguration(attachment, 'single', imgElement)\n .originalWidth\n \"\n [ngStyle]=\"{\n height: getImageAttachmentConfiguration(\n attachment,\n 'single',\n imgElement\n ).height,\n width: getImageAttachmentConfiguration(\n attachment,\n 'single',\n imgElement\n ).width\n }\"\n />\n <div\n class=\"str-chat__gallery\"\n data-testid=\"image-gallery\"\n *ngIf=\"isGallery(attachment)\"\n [class.str-chat__gallery--square]=\"(attachment?.images)!.length > 3\"\n [class.str-chat__gallery-two-rows]=\"(attachment?.images)!.length > 2\"\n >\n <ng-container\n *ngFor=\"\n let galleryImage of attachment.images;\n let index = index;\n let isLast = last;\n trackBy: trackByImageUrl\n \"\n >\n <button\n *ngIf=\"index < 3 || (index === 3 && isLast)\"\n class=\"str-chat__gallery-image\"\n data-testclass=\"gallery-image\"\n (click)=\"openImageModal(attachment.images!, index)\"\n (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n [class.str-chat__message-attachment--svg-image]=\"\n isSvg(galleryImage)\n \"\n >\n <img\n #imgElement\n [src]=\"\n getImageAttachmentConfiguration(\n galleryImage,\n 'gallery',\n imgElement\n ).url\n \"\n [alt]=\"galleryImage.fallback\"\n [style.--original-height]=\"\n getImageAttachmentConfiguration(\n galleryImage,\n 'gallery',\n imgElement\n ).originalHeight\n \"\n [style.--original-width]=\"\n getImageAttachmentConfiguration(\n galleryImage,\n 'gallery',\n imgElement\n ).originalWidth\n \"\n [ngStyle]=\"{\n height: getImageAttachmentConfiguration(\n galleryImage,\n 'gallery',\n imgElement\n ).height,\n width: getImageAttachmentConfiguration(\n galleryImage,\n 'gallery',\n imgElement\n ).width\n }\"\n />\n </button>\n <button\n #element\n *ngIf=\"index === 3 && !isLast\"\n class=\"str-chat__gallery-placeholder\"\n data-testclass=\"gallery-image\"\n data-testid=\"more-image-button\"\n (click)=\"openImageModal(attachment.images!, index)\"\n (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n [class.str-chat__message-attachment--svg-image]=\"\n isSvg(galleryImage)\n \"\n [style.--original-height]=\"\n getImageAttachmentConfiguration(galleryImage, 'gallery', element)\n .originalHeight\n \"\n [style.--original-width]=\"\n getImageAttachmentConfiguration(galleryImage, 'gallery', element)\n .originalWidth\n \"\n [ngStyle]=\"{\n 'background-image':\n 'url(' +\n getImageAttachmentConfiguration(\n galleryImage,\n 'gallery',\n element\n ).url +\n ')',\n height: getImageAttachmentConfiguration(\n galleryImage,\n 'gallery',\n element\n ).height,\n width: getImageAttachmentConfiguration(\n galleryImage,\n 'gallery',\n element\n ).width\n }\"\n >\n <p\n [innerHTML]=\"\n 'streamChat.{{ imageCount }} more'\n | translate: { imageCount: attachment!.images!.length - 4 }\n \"\n ></p>\n </button>\n </ng-container>\n </div>\n <div\n class=\"str-chat__player-wrapper\"\n *ngIf=\"isVideo(attachment)\"\n data-testclass=\"video-attachment-parent\"\n [style.--original-height]=\"\n getVideoAttachmentConfiguration(attachment, videoElement)\n .originalHeight\n \"\n [style.--original-width]=\"\n getVideoAttachmentConfiguration(attachment, videoElement)\n .originalWidth\n \"\n [ngStyle]=\"{\n height: getVideoAttachmentConfiguration(attachment, videoElement)\n .height,\n width: getVideoAttachmentConfiguration(attachment, videoElement).width\n }\"\n >\n <video\n #videoElement\n class=\"str-chat__video-angular\"\n controls\n data-testclass=\"video-attachment\"\n [src]=\"getVideoAttachmentConfiguration(attachment, videoElement).url\"\n [poster]=\"\n getVideoAttachmentConfiguration(attachment, videoElement).thumbUrl\n \"\n ></video>\n </div>\n <div\n *ngIf=\"isFile(attachment)\"\n class=\"\n str-chat__message-attachment-file--item\n str-chat-angular__message-attachment-file-single\n \"\n >\n <stream-icon-placeholder\n *ngIf=\"themeVersion === '1'\"\n icon=\"file\"\n [size]=\"30\"\n ></stream-icon-placeholder>\n <stream-icon-placeholder\n *ngIf=\"themeVersion === '2'\"\n icon=\"unspecified-filetype\"\n [size]=\"30\"\n ></stream-icon-placeholder>\n <div class=\"str-chat__message-attachment-file--item-text\">\n <div class=\"str-chat__message-attachment-file--item-first-row\">\n <div\n data-testclass=\"file-title\"\n class=\"str-chat__message-attachment-file--item-name\"\n >\n {{ attachment.title }}\n </div>\n <a\n class=\"str-chat__message-attachment-file--item-download\"\n data-testclass=\"file-link\"\n download\n href=\"{{ attachment.asset_url }}\"\n target=\"_blank\"\n >\n <stream-icon-placeholder\n class=\"str-chat__message-attachment-download-icon\"\n icon=\"download\"\n ></stream-icon-placeholder>\n </a>\n </div>\n <span\n class=\"str-chat__message-attachment-file--item-size\"\n data-testclass=\"size\"\n *ngIf=\"hasFileSize(attachment)\"\n >{{ getFileSize(attachment) }}</span\n >\n </div>\n </div>\n <div\n *ngIf=\"\n isCard(attachment) &&\n getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n \"\n class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n attachment.type\n }}\"\n >\n <div\n *ngIf=\"attachmentConfiguration.url\"\n class=\"str-chat__message-attachment-card--header\"\n >\n <img\n data-testclass=\"card-img\"\n alt=\"{{ attachmentConfiguration.url }}\"\n src=\"{{ attachmentConfiguration.url }}\"\n [ngStyle]=\"{\n height: attachmentConfiguration.height,\n width: attachmentConfiguration.width\n }\"\n />\n </div>\n <div class=\"str-chat__message-attachment-card--content\">\n <div class=\"str-chat__message-attachment-card--flex\">\n <div\n *ngIf=\"attachment.title\"\n data-testclass=\"card-title\"\n class=\"str-chat__message-attachment-card--title\"\n >\n {{ attachment.title }}\n </div>\n <div\n *ngIf=\"attachment.text\"\n class=\"str-chat__message-attachment-card--text\"\n data-testclass=\"card-text\"\n >\n {{ attachment.text }}\n </div>\n <a\n class=\"str-chat__message-attachment-card--url\"\n *ngIf=\"attachment.title_link || attachment.og_scrape_url\"\n data-testclass=\"url-link\"\n noopener\n noreferrer\n href=\"{{ attachment.title_link || attachment.og_scrape_url }}\"\n target=\"_blank\"\n >\n {{ trimUrl(attachment.title_link || attachment.og_scrape_url) }}\n </a>\n </div>\n </div>\n </div>\n <div\n class=\"str-chat__message-attachment-actions\"\n *ngIf=\"attachment.actions && attachment.actions.length > 0\"\n >\n <div class=\"str-chat__message-attachment-actions-form\">\n <button\n *ngFor=\"\n let action of attachment.actions;\n trackBy: trackByActionValue\n \"\n class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n action.style\n }}\"\n data-testclass=\"attachment-action\"\n (click)=\"sendAction(action)\"\n (keyup.enter)=\"sendAction(action)\"\n >\n {{ action.text }}\n </button>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n <ng-container\n *ngTemplateOutlet=\"\n (customTemplatesService.modalTemplate$ | async) || defaultModal;\n context: getModalContext()\n \"\n ></ng-container>\n </ng-container>\n</div>\n\n<ng-template\n #defaultModal\n let-isOpen=\"isOpen\"\n let-isOpenChangeHandler=\"isOpenChangeHandler\"\n let-content=\"content\"\n>\n <stream-modal\n class=\"stream-chat-angular__image-modal-host\"\n [isOpen]=\"isOpen\"\n (isOpenChange)=\"isOpenChangeHandler($event)\"\n [content]=\"content\"\n >\n </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n <div class=\"stream-chat-angular__image-modal str-chat__image-carousel\">\n <button\n class=\"\n stream-chat-angular__image-modal-stepper\n str-chat__image-carousel-stepper\n \"\n [ngStyle]=\"{\n visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n }\"\n data-testid=\"image-modal-prev\"\n type=\"button\"\n (click)=\"stepImages(-1)\"\n (keyup.enter)=\"stepImages(-1)\"\n >\n <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n </button>\n <img\n #imgElement\n class=\"\n stream-chat-angular__image-modal-image\n str-chat__image-carousel-image\n \"\n data-testid=\"modal-image\"\n [src]=\"\n getCarouselImageAttachmentConfiguration(\n imagesToView[imagesToViewCurrentIndex],\n imgElement\n ).url\n \"\n [style.--original-height]=\"\n getCarouselImageAttachmentConfiguration(\n imagesToView[imagesToViewCurrentIndex],\n imgElement\n ).originalHeight\n \"\n [style.--original-width]=\"\n getCarouselImageAttachmentConfiguration(\n imagesToView[imagesToViewCurrentIndex],\n imgElement\n ).originalWidth\n \"\n [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n [ngStyle]=\"{\n width: getCarouselImageAttachmentConfiguration(\n imagesToView[imagesToViewCurrentIndex],\n imgElement\n ).width,\n height: getCarouselImageAttachmentConfiguration(\n imagesToView[imagesToViewCurrentIndex],\n imgElement\n ).height\n }\"\n />\n <button\n class=\"\n stream-chat-angular__image-modal-stepper\n str-chat__image-carousel-stepper\n \"\n type=\"button\"\n [ngStyle]=\"{\n visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n }\"\n data-testid=\"image-modal-next\"\n (click)=\"stepImages(1)\"\n (keyup.enter)=\"stepImages(1)\"\n >\n <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n </button>\n </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i6__namespace.TranslatePipe, "async": i4__namespace.AsyncPipe } });
|
|
3453
3456
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, decorators: [{
|
|
3454
3457
|
type: i0.Component,
|
|
3455
3458
|
args: [{
|