@alfresco/adf-core 8.4.0-18487737713 → 8.4.0-18526997709

package/bundles/assets/adf-core/i18n/en.json

@@ -24,6 +24,7 @@
   "CLOSE": "CLOSE",
   "NOTIFICATIONS": {
     "NO_MESSAGE": "You have no notifications at this time.",
+    "UNREAD_MESSAGES": "You have unread notifications.",
     "TITLE": "Notifications",
     "MARK_AS_READ": "Mark all as read",
     "SYSTEM": "System",

package/fesm2022/adf-core.mjs

@@ -27256,7 +27256,7 @@ class NotificationHistoryComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NotificationHistoryComponent, deps: [{ token: NotificationService }, { token: StorageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: NotificationHistoryComponent, isStandalone: true, selector: "adf-notification-history", inputs: { menuPositionX: "menuPositionX", menuPositionY: "menuPositionY", maxNotifications: "maxNotifications" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true, static: true }], ngImport: i0, template: "<button mat-button\n        [matMenuTriggerFor]=\"menu\"\n        aria-hidden=\"false\"\n        [attr.aria-label]=\"'NOTIFICATIONS.OPEN_HISTORY' | translate\"\n        title=\"{{ 'NOTIFICATIONS.OPEN_HISTORY' | translate }}\"\n        class=\"adf-notification-history-menu_button\"\n        id=\"adf-notification-history-open-button\"\n        (menuOpened)=\"onMenuOpened()\">\n    <mat-icon matBadge=\"&#8288;\"\n              [matBadgeHidden]=\"!notifications.length\"\n              class=\"adf-notification-history-menu_button-icon\"\n              matBadgeColor=\"accent\"\n              matBadgeSize=\"small\">notifications\n    </mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\"\n          [xPosition]=\"menuPositionX\"\n          [yPosition]=\"menuPositionY\"\n          id=\"adf-notification-history-menu\"\n          class=\"adf-notification-history-menu adf-notification-history-menu-panel\">\n    <div class=\"adf-notification-history-list-header\">\n        <span class=\"adf-notification-history-menu-title\">{{ 'NOTIFICATIONS.TITLE' | translate }}</span>\n        <button mat-menu-item\n                *ngIf=\"notifications.length\"\n                id=\"adf-notification-history-mark-as-read\"\n                class=\"adf-notification-history-mark-as-read\"\n                title=\"{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}\"\n                (click)=\"markAsRead()\">\n            <mat-icon class=\"adf-notification-history-mark-as-read-icon\">done_all</mat-icon>\n        </button>\n    </div>\n\n    <mat-divider/>\n\n    <div class=\"adf-notification-history-item-list\">\n        <ng-container *ngIf=\"notifications.length; else empty_list_template\">\n            <button mat-menu-item\n                    *ngFor=\"let notification of paginatedNotifications\"\n                    (click)=\"onNotificationClick(notification, $event)\"\n                    class=\"adf-notification-history-menu-item\">\n                <div class=\"adf-notification-history-menu-item-content\">\n                    <div *ngIf=\"notification.initiator; else no_avatar\"\n                         [outerHTML]=\"notification.initiator | usernameInitials : 'adf-notification-initiator-pic'\"></div>\n                    <ng-template #no_avatar>\n                        <mat-icon class=\"adf-notification-history-menu-initiator\">\n                            {{ notification.icon }}\n                        </mat-icon>\n                    </ng-template>\n                    <div class=\"adf-notification-history-menu-item-content-message\">\n                        <p class=\"adf-notification-history-menu-text adf-notification-history-menu-message\"\n                           *ngFor=\"let message of notification.messages\"\n                           [title]=\"message\">{{ message }}</p>\n                        <p class=\"adf-notification-history-menu-text adf-notification-history-menu-date\"\n                        > {{ notification.datetime | adfTimeAgo }} </p>\n                    </div>\n                </div>\n            </button>\n        </ng-container>\n        <ng-template #empty_list_template>\n            <p mat-menu-item id=\"adf-notification-history-component-no-message\"\n               class=\"adf-notification-history-menu-no-message-text\">\n                {{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}\n            </p>\n        </ng-template>\n    </div>\n\n    <mat-divider/>\n\n    <div class=\"adf-notification-history-load-more\" *ngIf=\"hasMoreNotifications()\">\n        <button mat-menu-item (click)=\"loadMore($event)\">\n            {{ 'NOTIFICATIONS.LOAD_MORE' | translate }}\n        </button>\n    </div>\n</mat-menu>\n", styles: [".adf-notification-history-menu-title{font-size:14px;-webkit-font-smoothing:subpixel-antialiased}.adf-notification-history-menu_button.mat-mdc-button{border-radius:90%;padding:0;min-width:40px;height:40px;margin-top:1px}.adf-notification-history-menu_button.mat-mdc-button .adf-notification-history-menu_button-icon{margin-right:0;font-size:24px;height:24px;width:24px;color:var(--theme-text-color)}.adf-notification-history-menu .adf-notification-history-list-header{padding:10.5px 16px;display:flex;justify-content:space-between;align-items:center}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read{display:flex;padding:10px;width:auto;margin:4px 0}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:hover,.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:focus,.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:active{background:none}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read-icon{margin:0;color:inherit}.adf-notification-history-menu .adf-notification-history-menu-title{line-height:28px}.adf-notification-history-menu .adf-notification-history-item-list{padding-top:8px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item{cursor:pointer;height:72px;align-items:center;display:block;padding:0 14px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content{height:100%;display:flex;align-items:center}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content-message{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;overflow:hidden;padding:0 0 0 16px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content-message p{line-height:normal;margin:0;color:var(--theme-sidenav-user-menu-color)}.adf-notification-history-menu .adf-notification-history-menu-item:focus{outline:none;background:var(--adf-theme-background-hover-color)}.adf-notification-history-menu .adf-notification-history-menu-item:hover{background-color:var(--adf-theme-background-hover-color)}.adf-notification-history-menu .adf-notification-history-menu-message:is(p){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--theme-body-1-font-size)}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-no-message-text{color:var(--theme-sidenav-user-menu-color);margin:0;padding:12px 16px;opacity:inherit;border:none}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-no-message-text span{font-size:16px;-webkit-font-smoothing:subpixel-antialiased}.adf-notification-history-menu .adf-notification-history-menu-date.adf-notification-history-menu-text:is(p){font-size:var(--theme-caption-font-size);text-indent:3px}.adf-notification-history-menu .adf-notification-history-menu-initiator{margin:4px}.adf-notification-initiator-pic{min-width:40px;background:var(--theme-accent-color);display:inline-block;height:40px;border-radius:100px;text-align:center;font-weight:bolder;font-size:var(--theme-adf-picture-1-font-size);text-transform:uppercase;vertical-align:middle;line-height:40px;color:var(--adf-theme-mat-grey-color-a200)}.adf-notification-history-load-more{display:flex;justify-content:center;padding:10px}.adf-notification-history-load-more button{justify-content:center;width:100%;min-height:36px}.mat-mdc-menu-panel.adf-notification-history-menu.adf-notification-history-menu-panel{min-width:320px;max-height:500px}.mat-mdc-menu-panel.adf-notification-history-menu.adf-notification-history-menu-panel .mat-mdc-menu-content{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i6$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: TimeAgoPipe, name: "adfTimeAgo" }, { kind: "pipe", type: InitialUsernamePipe, name: "usernameInitials" }, { kind: "ngmodule", type: MatSnackBarModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: NotificationHistoryComponent, isStandalone: true, selector: "adf-notification-history", inputs: { menuPositionX: "menuPositionX", menuPositionY: "menuPositionY", maxNotifications: "maxNotifications" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true, static: true }], ngImport: i0, template: "<button mat-button\n        [matMenuTriggerFor]=\"menu\"\n        aria-hidden=\"false\"\n        [attr.aria-label]=\"('NOTIFICATIONS.' + (notifications.length ? 'UNREAD_MESSAGES' : 'NO_MESSAGE') | translate) + ' ' + ('NOTIFICATIONS.OPEN_HISTORY' | translate)\"\n        title=\"{{ 'NOTIFICATIONS.OPEN_HISTORY' | translate }}\"\n        class=\"adf-notification-history-menu_button\"\n        id=\"adf-notification-history-open-button\"\n        (menuOpened)=\"onMenuOpened()\">\n    <mat-icon matBadge=\"&#8288;\"\n              [matBadgeHidden]=\"!notifications.length\"\n              class=\"adf-notification-history-menu_button-icon\"\n              matBadgeColor=\"accent\"\n              matBadgeSize=\"small\">notifications\n    </mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\"\n          [xPosition]=\"menuPositionX\"\n          [yPosition]=\"menuPositionY\"\n          id=\"adf-notification-history-menu\"\n          class=\"adf-notification-history-menu adf-notification-history-menu-panel\">\n    <div class=\"adf-notification-history-list-header\">\n        <span class=\"adf-notification-history-menu-title\">{{ 'NOTIFICATIONS.TITLE' | translate }}</span>\n        <button mat-menu-item\n                *ngIf=\"notifications.length\"\n                id=\"adf-notification-history-mark-as-read\"\n                class=\"adf-notification-history-mark-as-read\"\n                title=\"{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}\"\n                (click)=\"markAsRead()\">\n            <mat-icon class=\"adf-notification-history-mark-as-read-icon\">done_all</mat-icon>\n        </button>\n    </div>\n\n    <mat-divider/>\n\n    <div class=\"adf-notification-history-item-list\">\n        <ng-container *ngIf=\"notifications.length; else empty_list_template\">\n            <button mat-menu-item\n                    *ngFor=\"let notification of paginatedNotifications\"\n                    (click)=\"onNotificationClick(notification, $event)\"\n                    class=\"adf-notification-history-menu-item\">\n                <div class=\"adf-notification-history-menu-item-content\">\n                    <div *ngIf=\"notification.initiator; else no_avatar\"\n                         [outerHTML]=\"notification.initiator | usernameInitials : 'adf-notification-initiator-pic'\"></div>\n                    <ng-template #no_avatar>\n                        <mat-icon class=\"adf-notification-history-menu-initiator\">\n                            {{ notification.icon }}\n                        </mat-icon>\n                    </ng-template>\n                    <div class=\"adf-notification-history-menu-item-content-message\">\n                        <p class=\"adf-notification-history-menu-text adf-notification-history-menu-message\"\n                           *ngFor=\"let message of notification.messages\"\n                           [title]=\"message\">{{ message }}</p>\n                        <p class=\"adf-notification-history-menu-text adf-notification-history-menu-date\"\n                        > {{ notification.datetime | adfTimeAgo }} </p>\n                    </div>\n                </div>\n            </button>\n        </ng-container>\n        <ng-template #empty_list_template>\n            <p mat-menu-item id=\"adf-notification-history-component-no-message\"\n               class=\"adf-notification-history-menu-no-message-text\">\n                {{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}\n            </p>\n        </ng-template>\n    </div>\n\n    <mat-divider/>\n\n    <div class=\"adf-notification-history-load-more\" *ngIf=\"hasMoreNotifications()\">\n        <button mat-menu-item (click)=\"loadMore($event)\">\n            {{ 'NOTIFICATIONS.LOAD_MORE' | translate }}\n        </button>\n    </div>\n</mat-menu>\n", styles: [".adf-notification-history-menu-title{font-size:14px;-webkit-font-smoothing:subpixel-antialiased}.adf-notification-history-menu_button.mat-mdc-button{border-radius:90%;padding:0;min-width:40px;height:40px;margin-top:1px}.adf-notification-history-menu_button.mat-mdc-button .adf-notification-history-menu_button-icon{margin-right:0;font-size:24px;height:24px;width:24px;color:var(--theme-text-color)}.adf-notification-history-menu .adf-notification-history-list-header{padding:10.5px 16px;display:flex;justify-content:space-between;align-items:center}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read{display:flex;padding:10px;width:auto;margin:4px 0}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:hover,.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:focus,.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:active{background:none}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read-icon{margin:0;color:inherit}.adf-notification-history-menu .adf-notification-history-menu-title{line-height:28px}.adf-notification-history-menu .adf-notification-history-item-list{padding-top:8px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item{cursor:pointer;height:72px;align-items:center;display:block;padding:0 14px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content{height:100%;display:flex;align-items:center}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content-message{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;overflow:hidden;padding:0 0 0 16px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content-message p{line-height:normal;margin:0;color:var(--theme-sidenav-user-menu-color)}.adf-notification-history-menu .adf-notification-history-menu-item:focus{outline:none;background:var(--adf-theme-background-hover-color)}.adf-notification-history-menu .adf-notification-history-menu-item:hover{background-color:var(--adf-theme-background-hover-color)}.adf-notification-history-menu .adf-notification-history-menu-message:is(p){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--theme-body-1-font-size)}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-no-message-text{color:var(--theme-sidenav-user-menu-color);margin:0;padding:12px 16px;opacity:inherit;border:none}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-no-message-text span{font-size:16px;-webkit-font-smoothing:subpixel-antialiased}.adf-notification-history-menu .adf-notification-history-menu-date.adf-notification-history-menu-text:is(p){font-size:var(--theme-caption-font-size);text-indent:3px}.adf-notification-history-menu .adf-notification-history-menu-initiator{margin:4px}.adf-notification-initiator-pic{min-width:40px;background:var(--theme-accent-color);display:inline-block;height:40px;border-radius:100px;text-align:center;font-weight:bolder;font-size:var(--theme-adf-picture-1-font-size);text-transform:uppercase;vertical-align:middle;line-height:40px;color:var(--adf-theme-mat-grey-color-a200)}.adf-notification-history-load-more{display:flex;justify-content:center;padding:10px}.adf-notification-history-load-more button{justify-content:center;width:100%;min-height:36px}.mat-mdc-menu-panel.adf-notification-history-menu.adf-notification-history-menu-panel{min-width:320px;max-height:500px}.mat-mdc-menu-panel.adf-notification-history-menu.adf-notification-history-menu-panel .mat-mdc-menu-content{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i6$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: TimeAgoPipe, name: "adfTimeAgo" }, { kind: "pipe", type: InitialUsernamePipe, name: "usernameInitials" }, { kind: "ngmodule", type: MatSnackBarModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NotificationHistoryComponent, decorators: [{
             type: Component,
@@ -27272,7 +27272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         TimeAgoPipe,
                         InitialUsernamePipe,
                         MatSnackBarModule
-                    ], encapsulation: ViewEncapsulation.None, template: "<button mat-button\n        [matMenuTriggerFor]=\"menu\"\n        aria-hidden=\"false\"\n        [attr.aria-label]=\"'NOTIFICATIONS.OPEN_HISTORY' | translate\"\n        title=\"{{ 'NOTIFICATIONS.OPEN_HISTORY' | translate }}\"\n        class=\"adf-notification-history-menu_button\"\n        id=\"adf-notification-history-open-button\"\n        (menuOpened)=\"onMenuOpened()\">\n    <mat-icon matBadge=\"&#8288;\"\n              [matBadgeHidden]=\"!notifications.length\"\n              class=\"adf-notification-history-menu_button-icon\"\n              matBadgeColor=\"accent\"\n              matBadgeSize=\"small\">notifications\n    </mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\"\n          [xPosition]=\"menuPositionX\"\n          [yPosition]=\"menuPositionY\"\n          id=\"adf-notification-history-menu\"\n          class=\"adf-notification-history-menu adf-notification-history-menu-panel\">\n    <div class=\"adf-notification-history-list-header\">\n        <span class=\"adf-notification-history-menu-title\">{{ 'NOTIFICATIONS.TITLE' | translate }}</span>\n        <button mat-menu-item\n                *ngIf=\"notifications.length\"\n                id=\"adf-notification-history-mark-as-read\"\n                class=\"adf-notification-history-mark-as-read\"\n                title=\"{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}\"\n                (click)=\"markAsRead()\">\n            <mat-icon class=\"adf-notification-history-mark-as-read-icon\">done_all</mat-icon>\n        </button>\n    </div>\n\n    <mat-divider/>\n\n    <div class=\"adf-notification-history-item-list\">\n        <ng-container *ngIf=\"notifications.length; else empty_list_template\">\n            <button mat-menu-item\n                    *ngFor=\"let notification of paginatedNotifications\"\n                    (click)=\"onNotificationClick(notification, $event)\"\n                    class=\"adf-notification-history-menu-item\">\n                <div class=\"adf-notification-history-menu-item-content\">\n                    <div *ngIf=\"notification.initiator; else no_avatar\"\n                         [outerHTML]=\"notification.initiator | usernameInitials : 'adf-notification-initiator-pic'\"></div>\n                    <ng-template #no_avatar>\n                        <mat-icon class=\"adf-notification-history-menu-initiator\">\n                            {{ notification.icon }}\n                        </mat-icon>\n                    </ng-template>\n                    <div class=\"adf-notification-history-menu-item-content-message\">\n                        <p class=\"adf-notification-history-menu-text adf-notification-history-menu-message\"\n                           *ngFor=\"let message of notification.messages\"\n                           [title]=\"message\">{{ message }}</p>\n                        <p class=\"adf-notification-history-menu-text adf-notification-history-menu-date\"\n                        > {{ notification.datetime | adfTimeAgo }} </p>\n                    </div>\n                </div>\n            </button>\n        </ng-container>\n        <ng-template #empty_list_template>\n            <p mat-menu-item id=\"adf-notification-history-component-no-message\"\n               class=\"adf-notification-history-menu-no-message-text\">\n                {{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}\n            </p>\n        </ng-template>\n    </div>\n\n    <mat-divider/>\n\n    <div class=\"adf-notification-history-load-more\" *ngIf=\"hasMoreNotifications()\">\n        <button mat-menu-item (click)=\"loadMore($event)\">\n            {{ 'NOTIFICATIONS.LOAD_MORE' | translate }}\n        </button>\n    </div>\n</mat-menu>\n", styles: [".adf-notification-history-menu-title{font-size:14px;-webkit-font-smoothing:subpixel-antialiased}.adf-notification-history-menu_button.mat-mdc-button{border-radius:90%;padding:0;min-width:40px;height:40px;margin-top:1px}.adf-notification-history-menu_button.mat-mdc-button .adf-notification-history-menu_button-icon{margin-right:0;font-size:24px;height:24px;width:24px;color:var(--theme-text-color)}.adf-notification-history-menu .adf-notification-history-list-header{padding:10.5px 16px;display:flex;justify-content:space-between;align-items:center}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read{display:flex;padding:10px;width:auto;margin:4px 0}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:hover,.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:focus,.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:active{background:none}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read-icon{margin:0;color:inherit}.adf-notification-history-menu .adf-notification-history-menu-title{line-height:28px}.adf-notification-history-menu .adf-notification-history-item-list{padding-top:8px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item{cursor:pointer;height:72px;align-items:center;display:block;padding:0 14px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content{height:100%;display:flex;align-items:center}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content-message{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;overflow:hidden;padding:0 0 0 16px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content-message p{line-height:normal;margin:0;color:var(--theme-sidenav-user-menu-color)}.adf-notification-history-menu .adf-notification-history-menu-item:focus{outline:none;background:var(--adf-theme-background-hover-color)}.adf-notification-history-menu .adf-notification-history-menu-item:hover{background-color:var(--adf-theme-background-hover-color)}.adf-notification-history-menu .adf-notification-history-menu-message:is(p){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--theme-body-1-font-size)}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-no-message-text{color:var(--theme-sidenav-user-menu-color);margin:0;padding:12px 16px;opacity:inherit;border:none}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-no-message-text span{font-size:16px;-webkit-font-smoothing:subpixel-antialiased}.adf-notification-history-menu .adf-notification-history-menu-date.adf-notification-history-menu-text:is(p){font-size:var(--theme-caption-font-size);text-indent:3px}.adf-notification-history-menu .adf-notification-history-menu-initiator{margin:4px}.adf-notification-initiator-pic{min-width:40px;background:var(--theme-accent-color);display:inline-block;height:40px;border-radius:100px;text-align:center;font-weight:bolder;font-size:var(--theme-adf-picture-1-font-size);text-transform:uppercase;vertical-align:middle;line-height:40px;color:var(--adf-theme-mat-grey-color-a200)}.adf-notification-history-load-more{display:flex;justify-content:center;padding:10px}.adf-notification-history-load-more button{justify-content:center;width:100%;min-height:36px}.mat-mdc-menu-panel.adf-notification-history-menu.adf-notification-history-menu-panel{min-width:320px;max-height:500px}.mat-mdc-menu-panel.adf-notification-history-menu.adf-notification-history-menu-panel .mat-mdc-menu-content{padding:0}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<button mat-button\n        [matMenuTriggerFor]=\"menu\"\n        aria-hidden=\"false\"\n        [attr.aria-label]=\"('NOTIFICATIONS.' + (notifications.length ? 'UNREAD_MESSAGES' : 'NO_MESSAGE') | translate) + ' ' + ('NOTIFICATIONS.OPEN_HISTORY' | translate)\"\n        title=\"{{ 'NOTIFICATIONS.OPEN_HISTORY' | translate }}\"\n        class=\"adf-notification-history-menu_button\"\n        id=\"adf-notification-history-open-button\"\n        (menuOpened)=\"onMenuOpened()\">\n    <mat-icon matBadge=\"&#8288;\"\n              [matBadgeHidden]=\"!notifications.length\"\n              class=\"adf-notification-history-menu_button-icon\"\n              matBadgeColor=\"accent\"\n              matBadgeSize=\"small\">notifications\n    </mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\"\n          [xPosition]=\"menuPositionX\"\n          [yPosition]=\"menuPositionY\"\n          id=\"adf-notification-history-menu\"\n          class=\"adf-notification-history-menu adf-notification-history-menu-panel\">\n    <div class=\"adf-notification-history-list-header\">\n        <span class=\"adf-notification-history-menu-title\">{{ 'NOTIFICATIONS.TITLE' | translate }}</span>\n        <button mat-menu-item\n                *ngIf=\"notifications.length\"\n                id=\"adf-notification-history-mark-as-read\"\n                class=\"adf-notification-history-mark-as-read\"\n                title=\"{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}\"\n                (click)=\"markAsRead()\">\n            <mat-icon class=\"adf-notification-history-mark-as-read-icon\">done_all</mat-icon>\n        </button>\n    </div>\n\n    <mat-divider/>\n\n    <div class=\"adf-notification-history-item-list\">\n        <ng-container *ngIf=\"notifications.length; else empty_list_template\">\n            <button mat-menu-item\n                    *ngFor=\"let notification of paginatedNotifications\"\n                    (click)=\"onNotificationClick(notification, $event)\"\n                    class=\"adf-notification-history-menu-item\">\n                <div class=\"adf-notification-history-menu-item-content\">\n                    <div *ngIf=\"notification.initiator; else no_avatar\"\n                         [outerHTML]=\"notification.initiator | usernameInitials : 'adf-notification-initiator-pic'\"></div>\n                    <ng-template #no_avatar>\n                        <mat-icon class=\"adf-notification-history-menu-initiator\">\n                            {{ notification.icon }}\n                        </mat-icon>\n                    </ng-template>\n                    <div class=\"adf-notification-history-menu-item-content-message\">\n                        <p class=\"adf-notification-history-menu-text adf-notification-history-menu-message\"\n                           *ngFor=\"let message of notification.messages\"\n                           [title]=\"message\">{{ message }}</p>\n                        <p class=\"adf-notification-history-menu-text adf-notification-history-menu-date\"\n                        > {{ notification.datetime | adfTimeAgo }} </p>\n                    </div>\n                </div>\n            </button>\n        </ng-container>\n        <ng-template #empty_list_template>\n            <p mat-menu-item id=\"adf-notification-history-component-no-message\"\n               class=\"adf-notification-history-menu-no-message-text\">\n                {{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}\n            </p>\n        </ng-template>\n    </div>\n\n    <mat-divider/>\n\n    <div class=\"adf-notification-history-load-more\" *ngIf=\"hasMoreNotifications()\">\n        <button mat-menu-item (click)=\"loadMore($event)\">\n            {{ 'NOTIFICATIONS.LOAD_MORE' | translate }}\n        </button>\n    </div>\n</mat-menu>\n", styles: [".adf-notification-history-menu-title{font-size:14px;-webkit-font-smoothing:subpixel-antialiased}.adf-notification-history-menu_button.mat-mdc-button{border-radius:90%;padding:0;min-width:40px;height:40px;margin-top:1px}.adf-notification-history-menu_button.mat-mdc-button .adf-notification-history-menu_button-icon{margin-right:0;font-size:24px;height:24px;width:24px;color:var(--theme-text-color)}.adf-notification-history-menu .adf-notification-history-list-header{padding:10.5px 16px;display:flex;justify-content:space-between;align-items:center}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read{display:flex;padding:10px;width:auto;margin:4px 0}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:hover,.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:focus,.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read:active{background:none}.adf-notification-history-menu .adf-notification-history-list-header .adf-notification-history-mark-as-read-icon{margin:0;color:inherit}.adf-notification-history-menu .adf-notification-history-menu-title{line-height:28px}.adf-notification-history-menu .adf-notification-history-item-list{padding-top:8px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item{cursor:pointer;height:72px;align-items:center;display:block;padding:0 14px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content{height:100%;display:flex;align-items:center}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content-message{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;overflow:hidden;padding:0 0 0 16px}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-item-content-message p{line-height:normal;margin:0;color:var(--theme-sidenav-user-menu-color)}.adf-notification-history-menu .adf-notification-history-menu-item:focus{outline:none;background:var(--adf-theme-background-hover-color)}.adf-notification-history-menu .adf-notification-history-menu-item:hover{background-color:var(--adf-theme-background-hover-color)}.adf-notification-history-menu .adf-notification-history-menu-message:is(p){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--theme-body-1-font-size)}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-no-message-text{color:var(--theme-sidenav-user-menu-color);margin:0;padding:12px 16px;opacity:inherit;border:none}.adf-notification-history-menu .adf-notification-history-item-list .adf-notification-history-menu-no-message-text span{font-size:16px;-webkit-font-smoothing:subpixel-antialiased}.adf-notification-history-menu .adf-notification-history-menu-date.adf-notification-history-menu-text:is(p){font-size:var(--theme-caption-font-size);text-indent:3px}.adf-notification-history-menu .adf-notification-history-menu-initiator{margin:4px}.adf-notification-initiator-pic{min-width:40px;background:var(--theme-accent-color);display:inline-block;height:40px;border-radius:100px;text-align:center;font-weight:bolder;font-size:var(--theme-adf-picture-1-font-size);text-transform:uppercase;vertical-align:middle;line-height:40px;color:var(--adf-theme-mat-grey-color-a200)}.adf-notification-history-load-more{display:flex;justify-content:center;padding:10px}.adf-notification-history-load-more button{justify-content:center;width:100%;min-height:36px}.mat-mdc-menu-panel.adf-notification-history-menu.adf-notification-history-menu-panel{min-width:320px;max-height:500px}.mat-mdc-menu-panel.adf-notification-history-menu.adf-notification-history-menu-panel .mat-mdc-menu-content{padding:0}\n"] }]
         }], ctorParameters: () => [{ type: NotificationService }, { type: StorageService }, { type: i0.ChangeDetectorRef }], propDecorators: { trigger: [{
                 type: ViewChild,
                 args: [MatMenuTrigger, { static: true }]