@sumaris-net/ngx-components 2.4.12-rc1 → 2.4.12-rc2
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/esm2020/src/app/core/services/model/filter.model.mjs +1 -1
- package/esm2020/src/app/social/user-event/notification/user-event-notification.list.mjs +16 -6
- package/fesm2015/sumaris-net.ngx-components.mjs +14 -4
- package/fesm2015/sumaris-net.ngx-components.mjs.map +1 -1
- package/fesm2020/sumaris-net.ngx-components.mjs +14 -4
- package/fesm2020/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/app/social/user-event/notification/user-event-notification.list.d.ts +7 -4
|
@@ -31479,12 +31479,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
31479
31479
|
type: Directive
|
|
31480
31480
|
}], ctorParameters: function () { return [{ type: GraphqlService }, { type: AccountService }, { type: NetworkService }, { type: i1$1.TranslateService }, { type: undefined }]; } });
|
|
31481
31481
|
|
|
31482
|
+
const APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD = new InjectionToken('infiniteScrollThreshold');
|
|
31482
31483
|
class UserEventNotificationList {
|
|
31483
|
-
constructor(cd, popoverController, settings, userEventService) {
|
|
31484
|
+
constructor(cd, popoverController, settings, userEventService, infiniteScrollThresholdFromToken) {
|
|
31484
31485
|
this.cd = cd;
|
|
31485
31486
|
this.popoverController = popoverController;
|
|
31486
31487
|
this.settings = settings;
|
|
31487
31488
|
this.userEventService = userEventService;
|
|
31489
|
+
this.infiniteScrollThresholdFromToken = infiniteScrollThresholdFromToken;
|
|
31488
31490
|
this._subscriptions = new Subscription();
|
|
31489
31491
|
this._$pageSize = new BehaviorSubject(20);
|
|
31490
31492
|
this.fetchingMore = false;
|
|
@@ -31495,6 +31497,7 @@ class UserEventNotificationList {
|
|
|
31495
31497
|
this.sortDirection = 'desc';
|
|
31496
31498
|
this.enableInfiniteScroll = true;
|
|
31497
31499
|
this.mobile = this.settings?.mobile || false;
|
|
31500
|
+
this.infiniteScrollThreshold = infiniteScrollThresholdFromToken;
|
|
31498
31501
|
}
|
|
31499
31502
|
set pageSize(value) {
|
|
31500
31503
|
if (value > 0 && value !== this._$pageSize.value)
|
|
@@ -31526,7 +31529,7 @@ class UserEventNotificationList {
|
|
|
31526
31529
|
console.debug(`[user-event-notification-list] Receiving ${data.length} new user events (by WS)`, data);
|
|
31527
31530
|
}));
|
|
31528
31531
|
if (this.enableInfiniteScroll)
|
|
31529
|
-
this.initInfiniteScroll();
|
|
31532
|
+
this.initInfiniteScroll(this.infiniteScrollThreshold);
|
|
31530
31533
|
}
|
|
31531
31534
|
}
|
|
31532
31535
|
ngOnDestroy() {
|
|
@@ -31632,8 +31635,8 @@ class UserEventNotificationList {
|
|
|
31632
31635
|
this.cd.markForCheck();
|
|
31633
31636
|
}
|
|
31634
31637
|
}
|
|
31635
|
-
UserEventNotificationList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UserEventNotificationList, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.PopoverController }, { token: LocalSettingsService, optional: true }, { token: APP_USER_EVENT_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
31636
|
-
UserEventNotificationList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: UserEventNotificationList, selector: "app-user-event-notification-list", inputs: { debug: "debug", mobile: "mobile", titleI18n: "titleI18n", sortBy: "sortBy", sortDirection: "sortDirection", filter: "filter", enableInfiniteScroll: "enableInfiniteScroll", pageSize: "pageSize" }, outputs: { readEvent: "readEvent", readEvents: "readEvents" }, viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true }, { propertyName: "ionItems", predicate: IonItem, descendants: true }], ngImport: i0, template: "<ion-content>\n <ion-list class=\"ion-list-popover\">\n\n <ion-row class=\"ion-list-header column\">\n <ion-col>\n <ion-label>{{titleI18n | translate}}</ion-label>\n </ion-col>\n <ion-col class=\"top-action\" *ngIf=\"$items|async|isNotEmptyArray\">\n <ion-text color=\"primary\">\n <a (click)=\"markAllAsRead($event)\">{{'SOCIAL.USER_EVENT.NOTIFICATION.READ_ALL' | translate}}</a>\n </ion-text>\n </ion-col>\n </ion-row>\n\n <ion-item\n *ngFor=\"let item of $items | async; trackBy: trackByFn; last as last\"\n [lines]=\"last ? 'none' : undefined\"\n [class.unread]=\"!item.readDate\"\n [class.tappable]=\"item.actions|arrayFilter:isDefaultAction|isNotEmptyArray\"\n (click)=\"click($event, item)\">\n\n <ion-avatar slot=\"start\">\n\n <img *ngIf=\"item.avatar; else avatarIcon\" src=\"{{ item.avatar }}\">\n\n <ng-template #avatarIcon>\n <app-icon\n *ngIf=\"item.avatarIcon; else generateIcon\"\n [ref]=\"item.avatarIcon\"\n height=\"40\"\n width=\"40\"\n ></app-icon>\n </ng-template>\n\n <ng-template #generateIcon>\n <div class=\"avatar\" *ngIf=\"item.avatarJdenticon\">\n <svg width=\"40\" width=\"40\" [data-jdenticon-value]=\"item.avatarJdenticon\"></svg>\n </div>\n </ng-template>\n\n </ion-avatar>\n\n <ion-grid class=\"ion-no-margin ion-no-padding message\">\n <ion-row>\n <ion-col size=\"12\">\n <p [class.unread]=\"!item.readDate\" [innerHTML]=\"item.message\"></p>\n </ion-col>\n </ion-row>\n\n <!-- date -->\n <ion-row>\n <ion-col size=\"12\">\n <app-icon\n *ngIf=\"item.icon\"\n [ref]=\"item.icon\"\n height=\"16\"\n width=\"16\"\n style=\"vertical-align: sub; margin-right: 3px\"\n ></app-icon>\n <small>\n <span>{{item.creationDate|dateFromNow}}</span>\n <span style=\"color: gray\">{{ ' | ' + (item.creationDate|dateFormat:{time:true}) }}</span>\n </small>\n </ion-col>\n </ion-row>\n\n <!-- actions -->\n <ion-row *ngIf=\"item.actions|isNotEmptyArray\">\n <ion-col></ion-col>\n <ion-col size=\"auto\">\n <ng-container *ngFor=\"let action of item.actions\">\n <a *ngIf=\"!action.default\" class=\"action\" (click)=\"executeAction($event, action, item)\" [title]=\"(action.title || action.name) |translate\">\n <app-icon *ngIf=\"action.iconRef\" slot=\"start\" height=\"20\" width=\"20\" [ref]=\"action.iconRef\"></app-icon>\n <span>{{ action.name | translate }}</span>\n </a>\n </ng-container>\n </ion-col>\n </ion-row>\n\n </ion-grid>\n\n <mat-icon slot=\"end\" *ngIf=\"item.actions|arrayFilter: isDefaultAction|isNotEmptyArray\">chevron_right</mat-icon>\n </ion-item>\n\n <!-- loading -->\n <ng-container *ngIf=\"!($items|async); else notLoading\">\n <ng-container *ngTemplateOutlet=\"loadingItem\"></ng-container>\n </ng-container>\n\n <ng-template #notLoading>\n <!-- no result -->\n <ion-item *ngIf=\"$items|async|isEmptyArray\" lines=\"none\">\n <ion-text color=\"dark\" class=\"text-italic\">{{'SOCIAL.USER_EVENT.NOTIFICATION.EMPTY' | translate}}</ion-text>\n </ion-item>\n\n <!-- Fetching more -->\n <ng-container *ngIf=\"fetchingMore; else infiniteLoop\" lines=\"none\" disabled>\n <ng-container *ngTemplateOutlet=\"loadingItem\"></ng-container>\n </ng-container>\n\n <!-- Infinite loop -->\n <ng-template #infiniteLoop>\n <ng-container *ngIf=\"canFetchMore\" lines=\"none\" disabled\n [ngTemplateOutlet]=\"loadingItem\">\n </ng-container>\n </ng-template>\n </ng-template>\n\n <!-- footer -->\n <ion-row class=\"ion-list-footer column\">\n <ion-col>\n <ion-text *ngIf=\"$itemCount|async; let count\"\n class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n </ion-col>\n </ion-row>\n\n </ion-list>\n</ion-content>\n\n<!-- loading -->\n<ng-template #loadingItem>\n <ion-item lines=\"none\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </ion-item>\n</ng-template>\n", styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;user-select:none;max-height:calc(90vh - 20px)}ion-list ion-item.tappable{cursor:pointer}ion-list ion-item.tappable:hover{--ion-item-background: var(--ion-item-background-color-hover)}.message{font-size:.9em}.message p{margin-top:5px;margin-bottom:5px}.top-action{text-align:end;margin-right:8px}.top-action a{cursor:pointer;color:var(--ion-color-contrast)}.top-action a:hover{text-decoration:underline}a.action{font-size:.9em;margin-right:10px;cursor:pointer}a.action:hover span{text-decoration:underline}a.action app-icon{vertical-align:middle}ion-avatar img,ion-avatar .avatar svg{border:1px solid rgba(var(--ion-color-secondary-rgb, .5));border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i4$2.SvgJdenticonDirective, selector: "svg[data-jdenticon-hash],svg[data-jdenticon-value]", inputs: ["data-jdenticon-hash", "data-jdenticon-value", "width", "height"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["icon", "matIcon", "matSvgIcon", "color", "height", "width", "ref"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: DateFromNowPipe, name: "dateFromNow" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: ArrayFilterPipe, name: "arrayFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
31638
|
+
UserEventNotificationList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UserEventNotificationList, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.PopoverController }, { token: LocalSettingsService, optional: true }, { token: APP_USER_EVENT_SERVICE, optional: true }, { token: APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
31639
|
+
UserEventNotificationList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: UserEventNotificationList, selector: "app-user-event-notification-list", inputs: { debug: "debug", mobile: "mobile", titleI18n: "titleI18n", sortBy: "sortBy", sortDirection: "sortDirection", filter: "filter", enableInfiniteScroll: "enableInfiniteScroll", infiniteScrollThreshold: "infiniteScrollThreshold", pageSize: "pageSize" }, outputs: { readEvent: "readEvent", readEvents: "readEvents" }, viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true }, { propertyName: "ionItems", predicate: IonItem, descendants: true }], ngImport: i0, template: "<ion-content>\n <ion-list class=\"ion-list-popover\">\n\n <ion-row class=\"ion-list-header column\">\n <ion-col>\n <ion-label>{{titleI18n | translate}}</ion-label>\n </ion-col>\n <ion-col class=\"top-action\" *ngIf=\"$items|async|isNotEmptyArray\">\n <ion-text color=\"primary\">\n <a (click)=\"markAllAsRead($event)\">{{'SOCIAL.USER_EVENT.NOTIFICATION.READ_ALL' | translate}}</a>\n </ion-text>\n </ion-col>\n </ion-row>\n\n <ion-item\n *ngFor=\"let item of $items | async; trackBy: trackByFn; last as last\"\n [lines]=\"last ? 'none' : undefined\"\n [class.unread]=\"!item.readDate\"\n [class.tappable]=\"item.actions|arrayFilter:isDefaultAction|isNotEmptyArray\"\n (click)=\"click($event, item)\">\n\n <ion-avatar slot=\"start\">\n\n <img *ngIf=\"item.avatar; else avatarIcon\" src=\"{{ item.avatar }}\">\n\n <ng-template #avatarIcon>\n <app-icon\n *ngIf=\"item.avatarIcon; else generateIcon\"\n [ref]=\"item.avatarIcon\"\n height=\"40\"\n width=\"40\"\n ></app-icon>\n </ng-template>\n\n <ng-template #generateIcon>\n <div class=\"avatar\" *ngIf=\"item.avatarJdenticon\">\n <svg width=\"40\" width=\"40\" [data-jdenticon-value]=\"item.avatarJdenticon\"></svg>\n </div>\n </ng-template>\n\n </ion-avatar>\n\n <ion-grid class=\"ion-no-margin ion-no-padding message\">\n <ion-row>\n <ion-col size=\"12\">\n <p [class.unread]=\"!item.readDate\" [innerHTML]=\"item.message\"></p>\n </ion-col>\n </ion-row>\n\n <!-- date -->\n <ion-row>\n <ion-col size=\"12\">\n <app-icon\n *ngIf=\"item.icon\"\n [ref]=\"item.icon\"\n height=\"16\"\n width=\"16\"\n style=\"vertical-align: sub; margin-right: 3px\"\n ></app-icon>\n <small>\n <span>{{item.creationDate|dateFromNow}}</span>\n <span style=\"color: gray\">{{ ' | ' + (item.creationDate|dateFormat:{time:true}) }}</span>\n </small>\n </ion-col>\n </ion-row>\n\n <!-- actions -->\n <ion-row *ngIf=\"item.actions|isNotEmptyArray\">\n <ion-col></ion-col>\n <ion-col size=\"auto\">\n <ng-container *ngFor=\"let action of item.actions\">\n <a *ngIf=\"!action.default\" class=\"action\" (click)=\"executeAction($event, action, item)\" [title]=\"(action.title || action.name) |translate\">\n <app-icon *ngIf=\"action.iconRef\" slot=\"start\" height=\"20\" width=\"20\" [ref]=\"action.iconRef\"></app-icon>\n <span>{{ action.name | translate }}</span>\n </a>\n </ng-container>\n </ion-col>\n </ion-row>\n\n </ion-grid>\n\n <mat-icon slot=\"end\" *ngIf=\"item.actions|arrayFilter: isDefaultAction|isNotEmptyArray\">chevron_right</mat-icon>\n </ion-item>\n\n <!-- loading -->\n <ng-container *ngIf=\"!($items|async); else notLoading\">\n <ng-container *ngTemplateOutlet=\"loadingItem\"></ng-container>\n </ng-container>\n\n <ng-template #notLoading>\n <!-- no result -->\n <ion-item *ngIf=\"$items|async|isEmptyArray\" lines=\"none\">\n <ion-text color=\"dark\" class=\"text-italic\">{{'SOCIAL.USER_EVENT.NOTIFICATION.EMPTY' | translate}}</ion-text>\n </ion-item>\n\n <!-- Fetching more -->\n <ng-container *ngIf=\"fetchingMore; else infiniteLoop\" lines=\"none\" disabled>\n <ng-container *ngTemplateOutlet=\"loadingItem\"></ng-container>\n </ng-container>\n\n <!-- Infinite loop -->\n <ng-template #infiniteLoop>\n <ng-container *ngIf=\"canFetchMore\" lines=\"none\" disabled\n [ngTemplateOutlet]=\"loadingItem\">\n </ng-container>\n </ng-template>\n </ng-template>\n\n <!-- footer -->\n <ion-row class=\"ion-list-footer column\">\n <ion-col>\n <ion-text *ngIf=\"$itemCount|async; let count\"\n class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n </ion-col>\n </ion-row>\n\n </ion-list>\n</ion-content>\n\n<!-- loading -->\n<ng-template #loadingItem>\n <ion-item lines=\"none\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </ion-item>\n</ng-template>\n", styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;user-select:none;max-height:calc(90vh - 20px)}ion-list ion-item.tappable{cursor:pointer}ion-list ion-item.tappable:hover{--ion-item-background: var(--ion-item-background-color-hover)}.message{font-size:.9em}.message p{margin-top:5px;margin-bottom:5px}.top-action{text-align:end;margin-right:8px}.top-action a{cursor:pointer;color:var(--ion-color-contrast)}.top-action a:hover{text-decoration:underline}a.action{font-size:.9em;margin-right:10px;cursor:pointer}a.action:hover span{text-decoration:underline}a.action app-icon{vertical-align:middle}ion-avatar img,ion-avatar .avatar svg{border:1px solid rgba(var(--ion-color-secondary-rgb, .5));border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i4$2.SvgJdenticonDirective, selector: "svg[data-jdenticon-hash],svg[data-jdenticon-value]", inputs: ["data-jdenticon-hash", "data-jdenticon-value", "width", "height"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AppIconComponent, selector: "app-icon", inputs: ["icon", "matIcon", "matSvgIcon", "color", "height", "width", "ref"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: DateFromNowPipe, name: "dateFromNow" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: ArrayFilterPipe, name: "arrayFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
31637
31640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UserEventNotificationList, decorators: [{
|
|
31638
31641
|
type: Component,
|
|
31639
31642
|
args: [{ selector: 'app-user-event-notification-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-content>\n <ion-list class=\"ion-list-popover\">\n\n <ion-row class=\"ion-list-header column\">\n <ion-col>\n <ion-label>{{titleI18n | translate}}</ion-label>\n </ion-col>\n <ion-col class=\"top-action\" *ngIf=\"$items|async|isNotEmptyArray\">\n <ion-text color=\"primary\">\n <a (click)=\"markAllAsRead($event)\">{{'SOCIAL.USER_EVENT.NOTIFICATION.READ_ALL' | translate}}</a>\n </ion-text>\n </ion-col>\n </ion-row>\n\n <ion-item\n *ngFor=\"let item of $items | async; trackBy: trackByFn; last as last\"\n [lines]=\"last ? 'none' : undefined\"\n [class.unread]=\"!item.readDate\"\n [class.tappable]=\"item.actions|arrayFilter:isDefaultAction|isNotEmptyArray\"\n (click)=\"click($event, item)\">\n\n <ion-avatar slot=\"start\">\n\n <img *ngIf=\"item.avatar; else avatarIcon\" src=\"{{ item.avatar }}\">\n\n <ng-template #avatarIcon>\n <app-icon\n *ngIf=\"item.avatarIcon; else generateIcon\"\n [ref]=\"item.avatarIcon\"\n height=\"40\"\n width=\"40\"\n ></app-icon>\n </ng-template>\n\n <ng-template #generateIcon>\n <div class=\"avatar\" *ngIf=\"item.avatarJdenticon\">\n <svg width=\"40\" width=\"40\" [data-jdenticon-value]=\"item.avatarJdenticon\"></svg>\n </div>\n </ng-template>\n\n </ion-avatar>\n\n <ion-grid class=\"ion-no-margin ion-no-padding message\">\n <ion-row>\n <ion-col size=\"12\">\n <p [class.unread]=\"!item.readDate\" [innerHTML]=\"item.message\"></p>\n </ion-col>\n </ion-row>\n\n <!-- date -->\n <ion-row>\n <ion-col size=\"12\">\n <app-icon\n *ngIf=\"item.icon\"\n [ref]=\"item.icon\"\n height=\"16\"\n width=\"16\"\n style=\"vertical-align: sub; margin-right: 3px\"\n ></app-icon>\n <small>\n <span>{{item.creationDate|dateFromNow}}</span>\n <span style=\"color: gray\">{{ ' | ' + (item.creationDate|dateFormat:{time:true}) }}</span>\n </small>\n </ion-col>\n </ion-row>\n\n <!-- actions -->\n <ion-row *ngIf=\"item.actions|isNotEmptyArray\">\n <ion-col></ion-col>\n <ion-col size=\"auto\">\n <ng-container *ngFor=\"let action of item.actions\">\n <a *ngIf=\"!action.default\" class=\"action\" (click)=\"executeAction($event, action, item)\" [title]=\"(action.title || action.name) |translate\">\n <app-icon *ngIf=\"action.iconRef\" slot=\"start\" height=\"20\" width=\"20\" [ref]=\"action.iconRef\"></app-icon>\n <span>{{ action.name | translate }}</span>\n </a>\n </ng-container>\n </ion-col>\n </ion-row>\n\n </ion-grid>\n\n <mat-icon slot=\"end\" *ngIf=\"item.actions|arrayFilter: isDefaultAction|isNotEmptyArray\">chevron_right</mat-icon>\n </ion-item>\n\n <!-- loading -->\n <ng-container *ngIf=\"!($items|async); else notLoading\">\n <ng-container *ngTemplateOutlet=\"loadingItem\"></ng-container>\n </ng-container>\n\n <ng-template #notLoading>\n <!-- no result -->\n <ion-item *ngIf=\"$items|async|isEmptyArray\" lines=\"none\">\n <ion-text color=\"dark\" class=\"text-italic\">{{'SOCIAL.USER_EVENT.NOTIFICATION.EMPTY' | translate}}</ion-text>\n </ion-item>\n\n <!-- Fetching more -->\n <ng-container *ngIf=\"fetchingMore; else infiniteLoop\" lines=\"none\" disabled>\n <ng-container *ngTemplateOutlet=\"loadingItem\"></ng-container>\n </ng-container>\n\n <!-- Infinite loop -->\n <ng-template #infiniteLoop>\n <ng-container *ngIf=\"canFetchMore\" lines=\"none\" disabled\n [ngTemplateOutlet]=\"loadingItem\">\n </ng-container>\n </ng-template>\n </ng-template>\n\n <!-- footer -->\n <ion-row class=\"ion-list-footer column\">\n <ion-col>\n <ion-text *ngIf=\"$itemCount|async; let count\"\n class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n </ion-col>\n </ion-row>\n\n </ion-list>\n</ion-content>\n\n<!-- loading -->\n<ng-template #loadingItem>\n <ion-item lines=\"none\" disabled>\n <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n </ion-item>\n</ng-template>\n", styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;user-select:none;max-height:calc(90vh - 20px)}ion-list ion-item.tappable{cursor:pointer}ion-list ion-item.tappable:hover{--ion-item-background: var(--ion-item-background-color-hover)}.message{font-size:.9em}.message p{margin-top:5px;margin-bottom:5px}.top-action{text-align:end;margin-right:8px}.top-action a{cursor:pointer;color:var(--ion-color-contrast)}.top-action a:hover{text-decoration:underline}a.action{font-size:.9em;margin-right:10px;cursor:pointer}a.action:hover span{text-decoration:underline}a.action app-icon{vertical-align:middle}ion-avatar img,ion-avatar .avatar svg{border:1px solid rgba(var(--ion-color-secondary-rgb, .5));border-radius:50%}\n"] }]
|
|
@@ -31644,6 +31647,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
31644
31647
|
}, {
|
|
31645
31648
|
type: Inject,
|
|
31646
31649
|
args: [APP_USER_EVENT_SERVICE]
|
|
31650
|
+
}] }, { type: undefined, decorators: [{
|
|
31651
|
+
type: Optional
|
|
31652
|
+
}, {
|
|
31653
|
+
type: Inject,
|
|
31654
|
+
args: [APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD]
|
|
31647
31655
|
}] }]; }, propDecorators: { debug: [{
|
|
31648
31656
|
type: Input
|
|
31649
31657
|
}], mobile: [{
|
|
@@ -31658,6 +31666,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
31658
31666
|
type: Input
|
|
31659
31667
|
}], enableInfiniteScroll: [{
|
|
31660
31668
|
type: Input
|
|
31669
|
+
}], infiniteScrollThreshold: [{
|
|
31670
|
+
type: Input
|
|
31661
31671
|
}], pageSize: [{
|
|
31662
31672
|
type: Input
|
|
31663
31673
|
}], readEvent: [{
|