stream-chat-angular 5.2.0 → 5.3.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/esm2020/assets/version.mjs +2 -2
- package/esm2020/lib/channel-list/channel-list.component.mjs +4 -4
- package/fesm2015/stream-chat-angular.mjs +93 -93
- package/fesm2015/stream-chat-angular.mjs.map +1 -1
- package/fesm2020/stream-chat-angular.mjs +92 -92
- package/fesm2020/stream-chat-angular.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/version.ts +1 -1
|
@@ -19,7 +19,7 @@ import transliterate from '@stream-io/transliterate';
|
|
|
19
19
|
import * as i8$1 from 'angular-mentions';
|
|
20
20
|
import { MentionModule } from 'angular-mentions';
|
|
21
21
|
|
|
22
|
-
const version = '5.
|
|
22
|
+
const version = '5.3.0';
|
|
23
23
|
|
|
24
24
|
/**
|
|
25
25
|
* The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
|
|
@@ -4113,6 +4113,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
4113
4113
|
type: Input
|
|
4114
4114
|
}] } });
|
|
4115
4115
|
|
|
4116
|
+
/**
|
|
4117
|
+
* The `PaginatedListComponent` is a utility element that can display a list of any items. It uses infinite scrolls to load more elements. Providing the data to display, is the responsibility of the parent component.
|
|
4118
|
+
*/
|
|
4119
|
+
class PaginatedListComponent {
|
|
4120
|
+
constructor(ngZone, cdRef) {
|
|
4121
|
+
this.ngZone = ngZone;
|
|
4122
|
+
this.cdRef = cdRef;
|
|
4123
|
+
/**
|
|
4124
|
+
* The items to display
|
|
4125
|
+
*/
|
|
4126
|
+
this.items = [];
|
|
4127
|
+
/**
|
|
4128
|
+
* If `true`, the loading indicator will be displayed
|
|
4129
|
+
*/
|
|
4130
|
+
this.isLoading = false;
|
|
4131
|
+
/**
|
|
4132
|
+
* If `false` the component won't ask for more data vua the `loadMore` output
|
|
4133
|
+
*/
|
|
4134
|
+
this.hasMore = false;
|
|
4135
|
+
/**
|
|
4136
|
+
* The `trackBy` to use with the `NgFor` directive
|
|
4137
|
+
* @param i
|
|
4138
|
+
* @returns the track by id
|
|
4139
|
+
*/
|
|
4140
|
+
this.trackBy = (i) => i;
|
|
4141
|
+
/**
|
|
4142
|
+
* The component will signal via this output when more items should be fetched
|
|
4143
|
+
*
|
|
4144
|
+
* The new items should be appended to the `items` array
|
|
4145
|
+
*/
|
|
4146
|
+
this.loadMore = new EventEmitter();
|
|
4147
|
+
this.isScrollable = false;
|
|
4148
|
+
this.isAtBottom = false;
|
|
4149
|
+
}
|
|
4150
|
+
ngAfterViewInit() {
|
|
4151
|
+
this.ngZone.runOutsideAngular(() => {
|
|
4152
|
+
this.scrollContainer?.nativeElement?.addEventListener('scroll', () => this.scrolled());
|
|
4153
|
+
});
|
|
4154
|
+
}
|
|
4155
|
+
scrolled() {
|
|
4156
|
+
if (!this.hasMore) {
|
|
4157
|
+
return;
|
|
4158
|
+
}
|
|
4159
|
+
const isScrollable = this.scrollContainer.nativeElement.scrollHeight >
|
|
4160
|
+
this.scrollContainer.nativeElement.clientHeight;
|
|
4161
|
+
if (this.isScrollable !== isScrollable) {
|
|
4162
|
+
this.ngZone.run(() => {
|
|
4163
|
+
this.isScrollable = isScrollable;
|
|
4164
|
+
this.cdRef.detectChanges();
|
|
4165
|
+
});
|
|
4166
|
+
}
|
|
4167
|
+
const isAtBottom = Math.ceil(this.scrollContainer.nativeElement.scrollTop) +
|
|
4168
|
+
this.scrollContainer.nativeElement.clientHeight +
|
|
4169
|
+
1 >=
|
|
4170
|
+
this.scrollContainer.nativeElement.scrollHeight;
|
|
4171
|
+
if (this.isAtBottom !== isAtBottom) {
|
|
4172
|
+
this.ngZone.run(() => {
|
|
4173
|
+
this.isAtBottom = isAtBottom;
|
|
4174
|
+
if (this.isAtBottom && !this.isLoading) {
|
|
4175
|
+
this.loadMore.emit();
|
|
4176
|
+
}
|
|
4177
|
+
this.cdRef.detectChanges();
|
|
4178
|
+
});
|
|
4179
|
+
}
|
|
4180
|
+
}
|
|
4181
|
+
}
|
|
4182
|
+
PaginatedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginatedListComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4183
|
+
PaginatedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: { items: "items", isLoading: "isLoading", hasMore: "hasMore", trackBy: "trackBy" }, outputs: { loadMore: "loadMore" }, queries: [{ propertyName: "itemTempalteRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"stream-chat__paginated-list\" #container>\n <div\n data-testid=\"item\"\n class=\"stream-chat__paginated-list-item\"\n *ngFor=\"let item of items; let index = index; trackBy: trackBy\"\n >\n <ng-template\n *ngIf=\"itemTempalteRef\"\n [ngTemplateOutlet]=\"itemTempalteRef\"\n [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n ></ng-template>\n </div>\n <button\n *ngIf=\"hasMore && !isScrollable\"\n class=\"str-chat__load-more-button__button str-chat__cta-button\"\n data-testid=\"load-more-button\"\n [disabled]=\"isLoading\"\n (click)=\"loadMore.emit()\"\n (keyup.enter)=\"loadMore.emit()\"\n >\n <span>{{ \"Load more\" | translate }}</span>\n </button>\n <stream-loading-indicator-placeholder\n data-testid=\"loading-indicator\"\n *ngIf=\"isLoading\"\n ></stream-loading-indicator-placeholder>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
|
|
4184
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginatedListComponent, decorators: [{
|
|
4185
|
+
type: Component,
|
|
4186
|
+
args: [{ selector: 'stream-paginated-list', template: "<div class=\"stream-chat__paginated-list\" #container>\n <div\n data-testid=\"item\"\n class=\"stream-chat__paginated-list-item\"\n *ngFor=\"let item of items; let index = index; trackBy: trackBy\"\n >\n <ng-template\n *ngIf=\"itemTempalteRef\"\n [ngTemplateOutlet]=\"itemTempalteRef\"\n [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n ></ng-template>\n </div>\n <button\n *ngIf=\"hasMore && !isScrollable\"\n class=\"str-chat__load-more-button__button str-chat__cta-button\"\n data-testid=\"load-more-button\"\n [disabled]=\"isLoading\"\n (click)=\"loadMore.emit()\"\n (keyup.enter)=\"loadMore.emit()\"\n >\n <span>{{ \"Load more\" | translate }}</span>\n </button>\n <stream-loading-indicator-placeholder\n data-testid=\"loading-indicator\"\n *ngIf=\"isLoading\"\n ></stream-loading-indicator-placeholder>\n</div>\n" }]
|
|
4187
|
+
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
|
|
4188
|
+
type: Input
|
|
4189
|
+
}], isLoading: [{
|
|
4190
|
+
type: Input
|
|
4191
|
+
}], hasMore: [{
|
|
4192
|
+
type: Input
|
|
4193
|
+
}], trackBy: [{
|
|
4194
|
+
type: Input
|
|
4195
|
+
}], itemTempalteRef: [{
|
|
4196
|
+
type: ContentChild,
|
|
4197
|
+
args: [TemplateRef]
|
|
4198
|
+
}], loadMore: [{
|
|
4199
|
+
type: Output
|
|
4200
|
+
}], scrollContainer: [{
|
|
4201
|
+
type: ViewChild,
|
|
4202
|
+
args: ['container']
|
|
4203
|
+
}] } });
|
|
4204
|
+
|
|
4116
4205
|
/**
|
|
4117
4206
|
* The `ChannelList` component renders the list of channels.
|
|
4118
4207
|
*/
|
|
@@ -4143,10 +4232,10 @@ class ChannelListComponent {
|
|
|
4143
4232
|
}
|
|
4144
4233
|
}
|
|
4145
4234
|
ChannelListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelListComponent, deps: [{ token: ChannelService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4146
|
-
ChannelListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChannelListComponent, selector: "stream-channel-list", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\n #container\n data-testid=\"channel-list-container\"\n class=\"str-chat str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n theme$ | async\n }}\"\n>\n <div\n *ngIf=\"\n (isError$ | async) === false && (isInitializing$ | async) === false;\n else statusIndicator\n \"\n class=\"str-chat__channel-list-messenger\"\n >\n <div class=\"str-chat__channel-list-messenger__main\">\n <ng-content select=\"[channel-list-top]\"></ng-content>\n <div\n *ngIf=\"!(channels$ | async)?.length\"\n class=\"str-chat__channel-list-empty\"\n >\n <stream-icon icon=\"chat-bubble\"></stream-icon>\n <p data-testid=\"empty-channel-list-indicator\">\n {{ \"streamChat.You have no channels currently\" | translate }}\n </p>\n </div>\n <p\n *ngIf=\"!(channels$ | async)?.length\"\n class=\"str-chat__channel-list-empty-v1\"\n data-testid=\"empty-channel-list-indicator\"\n >\n {{ \"streamChat.You have no channels currently\" | translate }}\n </p>\n <
|
|
4235
|
+
ChannelListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChannelListComponent, selector: "stream-channel-list", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\n #container\n data-testid=\"channel-list-container\"\n class=\"str-chat str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n theme$ | async\n }}\"\n>\n <div\n *ngIf=\"\n (isError$ | async) === false && (isInitializing$ | async) === false;\n else statusIndicator\n \"\n class=\"str-chat__channel-list-messenger\"\n >\n <div class=\"str-chat__channel-list-messenger__main\">\n <ng-content select=\"[channel-list-top]\"></ng-content>\n <div\n *ngIf=\"!(channels$ | async)?.length\"\n class=\"str-chat__channel-list-empty\"\n >\n <stream-icon icon=\"chat-bubble\"></stream-icon>\n <p data-testid=\"empty-channel-list-indicator\">\n {{ \"streamChat.You have no channels currently\" | translate }}\n </p>\n </div>\n <p\n *ngIf=\"!(channels$ | async)?.length\"\n class=\"str-chat__channel-list-empty-v1\"\n data-testid=\"empty-channel-list-indicator\"\n >\n {{ \"streamChat.You have no channels currently\" | translate }}\n </p>\n <stream-paginated-list\n [items]=\"(channels$ | async) ?? []\"\n [hasMore]=\"(hasMoreChannels$ | async) ?? false\"\n [isLoading]=\"isLoadingMoreChannels\"\n (loadMore)=\"loadMoreChannels()\"\n >\n <ng-template let-channel=\"item\">\n <ng-template #defaultTemplate let-channelInput=\"channel\">\n <stream-channel-preview\n data-testclass=\"channel-preview\"\n [channel]=\"channelInput\"\n ></stream-channel-preview>\n </ng-template>\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n customChannelPreviewTemplate || defaultTemplate;\n context: { channel: channel }\n \"\n ></ng-container>\n </div>\n </ng-template>\n </stream-paginated-list>\n <ng-content select=\"[channel-list-bottom]\"></ng-content>\n </div>\n </div>\n</div>\n\n<ng-template #statusIndicator>\n <ng-container *ngIf=\"isError$ | async\">\n <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"isInitializing$ | async\">\n <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n <div\n data-testid=\"loading-indicator-full-size\"\n class=\"str-chat__loading-channels\"\n >\n <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n <div\n class=\"str-chat__loading-channels-item str-chat__channel-preview-loading\"\n >\n <div class=\"str-chat__loading-channels-avatar\"></div>\n <div\n class=\"str-chat__loading-channels-meta str-chat__channel-preview-end-loading\"\n >\n <div class=\"str-chat__loading-channels-username\"></div>\n <div class=\"str-chat__loading-channels-status\"></div>\n </div>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: ["items", "isLoading", "hasMore", "trackBy"], outputs: ["loadMore"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
|
|
4147
4236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelListComponent, decorators: [{
|
|
4148
4237
|
type: Component,
|
|
4149
|
-
args: [{ selector: 'stream-channel-list', template: "<div\n #container\n data-testid=\"channel-list-container\"\n class=\"str-chat str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n theme$ | async\n }}\"\n>\n <div\n *ngIf=\"\n (isError$ | async) === false && (isInitializing$ | async) === false;\n else statusIndicator\n \"\n class=\"str-chat__channel-list-messenger\"\n >\n <div class=\"str-chat__channel-list-messenger__main\">\n <ng-content select=\"[channel-list-top]\"></ng-content>\n <div\n *ngIf=\"!(channels$ | async)?.length\"\n class=\"str-chat__channel-list-empty\"\n >\n <stream-icon icon=\"chat-bubble\"></stream-icon>\n <p data-testid=\"empty-channel-list-indicator\">\n {{ \"streamChat.You have no channels currently\" | translate }}\n </p>\n </div>\n <p\n *ngIf=\"!(channels$ | async)?.length\"\n class=\"str-chat__channel-list-empty-v1\"\n data-testid=\"empty-channel-list-indicator\"\n >\n {{ \"streamChat.You have no channels currently\" | translate }}\n </p>\n <
|
|
4238
|
+
args: [{ selector: 'stream-channel-list', template: "<div\n #container\n data-testid=\"channel-list-container\"\n class=\"str-chat str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n theme$ | async\n }}\"\n>\n <div\n *ngIf=\"\n (isError$ | async) === false && (isInitializing$ | async) === false;\n else statusIndicator\n \"\n class=\"str-chat__channel-list-messenger\"\n >\n <div class=\"str-chat__channel-list-messenger__main\">\n <ng-content select=\"[channel-list-top]\"></ng-content>\n <div\n *ngIf=\"!(channels$ | async)?.length\"\n class=\"str-chat__channel-list-empty\"\n >\n <stream-icon icon=\"chat-bubble\"></stream-icon>\n <p data-testid=\"empty-channel-list-indicator\">\n {{ \"streamChat.You have no channels currently\" | translate }}\n </p>\n </div>\n <p\n *ngIf=\"!(channels$ | async)?.length\"\n class=\"str-chat__channel-list-empty-v1\"\n data-testid=\"empty-channel-list-indicator\"\n >\n {{ \"streamChat.You have no channels currently\" | translate }}\n </p>\n <stream-paginated-list\n [items]=\"(channels$ | async) ?? []\"\n [hasMore]=\"(hasMoreChannels$ | async) ?? false\"\n [isLoading]=\"isLoadingMoreChannels\"\n (loadMore)=\"loadMoreChannels()\"\n >\n <ng-template let-channel=\"item\">\n <ng-template #defaultTemplate let-channelInput=\"channel\">\n <stream-channel-preview\n data-testclass=\"channel-preview\"\n [channel]=\"channelInput\"\n ></stream-channel-preview>\n </ng-template>\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n customChannelPreviewTemplate || defaultTemplate;\n context: { channel: channel }\n \"\n ></ng-container>\n </div>\n </ng-template>\n </stream-paginated-list>\n <ng-content select=\"[channel-list-bottom]\"></ng-content>\n </div>\n </div>\n</div>\n\n<ng-template #statusIndicator>\n <ng-container *ngIf=\"isError$ | async\">\n <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"isInitializing$ | async\">\n <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n <div\n data-testid=\"loading-indicator-full-size\"\n class=\"str-chat__loading-channels\"\n >\n <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n <div\n class=\"str-chat__loading-channels-item str-chat__channel-preview-loading\"\n >\n <div class=\"str-chat__loading-channels-avatar\"></div>\n <div\n class=\"str-chat__loading-channels-meta str-chat__channel-preview-end-loading\"\n >\n <div class=\"str-chat__loading-channels-username\"></div>\n <div class=\"str-chat__loading-channels-status\"></div>\n </div>\n </div>\n</ng-template>\n" }]
|
|
4150
4239
|
}], ctorParameters: function () { return [{ type: ChannelService }, { type: CustomTemplatesService }, { type: ThemeService }]; }, propDecorators: { container: [{
|
|
4151
4240
|
type: ViewChild,
|
|
4152
4241
|
args: ['container']
|
|
@@ -4618,95 +4707,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
4618
4707
|
args: ['modalContent', { static: true }]
|
|
4619
4708
|
}] } });
|
|
4620
4709
|
|
|
4621
|
-
/**
|
|
4622
|
-
* The `PaginatedListComponent` is a utility element that can display a list of any items. It uses infinite scrolls to load more elements. Providing the data to display, is the responsibility of the parent component.
|
|
4623
|
-
*/
|
|
4624
|
-
class PaginatedListComponent {
|
|
4625
|
-
constructor(ngZone, cdRef) {
|
|
4626
|
-
this.ngZone = ngZone;
|
|
4627
|
-
this.cdRef = cdRef;
|
|
4628
|
-
/**
|
|
4629
|
-
* The items to display
|
|
4630
|
-
*/
|
|
4631
|
-
this.items = [];
|
|
4632
|
-
/**
|
|
4633
|
-
* If `true`, the loading indicator will be displayed
|
|
4634
|
-
*/
|
|
4635
|
-
this.isLoading = false;
|
|
4636
|
-
/**
|
|
4637
|
-
* If `false` the component won't ask for more data vua the `loadMore` output
|
|
4638
|
-
*/
|
|
4639
|
-
this.hasMore = false;
|
|
4640
|
-
/**
|
|
4641
|
-
* The `trackBy` to use with the `NgFor` directive
|
|
4642
|
-
* @param i
|
|
4643
|
-
* @returns the track by id
|
|
4644
|
-
*/
|
|
4645
|
-
this.trackBy = (i) => i;
|
|
4646
|
-
/**
|
|
4647
|
-
* The component will signal via this output when more items should be fetched
|
|
4648
|
-
*
|
|
4649
|
-
* The new items should be appended to the `items` array
|
|
4650
|
-
*/
|
|
4651
|
-
this.loadMore = new EventEmitter();
|
|
4652
|
-
this.isScrollable = false;
|
|
4653
|
-
this.isAtBottom = false;
|
|
4654
|
-
}
|
|
4655
|
-
ngAfterViewInit() {
|
|
4656
|
-
this.ngZone.runOutsideAngular(() => {
|
|
4657
|
-
this.scrollContainer?.nativeElement?.addEventListener('scroll', () => this.scrolled());
|
|
4658
|
-
});
|
|
4659
|
-
}
|
|
4660
|
-
scrolled() {
|
|
4661
|
-
if (!this.hasMore) {
|
|
4662
|
-
return;
|
|
4663
|
-
}
|
|
4664
|
-
const isScrollable = this.scrollContainer.nativeElement.scrollHeight >
|
|
4665
|
-
this.scrollContainer.nativeElement.clientHeight;
|
|
4666
|
-
if (this.isScrollable !== isScrollable) {
|
|
4667
|
-
this.ngZone.run(() => {
|
|
4668
|
-
this.isScrollable = isScrollable;
|
|
4669
|
-
this.cdRef.detectChanges();
|
|
4670
|
-
});
|
|
4671
|
-
}
|
|
4672
|
-
const isAtBottom = Math.ceil(this.scrollContainer.nativeElement.scrollTop) +
|
|
4673
|
-
this.scrollContainer.nativeElement.clientHeight +
|
|
4674
|
-
1 >=
|
|
4675
|
-
this.scrollContainer.nativeElement.scrollHeight;
|
|
4676
|
-
if (this.isAtBottom !== isAtBottom) {
|
|
4677
|
-
this.ngZone.run(() => {
|
|
4678
|
-
this.isAtBottom = isAtBottom;
|
|
4679
|
-
if (this.isAtBottom && !this.isLoading) {
|
|
4680
|
-
this.loadMore.emit();
|
|
4681
|
-
}
|
|
4682
|
-
this.cdRef.detectChanges();
|
|
4683
|
-
});
|
|
4684
|
-
}
|
|
4685
|
-
}
|
|
4686
|
-
}
|
|
4687
|
-
PaginatedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginatedListComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4688
|
-
PaginatedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: { items: "items", isLoading: "isLoading", hasMore: "hasMore", trackBy: "trackBy" }, outputs: { loadMore: "loadMore" }, queries: [{ propertyName: "itemTempalteRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"stream-chat__paginated-list\" #container>\n <div\n data-testid=\"item\"\n class=\"stream-chat__paginated-list-item\"\n *ngFor=\"let item of items; let index = index; trackBy: trackBy\"\n >\n <ng-template\n *ngIf=\"itemTempalteRef\"\n [ngTemplateOutlet]=\"itemTempalteRef\"\n [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n ></ng-template>\n </div>\n <button\n *ngIf=\"hasMore && !isScrollable\"\n class=\"str-chat__load-more-button__button str-chat__cta-button\"\n data-testid=\"load-more-button\"\n [disabled]=\"isLoading\"\n (click)=\"loadMore.emit()\"\n (keyup.enter)=\"loadMore.emit()\"\n >\n <span>{{ \"Load more\" | translate }}</span>\n </button>\n <stream-loading-indicator-placeholder\n data-testid=\"loading-indicator\"\n *ngIf=\"isLoading\"\n ></stream-loading-indicator-placeholder>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
|
|
4689
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginatedListComponent, decorators: [{
|
|
4690
|
-
type: Component,
|
|
4691
|
-
args: [{ selector: 'stream-paginated-list', template: "<div class=\"stream-chat__paginated-list\" #container>\n <div\n data-testid=\"item\"\n class=\"stream-chat__paginated-list-item\"\n *ngFor=\"let item of items; let index = index; trackBy: trackBy\"\n >\n <ng-template\n *ngIf=\"itemTempalteRef\"\n [ngTemplateOutlet]=\"itemTempalteRef\"\n [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n ></ng-template>\n </div>\n <button\n *ngIf=\"hasMore && !isScrollable\"\n class=\"str-chat__load-more-button__button str-chat__cta-button\"\n data-testid=\"load-more-button\"\n [disabled]=\"isLoading\"\n (click)=\"loadMore.emit()\"\n (keyup.enter)=\"loadMore.emit()\"\n >\n <span>{{ \"Load more\" | translate }}</span>\n </button>\n <stream-loading-indicator-placeholder\n data-testid=\"loading-indicator\"\n *ngIf=\"isLoading\"\n ></stream-loading-indicator-placeholder>\n</div>\n" }]
|
|
4692
|
-
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
|
|
4693
|
-
type: Input
|
|
4694
|
-
}], isLoading: [{
|
|
4695
|
-
type: Input
|
|
4696
|
-
}], hasMore: [{
|
|
4697
|
-
type: Input
|
|
4698
|
-
}], trackBy: [{
|
|
4699
|
-
type: Input
|
|
4700
|
-
}], itemTempalteRef: [{
|
|
4701
|
-
type: ContentChild,
|
|
4702
|
-
args: [TemplateRef]
|
|
4703
|
-
}], loadMore: [{
|
|
4704
|
-
type: Output
|
|
4705
|
-
}], scrollContainer: [{
|
|
4706
|
-
type: ViewChild,
|
|
4707
|
-
args: ['container']
|
|
4708
|
-
}] } });
|
|
4709
|
-
|
|
4710
4710
|
/**
|
|
4711
4711
|
* The `UserListComponent` can display a list of Stream users with pagination
|
|
4712
4712
|
*/
|