barsa-sap-ui 1.0.422 → 1.0.424

package/fesm2020/barsa-sap-ui.mjs

@@ -919,10 +919,10 @@ class LayoutControlComponent extends LayoutItemBaseComponent {
     }
 }
 LayoutControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LayoutControlComponent, deps: [{ token: i2.FormPanelService }, { token: i0.ElementRef }, { token: i1$1.ContentDensityService }, { token: i1$2.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i2.BbbTranslatePipe }], target: i0.ɵɵFactoryTarget.Component });
-LayoutControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: { inlineEdit: "inlineEdit", caption: "caption", focusControl: "focusControl", showLabel: "showLabel", maxLabelWidth: "maxLabelWidth", hasHorizontalText: "hasHorizontalText", contentDensity: "contentDensity", flex: "flex", RefreshLabel: "RefreshLabel", SetVisible: "SetVisible" }, host: { properties: { "class.layout-control": "this.layoutControlClass", "class.row-direction": "this.isRowDirection", "class.row-reverse-direction": "this.isRowReverseDirection", "class.column-direction": "this.isColumnDirection", "class.column-reverse-direction": "this.isColumnReverseDirection", "class.container-field": "this.isContainer", "style.max-width": "this.maxWidth", "style.min-width": "this.minWidth", "style.min-height": "this.minHeight", "style.height": "this.height", "attr.isChekbox": "this.isCheckbox", "attr.isButton": "this.isSinglePicture", "attr.minWidth": "this.attrMinWidth", "attr.controlId": "this.attrControlId", "attr.caption": "this.attrCaption" } }, providers: [LayoutService], viewQueries: [{ propertyName: "tempLabelRef", first: true, predicate: ["tempLabelRef"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!hide\">\r\n    <ng-container *ngIf=\"labelVisible && !isCheckbox\">\r\n        <bsu-ly-label\r\n            [attr.labelWidth]=\"labelWidth\"\r\n            [attrRtl]\r\n            [class.no-padding]=\"config.Padding[0] === 0\"\r\n            [config]=\"config\"\r\n            [caption]=\"labelCaption\"\r\n            [originalWidth]=\"labelWidth\"\r\n            [style.min-width]=\"\r\n                isCheckbox ? 'auto' : isColumnDirection || isColumnReverseDirection ? '100%' : maxLabelWidth + 'px'\r\n            \"\r\n            [style.width]=\"\r\n                isCheckbox ? 'auto' : isColumnDirection || isColumnReverseDirection ? '100%' : maxLabelWidth + 'px'\r\n            \"\r\n            [isMandatory]=\"isMandatory\"\r\n            [fieldIcon]=\"fieldIcon\"\r\n            [originalXtype]=\"originalXtype\"\r\n            [textVisible]=\"textVisible\"\r\n            [isColumn]=\"isColumnDirection || isColumnReverseDirection\"\r\n        ></bsu-ly-label>\r\n    </ng-container>\r\n    <label [attr.visible]=\"labelVisible\" class=\"horizontal-label\" [innerHtml]=\"emptyText\"></label>\r\n    <bnrc-field-ui\r\n        [attr.xtype]=\"config.FieldUi.originalXtype\"\r\n        [attr.fieldWidth]=\"layoutControlWidth\"\r\n        [attr.isCheckbox]=\"isCheckbox\"\r\n        [style.flex-grow]=\"isCheckbox ? 1 : 0\"\r\n        [class.no-padding]=\"config.Padding[0] === 0\"\r\n        [customField]=\"config.FieldUi\"\r\n        [layoutInfo]=\"config\"\r\n        [inlineEdit]=\"inlineEdit\"\r\n        [formHeight]=\"(formHeight$ | async)!!\"\r\n        [focusControl]=\"focusControl\"\r\n        [isSearchPanel]=\"isSearchPanel\"\r\n        [style.height]=\"isUlv ? '100%' : 'auto'\"\r\n        [attr.isulv]=\"isUlv\"\r\n    ></bnrc-field-ui>\r\n</ng-container>\r\n", styles: [":host{width:100%;display:flex}.form-item-label-container{display:flex;position:relative}.lbl-temp{position:absolute;visibility:hidden}bsu-ly-label{padding:0 5px;margin:auto}bnrc-field-ui{padding:0 5px;margin:auto}bnrc-field-ui[xtype=\"Ui.CheckBox\"]{padding:0}@media screen and (max-width: 599px){:host{height:auto}bnrc-field-ui{height:auto}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FieldUiComponent, selector: "bnrc-field-ui", inputs: ["isSearchPanel", "customField", "componentUi", "layoutInfo", "inlineEdit", "focusControl", "formHeight"] }, { kind: "directive", type: i2.AttrRtlDirective, selector: "[attrRtl]", inputs: ["attrRtl"] }, { kind: "component", type: LyLabelComponent, selector: "bsu-ly-label", inputs: ["originalWidth", "minWidth", "caption", "captionIcon", "isColumn", "isMandatory", "fieldIcon", "originalXtype", "textVisible"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LayoutControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: { inlineEdit: "inlineEdit", caption: "caption", focusControl: "focusControl", showLabel: "showLabel", maxLabelWidth: "maxLabelWidth", hasHorizontalText: "hasHorizontalText", contentDensity: "contentDensity", flex: "flex", RefreshLabel: "RefreshLabel", SetVisible: "SetVisible" }, host: { properties: { "class.layout-control": "this.layoutControlClass", "class.row-direction": "this.isRowDirection", "class.row-reverse-direction": "this.isRowReverseDirection", "class.column-direction": "this.isColumnDirection", "class.column-reverse-direction": "this.isColumnReverseDirection", "class.container-field": "this.isContainer", "style.max-width": "this.maxWidth", "style.min-width": "this.minWidth", "style.min-height": "this.minHeight", "style.height": "this.height", "attr.isChekbox": "this.isCheckbox", "attr.isButton": "this.isSinglePicture", "attr.minWidth": "this.attrMinWidth", "attr.controlId": "this.attrControlId", "attr.caption": "this.attrCaption" } }, providers: [LayoutService], viewQueries: [{ propertyName: "tempLabelRef", first: true, predicate: ["tempLabelRef"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!hide\">\n    <ng-container *ngIf=\"labelVisible && !isCheckbox\">\n        <bsu-ly-label\n            [attr.labelWidth]=\"labelWidth\"\n            [attrRtl]\n            [class.no-padding]=\"config.Padding[0] === 0\"\n            [config]=\"config\"\n            [caption]=\"labelCaption\"\n            [originalWidth]=\"labelWidth\"\n            [style.min-width]=\"\n                isCheckbox || config.CaptionSetting?.AlignMode === 'AutoSize'\n                    ? 'auto'\n                    : isColumnDirection || isColumnReverseDirection\n                    ? '100%'\n                    : maxLabelWidth + 'px'\n            \"\n            [style.width]=\"\n                isCheckbox || config.CaptionSetting?.AlignMode === 'AutoSize'\n                    ? 'auto'\n                    : isColumnDirection || isColumnReverseDirection\n                    ? '100%'\n                    : maxLabelWidth + 'px'\n            \"\n            [isMandatory]=\"isMandatory\"\n            [fieldIcon]=\"fieldIcon\"\n            [originalXtype]=\"originalXtype\"\n            [textVisible]=\"textVisible\"\n            [isColumn]=\"isColumnDirection || isColumnReverseDirection\"\n        ></bsu-ly-label>\n    </ng-container>\n    <label [attr.visible]=\"labelVisible\" class=\"horizontal-label\" [innerHtml]=\"emptyText\"></label>\n    <bnrc-field-ui\n        [attr.xtype]=\"config.FieldUi.originalXtype\"\n        [attr.fieldWidth]=\"layoutControlWidth\"\n        [attr.isCheckbox]=\"isCheckbox\"\n        [style.flex-grow]=\"isCheckbox ? 1 : 0\"\n        [class.no-padding]=\"config.Padding[0] === 0\"\n        [customField]=\"config.FieldUi\"\n        [layoutInfo]=\"config\"\n        [inlineEdit]=\"inlineEdit\"\n        [formHeight]=\"(formHeight$ | async)!!\"\n        [focusControl]=\"focusControl\"\n        [isSearchPanel]=\"isSearchPanel\"\n        [style.height]=\"isUlv ? '100%' : 'auto'\"\n        [attr.isulv]=\"isUlv\"\n    ></bnrc-field-ui>\n</ng-container>\n", styles: [":host{width:100%;display:flex}.form-item-label-container{display:flex;position:relative}.lbl-temp{position:absolute;visibility:hidden}bsu-ly-label{padding:0 5px;margin:auto}bnrc-field-ui{padding:0 5px;margin:auto}bnrc-field-ui[xtype=\"Ui.CheckBox\"]{padding:0}@media screen and (max-width: 599px){:host{height:auto}bnrc-field-ui{height:auto}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FieldUiComponent, selector: "bnrc-field-ui", inputs: ["isSearchPanel", "customField", "componentUi", "layoutInfo", "inlineEdit", "focusControl", "formHeight"] }, { kind: "directive", type: i2.AttrRtlDirective, selector: "[attrRtl]", inputs: ["attrRtl"] }, { kind: "component", type: LyLabelComponent, selector: "bsu-ly-label", inputs: ["originalWidth", "minWidth", "caption", "captionIcon", "isColumn", "isMandatory", "fieldIcon", "originalXtype", "textVisible"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: LayoutControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-layout-control', providers: [LayoutService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!hide\">\r\n    <ng-container *ngIf=\"labelVisible && !isCheckbox\">\r\n        <bsu-ly-label\r\n            [attr.labelWidth]=\"labelWidth\"\r\n            [attrRtl]\r\n            [class.no-padding]=\"config.Padding[0] === 0\"\r\n            [config]=\"config\"\r\n            [caption]=\"labelCaption\"\r\n            [originalWidth]=\"labelWidth\"\r\n            [style.min-width]=\"\r\n                isCheckbox ? 'auto' : isColumnDirection || isColumnReverseDirection ? '100%' : maxLabelWidth + 'px'\r\n            \"\r\n            [style.width]=\"\r\n                isCheckbox ? 'auto' : isColumnDirection || isColumnReverseDirection ? '100%' : maxLabelWidth + 'px'\r\n            \"\r\n            [isMandatory]=\"isMandatory\"\r\n            [fieldIcon]=\"fieldIcon\"\r\n            [originalXtype]=\"originalXtype\"\r\n            [textVisible]=\"textVisible\"\r\n            [isColumn]=\"isColumnDirection || isColumnReverseDirection\"\r\n        ></bsu-ly-label>\r\n    </ng-container>\r\n    <label [attr.visible]=\"labelVisible\" class=\"horizontal-label\" [innerHtml]=\"emptyText\"></label>\r\n    <bnrc-field-ui\r\n        [attr.xtype]=\"config.FieldUi.originalXtype\"\r\n        [attr.fieldWidth]=\"layoutControlWidth\"\r\n        [attr.isCheckbox]=\"isCheckbox\"\r\n        [style.flex-grow]=\"isCheckbox ? 1 : 0\"\r\n        [class.no-padding]=\"config.Padding[0] === 0\"\r\n        [customField]=\"config.FieldUi\"\r\n        [layoutInfo]=\"config\"\r\n        [inlineEdit]=\"inlineEdit\"\r\n        [formHeight]=\"(formHeight$ | async)!!\"\r\n        [focusControl]=\"focusControl\"\r\n        [isSearchPanel]=\"isSearchPanel\"\r\n        [style.height]=\"isUlv ? '100%' : 'auto'\"\r\n        [attr.isulv]=\"isUlv\"\r\n    ></bnrc-field-ui>\r\n</ng-container>\r\n", styles: [":host{width:100%;display:flex}.form-item-label-container{display:flex;position:relative}.lbl-temp{position:absolute;visibility:hidden}bsu-ly-label{padding:0 5px;margin:auto}bnrc-field-ui{padding:0 5px;margin:auto}bnrc-field-ui[xtype=\"Ui.CheckBox\"]{padding:0}@media screen and (max-width: 599px){:host{height:auto}bnrc-field-ui{height:auto}}\n"] }]
+            args: [{ selector: 'bsu-layout-control', providers: [LayoutService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!hide\">\n    <ng-container *ngIf=\"labelVisible && !isCheckbox\">\n        <bsu-ly-label\n            [attr.labelWidth]=\"labelWidth\"\n            [attrRtl]\n            [class.no-padding]=\"config.Padding[0] === 0\"\n            [config]=\"config\"\n            [caption]=\"labelCaption\"\n            [originalWidth]=\"labelWidth\"\n            [style.min-width]=\"\n                isCheckbox || config.CaptionSetting?.AlignMode === 'AutoSize'\n                    ? 'auto'\n                    : isColumnDirection || isColumnReverseDirection\n                    ? '100%'\n                    : maxLabelWidth + 'px'\n            \"\n            [style.width]=\"\n                isCheckbox || config.CaptionSetting?.AlignMode === 'AutoSize'\n                    ? 'auto'\n                    : isColumnDirection || isColumnReverseDirection\n                    ? '100%'\n                    : maxLabelWidth + 'px'\n            \"\n            [isMandatory]=\"isMandatory\"\n            [fieldIcon]=\"fieldIcon\"\n            [originalXtype]=\"originalXtype\"\n            [textVisible]=\"textVisible\"\n            [isColumn]=\"isColumnDirection || isColumnReverseDirection\"\n        ></bsu-ly-label>\n    </ng-container>\n    <label [attr.visible]=\"labelVisible\" class=\"horizontal-label\" [innerHtml]=\"emptyText\"></label>\n    <bnrc-field-ui\n        [attr.xtype]=\"config.FieldUi.originalXtype\"\n        [attr.fieldWidth]=\"layoutControlWidth\"\n        [attr.isCheckbox]=\"isCheckbox\"\n        [style.flex-grow]=\"isCheckbox ? 1 : 0\"\n        [class.no-padding]=\"config.Padding[0] === 0\"\n        [customField]=\"config.FieldUi\"\n        [layoutInfo]=\"config\"\n        [inlineEdit]=\"inlineEdit\"\n        [formHeight]=\"(formHeight$ | async)!!\"\n        [focusControl]=\"focusControl\"\n        [isSearchPanel]=\"isSearchPanel\"\n        [style.height]=\"isUlv ? '100%' : 'auto'\"\n        [attr.isulv]=\"isUlv\"\n    ></bnrc-field-ui>\n</ng-container>\n", styles: [":host{width:100%;display:flex}.form-item-label-container{display:flex;position:relative}.lbl-temp{position:absolute;visibility:hidden}bsu-ly-label{padding:0 5px;margin:auto}bnrc-field-ui{padding:0 5px;margin:auto}bnrc-field-ui[xtype=\"Ui.CheckBox\"]{padding:0}@media screen and (max-width: 599px){:host{height:auto}bnrc-field-ui{height:auto}}\n"] }]
         }], ctorParameters: function () { return [{ type: i2.FormPanelService }, { type: i0.ElementRef }, { type: i1$1.ContentDensityService }, { type: i1$2.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i2.BbbTranslatePipe }]; }, propDecorators: { tempLabelRef: [{
                 type: ViewChild,
                 args: ['tempLabelRef', { read: ElementRef, static: true }]
@@ -1788,8 +1788,8 @@ class SapUiReportBaseComponent extends ReportBaseComponent {
             return;
         }
         const moIndex = this._getIndex(mo);
+        this._removeCheckedAll();
         if (!mo.$IsChecked) {
-            this._removeCheckedAll();
             this._rowCheck(mo, moIndex, true);
         }
         if (this.viewSetting?.DisableShowFormOnDoubleClick) {
@@ -2172,6 +2172,19 @@ class SapUiReportBaseComponent extends ReportBaseComponent {
         const allColumnsWidth = this.allColumns.map((column) => column.$TextWidth && column.Width > column.$TextWidth ? column.Width : column.$TextWidth || column.Width);
         const visibleColumns = this._visibleColumnsSource.getValue();
         let columnsCount = visibleColumns.length;
+        const colWidthSettings = this.gridSettingSource.getValue()?.ColSettingList?.map((c) => c.Width);
+        const columnsWidth = colWidthSettings?.length ? colWidthSettings : allColumnsWidth;
+        let sumColWidth = 0;
+        if (this.context.ViewSetting?.IsCheckList) {
+            sumColWidth += 15;
+        }
+        if (this.context.Setting?.Extra?.DefaultCommandsAccess?.View) {
+            sumColWidth += 32;
+        }
+        if (this.hasDetailsInRow) {
+            sumColWidth += 210;
+        }
+        const containerWidth = elNativeElement.clientWidth;
         switch (gridSize) {
             case 'l':
             case 'xl':
@@ -2187,19 +2200,6 @@ class SapUiReportBaseComponent extends ReportBaseComponent {
                 break;
         }
         this._deviceNameSource.next(deviceName);
-        const colWidthSettings = this.gridSettingSource.getValue()?.ColSettingList?.map((c) => c.Width);
-        const columnsWidth = colWidthSettings?.length ? colWidthSettings : allColumnsWidth;
-        let sumColWidth = 0;
-        if (this.context.ViewSetting?.IsCheckList) {
-            sumColWidth += 15;
-        }
-        if (this.context.Setting?.Extra?.DefaultCommandsAccess?.View) {
-            sumColWidth += 32;
-        }
-        if (this.hasDetailsInRow) {
-            sumColWidth += 210;
-        }
-        const containerWidth = elNativeElement.clientWidth;
         if (columnsWidth.length > 0 && containerWidth > 0 && deviceSize !== 's') {
             columnsCount = visibleColumns.length;
             columnsWidth.forEach((width, index) => {
@@ -5350,7 +5350,7 @@ class UiTableViewComponent extends ReportViewBaseComponent {
     }
     _calculateColumnsWidth(moDataList, columns) {
         const elDom = this._el.nativeElement;
-        const calcResult = calculateWidthOfListColumn(elDom, this.showViewButton, this.contextMenuItems, this.disableOverflowContextMenu, this.tableHeaderMode, moDataList, columns || this.allColumns);
+        const calcResult = calculateWidthOfListColumn(elDom, this.showViewButton, this.contextMenuItems, this.disableOverflowContextMenu, this.tableHeaderMode, moDataList, columns || this.columns);
         this.contextMenuWidth = calcResult.contextMenuWidth;
     }
     _setRowIndicator(columns) {
@@ -5426,10 +5426,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: true,\n                uiActions: option.NotificationItem?.UiActions,\n                hideShowButton: option.NotificationItem?.HideShowButton,\n                tag: option.NotificationItem?.Tag,\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: true,\n                    uiActions: notificationItem.UiActions,\n                    tag: notificationItem.Tag,\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    let-tag=\"tag\"\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 *ngIf=\"uiActions?.length\">\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 === false && mo.RelatedMo\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'Show' | bbbTranslate\"\n                [title]=\"'Show' | bbbTranslate\"\n                glyph=\"show\"\n                (click)=\"show.emit({tag,  mo: mo.RelatedMo, nama: mo.RelatedMoNama })\"\n                fdCompact\n            ></button>\n            <button\n                *ngIf=\"hideDeleteButton === false\"\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$4.ActionSheetComponent, selector: "fd-action-sheet", inputs: ["mobile", "placement", "noArrow", "isOpen", "keyboardSupport", "triggers"], outputs: ["focusEscapeList", "isOpenChange"] }, { kind: "component", type: i2$4.ActionSheetControlComponent, selector: "fd-action-sheet-control", outputs: ["clicked"] }, { kind: "component", type: i2$4.ActionSheetItemComponent, selector: "[fd-action-sheet-item]", inputs: ["label", "glyph", "negative", "isCloseButton", "disabled"], outputs: ["keyDown"] }, { kind: "component", type: i2$4.ActionSheetBodyComponent, selector: "fd-action-sheet-body", inputs: ["actionSheetBodyId", "mobile", "ariaLabel", "ariaLabelledby"] }, { kind: "directive", type: i3$6.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: i4$4.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$2.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>\r\n\r\n<ng-template #optionTemplate>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            bodyTemplate;\r\n            context: {\r\n                choiceDefStatus: null,\r\n                isNew: false,\r\n                loading: false,\r\n                icon: option.icon,\r\n                statusCaption: '',\r\n                unread: true,\r\n                title: option.title,\r\n                content: option.msg,\r\n                userCaption: option.NotificationItem?.CreatorUser$Caption,\r\n                dateCaption: option.NotificationItem?.CreationDate$Caption,\r\n                overflowButtons: true,\r\n                uiActions: option.NotificationItem?.UiActions,\r\n                hideShowButton: option.NotificationItem?.HideShowButton,\r\n                tag: option.NotificationItem?.Tag,\r\n                hideDeleteButton: true,\r\n                mo: option.mo\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #notificationItemTemplate>\r\n    <fd-notification>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                bodyTemplate;\r\n                context: {\r\n                    choiceDefStatus: notificationItem.$ChoiceDefStatus,\r\n                    isNew: notificationItem.$NewNotification,\r\n                    loading: notificationItem.$NotificatoinLoading,\r\n                    icon: notificationItem.Icon,\r\n                    statusCaption: notificationItem.Status$Caption,\r\n                    unread: notificationItem.Unread,\r\n                    title: notificationItem.Title,\r\n                    content: notificationItem.$SafeContent,\r\n                    userCaption: notificationItem.IMessage?.CreatorUser$Caption,\r\n                    dateCaption: notificationItem.IMessage?.CreationDate$Caption,\r\n                    overflowButtons: true,\r\n                    uiActions: notificationItem.UiActions,\r\n                    tag: notificationItem.Tag,\r\n                    hideShowButton: notificationItem.HideShowButton,\r\n                    hideDeleteButton: notificationItem.HideDeleteButton,\r\n                    mo: notificationItem\r\n                }\r\n            \"\r\n        ></ng-container>\r\n    </fd-notification>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #bodyTemplate\r\n    let-choiceDefStatus=\"choiceDefStatus\"\r\n    let-isNew=\"isNew\"\r\n    let-loading=\"loading\"\r\n    let-icon=\"icon\"\r\n    let-statusCaption=\"statusCaption\"\r\n    let-unread=\"unread\"\r\n    let-title=\"title\"\r\n    let-content=\"content\"\r\n    let-userCaption=\"userCaption\"\r\n    let-dateCaption=\"dateCaption\"\r\n    let-overflowButtons=\"overflowButtons\"\r\n    let-uiActions=\"uiActions\"\r\n    let-hideShowButton=\"hideShowButton\"\r\n    let-hideDeleteButton=\"hideDeleteButton\"\r\n    let-mo=\"mo\"\r\n    let-tag=\"tag\"\r\n>\r\n    <fd-notification-body>\r\n        <fd-message-strip *ngIf=\"choiceDefStatus?.error\" type=\"error\" style=\"margin: 0.5rem\">\r\n            {{ choiceDefStatus.error.Text }}\r\n        </fd-message-strip>\r\n        <ng-container *ngIf=\"loading || isNew || choiceDefStatus?.loading\">\r\n            <bsu-mask [top]=\"'10px'\"></bsu-mask>\r\n        </ng-container>\r\n        <fd-avatar\r\n            [transparent]=\"true\"\r\n            [circle]=\"true\"\r\n            size=\"xs\"\r\n            [glyph]=\"!icon ? 'bell' : null\"\r\n            [image]=\"icon ? icon : null\"\r\n        ></fd-avatar>\r\n        <fd-notification-content style=\"overflow: hidden\">\r\n            <fd-notification-header>\r\n                <div fd-notification-indicator [type]=\"statusCaption\"></div>\r\n                <h2 fd-notification-title [unread]=\"unread\">{{ title }}</h2>\r\n            </fd-notification-header>\r\n            <p #content fd-notification-paragraph [innerHTML]=\"content\"></p>\r\n            <fd-notification-footer>\r\n                <span fd-notification-footer-content>{{ userCaption }}</span>\r\n                <span fd-notification-separator></span>\r\n                <span fd-notification-footer-content>{{ dateCaption }}</span>\r\n            </fd-notification-footer>\r\n        </fd-notification-content>\r\n        <fd-notification-actions>\r\n            <fd-action-sheet #sheet *ngIf=\"overflowButtons; else buttonsTpl\">\r\n                <fd-action-sheet-control *ngIf=\"uiActions?.length\">\r\n                    <button\r\n                        role=\"menu\"\r\n                        [ariaLabel]=\"'More' | bbbTranslate\"\r\n                        [title]=\"'More' | bbbTranslate\"\r\n                        fd-button\r\n                        fdType=\"transparent\"\r\n                        glyph=\"overflow\"\r\n                    ></button>\r\n                </fd-action-sheet-control>\r\n\r\n                <fd-action-sheet-body>\r\n                    <li\r\n                        *ngFor=\"let btn of uiActions\"\r\n                        fd-action-sheet-item\r\n                        [glyph]=\"btn.Icon\"\r\n                        [label]=\"btn.Title | bbbTranslate\"\r\n                        (click)=\"sheet.close(); actionClick.emit({ item: mo, btn: this.btn })\"\r\n                    ></li>\r\n                </fd-action-sheet-body>\r\n            </fd-action-sheet>\r\n            <ng-template #buttonsTpl>\r\n                <button\r\n                    *ngFor=\"let btn of uiActions\"\r\n                    fd-button\r\n                    [glyph]=\"btn.Icon\"\r\n                    [fdType]=\"btn.Status\"\r\n                    [label]=\"btn.Title | bbbTranslate\"\r\n                    [title]=\"btn.Title | bbbTranslate\"\r\n                    fdCompact\r\n                    (click)=\"actionClick.emit({ item: mo, btn: this.btn })\"\r\n                ></button>\r\n            </ng-template>\r\n            <button\r\n                *ngIf=\"hideShowButton === false && mo.RelatedMo\"\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'Show' | bbbTranslate\"\r\n                [title]=\"'Show' | bbbTranslate\"\r\n                glyph=\"show\"\r\n                (click)=\"show.emit({tag,  mo: mo.RelatedMo, nama: mo.RelatedMoNama })\"\r\n                fdCompact\r\n            ></button>\r\n            <button\r\n                *ngIf=\"hideDeleteButton === false\"\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'Delete' | bbbTranslate\"\r\n                [title]=\"'Delete' | bbbTranslate\"\r\n                glyph=\"decline\"\r\n                (click)=\"remove.emit({ items: [mo], silent: false })\"\r\n                fdCompact\r\n            ></button>\r\n\r\n            <button\r\n                *ngIf=\"showCloseButton\"\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'close' | bbbTranslate\"\r\n                [title]=\"'close' | bbbTranslate\"\r\n                glyph=\"decline\"\r\n                (click)=\"close.emit()\"\r\n                fdCompact\r\n            ></button>\r\n        </fd-notification-actions>\r\n    </fd-notification-body>\r\n</ng-template>\r\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$4.ActionSheetComponent, selector: "fd-action-sheet", inputs: ["mobile", "placement", "noArrow", "isOpen", "keyboardSupport", "triggers"], outputs: ["focusEscapeList", "isOpenChange"] }, { kind: "component", type: i2$4.ActionSheetControlComponent, selector: "fd-action-sheet-control", outputs: ["clicked"] }, { kind: "component", type: i2$4.ActionSheetItemComponent, selector: "[fd-action-sheet-item]", inputs: ["label", "glyph", "negative", "isCloseButton", "disabled"], outputs: ["keyDown"] }, { kind: "component", type: i2$4.ActionSheetBodyComponent, selector: "fd-action-sheet-body", inputs: ["actionSheetBodyId", "mobile", "ariaLabel", "ariaLabelledby"] }, { kind: "directive", type: i3$6.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: i4$4.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$2.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: true,\n                uiActions: option.NotificationItem?.UiActions,\n                hideShowButton: option.NotificationItem?.HideShowButton,\n                tag: option.NotificationItem?.Tag,\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: true,\n                    uiActions: notificationItem.UiActions,\n                    tag: notificationItem.Tag,\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    let-tag=\"tag\"\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 *ngIf=\"uiActions?.length\">\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 === false && mo.RelatedMo\"\n                fd-button\n                fdType=\"transparent\"\n                [ariaLabel]=\"'Show' | bbbTranslate\"\n                [title]=\"'Show' | bbbTranslate\"\n                glyph=\"show\"\n                (click)=\"show.emit({tag,  mo: mo.RelatedMo, nama: mo.RelatedMoNama })\"\n                fdCompact\n            ></button>\n            <button\n                *ngIf=\"hideDeleteButton === false\"\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"] }]
+            args: [{ selector: 'bsu-notification-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngTemplateOutlet=\"notificationItem ? notificationItemTemplate : optionTemplate\"> </ng-container>\r\n\r\n<ng-template #optionTemplate>\r\n    <ng-container\r\n        *ngTemplateOutlet=\"\r\n            bodyTemplate;\r\n            context: {\r\n                choiceDefStatus: null,\r\n                isNew: false,\r\n                loading: false,\r\n                icon: option.icon,\r\n                statusCaption: '',\r\n                unread: true,\r\n                title: option.title,\r\n                content: option.msg,\r\n                userCaption: option.NotificationItem?.CreatorUser$Caption,\r\n                dateCaption: option.NotificationItem?.CreationDate$Caption,\r\n                overflowButtons: true,\r\n                uiActions: option.NotificationItem?.UiActions,\r\n                hideShowButton: option.NotificationItem?.HideShowButton,\r\n                tag: option.NotificationItem?.Tag,\r\n                hideDeleteButton: true,\r\n                mo: option.mo\r\n            }\r\n        \"\r\n    ></ng-container>\r\n</ng-template>\r\n<ng-template #notificationItemTemplate>\r\n    <fd-notification>\r\n        <ng-container\r\n            *ngTemplateOutlet=\"\r\n                bodyTemplate;\r\n                context: {\r\n                    choiceDefStatus: notificationItem.$ChoiceDefStatus,\r\n                    isNew: notificationItem.$NewNotification,\r\n                    loading: notificationItem.$NotificatoinLoading,\r\n                    icon: notificationItem.Icon,\r\n                    statusCaption: notificationItem.Status$Caption,\r\n                    unread: notificationItem.Unread,\r\n                    title: notificationItem.Title,\r\n                    content: notificationItem.$SafeContent,\r\n                    userCaption: notificationItem.IMessage?.CreatorUser$Caption,\r\n                    dateCaption: notificationItem.IMessage?.CreationDate$Caption,\r\n                    overflowButtons: true,\r\n                    uiActions: notificationItem.UiActions,\r\n                    tag: notificationItem.Tag,\r\n                    hideShowButton: notificationItem.HideShowButton,\r\n                    hideDeleteButton: notificationItem.HideDeleteButton,\r\n                    mo: notificationItem\r\n                }\r\n            \"\r\n        ></ng-container>\r\n    </fd-notification>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #bodyTemplate\r\n    let-choiceDefStatus=\"choiceDefStatus\"\r\n    let-isNew=\"isNew\"\r\n    let-loading=\"loading\"\r\n    let-icon=\"icon\"\r\n    let-statusCaption=\"statusCaption\"\r\n    let-unread=\"unread\"\r\n    let-title=\"title\"\r\n    let-content=\"content\"\r\n    let-userCaption=\"userCaption\"\r\n    let-dateCaption=\"dateCaption\"\r\n    let-overflowButtons=\"overflowButtons\"\r\n    let-uiActions=\"uiActions\"\r\n    let-hideShowButton=\"hideShowButton\"\r\n    let-hideDeleteButton=\"hideDeleteButton\"\r\n    let-mo=\"mo\"\r\n    let-tag=\"tag\"\r\n>\r\n    <fd-notification-body>\r\n        <fd-message-strip *ngIf=\"choiceDefStatus?.error\" type=\"error\" style=\"margin: 0.5rem\">\r\n            {{ choiceDefStatus.error.Text }}\r\n        </fd-message-strip>\r\n        <ng-container *ngIf=\"loading || isNew || choiceDefStatus?.loading\">\r\n            <bsu-mask [top]=\"'10px'\"></bsu-mask>\r\n        </ng-container>\r\n        <fd-avatar\r\n            [transparent]=\"true\"\r\n            [circle]=\"true\"\r\n            size=\"xs\"\r\n            [glyph]=\"!icon ? 'bell' : null\"\r\n            [image]=\"icon ? icon : null\"\r\n        ></fd-avatar>\r\n        <fd-notification-content style=\"overflow: hidden\">\r\n            <fd-notification-header>\r\n                <div fd-notification-indicator [type]=\"statusCaption\"></div>\r\n                <h2 fd-notification-title [unread]=\"unread\">{{ title }}</h2>\r\n            </fd-notification-header>\r\n            <p #content fd-notification-paragraph [innerHTML]=\"content\"></p>\r\n            <fd-notification-footer>\r\n                <span fd-notification-footer-content>{{ userCaption }}</span>\r\n                <span fd-notification-separator></span>\r\n                <span fd-notification-footer-content>{{ dateCaption }}</span>\r\n            </fd-notification-footer>\r\n        </fd-notification-content>\r\n        <fd-notification-actions>\r\n            <fd-action-sheet #sheet *ngIf=\"overflowButtons; else buttonsTpl\">\r\n                <fd-action-sheet-control *ngIf=\"uiActions?.length\">\r\n                    <button\r\n                        role=\"menu\"\r\n                        [ariaLabel]=\"'More' | bbbTranslate\"\r\n                        [title]=\"'More' | bbbTranslate\"\r\n                        fd-button\r\n                        fdType=\"transparent\"\r\n                        glyph=\"overflow\"\r\n                    ></button>\r\n                </fd-action-sheet-control>\r\n\r\n                <fd-action-sheet-body>\r\n                    <li\r\n                        *ngFor=\"let btn of uiActions\"\r\n                        fd-action-sheet-item\r\n                        [glyph]=\"btn.Icon\"\r\n                        [label]=\"btn.Title | bbbTranslate\"\r\n                        (click)=\"sheet.close(); actionClick.emit({ item: mo, btn: this.btn })\"\r\n                    ></li>\r\n                </fd-action-sheet-body>\r\n            </fd-action-sheet>\r\n            <ng-template #buttonsTpl>\r\n                <button\r\n                    *ngFor=\"let btn of uiActions\"\r\n                    fd-button\r\n                    [glyph]=\"btn.Icon\"\r\n                    [fdType]=\"btn.Status\"\r\n                    [label]=\"btn.Title | bbbTranslate\"\r\n                    [title]=\"btn.Title | bbbTranslate\"\r\n                    fdCompact\r\n                    (click)=\"actionClick.emit({ item: mo, btn: this.btn })\"\r\n                ></button>\r\n            </ng-template>\r\n            <button\r\n                *ngIf=\"hideShowButton === false && mo.RelatedMo\"\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'Show' | bbbTranslate\"\r\n                [title]=\"'Show' | bbbTranslate\"\r\n                glyph=\"show\"\r\n                (click)=\"show.emit({tag,  mo: mo.RelatedMo, nama: mo.RelatedMoNama })\"\r\n                fdCompact\r\n            ></button>\r\n            <button\r\n                *ngIf=\"hideDeleteButton === false\"\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'Delete' | bbbTranslate\"\r\n                [title]=\"'Delete' | bbbTranslate\"\r\n                glyph=\"decline\"\r\n                (click)=\"remove.emit({ items: [mo], silent: false })\"\r\n                fdCompact\r\n            ></button>\r\n\r\n            <button\r\n                *ngIf=\"showCloseButton\"\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [ariaLabel]=\"'close' | bbbTranslate\"\r\n                [title]=\"'close' | bbbTranslate\"\r\n                glyph=\"decline\"\r\n                (click)=\"close.emit()\"\r\n                fdCompact\r\n            ></button>\r\n        </fd-notification-actions>\r\n    </fd-notification-body>\r\n</ng-template>\r\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: [{
@@ -10417,7 +10417,7 @@ UiDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             useFactory: getDateService$1,
             deps: [LogService]
         }
-    ], viewQueries: [{ propertyName: "datetimePickerRef", first: true, predicate: ["datetimePicker"], descendants: true }, { propertyName: "datePickerRef", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "durationPickerRef", first: true, predicate: ["durationPicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input\n    *ngIf=\"(disableOrReadonly$ | async)!!; else datetime\"\n    fd-form-control\n    type=\"text\"\n    [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\n    [attr.disabled]=\"(disable$ | async) === true ? true : null\"\n    [value]=\"value ? valueCaption : ''\"\n/>\n<ng-template #datetime>\n    <div\n        [style.display]=\"(disableOrReadonly$ | async)!! ? 'hidden' : 'block'\"\n        [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : 'rtl'\"\n    >\n        <bc-date-time-picker\n            [value]=\"value\"\n            [buttonMenuMode]=\"parameters?.ButtonMenuMode === true\"\n            [showDate]=\"Setting.ShowDate1\"\n            [showTime]=\"Setting.ShowTime1\"\n            [placeholder]=\"parameters?.ButtonMenuMode === true ? parameters.Placeholder : formatPattern\"\n            [primaryCalendarType]=\"Setting.CalendarType\"\n            [formatPattern]=\"formatPattern\"\n            (valueChange)=\"onDateChange2($event)\"\n            [readonly]=\"(readonly$ | async) === true ? true : false\"\n            [disabled]=\"(disable$ | async) === true ? true : false\"\n        >\n        </bc-date-time-picker>\n    </div>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class"] }, { kind: "directive", type: i2$1.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i1$4.DateTimePickerComponent, selector: "bc-date-time-picker", inputs: ["placeholder", "primaryCalendarType", "formatPattern", "value", "timeValue", "startRangeDate", "endRangeDate", "isRangePicker", "showTime", "showDate", "rtl", "readonly", "disabled", "buttonMenuMode"], outputs: ["rangeChange", "valueChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "datetimePickerRef", first: true, predicate: ["datetimePicker"], descendants: true }, { propertyName: "datePickerRef", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "durationPickerRef", first: true, predicate: ["durationPicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<input\n    *ngIf=\"(disableOrReadonly$ | async)!!; else datetime\"\n    fd-form-control\n    type=\"text\"\n    [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\n    [attr.disabled]=\"(disable$ | async) === true ? true : null\"\n    [value]=\"value ? valueCaption : ''\"\n/>\n<ng-template #datetime>\n    <div\n        [style.display]=\"(disableOrReadonly$ | async)!! ? 'hidden' : 'block'\"\n        [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : 'rtl'\"\n    >\n        <bc-date-time-picker\n            [value]=\"value\"\n            [buttonMenuMode]=\"parameters?.ButtonMenuMode === true\"\n            [showDate]=\"Setting.ShowDate1\"\n            [showTime]=\"Setting.ShowTime1\"\n            [placeholder]=\"parameters?.ButtonMenuMode === true ? parameters.Placeholder : formatPattern\"\n            [primaryCalendarType]=\"Setting.CalendarType\"\n            [formatPattern]=\"formatPattern\"\n            [deviceSize]=\"(deviceSize$ | async)!!\"\n            [isMobile]=\"isMobile\"\n            (valueChange)=\"onDateChange2($event)\"\n            [readonly]=\"(readonly$ | async) === true ? true : false\"\n            [disabled]=\"(disable$ | async) === true ? true : false\"\n        >\n        </bc-date-time-picker>\n    </div>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class"] }, { kind: "directive", type: i2$1.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i1$4.DateTimePickerComponent, selector: "bc-date-time-picker", inputs: ["placeholder", "primaryCalendarType", "formatPattern", "value", "timeValue", "startRangeDate", "endRangeDate", "isRangePicker", "showTime", "showDate", "rtl", "deviceSize", "isMobile", "readonly", "disabled", "buttonMenuMode"], outputs: ["rangeChange", "valueChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiDateTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bsu-ui-date-time', providers: [
@@ -10426,7 +10426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                             useFactory: getDateService$1,
                             deps: [LogService]
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n    *ngIf=\"(disableOrReadonly$ | async)!!; else datetime\"\n    fd-form-control\n    type=\"text\"\n    [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\n    [attr.disabled]=\"(disable$ | async) === true ? true : null\"\n    [value]=\"value ? valueCaption : ''\"\n/>\n<ng-template #datetime>\n    <div\n        [style.display]=\"(disableOrReadonly$ | async)!! ? 'hidden' : 'block'\"\n        [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : 'rtl'\"\n    >\n        <bc-date-time-picker\n            [value]=\"value\"\n            [buttonMenuMode]=\"parameters?.ButtonMenuMode === true\"\n            [showDate]=\"Setting.ShowDate1\"\n            [showTime]=\"Setting.ShowTime1\"\n            [placeholder]=\"parameters?.ButtonMenuMode === true ? parameters.Placeholder : formatPattern\"\n            [primaryCalendarType]=\"Setting.CalendarType\"\n            [formatPattern]=\"formatPattern\"\n            (valueChange)=\"onDateChange2($event)\"\n            [readonly]=\"(readonly$ | async) === true ? true : false\"\n            [disabled]=\"(disable$ | async) === true ? true : false\"\n        >\n        </bc-date-time-picker>\n    </div>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n    *ngIf=\"(disableOrReadonly$ | async)!!; else datetime\"\n    fd-form-control\n    type=\"text\"\n    [attr.readonly]=\"(readonly$ | async) === true ? true : null\"\n    [attr.disabled]=\"(disable$ | async) === true ? true : null\"\n    [value]=\"value ? valueCaption : ''\"\n/>\n<ng-template #datetime>\n    <div\n        [style.display]=\"(disableOrReadonly$ | async)!! ? 'hidden' : 'block'\"\n        [attr.dir]=\"Setting.IsLtr === true ? 'ltr' : 'rtl'\"\n    >\n        <bc-date-time-picker\n            [value]=\"value\"\n            [buttonMenuMode]=\"parameters?.ButtonMenuMode === true\"\n            [showDate]=\"Setting.ShowDate1\"\n            [showTime]=\"Setting.ShowTime1\"\n            [placeholder]=\"parameters?.ButtonMenuMode === true ? parameters.Placeholder : formatPattern\"\n            [primaryCalendarType]=\"Setting.CalendarType\"\n            [formatPattern]=\"formatPattern\"\n            [deviceSize]=\"(deviceSize$ | async)!!\"\n            [isMobile]=\"isMobile\"\n            (valueChange)=\"onDateChange2($event)\"\n            [readonly]=\"(readonly$ | async) === true ? true : false\"\n            [disabled]=\"(disable$ | async) === true ? true : false\"\n        >\n        </bc-date-time-picker>\n    </div>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { datetimePickerRef: [{
                 type: ViewChild,
                 args: ['datetimePicker']