barsa-sap-ui 1.0.327 → 1.0.329

package/fesm2020/barsa-sap-ui.mjs

@@ -5308,10 +5308,10 @@ class NotificationItemComponent extends BaseComponent {
     }
 }
 NotificationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NotificationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NotificationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: NotificationItemComponent, selector: "bsu-notification-item", inputs: { option: "option", notificationItem: "notificationItem", showCloseButton: "showCloseButton", deviceSize: "deviceSize" }, outputs: { viewed: "viewed", remove: "remove", actionClick: "actionClick", show: "show", close: "close" }, host: { properties: { "class": "this._deviceSize" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"notificationItem ? notificationItemTemplate : optionTemplate\"> </ng-container>\n\n<ng-template #optionTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n                choiceDefStatus: null,\n                isNew: false,\n                loading: false,\n                icon: option.icon,\n                statusCaption: '',\n                unread: true,\n                title: option.title,\n                content: option.msg,\n                userCaption: option.NotificationItem?.CreatorUser$Caption,\n                dateCaption: option.NotificationItem?.CreationDate$Caption,\n                overflowButtons: false,\n                uiActions: option.NotificationItem?.UiActions,\n                hideShowButton: true,\n                hideDeleteButton: true,\n                mo: option.mo\n            }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #notificationItemTemplate>\n    <fd-notification>\n        <ng-container\n            *ngTemplateOutlet=\"\n                bodyTemplate;\n                context: {\n                    choiceDefStatus: notificationItem.$ChoiceDefStatus,\n                    isNew: notificationItem.$NewNotification,\n                    loading: notificationItem.$NotificatoinLoading,\n                    icon: notificationItem.Icon,\n                    statusCaption: notificationItem.Status$Caption,\n                    unread: notificationItem.Unread,\n                    title: notificationItem.Title,\n                    content: notificationItem.$SafeContent,\n                    userCaption: notificationItem.IMessage?.CreatorUser$Caption,\n                    dateCaption: notificationItem.IMessage?.CreationDate$Caption,\n                    overflowButtons: notificationItem.OverflowButtons || deviceSize === 's',\n                    uiActions: notificationItem.UiActions,\n                    hideShowButton: notificationItem.HideShowButton,\n                    hideDeleteButton: notificationItem.HideDeleteButton,\n                    mo: notificationItem\n                }\n            \"\n        ></ng-container>\n    </fd-notification>\n</ng-template>\n\n<ng-template\n    #bodyTemplate\n    let-choiceDefStatus=\"choiceDefStatus\"\n    let-isNew=\"isNew\"\n    let-loading=\"loading\"\n    let-icon=\"icon\"\n    let-statusCaption=\"statusCaption\"\n    let-unread=\"unread\"\n    let-title=\"title\"\n    let-content=\"content\"\n    let-userCaption=\"userCaption\"\n    let-dateCaption=\"dateCaption\"\n    let-overflowButtons=\"overflowButtons\"\n    let-uiActions=\"uiActions\"\n    let-hideShowButton=\"hideShowButton\"\n    let-hideDeleteButton=\"hideDeleteButton\"\n    let-mo=\"mo\"\n>\n    <fd-notification-body>\n        <fd-message-strip *ngIf=\"choiceDefStatus?.error\" type=\"error\" style=\"margin: 0.5rem\">\n            {{ choiceDefStatus.error.Text }}\n        </fd-message-strip>\n        <ng-container *ngIf=\"loading || isNew || choiceDefStatus?.loading\">\n            <bsu-mask [top]=\"'10px'\"></bsu-mask>\n        </ng-container>\n        <fd-avatar\n            [transparent]=\"true\"\n            [circle]=\"true\"\n            size=\"xs\"\n            [glyph]=\"!icon ? 'bell' : null\"\n            [image]=\"icon ? icon : null\"\n        ></fd-avatar>\n        <fd-notification-content style=\"overflow: hidden\">\n            <fd-notification-header>\n                <div fd-notification-indicator [type]=\"statusCaption\"></div>\n                <h2 fd-notification-title [unread]=\"unread\">{{ title }}</h2>\n            </fd-notification-header>\n            <p #content fd-notification-paragraph [innerHTML]=\"content\"></p>\n            <fd-notification-footer>\n                <span fd-notification-footer-content>{{ userCaption }}</span>\n                <span fd-notification-separator></span>\n                <span fd-notification-footer-content>{{ dateCaption }}</span>\n            </fd-notification-footer>\n        </fd-notification-content>\n        <fd-notification-actions>\n            <fd-action-sheet #sheet *ngIf=\"overflowButtons; else buttonsTpl\">\n                <fd-action-sheet-control>\n                    <button\n                        role=\"menu\"\n                        [ariaLabel]=\"'More' | bbbTranslate\"\n                        [title]=\"'More' | bbbTranslate\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"overflow\"\n                    ></button>\n                </fd-action-sheet-control>\n\n                <fd-action-sheet-body>\n                    <li\n                        *ngFor=\"let btn of uiActions\"\n                        fd-action-sheet-item\n                        [glyph]=\"btn.Icon\"\n                        [label]=\"btn.Title | bbbTranslate\"\n                        (click)=\"sheet.close(); actionClick.emit({ item: mo, btn: this.btn })\"\n                    ></li>\n                </fd-action-sheet-body>\n            </fd-action-sheet>\n            <ng-template #buttonsTpl>\n                <button\n                    *ngFor=\"let btn of uiActions\"\n                    fd-button\n                    [glyph]=\"btn.Icon\"\n                    [fdType]=\"btn.Status\"\n                    [label]=\"btn.Title | bbbTranslate\"\n                    fdCompact\n                    (click)=\"actionClick.emit({ item: mo, btn: this.btn })\"\n                ></button>\n            </ng-template>\n            <button\n                *ngIf=\"!hideShowButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'Show' | bbbTranslate\"\n                [title]=\"'Show' | bbbTranslate\"\n                glyph=\"show\"\n                (click)=\"show.emit({ mo: mo.RelatedMo, nama: mo.RelatedMoNama })\"\n                fdCompact\n            ></button>\n            <button\n                *ngIf=\"!hideDeleteButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'Delete' | bbbTranslate\"\n                [title]=\"'Delete' | bbbTranslate\"\n                glyph=\"decline\"\n                (click)=\"remove.emit({ items: [mo], silent: false })\"\n                fdCompact\n            ></button>\n\n            <button\n                *ngIf=\"showCloseButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'close' | bbbTranslate\"\n                [title]=\"'close' | bbbTranslate\"\n                glyph=\"decline\"\n                (click)=\"close.emit()\"\n                fdCompact\n            ></button>\n        </fd-notification-actions>\n    </fd-notification-body>\n</ng-template>\n", styles: ["fd-notification-content{min-width:320px}fd-notification-content p{max-height:3rem}:host.s fd-notification-content{min-width:auto!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.ActionSheetComponent, selector: "fd-action-sheet", inputs: ["mobile", "placement", "noArrow", "isOpen", "keyboardSupport", "triggers"], outputs: ["focusEscapeList", "isOpenChange"] }, { kind: "component", type: i2$3.ActionSheetControlComponent, selector: "fd-action-sheet-control", outputs: ["clicked"] }, { kind: "component", type: i2$3.ActionSheetItemComponent, selector: "[fd-action-sheet-item]", inputs: ["label", "glyph", "negative", "isCloseButton", "disabled"], outputs: ["keyDown"] }, { kind: "component", type: i2$3.ActionSheetBodyComponent, selector: "fd-action-sheet-body", inputs: ["actionSheetBodyId", "mobile", "ariaLabel", "ariaLabelledby"] }, { kind: "directive", type: i3$7.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i9$3.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "dismissLabel", "width", "minWidth", "marginBottom"], outputs: ["onDismiss"] }, { kind: "component", type: i7$4.NotificationComponent, selector: "fd-notification", inputs: ["width", "mobile"] }, { kind: "component", type: i7$4.NotificationHeaderComponent, selector: "fd-notification-header", inputs: ["uniqueId"] }, { kind: "component", type: i7$4.NotificationFooterComponent, selector: "fd-notification-footer" }, { kind: "component", type: i7$4.NotificationBodyComponent, selector: "fd-notification-body" }, { kind: "component", type: i7$4.NotificationActionsComponent, selector: "fd-notification-actions" }, { kind: "component", type: i7$4.NotificationContentComponent, selector: "fd-notification-content" }, { kind: "directive", type: i7$4.NotificationTitleDirective, selector: "[fdNotificationTitle], [fd-notification-title]", inputs: ["unread"] }, { kind: "directive", type: i7$4.NotificationIndicatorDirective, selector: "[fdNotificationIndicator], [fd-notification-indicator]", inputs: ["type", "class"] }, { kind: "directive", type: i7$4.NotificationParagraphDirective, selector: "[fdNotificationParagraph], [fd-notification-paragraph]" }, { kind: "directive", type: i7$4.NotificationFooterContentDirective, selector: "[fdNotificationFooterContent], [fd-notification-footer-content]" }, { kind: "directive", type: i7$4.NotificationSeparatorDirective, selector: "[fdNotificationSeparator], [fd-notification-separator]" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NotificationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: NotificationItemComponent, selector: "bsu-notification-item", inputs: { option: "option", notificationItem: "notificationItem", showCloseButton: "showCloseButton", deviceSize: "deviceSize" }, outputs: { viewed: "viewed", remove: "remove", actionClick: "actionClick", show: "show", close: "close" }, host: { properties: { "class": "this._deviceSize" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"notificationItem ? notificationItemTemplate : optionTemplate\"> </ng-container>\n\n<ng-template #optionTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n                choiceDefStatus: null,\n                isNew: false,\n                loading: false,\n                icon: option.icon,\n                statusCaption: '',\n                unread: true,\n                title: option.title,\n                content: option.msg,\n                userCaption: option.NotificationItem?.CreatorUser$Caption,\n                dateCaption: option.NotificationItem?.CreationDate$Caption,\n                overflowButtons: false,\n                uiActions: option.NotificationItem?.UiActions,\n                hideShowButton: true,\n                hideDeleteButton: true,\n                mo: option.mo\n            }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #notificationItemTemplate>\n    <fd-notification>\n        <ng-container\n            *ngTemplateOutlet=\"\n                bodyTemplate;\n                context: {\n                    choiceDefStatus: notificationItem.$ChoiceDefStatus,\n                    isNew: notificationItem.$NewNotification,\n                    loading: notificationItem.$NotificatoinLoading,\n                    icon: notificationItem.Icon,\n                    statusCaption: notificationItem.Status$Caption,\n                    unread: notificationItem.Unread,\n                    title: notificationItem.Title,\n                    content: notificationItem.$SafeContent,\n                    userCaption: notificationItem.IMessage?.CreatorUser$Caption,\n                    dateCaption: notificationItem.IMessage?.CreationDate$Caption,\n                    overflowButtons: notificationItem.OverflowButtons || deviceSize === 's',\n                    uiActions: notificationItem.UiActions,\n                    hideShowButton: notificationItem.HideShowButton,\n                    hideDeleteButton: notificationItem.HideDeleteButton,\n                    mo: notificationItem\n                }\n            \"\n        ></ng-container>\n    </fd-notification>\n</ng-template>\n\n<ng-template\n    #bodyTemplate\n    let-choiceDefStatus=\"choiceDefStatus\"\n    let-isNew=\"isNew\"\n    let-loading=\"loading\"\n    let-icon=\"icon\"\n    let-statusCaption=\"statusCaption\"\n    let-unread=\"unread\"\n    let-title=\"title\"\n    let-content=\"content\"\n    let-userCaption=\"userCaption\"\n    let-dateCaption=\"dateCaption\"\n    let-overflowButtons=\"overflowButtons\"\n    let-uiActions=\"uiActions\"\n    let-hideShowButton=\"hideShowButton\"\n    let-hideDeleteButton=\"hideDeleteButton\"\n    let-mo=\"mo\"\n>\n    <fd-notification-body>\n        <fd-message-strip *ngIf=\"choiceDefStatus?.error\" type=\"error\" style=\"margin: 0.5rem\">\n            {{ choiceDefStatus.error.Text }}\n        </fd-message-strip>\n        <ng-container *ngIf=\"loading || isNew || choiceDefStatus?.loading\">\n            <bsu-mask [top]=\"'10px'\"></bsu-mask>\n        </ng-container>\n        <fd-avatar\n            [transparent]=\"true\"\n            [circle]=\"true\"\n            size=\"xs\"\n            [glyph]=\"!icon ? 'bell' : null\"\n            [image]=\"icon ? icon : null\"\n        ></fd-avatar>\n        <fd-notification-content style=\"overflow: hidden\">\n            <fd-notification-header>\n                <div fd-notification-indicator [type]=\"statusCaption\"></div>\n                <h2 fd-notification-title [unread]=\"unread\">{{ title }}</h2>\n            </fd-notification-header>\n            <p #content fd-notification-paragraph [innerHTML]=\"content\"></p>\n            <fd-notification-footer>\n                <span fd-notification-footer-content>{{ userCaption }}</span>\n                <span fd-notification-separator></span>\n                <span fd-notification-footer-content>{{ dateCaption }}</span>\n            </fd-notification-footer>\n        </fd-notification-content>\n        <fd-notification-actions>\n            <fd-action-sheet #sheet *ngIf=\"overflowButtons; else buttonsTpl\">\n                <fd-action-sheet-control>\n                    <button\n                        role=\"menu\"\n                        [ariaLabel]=\"'More' | bbbTranslate\"\n                        [title]=\"'More' | bbbTranslate\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"overflow\"\n                    ></button>\n                </fd-action-sheet-control>\n\n                <fd-action-sheet-body>\n                    <li\n                        *ngFor=\"let btn of uiActions\"\n                        fd-action-sheet-item\n                        [glyph]=\"btn.Icon\"\n                        [label]=\"btn.Title | bbbTranslate\"\n                        (click)=\"sheet.close(); actionClick.emit({ item: mo, btn: this.btn })\"\n                    ></li>\n                </fd-action-sheet-body>\n            </fd-action-sheet>\n            <ng-template #buttonsTpl>\n                <button\n                    *ngFor=\"let btn of uiActions\"\n                    fd-button\n                    [glyph]=\"btn.Icon\"\n                    [fdType]=\"btn.Status\"\n                    [label]=\"btn.Title | bbbTranslate\"\n                    [title]=\"btn.Title | bbbTranslate\"\n                    fdCompact\n                    (click)=\"actionClick.emit({ item: mo, btn: this.btn })\"\n                ></button>\n            </ng-template>\n            <button\n                *ngIf=\"!hideShowButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'Show' | bbbTranslate\"\n                [title]=\"'Show' | bbbTranslate\"\n                glyph=\"show\"\n                (click)=\"show.emit({ mo: mo.RelatedMo, nama: mo.RelatedMoNama })\"\n                fdCompact\n            ></button>\n            <button\n                *ngIf=\"!hideDeleteButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'Delete' | bbbTranslate\"\n                [title]=\"'Delete' | bbbTranslate\"\n                glyph=\"decline\"\n                (click)=\"remove.emit({ items: [mo], silent: false })\"\n                fdCompact\n            ></button>\n\n            <button\n                *ngIf=\"showCloseButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'close' | bbbTranslate\"\n                [title]=\"'close' | bbbTranslate\"\n                glyph=\"decline\"\n                (click)=\"close.emit()\"\n                fdCompact\n            ></button>\n        </fd-notification-actions>\n    </fd-notification-body>\n</ng-template>\n", styles: ["fd-notification-content{min-width:320px}fd-notification-content p{max-height:3rem}:host.s fd-notification-content{min-width:auto!important}fd-notification-actions{max-width:200px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.ActionSheetComponent, selector: "fd-action-sheet", inputs: ["mobile", "placement", "noArrow", "isOpen", "keyboardSupport", "triggers"], outputs: ["focusEscapeList", "isOpenChange"] }, { kind: "component", type: i2$3.ActionSheetControlComponent, selector: "fd-action-sheet-control", outputs: ["clicked"] }, { kind: "component", type: i2$3.ActionSheetItemComponent, selector: "[fd-action-sheet-item]", inputs: ["label", "glyph", "negative", "isCloseButton", "disabled"], outputs: ["keyDown"] }, { kind: "component", type: i2$3.ActionSheetBodyComponent, selector: "fd-action-sheet-body", inputs: ["actionSheetBodyId", "mobile", "ariaLabel", "ariaLabelledby"] }, { kind: "directive", type: i3$7.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "backgroundImage", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i9$3.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "dismissLabel", "width", "minWidth", "marginBottom"], outputs: ["onDismiss"] }, { kind: "component", type: i7$4.NotificationComponent, selector: "fd-notification", inputs: ["width", "mobile"] }, { kind: "component", type: i7$4.NotificationHeaderComponent, selector: "fd-notification-header", inputs: ["uniqueId"] }, { kind: "component", type: i7$4.NotificationFooterComponent, selector: "fd-notification-footer" }, { kind: "component", type: i7$4.NotificationBodyComponent, selector: "fd-notification-body" }, { kind: "component", type: i7$4.NotificationActionsComponent, selector: "fd-notification-actions" }, { kind: "component", type: i7$4.NotificationContentComponent, selector: "fd-notification-content" }, { kind: "directive", type: i7$4.NotificationTitleDirective, selector: "[fdNotificationTitle], [fd-notification-title]", inputs: ["unread"] }, { kind: "directive", type: i7$4.NotificationIndicatorDirective, selector: "[fdNotificationIndicator], [fd-notification-indicator]", inputs: ["type", "class"] }, { kind: "directive", type: i7$4.NotificationParagraphDirective, selector: "[fdNotificationParagraph], [fd-notification-paragraph]" }, { kind: "directive", type: i7$4.NotificationFooterContentDirective, selector: "[fdNotificationFooterContent], [fd-notification-footer-content]" }, { kind: "directive", type: i7$4.NotificationSeparatorDirective, selector: "[fdNotificationSeparator], [fd-notification-separator]" }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NotificationItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-notification-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngTemplateOutlet=\"notificationItem ? notificationItemTemplate : optionTemplate\"> </ng-container>\n\n<ng-template #optionTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n                choiceDefStatus: null,\n                isNew: false,\n                loading: false,\n                icon: option.icon,\n                statusCaption: '',\n                unread: true,\n                title: option.title,\n                content: option.msg,\n                userCaption: option.NotificationItem?.CreatorUser$Caption,\n                dateCaption: option.NotificationItem?.CreationDate$Caption,\n                overflowButtons: false,\n                uiActions: option.NotificationItem?.UiActions,\n                hideShowButton: true,\n                hideDeleteButton: true,\n                mo: option.mo\n            }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #notificationItemTemplate>\n    <fd-notification>\n        <ng-container\n            *ngTemplateOutlet=\"\n                bodyTemplate;\n                context: {\n                    choiceDefStatus: notificationItem.$ChoiceDefStatus,\n                    isNew: notificationItem.$NewNotification,\n                    loading: notificationItem.$NotificatoinLoading,\n                    icon: notificationItem.Icon,\n                    statusCaption: notificationItem.Status$Caption,\n                    unread: notificationItem.Unread,\n                    title: notificationItem.Title,\n                    content: notificationItem.$SafeContent,\n                    userCaption: notificationItem.IMessage?.CreatorUser$Caption,\n                    dateCaption: notificationItem.IMessage?.CreationDate$Caption,\n                    overflowButtons: notificationItem.OverflowButtons || deviceSize === 's',\n                    uiActions: notificationItem.UiActions,\n                    hideShowButton: notificationItem.HideShowButton,\n                    hideDeleteButton: notificationItem.HideDeleteButton,\n                    mo: notificationItem\n                }\n            \"\n        ></ng-container>\n    </fd-notification>\n</ng-template>\n\n<ng-template\n    #bodyTemplate\n    let-choiceDefStatus=\"choiceDefStatus\"\n    let-isNew=\"isNew\"\n    let-loading=\"loading\"\n    let-icon=\"icon\"\n    let-statusCaption=\"statusCaption\"\n    let-unread=\"unread\"\n    let-title=\"title\"\n    let-content=\"content\"\n    let-userCaption=\"userCaption\"\n    let-dateCaption=\"dateCaption\"\n    let-overflowButtons=\"overflowButtons\"\n    let-uiActions=\"uiActions\"\n    let-hideShowButton=\"hideShowButton\"\n    let-hideDeleteButton=\"hideDeleteButton\"\n    let-mo=\"mo\"\n>\n    <fd-notification-body>\n        <fd-message-strip *ngIf=\"choiceDefStatus?.error\" type=\"error\" style=\"margin: 0.5rem\">\n            {{ choiceDefStatus.error.Text }}\n        </fd-message-strip>\n        <ng-container *ngIf=\"loading || isNew || choiceDefStatus?.loading\">\n            <bsu-mask [top]=\"'10px'\"></bsu-mask>\n        </ng-container>\n        <fd-avatar\n            [transparent]=\"true\"\n            [circle]=\"true\"\n            size=\"xs\"\n            [glyph]=\"!icon ? 'bell' : null\"\n            [image]=\"icon ? icon : null\"\n        ></fd-avatar>\n        <fd-notification-content style=\"overflow: hidden\">\n            <fd-notification-header>\n                <div fd-notification-indicator [type]=\"statusCaption\"></div>\n                <h2 fd-notification-title [unread]=\"unread\">{{ title }}</h2>\n            </fd-notification-header>\n            <p #content fd-notification-paragraph [innerHTML]=\"content\"></p>\n            <fd-notification-footer>\n                <span fd-notification-footer-content>{{ userCaption }}</span>\n                <span fd-notification-separator></span>\n                <span fd-notification-footer-content>{{ dateCaption }}</span>\n            </fd-notification-footer>\n        </fd-notification-content>\n        <fd-notification-actions>\n            <fd-action-sheet #sheet *ngIf=\"overflowButtons; else buttonsTpl\">\n                <fd-action-sheet-control>\n                    <button\n                        role=\"menu\"\n                        [ariaLabel]=\"'More' | bbbTranslate\"\n                        [title]=\"'More' | bbbTranslate\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"overflow\"\n                    ></button>\n                </fd-action-sheet-control>\n\n                <fd-action-sheet-body>\n                    <li\n                        *ngFor=\"let btn of uiActions\"\n                        fd-action-sheet-item\n                        [glyph]=\"btn.Icon\"\n                        [label]=\"btn.Title | bbbTranslate\"\n                        (click)=\"sheet.close(); actionClick.emit({ item: mo, btn: this.btn })\"\n                    ></li>\n                </fd-action-sheet-body>\n            </fd-action-sheet>\n            <ng-template #buttonsTpl>\n                <button\n                    *ngFor=\"let btn of uiActions\"\n                    fd-button\n                    [glyph]=\"btn.Icon\"\n                    [fdType]=\"btn.Status\"\n                    [label]=\"btn.Title | bbbTranslate\"\n                    fdCompact\n                    (click)=\"actionClick.emit({ item: mo, btn: this.btn })\"\n                ></button>\n            </ng-template>\n            <button\n                *ngIf=\"!hideShowButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'Show' | bbbTranslate\"\n                [title]=\"'Show' | bbbTranslate\"\n                glyph=\"show\"\n                (click)=\"show.emit({ mo: mo.RelatedMo, nama: mo.RelatedMoNama })\"\n                fdCompact\n            ></button>\n            <button\n                *ngIf=\"!hideDeleteButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'Delete' | bbbTranslate\"\n                [title]=\"'Delete' | bbbTranslate\"\n                glyph=\"decline\"\n                (click)=\"remove.emit({ items: [mo], silent: false })\"\n                fdCompact\n            ></button>\n\n            <button\n                *ngIf=\"showCloseButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'close' | bbbTranslate\"\n                [title]=\"'close' | bbbTranslate\"\n                glyph=\"decline\"\n                (click)=\"close.emit()\"\n                fdCompact\n            ></button>\n        </fd-notification-actions>\n    </fd-notification-body>\n</ng-template>\n", styles: ["fd-notification-content{min-width:320px}fd-notification-content p{max-height:3rem}:host.s fd-notification-content{min-width:auto!important}\n"] }]
+            args: [{ selector: 'bsu-notification-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngTemplateOutlet=\"notificationItem ? notificationItemTemplate : optionTemplate\"> </ng-container>\n\n<ng-template #optionTemplate>\n    <ng-container\n        *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n                choiceDefStatus: null,\n                isNew: false,\n                loading: false,\n                icon: option.icon,\n                statusCaption: '',\n                unread: true,\n                title: option.title,\n                content: option.msg,\n                userCaption: option.NotificationItem?.CreatorUser$Caption,\n                dateCaption: option.NotificationItem?.CreationDate$Caption,\n                overflowButtons: false,\n                uiActions: option.NotificationItem?.UiActions,\n                hideShowButton: true,\n                hideDeleteButton: true,\n                mo: option.mo\n            }\n        \"\n    ></ng-container>\n</ng-template>\n<ng-template #notificationItemTemplate>\n    <fd-notification>\n        <ng-container\n            *ngTemplateOutlet=\"\n                bodyTemplate;\n                context: {\n                    choiceDefStatus: notificationItem.$ChoiceDefStatus,\n                    isNew: notificationItem.$NewNotification,\n                    loading: notificationItem.$NotificatoinLoading,\n                    icon: notificationItem.Icon,\n                    statusCaption: notificationItem.Status$Caption,\n                    unread: notificationItem.Unread,\n                    title: notificationItem.Title,\n                    content: notificationItem.$SafeContent,\n                    userCaption: notificationItem.IMessage?.CreatorUser$Caption,\n                    dateCaption: notificationItem.IMessage?.CreationDate$Caption,\n                    overflowButtons: notificationItem.OverflowButtons || deviceSize === 's',\n                    uiActions: notificationItem.UiActions,\n                    hideShowButton: notificationItem.HideShowButton,\n                    hideDeleteButton: notificationItem.HideDeleteButton,\n                    mo: notificationItem\n                }\n            \"\n        ></ng-container>\n    </fd-notification>\n</ng-template>\n\n<ng-template\n    #bodyTemplate\n    let-choiceDefStatus=\"choiceDefStatus\"\n    let-isNew=\"isNew\"\n    let-loading=\"loading\"\n    let-icon=\"icon\"\n    let-statusCaption=\"statusCaption\"\n    let-unread=\"unread\"\n    let-title=\"title\"\n    let-content=\"content\"\n    let-userCaption=\"userCaption\"\n    let-dateCaption=\"dateCaption\"\n    let-overflowButtons=\"overflowButtons\"\n    let-uiActions=\"uiActions\"\n    let-hideShowButton=\"hideShowButton\"\n    let-hideDeleteButton=\"hideDeleteButton\"\n    let-mo=\"mo\"\n>\n    <fd-notification-body>\n        <fd-message-strip *ngIf=\"choiceDefStatus?.error\" type=\"error\" style=\"margin: 0.5rem\">\n            {{ choiceDefStatus.error.Text }}\n        </fd-message-strip>\n        <ng-container *ngIf=\"loading || isNew || choiceDefStatus?.loading\">\n            <bsu-mask [top]=\"'10px'\"></bsu-mask>\n        </ng-container>\n        <fd-avatar\n            [transparent]=\"true\"\n            [circle]=\"true\"\n            size=\"xs\"\n            [glyph]=\"!icon ? 'bell' : null\"\n            [image]=\"icon ? icon : null\"\n        ></fd-avatar>\n        <fd-notification-content style=\"overflow: hidden\">\n            <fd-notification-header>\n                <div fd-notification-indicator [type]=\"statusCaption\"></div>\n                <h2 fd-notification-title [unread]=\"unread\">{{ title }}</h2>\n            </fd-notification-header>\n            <p #content fd-notification-paragraph [innerHTML]=\"content\"></p>\n            <fd-notification-footer>\n                <span fd-notification-footer-content>{{ userCaption }}</span>\n                <span fd-notification-separator></span>\n                <span fd-notification-footer-content>{{ dateCaption }}</span>\n            </fd-notification-footer>\n        </fd-notification-content>\n        <fd-notification-actions>\n            <fd-action-sheet #sheet *ngIf=\"overflowButtons; else buttonsTpl\">\n                <fd-action-sheet-control>\n                    <button\n                        role=\"menu\"\n                        [ariaLabel]=\"'More' | bbbTranslate\"\n                        [title]=\"'More' | bbbTranslate\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"overflow\"\n                    ></button>\n                </fd-action-sheet-control>\n\n                <fd-action-sheet-body>\n                    <li\n                        *ngFor=\"let btn of uiActions\"\n                        fd-action-sheet-item\n                        [glyph]=\"btn.Icon\"\n                        [label]=\"btn.Title | bbbTranslate\"\n                        (click)=\"sheet.close(); actionClick.emit({ item: mo, btn: this.btn })\"\n                    ></li>\n                </fd-action-sheet-body>\n            </fd-action-sheet>\n            <ng-template #buttonsTpl>\n                <button\n                    *ngFor=\"let btn of uiActions\"\n                    fd-button\n                    [glyph]=\"btn.Icon\"\n                    [fdType]=\"btn.Status\"\n                    [label]=\"btn.Title | bbbTranslate\"\n                    [title]=\"btn.Title | bbbTranslate\"\n                    fdCompact\n                    (click)=\"actionClick.emit({ item: mo, btn: this.btn })\"\n                ></button>\n            </ng-template>\n            <button\n                *ngIf=\"!hideShowButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'Show' | bbbTranslate\"\n                [title]=\"'Show' | bbbTranslate\"\n                glyph=\"show\"\n                (click)=\"show.emit({ mo: mo.RelatedMo, nama: mo.RelatedMoNama })\"\n                fdCompact\n            ></button>\n            <button\n                *ngIf=\"!hideDeleteButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'Delete' | bbbTranslate\"\n                [title]=\"'Delete' | bbbTranslate\"\n                glyph=\"decline\"\n                (click)=\"remove.emit({ items: [mo], silent: false })\"\n                fdCompact\n            ></button>\n\n            <button\n                *ngIf=\"showCloseButton\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'close' | bbbTranslate\"\n                [title]=\"'close' | bbbTranslate\"\n                glyph=\"decline\"\n                (click)=\"close.emit()\"\n                fdCompact\n            ></button>\n        </fd-notification-actions>\n    </fd-notification-body>\n</ng-template>\n", styles: ["fd-notification-content{min-width:320px}fd-notification-content p{max-height:3rem}:host.s fd-notification-content{min-width:auto!important}fd-notification-actions{max-width:200px}\n"] }]
         }], propDecorators: { option: [{
                 type: Input
             }], notificationItem: [{