barsa-tiles 1.0.351 → 1.0.353

package/esm2020/lib/tiles-viewer-group/tiles-viewer-group.component.mjs

@@ -15,14 +15,23 @@ import * as i11 from "../actions-link/actions-link.component";
 import * as i12 from "../tile-renderer.directive";
 import * as i13 from "barsa-novin-ray-core";
 export class TilesViewerGroupComponent extends BaseComponent {
-    constructor() {
+    constructor(_el) {
         super();
+        this._el = _el;
         this.tilesDropped = new EventEmitter();
         this.hideAppTileClick = new EventEmitter();
         this.renameAppTileClick = new EventEmitter();
         this.toggleGroup = new EventEmitter();
         this.resetGroup = new EventEmitter();
         this.deleteGroup = new EventEmitter();
+        this.marginRightTile = null;
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        if (this.deviceSize === 's') {
+            const t = document.body.clientWidth % 154;
+            this.marginRightTile = t / 3;
+        }
     }
     onDrop(appTileGroup, event) {
         if (!this.edit || appTileGroup.Locked) {
@@ -46,12 +55,12 @@ export class TilesViewerGroupComponent extends BaseComponent {
         this.resetGroup.emit(appTileGroup);
     }
 }
-TilesViewerGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TilesViewerGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: { appTileGroup: "appTileGroup", stackContent: "stackContent", edit: "edit", rtl: "rtl", isAppTileSubGroup: "isAppTileSubGroup", deviceSize: "deviceSize" }, outputs: { tilesDropped: "tilesDropped", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup" }, usesInheritance: true, ngImport: i0, template: "<fd-layout-panel [fixed]=\"true\" [attr.editHome]=\"edit\" cdkDrag [cdkDragDisabled]=\"!edit || !stackContent\">\n    <fd-layout-panel-header *ngIf=\"edit || stackContent || isAppTileSubGroup\">\n        <fd-layout-panel-head>\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\n        </fd-layout-panel-head>\n        <fd-layout-panel-actions *ngIf=\"edit\" class=\"group-btns\">\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                    (click)=\"onToggleShowHide(appTileGroup)\"\n                ></button>\n                <button\n                    fd-button\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\n                    [label]=\"'Refresh' | bbbTranslate\"\n                    (click)=\"onReset(appTileGroup)\"\n                ></button>\n                <button\n                    *ngIf=\"!appTileGroup.Predefined\"\n                    fd-button\n                    [label]=\"'Delete' | bbbTranslate\"\n                    [fdType]=\"'negative'\"\n                    (click)=\"onDelete(appTileGroup)\"\n                ></button>\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n    </fd-layout-panel-header>\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\n        <div\n            class=\"tile-wrapper\"\n            [ngClass]=\"{ rtl: rtl, ltr: !rtl, s: deviceSize === 's' }\"\n            fd-panel-content\n            #tiles=\"cdkDropList\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n            [cdkDropListConnectedTo]=\"actionLinks\"\n            [cdkDropListData]=\"{\n                isTile: true,\n                items: appTileGroup.navigatorTiles || []\n            }\"\n        >\n            <ng-container *ngIf=\"!edit\">\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\n\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\n            </ng-container>\n            <div\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\n                [class.edit-home]=\"edit\"\n                cdkDrag\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\n            >\n                <span\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\n                    [enableCommand]=\"!edit && appTile.Component\"\n                    tileRenderer\n                    [data]=\"appTile\"\n                    [edit]=\"edit\"\n                    [component]=\"appTile.Component\"\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\n                ></span>\n            </div>\n            <fd-tile class=\"add-tile\" *ngIf=\"edit\" [routerLink]=\"['/home/appfinder']\">\n                <div>\n                    <fd-icon glyph=\"add\"></fd-icon>\n                </div>\n            </fd-tile>\n        </div>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<bt-actions-link\n    [class.actions-link-edit-home]=\"edit\"\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\n    [edit]=\"edit\"\n    [style.min-height]=\"edit ? '4rem' : 'auto'\"\n    cdkDropList\n    #actionLinks=\"cdkDropList\"\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListConnectedTo]=\"tiles\"\n    (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n    [cdkDropListData]=\"{\n        isTile: false,\n        items: appTileGroup.navigatorActionLinks || []\n    }\"\n>\n</bt-actions-link>\n<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\n    <bt-tiles-viewer-group\n        [appTileGroup]=\"appTileSubGroup\"\n        [edit]=\"edit\"\n        [rtl]=\"rtl\"\n        [stackContent]=\"stackContent\"\n        [isAppTileSubGroup]=\"true\"\n        [deviceSize]=\"deviceSize\"\n        (tilesDropped)=\"tilesDropped.emit($event)\"\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\n        (resetGroup)=\"resetGroup.emit($event)\"\n        (deleteGroup)=\"deleteGroup.emit($event)\"\n        (toggleGroup)=\"toggleGroup.emit($event)\"\n    ></bt-tiles-viewer-group>\n</ng-container>\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel fd-layout-panel-body:not(.small-size){margin-top:.5rem}fd-layout-panel fd-layout-panel-body.small-size{padding:1rem .5rem}fd-layout-panel[editHome=false]{background:transparent}::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}::ng-deep .fd-panel__content{border-bottom:none;padding:1px}.tile-wrapper{column-gap:3px;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}.tile-wrapper.s{width:100%}.tile-wrapper.s.rtl ::ng-deep .cdk-drag{margin-left:auto}.tile-wrapper.s.ltr ::ng-deep .cdk-drag{margin-right:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i6.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i6.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i6.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i6.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i6.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i6.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i7.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i8.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "component", type: i9.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "component", type: i10.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i10.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i11.ActionsLinkComponent, selector: "bt-actions-link", inputs: ["actionsLink", "edit"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "edit", "rtl", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "directive", type: i12.TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "edit"], outputs: ["hideClick", "renameClick"] }, { kind: "pipe", type: i13.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TilesViewerGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+TilesViewerGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: { appTileGroup: "appTileGroup", stackContent: "stackContent", edit: "edit", rtl: "rtl", isAppTileSubGroup: "isAppTileSubGroup", deviceSize: "deviceSize" }, outputs: { tilesDropped: "tilesDropped", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup" }, usesInheritance: true, ngImport: i0, template: "<fd-layout-panel [fixed]=\"true\" [attr.editHome]=\"edit\" cdkDrag [cdkDragDisabled]=\"!edit || !stackContent\">\n    <fd-layout-panel-header *ngIf=\"edit || stackContent || isAppTileSubGroup\">\n        <fd-layout-panel-head>\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\n        </fd-layout-panel-head>\n        <fd-layout-panel-actions *ngIf=\"edit\" class=\"group-btns\">\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                    (click)=\"onToggleShowHide(appTileGroup)\"\n                ></button>\n                <button\n                    fd-button\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\n                    [label]=\"'Refresh' | bbbTranslate\"\n                    (click)=\"onReset(appTileGroup)\"\n                ></button>\n                <button\n                    *ngIf=\"!appTileGroup.Predefined\"\n                    fd-button\n                    [label]=\"'Delete' | bbbTranslate\"\n                    [fdType]=\"'negative'\"\n                    (click)=\"onDelete(appTileGroup)\"\n                ></button>\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n    </fd-layout-panel-header>\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\n        <div\n            class=\"tile-wrapper\"\n            [ngClass]=\"{ rtl: rtl, ltr: !rtl, s: deviceSize === 's' }\"\n            fd-panel-content\n            #tiles=\"cdkDropList\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n            [cdkDropListConnectedTo]=\"actionLinks\"\n            [cdkDropListData]=\"{\n                isTile: true,\n                items: appTileGroup.navigatorTiles || []\n            }\"\n        >\n            <ng-container *ngIf=\"!edit\">\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\n\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\n            </ng-container>\n            <div\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\n                [class.edit-home]=\"edit\"\n                [class.isdouble]=\"appTile.Component?.Settings?.TileSetting?.IsDouble\"\n                cdkDrag\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\n            >\n                <span\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\n                    [enableCommand]=\"!edit && appTile.Component\"\n                    tileRenderer\n                    [data]=\"appTile\"\n                    [edit]=\"edit\"\n                    [component]=\"appTile.Component\"\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\n                ></span>\n            </div>\n            <fd-tile class=\"add-tile\" *ngIf=\"edit\" [routerLink]=\"['/home/appfinder']\">\n                <div>\n                    <fd-icon glyph=\"add\"></fd-icon>\n                </div>\n            </fd-tile>\n        </div>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<bt-actions-link\n    [class.actions-link-edit-home]=\"edit\"\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\n    [edit]=\"edit\"\n    [style.min-height]=\"edit ? '4rem' : 'auto'\"\n    cdkDropList\n    #actionLinks=\"cdkDropList\"\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListConnectedTo]=\"tiles\"\n    (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n    [cdkDropListData]=\"{\n        isTile: false,\n        items: appTileGroup.navigatorActionLinks || []\n    }\"\n>\n</bt-actions-link>\n<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\n    <bt-tiles-viewer-group\n        [appTileGroup]=\"appTileSubGroup\"\n        [edit]=\"edit\"\n        [rtl]=\"rtl\"\n        [stackContent]=\"stackContent\"\n        [isAppTileSubGroup]=\"true\"\n        [deviceSize]=\"deviceSize\"\n        (tilesDropped)=\"tilesDropped.emit($event)\"\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\n        (resetGroup)=\"resetGroup.emit($event)\"\n        (deleteGroup)=\"deleteGroup.emit($event)\"\n        (toggleGroup)=\"toggleGroup.emit($event)\"\n    ></bt-tiles-viewer-group>\n</ng-container>\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel fd-layout-panel-body:not(.small-size){margin-top:.5rem}fd-layout-panel fd-layout-panel-body.small-size{padding:1rem .5rem}fd-layout-panel[editHome=false]{background:transparent}::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}::ng-deep .fd-panel__content{border-bottom:none;padding:1px}.tile-wrapper{column-gap:.725rem;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}fd-layout-panel-body.small-size{display:flex;justify-content:center}fd-layout-panel-body.small-size .tile-wrapper{display:grid;grid-template-columns:154px 154px;gap:1rem}fd-layout-panel-body.small-size .tile-wrapper .isdouble{grid-column-start:1;grid-column-end:3}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i6.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i6.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i6.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i6.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i6.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i6.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i7.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i8.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "component", type: i9.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "component", type: i10.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i10.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: i11.ActionsLinkComponent, selector: "bt-actions-link", inputs: ["actionsLink", "edit"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "edit", "rtl", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "directive", type: i12.TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "edit"], outputs: ["hideClick", "renameClick"] }, { kind: "pipe", type: i13.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-tiles-viewer-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel [fixed]=\"true\" [attr.editHome]=\"edit\" cdkDrag [cdkDragDisabled]=\"!edit || !stackContent\">\n    <fd-layout-panel-header *ngIf=\"edit || stackContent || isAppTileSubGroup\">\n        <fd-layout-panel-head>\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\n        </fd-layout-panel-head>\n        <fd-layout-panel-actions *ngIf=\"edit\" class=\"group-btns\">\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                    (click)=\"onToggleShowHide(appTileGroup)\"\n                ></button>\n                <button\n                    fd-button\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\n                    [label]=\"'Refresh' | bbbTranslate\"\n                    (click)=\"onReset(appTileGroup)\"\n                ></button>\n                <button\n                    *ngIf=\"!appTileGroup.Predefined\"\n                    fd-button\n                    [label]=\"'Delete' | bbbTranslate\"\n                    [fdType]=\"'negative'\"\n                    (click)=\"onDelete(appTileGroup)\"\n                ></button>\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n    </fd-layout-panel-header>\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\n        <div\n            class=\"tile-wrapper\"\n            [ngClass]=\"{ rtl: rtl, ltr: !rtl, s: deviceSize === 's' }\"\n            fd-panel-content\n            #tiles=\"cdkDropList\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n            [cdkDropListConnectedTo]=\"actionLinks\"\n            [cdkDropListData]=\"{\n                isTile: true,\n                items: appTileGroup.navigatorTiles || []\n            }\"\n        >\n            <ng-container *ngIf=\"!edit\">\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\n\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\n            </ng-container>\n            <div\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\n                [class.edit-home]=\"edit\"\n                cdkDrag\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\n            >\n                <span\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\n                    [enableCommand]=\"!edit && appTile.Component\"\n                    tileRenderer\n                    [data]=\"appTile\"\n                    [edit]=\"edit\"\n                    [component]=\"appTile.Component\"\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\n                ></span>\n            </div>\n            <fd-tile class=\"add-tile\" *ngIf=\"edit\" [routerLink]=\"['/home/appfinder']\">\n                <div>\n                    <fd-icon glyph=\"add\"></fd-icon>\n                </div>\n            </fd-tile>\n        </div>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<bt-actions-link\n    [class.actions-link-edit-home]=\"edit\"\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\n    [edit]=\"edit\"\n    [style.min-height]=\"edit ? '4rem' : 'auto'\"\n    cdkDropList\n    #actionLinks=\"cdkDropList\"\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListConnectedTo]=\"tiles\"\n    (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n    [cdkDropListData]=\"{\n        isTile: false,\n        items: appTileGroup.navigatorActionLinks || []\n    }\"\n>\n</bt-actions-link>\n<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\n    <bt-tiles-viewer-group\n        [appTileGroup]=\"appTileSubGroup\"\n        [edit]=\"edit\"\n        [rtl]=\"rtl\"\n        [stackContent]=\"stackContent\"\n        [isAppTileSubGroup]=\"true\"\n        [deviceSize]=\"deviceSize\"\n        (tilesDropped)=\"tilesDropped.emit($event)\"\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\n        (resetGroup)=\"resetGroup.emit($event)\"\n        (deleteGroup)=\"deleteGroup.emit($event)\"\n        (toggleGroup)=\"toggleGroup.emit($event)\"\n    ></bt-tiles-viewer-group>\n</ng-container>\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel fd-layout-panel-body:not(.small-size){margin-top:.5rem}fd-layout-panel fd-layout-panel-body.small-size{padding:1rem .5rem}fd-layout-panel[editHome=false]{background:transparent}::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}::ng-deep .fd-panel__content{border-bottom:none;padding:1px}.tile-wrapper{column-gap:3px;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}.tile-wrapper.s{width:100%}.tile-wrapper.s.rtl ::ng-deep .cdk-drag{margin-left:auto}.tile-wrapper.s.ltr ::ng-deep .cdk-drag{margin-right:auto}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { appTileGroup: [{
+            args: [{ selector: 'bt-tiles-viewer-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel [fixed]=\"true\" [attr.editHome]=\"edit\" cdkDrag [cdkDragDisabled]=\"!edit || !stackContent\">\n    <fd-layout-panel-header *ngIf=\"edit || stackContent || isAppTileSubGroup\">\n        <fd-layout-panel-head>\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\n        </fd-layout-panel-head>\n        <fd-layout-panel-actions *ngIf=\"edit\" class=\"group-btns\">\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                    (click)=\"onToggleShowHide(appTileGroup)\"\n                ></button>\n                <button\n                    fd-button\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\n                    [label]=\"'Refresh' | bbbTranslate\"\n                    (click)=\"onReset(appTileGroup)\"\n                ></button>\n                <button\n                    *ngIf=\"!appTileGroup.Predefined\"\n                    fd-button\n                    [label]=\"'Delete' | bbbTranslate\"\n                    [fdType]=\"'negative'\"\n                    (click)=\"onDelete(appTileGroup)\"\n                ></button>\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n    </fd-layout-panel-header>\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\n        <div\n            class=\"tile-wrapper\"\n            [ngClass]=\"{ rtl: rtl, ltr: !rtl, s: deviceSize === 's' }\"\n            fd-panel-content\n            #tiles=\"cdkDropList\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n            [cdkDropListConnectedTo]=\"actionLinks\"\n            [cdkDropListData]=\"{\n                isTile: true,\n                items: appTileGroup.navigatorTiles || []\n            }\"\n        >\n            <ng-container *ngIf=\"!edit\">\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\n\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\n            </ng-container>\n            <div\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\n                [class.edit-home]=\"edit\"\n                [class.isdouble]=\"appTile.Component?.Settings?.TileSetting?.IsDouble\"\n                cdkDrag\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\n            >\n                <span\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\n                    [enableCommand]=\"!edit && appTile.Component\"\n                    tileRenderer\n                    [data]=\"appTile\"\n                    [edit]=\"edit\"\n                    [component]=\"appTile.Component\"\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\n                ></span>\n            </div>\n            <fd-tile class=\"add-tile\" *ngIf=\"edit\" [routerLink]=\"['/home/appfinder']\">\n                <div>\n                    <fd-icon glyph=\"add\"></fd-icon>\n                </div>\n            </fd-tile>\n        </div>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<bt-actions-link\n    [class.actions-link-edit-home]=\"edit\"\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\n    [edit]=\"edit\"\n    [style.min-height]=\"edit ? '4rem' : 'auto'\"\n    cdkDropList\n    #actionLinks=\"cdkDropList\"\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListConnectedTo]=\"tiles\"\n    (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n    [cdkDropListData]=\"{\n        isTile: false,\n        items: appTileGroup.navigatorActionLinks || []\n    }\"\n>\n</bt-actions-link>\n<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\n    <bt-tiles-viewer-group\n        [appTileGroup]=\"appTileSubGroup\"\n        [edit]=\"edit\"\n        [rtl]=\"rtl\"\n        [stackContent]=\"stackContent\"\n        [isAppTileSubGroup]=\"true\"\n        [deviceSize]=\"deviceSize\"\n        (tilesDropped)=\"tilesDropped.emit($event)\"\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\n        (resetGroup)=\"resetGroup.emit($event)\"\n        (deleteGroup)=\"deleteGroup.emit($event)\"\n        (toggleGroup)=\"toggleGroup.emit($event)\"\n    ></bt-tiles-viewer-group>\n</ng-container>\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel fd-layout-panel-body:not(.small-size){margin-top:.5rem}fd-layout-panel fd-layout-panel-body.small-size{padding:1rem .5rem}fd-layout-panel[editHome=false]{background:transparent}::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}::ng-deep .fd-panel__content{border-bottom:none;padding:1px}.tile-wrapper{column-gap:.725rem;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}fd-layout-panel-body.small-size{display:flex;justify-content:center}fd-layout-panel-body.small-size .tile-wrapper{display:grid;grid-template-columns:154px 154px;gap:1rem}fd-layout-panel-body.small-size .tile-wrapper .isdouble{grid-column-start:1;grid-column-end:3}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { appTileGroup: [{
                 type: Input
             }], stackContent: [{
                 type: Input
@@ -76,4 +85,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
             }], deleteGroup: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlsZXMtdmlld2VyLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2JhcnNhLXRpbGVzL3NyYy9saWIvdGlsZXMtdmlld2VyLWdyb3VwL3RpbGVzLXZpZXdlci1ncm91cC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9iYXJzYS10aWxlcy9zcmMvbGliL3RpbGVzLXZpZXdlci1ncm91cC90aWxlcy12aWV3ZXItZ3JvdXAuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVoRyxPQUFPLEVBQUUsYUFBYSxFQUE4QyxNQUFNLHNCQUFzQixDQUFDOzs7Ozs7Ozs7Ozs7Ozs7QUFRakcsTUFBTSxPQUFPLHlCQUEwQixTQUFRLGFBQWE7SUFpQnhEO1FBQ0ksS0FBSyxFQUFFLENBQUM7UUFWRixpQkFBWSxHQUFHLElBQUksWUFBWSxFQUdyQyxDQUFDO1FBQ0sscUJBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQXVCLENBQUM7UUFDM0QsdUJBQWtCLEdBQUcsSUFBSSxZQUFZLEVBQXVCLENBQUM7UUFDN0QsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBdUIsQ0FBQztRQUN0RCxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQXVCLENBQUM7UUFDckQsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBdUIsQ0FBQztJQUdoRSxDQUFDO0lBRUQsTUFBTSxDQUNGLFlBQWlDLEVBQ2pDLEtBQXFFO1FBRXJFLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxJQUFJLFlBQVksQ0FBQyxNQUFNLEVBQUU7WUFDbkMsT0FBTztTQUNWO1FBQ0QsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQztJQUNwRCxDQUFDO0lBQ0Qsa0JBQWtCLENBQUMsT0FBNEI7UUFDM0MsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUN4QyxDQUFDO0lBQ0Qsb0JBQW9CLENBQUMsT0FBNEI7UUFDN0MsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUMxQyxDQUFDO0lBQ0QsUUFBUSxDQUFDLFlBQWlDO1FBQ3RDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQ3hDLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxZQUFpQztRQUM5QyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUN4QyxDQUFDO0lBRUQsT0FBTyxDQUFDLFlBQWlDO1FBQ3JDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQ3ZDLENBQUM7O3NIQTlDUSx5QkFBeUI7MEdBQXpCLHlCQUF5QixxY0NYdEMsNmxKQTJHQSxxM0lEaEdhLHlCQUF5QjsyRkFBekIseUJBQXlCO2tCQU5yQyxTQUFTOytCQUNJLHVCQUF1QixtQkFHaEIsdUJBQXVCLENBQUMsTUFBTTswRUFHdEMsWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csaUJBQWlCO3NCQUF6QixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBRUksWUFBWTtzQkFBckIsTUFBTTtnQkFJRyxnQkFBZ0I7c0JBQXpCLE1BQU07Z0JBQ0csa0JBQWtCO3NCQUEzQixNQUFNO2dCQUNHLFdBQVc7c0JBQXBCLE1BQU07Z0JBQ0csVUFBVTtzQkFBbkIsTUFBTTtnQkFDRyxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2RrRHJhZ0Ryb3AgfSBmcm9tICdAYW5ndWxhci9jZGsvZHJhZy1kcm9wJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBCYXNlQ29tcG9uZW50LCBNZXRhb2JqZWN0RGF0YU1vZGVsLCBBYmJyZXZhdGlvbkRldmljZVNpemUgfSBmcm9tICdiYXJzYS1ub3Zpbi1yYXktY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnYnQtdGlsZXMtdmlld2VyLWdyb3VwJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdGlsZXMtdmlld2VyLWdyb3VwLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi90aWxlcy12aWV3ZXItZ3JvdXAuY29tcG9uZW50LnNjc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBUaWxlc1ZpZXdlckdyb3VwQ29tcG9uZW50IGV4dGVuZHMgQmFzZUNvbXBvbmVudCB7XG4gICAgQElucHV0KCkgYXBwVGlsZUdyb3VwOiBNZXRhb2JqZWN0RGF0YU1vZGVsO1xuICAgIEBJbnB1dCgpIHN0YWNrQ29udGVudDogYm9vbGVhbjtcbiAgICBASW5wdXQoKSBlZGl0OiBib29sZWFuO1xuICAgIEBJbnB1dCgpIHJ0bDogYm9vbGVhbjtcbiAgICBASW5wdXQoKSBpc0FwcFRpbGVTdWJHcm91cDogYm9vbGVhbjtcbiAgICBASW5wdXQoKSBkZXZpY2VTaXplOiBBYmJyZXZhdGlvbkRldmljZVNpemU7XG5cbiAgICBAT3V0cHV0KCkgdGlsZXNEcm9wcGVkID0gbmV3IEV2ZW50RW1pdHRlcjx7XG4gICAgICAgIGFwcFRpbGVHcm91cDogTWV0YW9iamVjdERhdGFNb2RlbDtcbiAgICAgICAgZXZlbnQ6IENka0RyYWdEcm9wPHsgaXNUaWxlOiBib29sZWFuOyBpdGVtczogTWV0YW9iamVjdERhdGFNb2RlbFtdIH0+O1xuICAgIH0+KCk7XG4gICAgQE91dHB1dCgpIGhpZGVBcHBUaWxlQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPE1ldGFvYmplY3REYXRhTW9kZWw+KCk7XG4gICAgQE91dHB1dCgpIHJlbmFtZUFwcFRpbGVDbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8TWV0YW9iamVjdERhdGFNb2RlbD4oKTtcbiAgICBAT3V0cHV0KCkgdG9nZ2xlR3JvdXAgPSBuZXcgRXZlbnRFbWl0dGVyPE1ldGFvYmplY3REYXRhTW9kZWw+KCk7XG4gICAgQE91dHB1dCgpIHJlc2V0R3JvdXAgPSBuZXcgRXZlbnRFbWl0dGVyPE1ldGFvYmplY3REYXRhTW9kZWw+KCk7XG4gICAgQE91dHB1dCgpIGRlbGV0ZUdyb3VwID0gbmV3IEV2ZW50RW1pdHRlcjxNZXRhb2JqZWN0RGF0YU1vZGVsPigpO1xuICAgIGNvbnN0cnVjdG9yKCkge1xuICAgICAgICBzdXBlcigpO1xuICAgIH1cblxuICAgIG9uRHJvcChcbiAgICAgICAgYXBwVGlsZUdyb3VwOiBNZXRhb2JqZWN0RGF0YU1vZGVsLFxuICAgICAgICBldmVudDogQ2RrRHJhZ0Ryb3A8eyBpc1RpbGU6IGJvb2xlYW47IGl0ZW1zOiBNZXRhb2JqZWN0RGF0YU1vZGVsW10gfT5cbiAgICApOiB2b2lkIHtcbiAgICAgICAgaWYgKCF0aGlzLmVkaXQgfHwgYXBwVGlsZUdyb3VwLkxvY2tlZCkge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG4gICAgICAgIHRoaXMudGlsZXNEcm9wcGVkLmVtaXQoeyBhcHBUaWxlR3JvdXAsIGV2ZW50IH0pO1xuICAgIH1cbiAgICBvbkFwcFRpbGVIaWRlQ2xpY2soYXBwVGlsZTogTWV0YW9iamVjdERhdGFNb2RlbCk6IHZvaWQge1xuICAgICAgICB0aGlzLmhpZGVBcHBUaWxlQ2xpY2suZW1pdChhcHBUaWxlKTtcbiAgICB9XG4gICAgb25BcHBUaWxlUmVuYW1lQ2xpY2soYXBwVGlsZTogTWV0YW9iamVjdERhdGFNb2RlbCk6IHZvaWQge1xuICAgICAgICB0aGlzLnJlbmFtZUFwcFRpbGVDbGljay5lbWl0KGFwcFRpbGUpO1xuICAgIH1cbiAgICBvbkRlbGV0ZShhcHBUaWxlR3JvdXA6IE1ldGFvYmplY3REYXRhTW9kZWwpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5kZWxldGVHcm91cC5lbWl0KGFwcFRpbGVHcm91cCk7XG4gICAgfVxuXG4gICAgb25Ub2dnbGVTaG93SGlkZShhcHBUaWxlR3JvdXA6IE1ldGFvYmplY3REYXRhTW9kZWwpOiB2b2lkIHtcbiAgICAgICAgdGhpcy50b2dnbGVHcm91cC5lbWl0KGFwcFRpbGVHcm91cCk7XG4gICAgfVxuXG4gICAgb25SZXNldChhcHBUaWxlR3JvdXA6IE1ldGFvYmplY3REYXRhTW9kZWwpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5yZXNldEdyb3VwLmVtaXQoYXBwVGlsZUdyb3VwKTtcbiAgICB9XG59XG4iLCI8ZmQtbGF5b3V0LXBhbmVsIFtmaXhlZF09XCJ0cnVlXCIgW2F0dHIuZWRpdEhvbWVdPVwiZWRpdFwiIGNka0RyYWcgW2Nka0RyYWdEaXNhYmxlZF09XCIhZWRpdCB8fCAhc3RhY2tDb250ZW50XCI+XG4gICAgPGZkLWxheW91dC1wYW5lbC1oZWFkZXIgKm5nSWY9XCJlZGl0IHx8IHN0YWNrQ29udGVudCB8fCBpc0FwcFRpbGVTdWJHcm91cFwiPlxuICAgICAgICA8ZmQtbGF5b3V0LXBhbmVsLWhlYWQ+XG4gICAgICAgICAgICA8aDIgZmQtbGF5b3V0LXBhbmVsLXRpdGxlPnt7IGFwcFRpbGVHcm91cC5uYXZpZ2F0b3JUaXRsZSB9fTwvaDI+XG4gICAgICAgIDwvZmQtbGF5b3V0LXBhbmVsLWhlYWQ+XG4gICAgICAgIDxmZC1sYXlvdXQtcGFuZWwtYWN0aW9ucyAqbmdJZj1cImVkaXRcIiBjbGFzcz1cImdyb3VwLWJ0bnNcIj5cbiAgICAgICAgICAgIDxmZC10b29sYmFyIFtzaG91bGRPdmVyZmxvd109XCJmYWxzZVwiIFtmZFR5cGVdPVwiJ3RyYW5zcGFyZW50J1wiIFtjbGVhckJvcmRlcl09XCJ0cnVlXCI+XG4gICAgICAgICAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgICAgICAgICBmZC1idXR0b25cbiAgICAgICAgICAgICAgICAgICAgZmQtdG9vbGJhci1pdGVtXG4gICAgICAgICAgICAgICAgICAgIFtsYWJlbF09XCIhYXBwVGlsZUdyb3VwLm5hdmlnYXRvclZpc2libGUgPyAoJ1Nob3cnIHwgYmJiVHJhbnNsYXRlKSA6ICgnSGlkZScgfCBiYmJUcmFuc2xhdGUpXCJcbiAgICAgICAgICAgICAgICAgICAgKGNsaWNrKT1cIm9uVG9nZ2xlU2hvd0hpZGUoYXBwVGlsZUdyb3VwKVwiXG4gICAgICAgICAgICAgICAgPjwvYnV0dG9uPlxuICAgICAgICAgICAgICAgIDxidXR0b25cbiAgICAgICAgICAgICAgICAgICAgZmQtYnV0dG9uXG4gICAgICAgICAgICAgICAgICAgICpuZ0lmPVwiYXBwVGlsZUdyb3VwLlByZWRlZmluZWQgJiYgYXBwVGlsZUdyb3VwLiRUaWxlU2V0dGluZ0NoYW5nZWRcIlxuICAgICAgICAgICAgICAgICAgICBbbGFiZWxdPVwiJ1JlZnJlc2gnIHwgYmJiVHJhbnNsYXRlXCJcbiAgICAgICAgICAgICAgICAgICAgKGNsaWNrKT1cIm9uUmVzZXQoYXBwVGlsZUdyb3VwKVwiXG4gICAgICAgICAgICAgICAgPjwvYnV0dG9uPlxuICAgICAgICAgICAgICAgIDxidXR0b25cbiAgICAgICAgICAgICAgICAgICAgKm5nSWY9XCIhYXBwVGlsZUdyb3VwLlByZWRlZmluZWRcIlxuICAgICAgICAgICAgICAgICAgICBmZC1idXR0b25cbiAgICAgICAgICAgICAgICAgICAgW2xhYmVsXT1cIidEZWxldGUnIHwgYmJiVHJhbnNsYXRlXCJcbiAgICAgICAgICAgICAgICAgICAgW2ZkVHlwZV09XCInbmVnYXRpdmUnXCJcbiAgICAgICAgICAgICAgICAgICAgKGNsaWNrKT1cIm9uRGVsZXRlKGFwcFRpbGVHcm91cClcIlxuICAgICAgICAgICAgICAgID48L2J1dHRvbj5cbiAgICAgICAgICAgIDwvZmQtdG9vbGJhcj5cbiAgICAgICAgPC9mZC1sYXlvdXQtcGFuZWwtYWN0aW9ucz5cbiAgICA8L2ZkLWxheW91dC1wYW5lbC1oZWFkZXI+XG4gICAgPGZkLWxheW91dC1wYW5lbC1ib2R5IFtibGVlZF09XCIhc3RhY2tDb250ZW50XCIgW2NsYXNzLnNtYWxsLXNpemVdPVwiZGV2aWNlU2l6ZSA9PT0gJ3MnXCI+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICAgIGNsYXNzPVwidGlsZS13cmFwcGVyXCJcbiAgICAgICAgICAgIFtuZ0NsYXNzXT1cInsgcnRsOiBydGwsIGx0cjogIXJ0bCwgczogZGV2aWNlU2l6ZSA9PT0gJ3MnIH1cIlxuICAgICAgICAgICAgZmQtcGFuZWwtY29udGVudFxuICAgICAgICAgICAgI3RpbGVzPVwiY2RrRHJvcExpc3RcIlxuICAgICAgICAgICAgY2RrRHJvcExpc3RcbiAgICAgICAgICAgIGNka0Ryb3BMaXN0T3JpZW50YXRpb249XCJob3Jpem9udGFsXCJcbiAgICAgICAgICAgIChjZGtEcm9wTGlzdERyb3BwZWQpPVwib25Ecm9wKGFwcFRpbGVHcm91cCwgJGV2ZW50KVwiXG4gICAgICAgICAgICBbY2RrRHJvcExpc3RDb25uZWN0ZWRUb109XCJhY3Rpb25MaW5rc1wiXG4gICAgICAgICAgICBbY2RrRHJvcExpc3REYXRhXT1cIntcbiAgICAgICAgICAgICAgICBpc1RpbGU6IHRydWUsXG4gICAgICAgICAgICAgICAgaXRlbXM6IGFwcFRpbGVHcm91cC5uYXZpZ2F0b3JUaWxlcyB8fCBbXVxuICAgICAgICAgICAgfVwiXG4gICAgICAgID5cbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhZWRpdFwiPlxuICAgICAgICAgICAgICAgIDxmZC1idXN5LWluZGljYXRvciBmZC10aXRsZSAqbmdJZj1cIiFhcHBUaWxlR3JvdXAuJFRpbGVzTG9hZGVkXCIgW2xvYWRpbmddPVwidHJ1ZVwiPjwvZmQtYnVzeS1pbmRpY2F0b3I+XG5cbiAgICAgICAgICAgICAgICA8aDUgZmQtdGl0bGUgKm5nSWY9XCIhYXBwVGlsZUdyb3VwLm5hdmlnYXRvclRpbGVzLmxlbmd0aCAmJiBhcHBUaWxlR3JvdXAuJFRpbGVzTG9hZGVkXCI+PC9oNT5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICpuZ0Zvcj1cImxldCBhcHBUaWxlIG9mIGFwcFRpbGVHcm91cC5uYXZpZ2F0b3JUaWxlczsgbGV0IGsgPSBpbmRleFwiXG4gICAgICAgICAgICAgICAgW2NsYXNzLmVkaXQtaG9tZV09XCJlZGl0XCJcbiAgICAgICAgICAgICAgICBjZGtEcmFnXG4gICAgICAgICAgICAgICAgW2Nka0RyYWdEaXNhYmxlZF09XCIhZWRpdCB8fCBhcHBUaWxlR3JvdXAuTG9ja2VkXCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8c3BhblxuICAgICAgICAgICAgICAgICAgICBbZHluYW1pY0NvbW1hbmRdPVwiYXBwVGlsZS5EeW5hbWljQ29tbWFuZFwiXG4gICAgICAgICAgICAgICAgICAgIFtlbmFibGVDb21tYW5kXT1cIiFlZGl0ICYmIGFwcFRpbGUuQ29tcG9uZW50XCJcbiAgICAgICAgICAgICAgICAgICAgdGlsZVJlbmRlcmVyXG4gICAgICAgICAgICAgICAgICAgIFtkYXRhXT1cImFwcFRpbGVcIlxuICAgICAgICAgICAgICAgICAgICBbZWRpdF09XCJlZGl0XCJcbiAgICAgICAgICAgICAgICAgICAgW2NvbXBvbmVudF09XCJhcHBUaWxlLkNvbXBvbmVudFwiXG4gICAgICAgICAgICAgICAgICAgIChoaWRlQ2xpY2spPVwib25BcHBUaWxlSGlkZUNsaWNrKGFwcFRpbGUpXCJcbiAgICAgICAgICAgICAgICAgICAgKHJlbmFtZUNsaWNrKT1cIm9uQXBwVGlsZVJlbmFtZUNsaWNrKGFwcFRpbGUpXCJcbiAgICAgICAgICAgICAgICA+PC9zcGFuPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZmQtdGlsZSBjbGFzcz1cImFkZC10aWxlXCIgKm5nSWY9XCJlZGl0XCIgW3JvdXRlckxpbmtdPVwiWycvaG9tZS9hcHBmaW5kZXInXVwiPlxuICAgICAgICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICAgICAgICAgIDxmZC1pY29uIGdseXBoPVwiYWRkXCI+PC9mZC1pY29uPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPC9mZC10aWxlPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2ZkLWxheW91dC1wYW5lbC1ib2R5PlxuPC9mZC1sYXlvdXQtcGFuZWw+XG5cbjxidC1hY3Rpb25zLWxpbmtcbiAgICBbY2xhc3MuYWN0aW9ucy1saW5rLWVkaXQtaG9tZV09XCJlZGl0XCJcbiAgICBbYWN0aW9uc0xpbmtdPVwiYXBwVGlsZUdyb3VwLm5hdmlnYXRvckFjdGlvbkxpbmtzXCJcbiAgICBbZWRpdF09XCJlZGl0XCJcbiAgICBbc3R5bGUubWluLWhlaWdodF09XCJlZGl0ID8gJzRyZW0nIDogJ2F1dG8nXCJcbiAgICBjZGtEcm9wTGlzdFxuICAgICNhY3Rpb25MaW5rcz1cImNka0Ryb3BMaXN0XCJcbiAgICBjZGtEcm9wTGlzdE9yaWVudGF0aW9uPVwiaG9yaXpvbnRhbFwiXG4gICAgW2Nka0Ryb3BMaXN0Q29ubmVjdGVkVG9dPVwidGlsZXNcIlxuICAgIChjZGtEcm9wTGlzdERyb3BwZWQpPVwib25Ecm9wKGFwcFRpbGVHcm91cCwgJGV2ZW50KVwiXG4gICAgW2Nka0Ryb3BMaXN0RGF0YV09XCJ7XG4gICAgICAgIGlzVGlsZTogZmFsc2UsXG4gICAgICAgIGl0ZW1zOiBhcHBUaWxlR3JvdXAubmF2aWdhdG9yQWN0aW9uTGlua3MgfHwgW11cbiAgICB9XCJcbj5cbjwvYnQtYWN0aW9ucy1saW5rPlxuPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgYXBwVGlsZVN1Ykdyb3VwIG9mIGFwcFRpbGVHcm91cC4kQ2hpbGRyZW5cIj5cbiAgICA8YnQtdGlsZXMtdmlld2VyLWdyb3VwXG4gICAgICAgIFthcHBUaWxlR3JvdXBdPVwiYXBwVGlsZVN1Ykdyb3VwXCJcbiAgICAgICAgW2VkaXRdPVwiZWRpdFwiXG4gICAgICAgIFtydGxdPVwicnRsXCJcbiAgICAgICAgW3N0YWNrQ29udGVudF09XCJzdGFja0NvbnRlbnRcIlxuICAgICAgICBbaXNBcHBUaWxlU3ViR3JvdXBdPVwidHJ1ZVwiXG4gICAgICAgIFtkZXZpY2VTaXplXT1cImRldmljZVNpemVcIlxuICAgICAgICAodGlsZXNEcm9wcGVkKT1cInRpbGVzRHJvcHBlZC5lbWl0KCRldmVudClcIlxuICAgICAgICAocmVuYW1lQXBwVGlsZUNsaWNrKT1cInJlbmFtZUFwcFRpbGVDbGljay5lbWl0KCRldmVudClcIlxuICAgICAgICAoaGlkZUFwcFRpbGVDbGljayk9XCJoaWRlQXBwVGlsZUNsaWNrLmVtaXQoJGV2ZW50KVwiXG4gICAgICAgIChyZXNldEdyb3VwKT1cInJlc2V0R3JvdXAuZW1pdCgkZXZlbnQpXCJcbiAgICAgICAgKGRlbGV0ZUdyb3VwKT1cImRlbGV0ZUdyb3VwLmVtaXQoJGV2ZW50KVwiXG4gICAgICAgICh0b2dnbGVHcm91cCk9XCJ0b2dnbGVHcm91cC5lbWl0KCRldmVudClcIlxuICAgID48L2J0LXRpbGVzLXZpZXdlci1ncm91cD5cbjwvbmctY29udGFpbmVyPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlsZXMtdmlld2VyLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2JhcnNhLXRpbGVzL3NyYy9saWIvdGlsZXMtdmlld2VyLWdyb3VwL3RpbGVzLXZpZXdlci1ncm91cC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9iYXJzYS10aWxlcy9zcmMvbGliL3RpbGVzLXZpZXdlci1ncm91cC90aWxlcy12aWV3ZXItZ3JvdXAuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUU1RyxPQUFPLEVBQUUsYUFBYSxFQUE4QyxNQUFNLHNCQUFzQixDQUFDOzs7Ozs7Ozs7Ozs7Ozs7QUFRakcsTUFBTSxPQUFPLHlCQUEwQixTQUFRLGFBQWE7SUFtQnhELFlBQXNCLEdBQWU7UUFDakMsS0FBSyxFQUFFLENBQUM7UUFEVSxRQUFHLEdBQUgsR0FBRyxDQUFZO1FBWDNCLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBR3JDLENBQUM7UUFDSyxxQkFBZ0IsR0FBRyxJQUFJLFlBQVksRUFBdUIsQ0FBQztRQUMzRCx1QkFBa0IsR0FBRyxJQUFJLFlBQVksRUFBdUIsQ0FBQztRQUM3RCxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUF1QixDQUFDO1FBQ3RELGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBdUIsQ0FBQztRQUNyRCxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUF1QixDQUFDO1FBRWhFLG9CQUFlLEdBQWtCLElBQUksQ0FBQztJQUd0QyxDQUFDO0lBRUQsZUFBZTtRQUNYLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixJQUFJLElBQUksQ0FBQyxVQUFVLEtBQUssR0FBRyxFQUFFO1lBQ3pCLE1BQU0sQ0FBQyxHQUFHLFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxHQUFHLEdBQUcsQ0FBQztZQUMxQyxJQUFJLENBQUMsZUFBZSxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUM7U0FDaEM7SUFDTCxDQUFDO0lBRUQsTUFBTSxDQUNGLFlBQWlDLEVBQ2pDLEtBQXFFO1FBRXJFLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxJQUFJLFlBQVksQ0FBQyxNQUFNLEVBQUU7WUFDbkMsT0FBTztTQUNWO1FBQ0QsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQztJQUNwRCxDQUFDO0lBQ0Qsa0JBQWtCLENBQUMsT0FBNEI7UUFDM0MsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUN4QyxDQUFDO0lBQ0Qsb0JBQW9CLENBQUMsT0FBNEI7UUFDN0MsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUMxQyxDQUFDO0lBQ0QsUUFBUSxDQUFDLFlBQWlDO1FBQ3RDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQ3hDLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxZQUFpQztRQUM5QyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUN4QyxDQUFDO0lBRUQsT0FBTyxDQUFDLFlBQWlDO1FBQ3JDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQ3ZDLENBQUM7O3NIQXhEUSx5QkFBeUI7MEdBQXpCLHlCQUF5QixxY0NYdEMsc3JKQTRHQSxtL0lEakdhLHlCQUF5QjsyRkFBekIseUJBQXlCO2tCQU5yQyxTQUFTOytCQUNJLHVCQUF1QixtQkFHaEIsdUJBQXVCLENBQUMsTUFBTTtpR0FHdEMsWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csaUJBQWlCO3NCQUF6QixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBRUksWUFBWTtzQkFBckIsTUFBTTtnQkFJRyxnQkFBZ0I7c0JBQXpCLE1BQU07Z0JBQ0csa0JBQWtCO3NCQUEzQixNQUFNO2dCQUNHLFdBQVc7c0JBQXBCLE1BQU07Z0JBQ0csVUFBVTtzQkFBbkIsTUFBTTtnQkFDRyxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2RrRHJhZ0Ryb3AgfSBmcm9tICdAYW5ndWxhci9jZGsvZHJhZy1kcm9wJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBCYXNlQ29tcG9uZW50LCBNZXRhb2JqZWN0RGF0YU1vZGVsLCBBYmJyZXZhdGlvbkRldmljZVNpemUgfSBmcm9tICdiYXJzYS1ub3Zpbi1yYXktY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnYnQtdGlsZXMtdmlld2VyLWdyb3VwJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdGlsZXMtdmlld2VyLWdyb3VwLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi90aWxlcy12aWV3ZXItZ3JvdXAuY29tcG9uZW50LnNjc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBUaWxlc1ZpZXdlckdyb3VwQ29tcG9uZW50IGV4dGVuZHMgQmFzZUNvbXBvbmVudCB7XG4gICAgQElucHV0KCkgYXBwVGlsZUdyb3VwOiBNZXRhb2JqZWN0RGF0YU1vZGVsO1xuICAgIEBJbnB1dCgpIHN0YWNrQ29udGVudDogYm9vbGVhbjtcbiAgICBASW5wdXQoKSBlZGl0OiBib29sZWFuO1xuICAgIEBJbnB1dCgpIHJ0bDogYm9vbGVhbjtcbiAgICBASW5wdXQoKSBpc0FwcFRpbGVTdWJHcm91cDogYm9vbGVhbjtcbiAgICBASW5wdXQoKSBkZXZpY2VTaXplOiBBYmJyZXZhdGlvbkRldmljZVNpemU7XG5cbiAgICBAT3V0cHV0KCkgdGlsZXNEcm9wcGVkID0gbmV3IEV2ZW50RW1pdHRlcjx7XG4gICAgICAgIGFwcFRpbGVHcm91cDogTWV0YW9iamVjdERhdGFNb2RlbDtcbiAgICAgICAgZXZlbnQ6IENka0RyYWdEcm9wPHsgaXNUaWxlOiBib29sZWFuOyBpdGVtczogTWV0YW9iamVjdERhdGFNb2RlbFtdIH0+O1xuICAgIH0+KCk7XG4gICAgQE91dHB1dCgpIGhpZGVBcHBUaWxlQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPE1ldGFvYmplY3REYXRhTW9kZWw+KCk7XG4gICAgQE91dHB1dCgpIHJlbmFtZUFwcFRpbGVDbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8TWV0YW9iamVjdERhdGFNb2RlbD4oKTtcbiAgICBAT3V0cHV0KCkgdG9nZ2xlR3JvdXAgPSBuZXcgRXZlbnRFbWl0dGVyPE1ldGFvYmplY3REYXRhTW9kZWw+KCk7XG4gICAgQE91dHB1dCgpIHJlc2V0R3JvdXAgPSBuZXcgRXZlbnRFbWl0dGVyPE1ldGFvYmplY3REYXRhTW9kZWw+KCk7XG4gICAgQE91dHB1dCgpIGRlbGV0ZUdyb3VwID0gbmV3IEV2ZW50RW1pdHRlcjxNZXRhb2JqZWN0RGF0YU1vZGVsPigpO1xuXG4gICAgbWFyZ2luUmlnaHRUaWxlOiBudW1iZXIgfCBudWxsID0gbnVsbDtcbiAgICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgX2VsOiBFbGVtZW50UmVmKSB7XG4gICAgICAgIHN1cGVyKCk7XG4gICAgfVxuXG4gICAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgICAgICBzdXBlci5uZ0FmdGVyVmlld0luaXQoKTtcbiAgICAgICAgaWYgKHRoaXMuZGV2aWNlU2l6ZSA9PT0gJ3MnKSB7XG4gICAgICAgICAgICBjb25zdCB0ID0gZG9jdW1lbnQuYm9keS5jbGllbnRXaWR0aCAlIDE1NDtcbiAgICAgICAgICAgIHRoaXMubWFyZ2luUmlnaHRUaWxlID0gdCAvIDM7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBvbkRyb3AoXG4gICAgICAgIGFwcFRpbGVHcm91cDogTWV0YW9iamVjdERhdGFNb2RlbCxcbiAgICAgICAgZXZlbnQ6IENka0RyYWdEcm9wPHsgaXNUaWxlOiBib29sZWFuOyBpdGVtczogTWV0YW9iamVjdERhdGFNb2RlbFtdIH0+XG4gICAgKTogdm9pZCB7XG4gICAgICAgIGlmICghdGhpcy5lZGl0IHx8IGFwcFRpbGVHcm91cC5Mb2NrZWQpIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuICAgICAgICB0aGlzLnRpbGVzRHJvcHBlZC5lbWl0KHsgYXBwVGlsZUdyb3VwLCBldmVudCB9KTtcbiAgICB9XG4gICAgb25BcHBUaWxlSGlkZUNsaWNrKGFwcFRpbGU6IE1ldGFvYmplY3REYXRhTW9kZWwpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5oaWRlQXBwVGlsZUNsaWNrLmVtaXQoYXBwVGlsZSk7XG4gICAgfVxuICAgIG9uQXBwVGlsZVJlbmFtZUNsaWNrKGFwcFRpbGU6IE1ldGFvYmplY3REYXRhTW9kZWwpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5yZW5hbWVBcHBUaWxlQ2xpY2suZW1pdChhcHBUaWxlKTtcbiAgICB9XG4gICAgb25EZWxldGUoYXBwVGlsZUdyb3VwOiBNZXRhb2JqZWN0RGF0YU1vZGVsKTogdm9pZCB7XG4gICAgICAgIHRoaXMuZGVsZXRlR3JvdXAuZW1pdChhcHBUaWxlR3JvdXApO1xuICAgIH1cblxuICAgIG9uVG9nZ2xlU2hvd0hpZGUoYXBwVGlsZUdyb3VwOiBNZXRhb2JqZWN0RGF0YU1vZGVsKTogdm9pZCB7XG4gICAgICAgIHRoaXMudG9nZ2xlR3JvdXAuZW1pdChhcHBUaWxlR3JvdXApO1xuICAgIH1cblxuICAgIG9uUmVzZXQoYXBwVGlsZUdyb3VwOiBNZXRhb2JqZWN0RGF0YU1vZGVsKTogdm9pZCB7XG4gICAgICAgIHRoaXMucmVzZXRHcm91cC5lbWl0KGFwcFRpbGVHcm91cCk7XG4gICAgfVxufVxuIiwiPGZkLWxheW91dC1wYW5lbCBbZml4ZWRdPVwidHJ1ZVwiIFthdHRyLmVkaXRIb21lXT1cImVkaXRcIiBjZGtEcmFnIFtjZGtEcmFnRGlzYWJsZWRdPVwiIWVkaXQgfHwgIXN0YWNrQ29udGVudFwiPlxuICAgIDxmZC1sYXlvdXQtcGFuZWwtaGVhZGVyICpuZ0lmPVwiZWRpdCB8fCBzdGFja0NvbnRlbnQgfHwgaXNBcHBUaWxlU3ViR3JvdXBcIj5cbiAgICAgICAgPGZkLWxheW91dC1wYW5lbC1oZWFkPlxuICAgICAgICAgICAgPGgyIGZkLWxheW91dC1wYW5lbC10aXRsZT57eyBhcHBUaWxlR3JvdXAubmF2aWdhdG9yVGl0bGUgfX08L2gyPlxuICAgICAgICA8L2ZkLWxheW91dC1wYW5lbC1oZWFkPlxuICAgICAgICA8ZmQtbGF5b3V0LXBhbmVsLWFjdGlvbnMgKm5nSWY9XCJlZGl0XCIgY2xhc3M9XCJncm91cC1idG5zXCI+XG4gICAgICAgICAgICA8ZmQtdG9vbGJhciBbc2hvdWxkT3ZlcmZsb3ddPVwiZmFsc2VcIiBbZmRUeXBlXT1cIid0cmFuc3BhcmVudCdcIiBbY2xlYXJCb3JkZXJdPVwidHJ1ZVwiPlxuICAgICAgICAgICAgICAgIDxidXR0b25cbiAgICAgICAgICAgICAgICAgICAgZmQtYnV0dG9uXG4gICAgICAgICAgICAgICAgICAgIGZkLXRvb2xiYXItaXRlbVxuICAgICAgICAgICAgICAgICAgICBbbGFiZWxdPVwiIWFwcFRpbGVHcm91cC5uYXZpZ2F0b3JWaXNpYmxlID8gKCdTaG93JyB8IGJiYlRyYW5zbGF0ZSkgOiAoJ0hpZGUnIHwgYmJiVHJhbnNsYXRlKVwiXG4gICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJvblRvZ2dsZVNob3dIaWRlKGFwcFRpbGVHcm91cClcIlxuICAgICAgICAgICAgICAgID48L2J1dHRvbj5cbiAgICAgICAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAgICAgICAgIGZkLWJ1dHRvblxuICAgICAgICAgICAgICAgICAgICAqbmdJZj1cImFwcFRpbGVHcm91cC5QcmVkZWZpbmVkICYmIGFwcFRpbGVHcm91cC4kVGlsZVNldHRpbmdDaGFuZ2VkXCJcbiAgICAgICAgICAgICAgICAgICAgW2xhYmVsXT1cIidSZWZyZXNoJyB8IGJiYlRyYW5zbGF0ZVwiXG4gICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJvblJlc2V0KGFwcFRpbGVHcm91cClcIlxuICAgICAgICAgICAgICAgID48L2J1dHRvbj5cbiAgICAgICAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAgICAgICAgICpuZ0lmPVwiIWFwcFRpbGVHcm91cC5QcmVkZWZpbmVkXCJcbiAgICAgICAgICAgICAgICAgICAgZmQtYnV0dG9uXG4gICAgICAgICAgICAgICAgICAgIFtsYWJlbF09XCInRGVsZXRlJyB8IGJiYlRyYW5zbGF0ZVwiXG4gICAgICAgICAgICAgICAgICAgIFtmZFR5cGVdPVwiJ25lZ2F0aXZlJ1wiXG4gICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJvbkRlbGV0ZShhcHBUaWxlR3JvdXApXCJcbiAgICAgICAgICAgICAgICA+PC9idXR0b24+XG4gICAgICAgICAgICA8L2ZkLXRvb2xiYXI+XG4gICAgICAgIDwvZmQtbGF5b3V0LXBhbmVsLWFjdGlvbnM+XG4gICAgPC9mZC1sYXlvdXQtcGFuZWwtaGVhZGVyPlxuICAgIDxmZC1sYXlvdXQtcGFuZWwtYm9keSBbYmxlZWRdPVwiIXN0YWNrQ29udGVudFwiIFtjbGFzcy5zbWFsbC1zaXplXT1cImRldmljZVNpemUgPT09ICdzJ1wiPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgICBjbGFzcz1cInRpbGUtd3JhcHBlclwiXG4gICAgICAgICAgICBbbmdDbGFzc109XCJ7IHJ0bDogcnRsLCBsdHI6ICFydGwsIHM6IGRldmljZVNpemUgPT09ICdzJyB9XCJcbiAgICAgICAgICAgIGZkLXBhbmVsLWNvbnRlbnRcbiAgICAgICAgICAgICN0aWxlcz1cImNka0Ryb3BMaXN0XCJcbiAgICAgICAgICAgIGNka0Ryb3BMaXN0XG4gICAgICAgICAgICBjZGtEcm9wTGlzdE9yaWVudGF0aW9uPVwiaG9yaXpvbnRhbFwiXG4gICAgICAgICAgICAoY2RrRHJvcExpc3REcm9wcGVkKT1cIm9uRHJvcChhcHBUaWxlR3JvdXAsICRldmVudClcIlxuICAgICAgICAgICAgW2Nka0Ryb3BMaXN0Q29ubmVjdGVkVG9dPVwiYWN0aW9uTGlua3NcIlxuICAgICAgICAgICAgW2Nka0Ryb3BMaXN0RGF0YV09XCJ7XG4gICAgICAgICAgICAgICAgaXNUaWxlOiB0cnVlLFxuICAgICAgICAgICAgICAgIGl0ZW1zOiBhcHBUaWxlR3JvdXAubmF2aWdhdG9yVGlsZXMgfHwgW11cbiAgICAgICAgICAgIH1cIlxuICAgICAgICA+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiIWVkaXRcIj5cbiAgICAgICAgICAgICAgICA8ZmQtYnVzeS1pbmRpY2F0b3IgZmQtdGl0bGUgKm5nSWY9XCIhYXBwVGlsZUdyb3VwLiRUaWxlc0xvYWRlZFwiIFtsb2FkaW5nXT1cInRydWVcIj48L2ZkLWJ1c3ktaW5kaWNhdG9yPlxuXG4gICAgICAgICAgICAgICAgPGg1IGZkLXRpdGxlICpuZ0lmPVwiIWFwcFRpbGVHcm91cC5uYXZpZ2F0b3JUaWxlcy5sZW5ndGggJiYgYXBwVGlsZUdyb3VwLiRUaWxlc0xvYWRlZFwiPjwvaDU+XG4gICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAqbmdGb3I9XCJsZXQgYXBwVGlsZSBvZiBhcHBUaWxlR3JvdXAubmF2aWdhdG9yVGlsZXM7IGxldCBrID0gaW5kZXhcIlxuICAgICAgICAgICAgICAgIFtjbGFzcy5lZGl0LWhvbWVdPVwiZWRpdFwiXG4gICAgICAgICAgICAgICAgW2NsYXNzLmlzZG91YmxlXT1cImFwcFRpbGUuQ29tcG9uZW50Py5TZXR0aW5ncz8uVGlsZVNldHRpbmc/LklzRG91YmxlXCJcbiAgICAgICAgICAgICAgICBjZGtEcmFnXG4gICAgICAgICAgICAgICAgW2Nka0RyYWdEaXNhYmxlZF09XCIhZWRpdCB8fCBhcHBUaWxlR3JvdXAuTG9ja2VkXCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8c3BhblxuICAgICAgICAgICAgICAgICAgICBbZHluYW1pY0NvbW1hbmRdPVwiYXBwVGlsZS5EeW5hbWljQ29tbWFuZFwiXG4gICAgICAgICAgICAgICAgICAgIFtlbmFibGVDb21tYW5kXT1cIiFlZGl0ICYmIGFwcFRpbGUuQ29tcG9uZW50XCJcbiAgICAgICAgICAgICAgICAgICAgdGlsZVJlbmRlcmVyXG4gICAgICAgICAgICAgICAgICAgIFtkYXRhXT1cImFwcFRpbGVcIlxuICAgICAgICAgICAgICAgICAgICBbZWRpdF09XCJlZGl0XCJcbiAgICAgICAgICAgICAgICAgICAgW2NvbXBvbmVudF09XCJhcHBUaWxlLkNvbXBvbmVudFwiXG4gICAgICAgICAgICAgICAgICAgIChoaWRlQ2xpY2spPVwib25BcHBUaWxlSGlkZUNsaWNrKGFwcFRpbGUpXCJcbiAgICAgICAgICAgICAgICAgICAgKHJlbmFtZUNsaWNrKT1cIm9uQXBwVGlsZVJlbmFtZUNsaWNrKGFwcFRpbGUpXCJcbiAgICAgICAgICAgICAgICA+PC9zcGFuPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZmQtdGlsZSBjbGFzcz1cImFkZC10aWxlXCIgKm5nSWY9XCJlZGl0XCIgW3JvdXRlckxpbmtdPVwiWycvaG9tZS9hcHBmaW5kZXInXVwiPlxuICAgICAgICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICAgICAgICAgIDxmZC1pY29uIGdseXBoPVwiYWRkXCI+PC9mZC1pY29uPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPC9mZC10aWxlPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2ZkLWxheW91dC1wYW5lbC1ib2R5PlxuPC9mZC1sYXlvdXQtcGFuZWw+XG5cbjxidC1hY3Rpb25zLWxpbmtcbiAgICBbY2xhc3MuYWN0aW9ucy1saW5rLWVkaXQtaG9tZV09XCJlZGl0XCJcbiAgICBbYWN0aW9uc0xpbmtdPVwiYXBwVGlsZUdyb3VwLm5hdmlnYXRvckFjdGlvbkxpbmtzXCJcbiAgICBbZWRpdF09XCJlZGl0XCJcbiAgICBbc3R5bGUubWluLWhlaWdodF09XCJlZGl0ID8gJzRyZW0nIDogJ2F1dG8nXCJcbiAgICBjZGtEcm9wTGlzdFxuICAgICNhY3Rpb25MaW5rcz1cImNka0Ryb3BMaXN0XCJcbiAgICBjZGtEcm9wTGlzdE9yaWVudGF0aW9uPVwiaG9yaXpvbnRhbFwiXG4gICAgW2Nka0Ryb3BMaXN0Q29ubmVjdGVkVG9dPVwidGlsZXNcIlxuICAgIChjZGtEcm9wTGlzdERyb3BwZWQpPVwib25Ecm9wKGFwcFRpbGVHcm91cCwgJGV2ZW50KVwiXG4gICAgW2Nka0Ryb3BMaXN0RGF0YV09XCJ7XG4gICAgICAgIGlzVGlsZTogZmFsc2UsXG4gICAgICAgIGl0ZW1zOiBhcHBUaWxlR3JvdXAubmF2aWdhdG9yQWN0aW9uTGlua3MgfHwgW11cbiAgICB9XCJcbj5cbjwvYnQtYWN0aW9ucy1saW5rPlxuPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgYXBwVGlsZVN1Ykdyb3VwIG9mIGFwcFRpbGVHcm91cC4kQ2hpbGRyZW5cIj5cbiAgICA8YnQtdGlsZXMtdmlld2VyLWdyb3VwXG4gICAgICAgIFthcHBUaWxlR3JvdXBdPVwiYXBwVGlsZVN1Ykdyb3VwXCJcbiAgICAgICAgW2VkaXRdPVwiZWRpdFwiXG4gICAgICAgIFtydGxdPVwicnRsXCJcbiAgICAgICAgW3N0YWNrQ29udGVudF09XCJzdGFja0NvbnRlbnRcIlxuICAgICAgICBbaXNBcHBUaWxlU3ViR3JvdXBdPVwidHJ1ZVwiXG4gICAgICAgIFtkZXZpY2VTaXplXT1cImRldmljZVNpemVcIlxuICAgICAgICAodGlsZXNEcm9wcGVkKT1cInRpbGVzRHJvcHBlZC5lbWl0KCRldmVudClcIlxuICAgICAgICAocmVuYW1lQXBwVGlsZUNsaWNrKT1cInJlbmFtZUFwcFRpbGVDbGljay5lbWl0KCRldmVudClcIlxuICAgICAgICAoaGlkZUFwcFRpbGVDbGljayk9XCJoaWRlQXBwVGlsZUNsaWNrLmVtaXQoJGV2ZW50KVwiXG4gICAgICAgIChyZXNldEdyb3VwKT1cInJlc2V0R3JvdXAuZW1pdCgkZXZlbnQpXCJcbiAgICAgICAgKGRlbGV0ZUdyb3VwKT1cImRlbGV0ZUdyb3VwLmVtaXQoJGV2ZW50KVwiXG4gICAgICAgICh0b2dnbGVHcm91cCk9XCJ0b2dnbGVHcm91cC5lbWl0KCRldmVudClcIlxuICAgID48L2J0LXRpbGVzLXZpZXdlci1ncm91cD5cbjwvbmctY29udGFpbmVyPlxuIl19

package/fesm2015/barsa-tiles.mjs

@@ -843,18 +843,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
         }] });
 
 class ActionsLinkComponent extends BaseComponent {
+    /**
+     *
+     */
+    constructor(_cdr) {
+        super();
+        this._cdr = _cdr;
+    }
     ngOnInit() {
         var _a;
         super.ngOnInit();
-        this.hide = !((_a = this.actionsLink) === null || _a === void 0 ? void 0 : _a.length);
+        this.hide = ((_a = this.actionsLink) === null || _a === void 0 ? void 0 : _a.length) === 0;
+    }
+    ngOnChanges(changes) {
+        var _a;
+        super.ngOnChanges(changes);
+        const { actionsLink } = changes;
+        if (!actionsLink.firstChange) {
+            this.hide = ((_a = actionsLink.currentValue) === null || _a === void 0 ? void 0 : _a.length) === 0;
+            this._cdr.detectChanges();
+        }
     }
 }
-ActionsLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ActionsLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActionsLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: { actionsLink: "actionsLink", edit: "edit" }, host: { properties: { "class.hide": "this.hide" } }, usesInheritance: true, ngImport: i0, template: "<bt-action-item\n    *ngFor=\"let actionItem of actionsLink\"\n    cdkDrag\n    [data]=\"actionItem\"\n    [edit]=\"edit\"\n    [title]=\"actionItem | tileProp: 'Title'\"\n    [subtitle]=\"actionItem | tileProp: 'Subtitle'\"\n    [dynamicCommand]=\"actionItem | tileProp: 'DynamicCommand'\"\n    [isDouble]=\"actionItem | tileProp: 'IsDouble'\"\n    [footer]=\"actionItem | tileProp: 'Footer'\"\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\n    [mo]=\"actionItem\"\n>\n</bt-action-item>\n", styles: [":host{display:flex;width:100%;row-gap:3px;flex-wrap:wrap;border-radius:var(--sapElement_BorderCornerRadius, .25rem);column-gap:3px;padding:1rem 0}bt-action-item{margin-top:auto;margin-bottom:auto}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ActionItemComponent, selector: "bt-action-item" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ActionsLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ActionsLinkComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ActionsLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: { actionsLink: "actionsLink", edit: "edit" }, host: { properties: { "class.hide": "this.hide" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<bt-action-item\n    *ngFor=\"let actionItem of actionsLink\"\n    cdkDrag\n    [data]=\"actionItem\"\n    [edit]=\"edit\"\n    [title]=\"actionItem | tileProp: 'Title'\"\n    [subtitle]=\"actionItem | tileProp: 'Subtitle'\"\n    [dynamicCommand]=\"actionItem | tileProp: 'DynamicCommand'\"\n    [isDouble]=\"actionItem | tileProp: 'IsDouble'\"\n    [footer]=\"actionItem | tileProp: 'Footer'\"\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\n    [mo]=\"actionItem\"\n>\n</bt-action-item>\n", styles: [":host{display:flex;width:100%;row-gap:3px;flex-wrap:wrap;border-radius:var(--sapElement_BorderCornerRadius, .25rem);column-gap:3px;padding:1rem 0}bt-action-item{margin-top:auto;margin-bottom:auto}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ActionItemComponent, selector: "bt-action-item" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ActionsLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bt-actions-link', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-action-item\n    *ngFor=\"let actionItem of actionsLink\"\n    cdkDrag\n    [data]=\"actionItem\"\n    [edit]=\"edit\"\n    [title]=\"actionItem | tileProp: 'Title'\"\n    [subtitle]=\"actionItem | tileProp: 'Subtitle'\"\n    [dynamicCommand]=\"actionItem | tileProp: 'DynamicCommand'\"\n    [isDouble]=\"actionItem | tileProp: 'IsDouble'\"\n    [footer]=\"actionItem | tileProp: 'Footer'\"\n    [cdkDragDisabled]=\"!actionItem || actionItem.Locked\"\n    [mo]=\"actionItem\"\n>\n</bt-action-item>\n", styles: [":host{display:flex;width:100%;row-gap:3px;flex-wrap:wrap;border-radius:var(--sapElement_BorderCornerRadius, .25rem);column-gap:3px;padding:1rem 0}bt-action-item{margin-top:auto;margin-bottom:auto}\n"] }]
-        }], propDecorators: { hide: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { hide: [{
                 type: HostBinding,
                 args: ['class.hide']
             }], actionsLink: [{
@@ -929,14 +945,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
             }] } });
 
 class TilesViewerGroupComponent extends BaseComponent {
-    constructor() {
+    constructor(_el) {
         super();
+        this._el = _el;
         this.tilesDropped = new EventEmitter();
         this.hideAppTileClick = new EventEmitter();
         this.renameAppTileClick = new EventEmitter();
         this.toggleGroup = new EventEmitter();
         this.resetGroup = new EventEmitter();
         this.deleteGroup = new EventEmitter();
+        this.marginRightTile = null;
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        if (this.deviceSize === 's') {
+            const t = document.body.clientWidth % 154;
+            this.marginRightTile = t / 3;
+        }
     }
     onDrop(appTileGroup, event) {
         if (!this.edit || appTileGroup.Locked) {
@@ -960,12 +985,12 @@ class TilesViewerGroupComponent extends BaseComponent {
         this.resetGroup.emit(appTileGroup);
     }
 }
-TilesViewerGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TilesViewerGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: { appTileGroup: "appTileGroup", stackContent: "stackContent", edit: "edit", rtl: "rtl", isAppTileSubGroup: "isAppTileSubGroup", deviceSize: "deviceSize" }, outputs: { tilesDropped: "tilesDropped", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup" }, usesInheritance: true, ngImport: i0, template: "<fd-layout-panel [fixed]=\"true\" [attr.editHome]=\"edit\" cdkDrag [cdkDragDisabled]=\"!edit || !stackContent\">\n    <fd-layout-panel-header *ngIf=\"edit || stackContent || isAppTileSubGroup\">\n        <fd-layout-panel-head>\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\n        </fd-layout-panel-head>\n        <fd-layout-panel-actions *ngIf=\"edit\" class=\"group-btns\">\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                    (click)=\"onToggleShowHide(appTileGroup)\"\n                ></button>\n                <button\n                    fd-button\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\n                    [label]=\"'Refresh' | bbbTranslate\"\n                    (click)=\"onReset(appTileGroup)\"\n                ></button>\n                <button\n                    *ngIf=\"!appTileGroup.Predefined\"\n                    fd-button\n                    [label]=\"'Delete' | bbbTranslate\"\n                    [fdType]=\"'negative'\"\n                    (click)=\"onDelete(appTileGroup)\"\n                ></button>\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n    </fd-layout-panel-header>\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\n        <div\n            class=\"tile-wrapper\"\n            [ngClass]=\"{ rtl: rtl, ltr: !rtl, s: deviceSize === 's' }\"\n            fd-panel-content\n            #tiles=\"cdkDropList\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n            [cdkDropListConnectedTo]=\"actionLinks\"\n            [cdkDropListData]=\"{\n                isTile: true,\n                items: appTileGroup.navigatorTiles || []\n            }\"\n        >\n            <ng-container *ngIf=\"!edit\">\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\n\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\n            </ng-container>\n            <div\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\n                [class.edit-home]=\"edit\"\n                cdkDrag\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\n            >\n                <span\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\n                    [enableCommand]=\"!edit && appTile.Component\"\n                    tileRenderer\n                    [data]=\"appTile\"\n                    [edit]=\"edit\"\n                    [component]=\"appTile.Component\"\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\n                ></span>\n            </div>\n            <fd-tile class=\"add-tile\" *ngIf=\"edit\" [routerLink]=\"['/home/appfinder']\">\n                <div>\n                    <fd-icon glyph=\"add\"></fd-icon>\n                </div>\n            </fd-tile>\n        </div>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<bt-actions-link\n    [class.actions-link-edit-home]=\"edit\"\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\n    [edit]=\"edit\"\n    [style.min-height]=\"edit ? '4rem' : 'auto'\"\n    cdkDropList\n    #actionLinks=\"cdkDropList\"\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListConnectedTo]=\"tiles\"\n    (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n    [cdkDropListData]=\"{\n        isTile: false,\n        items: appTileGroup.navigatorActionLinks || []\n    }\"\n>\n</bt-actions-link>\n<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\n    <bt-tiles-viewer-group\n        [appTileGroup]=\"appTileSubGroup\"\n        [edit]=\"edit\"\n        [rtl]=\"rtl\"\n        [stackContent]=\"stackContent\"\n        [isAppTileSubGroup]=\"true\"\n        [deviceSize]=\"deviceSize\"\n        (tilesDropped)=\"tilesDropped.emit($event)\"\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\n        (resetGroup)=\"resetGroup.emit($event)\"\n        (deleteGroup)=\"deleteGroup.emit($event)\"\n        (toggleGroup)=\"toggleGroup.emit($event)\"\n    ></bt-tiles-viewer-group>\n</ng-container>\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel fd-layout-panel-body:not(.small-size){margin-top:.5rem}fd-layout-panel fd-layout-panel-body.small-size{padding:1rem .5rem}fd-layout-panel[editHome=false]{background:transparent}::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}::ng-deep .fd-panel__content{border-bottom:none;padding:1px}.tile-wrapper{column-gap:3px;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}.tile-wrapper.s{width:100%}.tile-wrapper.s.rtl ::ng-deep .cdk-drag{margin-left:auto}.tile-wrapper.s.ltr ::ng-deep .cdk-drag{margin-right:auto}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i6.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i6.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i6.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i6.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i6.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i6.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i8.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "component", type: i1$3.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "component", type: i10.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i10.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: ["actionsLink", "edit"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "edit", "rtl", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "directive", type: TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "edit"], outputs: ["hideClick", "renameClick"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TilesViewerGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+TilesViewerGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: { appTileGroup: "appTileGroup", stackContent: "stackContent", edit: "edit", rtl: "rtl", isAppTileSubGroup: "isAppTileSubGroup", deviceSize: "deviceSize" }, outputs: { tilesDropped: "tilesDropped", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup" }, usesInheritance: true, ngImport: i0, template: "<fd-layout-panel [fixed]=\"true\" [attr.editHome]=\"edit\" cdkDrag [cdkDragDisabled]=\"!edit || !stackContent\">\n    <fd-layout-panel-header *ngIf=\"edit || stackContent || isAppTileSubGroup\">\n        <fd-layout-panel-head>\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\n        </fd-layout-panel-head>\n        <fd-layout-panel-actions *ngIf=\"edit\" class=\"group-btns\">\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                    (click)=\"onToggleShowHide(appTileGroup)\"\n                ></button>\n                <button\n                    fd-button\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\n                    [label]=\"'Refresh' | bbbTranslate\"\n                    (click)=\"onReset(appTileGroup)\"\n                ></button>\n                <button\n                    *ngIf=\"!appTileGroup.Predefined\"\n                    fd-button\n                    [label]=\"'Delete' | bbbTranslate\"\n                    [fdType]=\"'negative'\"\n                    (click)=\"onDelete(appTileGroup)\"\n                ></button>\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n    </fd-layout-panel-header>\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\n        <div\n            class=\"tile-wrapper\"\n            [ngClass]=\"{ rtl: rtl, ltr: !rtl, s: deviceSize === 's' }\"\n            fd-panel-content\n            #tiles=\"cdkDropList\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n            [cdkDropListConnectedTo]=\"actionLinks\"\n            [cdkDropListData]=\"{\n                isTile: true,\n                items: appTileGroup.navigatorTiles || []\n            }\"\n        >\n            <ng-container *ngIf=\"!edit\">\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\n\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\n            </ng-container>\n            <div\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\n                [class.edit-home]=\"edit\"\n                [class.isdouble]=\"appTile.Component?.Settings?.TileSetting?.IsDouble\"\n                cdkDrag\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\n            >\n                <span\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\n                    [enableCommand]=\"!edit && appTile.Component\"\n                    tileRenderer\n                    [data]=\"appTile\"\n                    [edit]=\"edit\"\n                    [component]=\"appTile.Component\"\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\n                ></span>\n            </div>\n            <fd-tile class=\"add-tile\" *ngIf=\"edit\" [routerLink]=\"['/home/appfinder']\">\n                <div>\n                    <fd-icon glyph=\"add\"></fd-icon>\n                </div>\n            </fd-tile>\n        </div>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<bt-actions-link\n    [class.actions-link-edit-home]=\"edit\"\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\n    [edit]=\"edit\"\n    [style.min-height]=\"edit ? '4rem' : 'auto'\"\n    cdkDropList\n    #actionLinks=\"cdkDropList\"\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListConnectedTo]=\"tiles\"\n    (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n    [cdkDropListData]=\"{\n        isTile: false,\n        items: appTileGroup.navigatorActionLinks || []\n    }\"\n>\n</bt-actions-link>\n<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\n    <bt-tiles-viewer-group\n        [appTileGroup]=\"appTileSubGroup\"\n        [edit]=\"edit\"\n        [rtl]=\"rtl\"\n        [stackContent]=\"stackContent\"\n        [isAppTileSubGroup]=\"true\"\n        [deviceSize]=\"deviceSize\"\n        (tilesDropped)=\"tilesDropped.emit($event)\"\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\n        (resetGroup)=\"resetGroup.emit($event)\"\n        (deleteGroup)=\"deleteGroup.emit($event)\"\n        (toggleGroup)=\"toggleGroup.emit($event)\"\n    ></bt-tiles-viewer-group>\n</ng-container>\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel fd-layout-panel-body:not(.small-size){margin-top:.5rem}fd-layout-panel fd-layout-panel-body.small-size{padding:1rem .5rem}fd-layout-panel[editHome=false]{background:transparent}::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}::ng-deep .fd-panel__content{border-bottom:none;padding:1px}.tile-wrapper{column-gap:.725rem;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}fd-layout-panel-body.small-size{display:flex;justify-content:center}fd-layout-panel-body.small-size .tile-wrapper{display:grid;grid-template-columns:154px 154px;gap:1rem}fd-layout-panel-body.small-size .tile-wrapper .isdouble{grid-column-start:1;grid-column-end:3}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i6.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage"] }, { kind: "component", type: i6.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i6.LayoutPanelHeadComponent, selector: "fd-layout-panel-head" }, { kind: "directive", type: i6.LayoutPanelTitleDirective, selector: "[fd-layout-panel-title]" }, { kind: "component", type: i6.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i6.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i8.PanelContentDirective, selector: "[fd-panel-content]", inputs: ["height", "minHeight", "maxHeight", "ariaLabel", "ariaLabelledBy", "role", "id"] }, { kind: "component", type: i1$3.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "component", type: i10.ToolbarComponent, selector: "fd-toolbar", inputs: ["class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i10.ToolbarItemDirective, selector: "[fd-toolbar-item]" }, { kind: "component", type: ActionsLinkComponent, selector: "bt-actions-link", inputs: ["actionsLink", "edit"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "edit", "rtl", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "directive", type: TileRendererDirective, selector: "[tileRenderer]", inputs: ["component", "data", "edit"], outputs: ["hideClick", "renameClick"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TilesViewerGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-tiles-viewer-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel [fixed]=\"true\" [attr.editHome]=\"edit\" cdkDrag [cdkDragDisabled]=\"!edit || !stackContent\">\n    <fd-layout-panel-header *ngIf=\"edit || stackContent || isAppTileSubGroup\">\n        <fd-layout-panel-head>\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\n        </fd-layout-panel-head>\n        <fd-layout-panel-actions *ngIf=\"edit\" class=\"group-btns\">\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                    (click)=\"onToggleShowHide(appTileGroup)\"\n                ></button>\n                <button\n                    fd-button\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\n                    [label]=\"'Refresh' | bbbTranslate\"\n                    (click)=\"onReset(appTileGroup)\"\n                ></button>\n                <button\n                    *ngIf=\"!appTileGroup.Predefined\"\n                    fd-button\n                    [label]=\"'Delete' | bbbTranslate\"\n                    [fdType]=\"'negative'\"\n                    (click)=\"onDelete(appTileGroup)\"\n                ></button>\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n    </fd-layout-panel-header>\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\n        <div\n            class=\"tile-wrapper\"\n            [ngClass]=\"{ rtl: rtl, ltr: !rtl, s: deviceSize === 's' }\"\n            fd-panel-content\n            #tiles=\"cdkDropList\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n            [cdkDropListConnectedTo]=\"actionLinks\"\n            [cdkDropListData]=\"{\n                isTile: true,\n                items: appTileGroup.navigatorTiles || []\n            }\"\n        >\n            <ng-container *ngIf=\"!edit\">\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\n\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\n            </ng-container>\n            <div\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\n                [class.edit-home]=\"edit\"\n                cdkDrag\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\n            >\n                <span\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\n                    [enableCommand]=\"!edit && appTile.Component\"\n                    tileRenderer\n                    [data]=\"appTile\"\n                    [edit]=\"edit\"\n                    [component]=\"appTile.Component\"\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\n                ></span>\n            </div>\n            <fd-tile class=\"add-tile\" *ngIf=\"edit\" [routerLink]=\"['/home/appfinder']\">\n                <div>\n                    <fd-icon glyph=\"add\"></fd-icon>\n                </div>\n            </fd-tile>\n        </div>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<bt-actions-link\n    [class.actions-link-edit-home]=\"edit\"\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\n    [edit]=\"edit\"\n    [style.min-height]=\"edit ? '4rem' : 'auto'\"\n    cdkDropList\n    #actionLinks=\"cdkDropList\"\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListConnectedTo]=\"tiles\"\n    (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n    [cdkDropListData]=\"{\n        isTile: false,\n        items: appTileGroup.navigatorActionLinks || []\n    }\"\n>\n</bt-actions-link>\n<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\n    <bt-tiles-viewer-group\n        [appTileGroup]=\"appTileSubGroup\"\n        [edit]=\"edit\"\n        [rtl]=\"rtl\"\n        [stackContent]=\"stackContent\"\n        [isAppTileSubGroup]=\"true\"\n        [deviceSize]=\"deviceSize\"\n        (tilesDropped)=\"tilesDropped.emit($event)\"\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\n        (resetGroup)=\"resetGroup.emit($event)\"\n        (deleteGroup)=\"deleteGroup.emit($event)\"\n        (toggleGroup)=\"toggleGroup.emit($event)\"\n    ></bt-tiles-viewer-group>\n</ng-container>\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel fd-layout-panel-body:not(.small-size){margin-top:.5rem}fd-layout-panel fd-layout-panel-body.small-size{padding:1rem .5rem}fd-layout-panel[editHome=false]{background:transparent}::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}::ng-deep .fd-panel__content{border-bottom:none;padding:1px}.tile-wrapper{column-gap:3px;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}.tile-wrapper.s{width:100%}.tile-wrapper.s.rtl ::ng-deep .cdk-drag{margin-left:auto}.tile-wrapper.s.ltr ::ng-deep .cdk-drag{margin-right:auto}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { appTileGroup: [{
+            args: [{ selector: 'bt-tiles-viewer-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel [fixed]=\"true\" [attr.editHome]=\"edit\" cdkDrag [cdkDragDisabled]=\"!edit || !stackContent\">\n    <fd-layout-panel-header *ngIf=\"edit || stackContent || isAppTileSubGroup\">\n        <fd-layout-panel-head>\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\n        </fd-layout-panel-head>\n        <fd-layout-panel-actions *ngIf=\"edit\" class=\"group-btns\">\n            <fd-toolbar [shouldOverflow]=\"false\" [fdType]=\"'transparent'\" [clearBorder]=\"true\">\n                <button\n                    fd-button\n                    fd-toolbar-item\n                    [label]=\"!appTileGroup.navigatorVisible ? ('Show' | bbbTranslate) : ('Hide' | bbbTranslate)\"\n                    (click)=\"onToggleShowHide(appTileGroup)\"\n                ></button>\n                <button\n                    fd-button\n                    *ngIf=\"appTileGroup.Predefined && appTileGroup.$TileSettingChanged\"\n                    [label]=\"'Refresh' | bbbTranslate\"\n                    (click)=\"onReset(appTileGroup)\"\n                ></button>\n                <button\n                    *ngIf=\"!appTileGroup.Predefined\"\n                    fd-button\n                    [label]=\"'Delete' | bbbTranslate\"\n                    [fdType]=\"'negative'\"\n                    (click)=\"onDelete(appTileGroup)\"\n                ></button>\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n    </fd-layout-panel-header>\n    <fd-layout-panel-body [bleed]=\"!stackContent\" [class.small-size]=\"deviceSize === 's'\">\n        <div\n            class=\"tile-wrapper\"\n            [ngClass]=\"{ rtl: rtl, ltr: !rtl, s: deviceSize === 's' }\"\n            fd-panel-content\n            #tiles=\"cdkDropList\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n            [cdkDropListConnectedTo]=\"actionLinks\"\n            [cdkDropListData]=\"{\n                isTile: true,\n                items: appTileGroup.navigatorTiles || []\n            }\"\n        >\n            <ng-container *ngIf=\"!edit\">\n                <fd-busy-indicator fd-title *ngIf=\"!appTileGroup.$TilesLoaded\" [loading]=\"true\"></fd-busy-indicator>\n\n                <h5 fd-title *ngIf=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"></h5>\n            </ng-container>\n            <div\n                *ngFor=\"let appTile of appTileGroup.navigatorTiles; let k = index\"\n                [class.edit-home]=\"edit\"\n                [class.isdouble]=\"appTile.Component?.Settings?.TileSetting?.IsDouble\"\n                cdkDrag\n                [cdkDragDisabled]=\"!edit || appTileGroup.Locked\"\n            >\n                <span\n                    [dynamicCommand]=\"appTile.DynamicCommand\"\n                    [enableCommand]=\"!edit && appTile.Component\"\n                    tileRenderer\n                    [data]=\"appTile\"\n                    [edit]=\"edit\"\n                    [component]=\"appTile.Component\"\n                    (hideClick)=\"onAppTileHideClick(appTile)\"\n                    (renameClick)=\"onAppTileRenameClick(appTile)\"\n                ></span>\n            </div>\n            <fd-tile class=\"add-tile\" *ngIf=\"edit\" [routerLink]=\"['/home/appfinder']\">\n                <div>\n                    <fd-icon glyph=\"add\"></fd-icon>\n                </div>\n            </fd-tile>\n        </div>\n    </fd-layout-panel-body>\n</fd-layout-panel>\n\n<bt-actions-link\n    [class.actions-link-edit-home]=\"edit\"\n    [actionsLink]=\"appTileGroup.navigatorActionLinks\"\n    [edit]=\"edit\"\n    [style.min-height]=\"edit ? '4rem' : 'auto'\"\n    cdkDropList\n    #actionLinks=\"cdkDropList\"\n    cdkDropListOrientation=\"horizontal\"\n    [cdkDropListConnectedTo]=\"tiles\"\n    (cdkDropListDropped)=\"onDrop(appTileGroup, $event)\"\n    [cdkDropListData]=\"{\n        isTile: false,\n        items: appTileGroup.navigatorActionLinks || []\n    }\"\n>\n</bt-actions-link>\n<ng-container *ngFor=\"let appTileSubGroup of appTileGroup.$Children\">\n    <bt-tiles-viewer-group\n        [appTileGroup]=\"appTileSubGroup\"\n        [edit]=\"edit\"\n        [rtl]=\"rtl\"\n        [stackContent]=\"stackContent\"\n        [isAppTileSubGroup]=\"true\"\n        [deviceSize]=\"deviceSize\"\n        (tilesDropped)=\"tilesDropped.emit($event)\"\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\n        (resetGroup)=\"resetGroup.emit($event)\"\n        (deleteGroup)=\"deleteGroup.emit($event)\"\n        (toggleGroup)=\"toggleGroup.emit($event)\"\n    ></bt-tiles-viewer-group>\n</ng-container>\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel fd-layout-panel-body:not(.small-size){margin-top:.5rem}fd-layout-panel fd-layout-panel-body.small-size{padding:1rem .5rem}fd-layout-panel[editHome=false]{background:transparent}::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}::ng-deep .fd-panel__content{border-bottom:none;padding:1px}.tile-wrapper{column-gap:.725rem;row-gap:1rem;display:inline-flex;flex-wrap:wrap;align-items:center}.actions-link-edit-home{background-color:var(--sapGroup_ContentBackground, #fff);border-color:var(--sapGroup_ContentBorderColor, #d9d9d9);border-width:var(--sapElement_BorderWidth, .0625rem);border-style:solid}.add-tile{background-color:transparent!important}.add-tile ::ng-deep div{background-color:transparent!important;margin:10px 0}.add-tile div:first-child{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.add-tile fd-icon{font-size:1.5rem;color:#3c4043}fd-layout-panel-body.small-size{display:flex;justify-content:center}fd-layout-panel-body.small-size .tile-wrapper{display:grid;grid-template-columns:154px 154px;gap:1rem}fd-layout-panel-body.small-size .tile-wrapper .isdouble{grid-column-start:1;grid-column-end:3}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { appTileGroup: [{
                 type: Input
             }], stackContent: [{
                 type: Input
@@ -1624,10 +1649,10 @@ class NewsTileComponent extends BaseBtTileComponent {
     }
 }
 NewsTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NewsTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NewsTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: NewsTileComponent, selector: "bt-news-tile", viewQueries: [{ propertyName: "carouselComponent", first: true, predicate: CarouselComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [footerTemplate]=\"newsFooter\"\r\n    [edit]=\"edit\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content style=\"align-items: center; padding-top: 1rem\">\r\n        <span>\r\n            {{ activeNews?.Text }}\r\n        </span>\r\n\r\n        <div class=\"wrapper-carousel\">\r\n            <div class=\"cover\"></div>\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [glyph]=\"isStop ? 'play' : 'pause'\"\r\n                (click)=\"isStop = !isStop; $event.preventDefault(); $event.stopPropagation()\"\r\n            ></button>\r\n            <fd-carousel\r\n                carouselIndicatorsOrientation=\"top\"\r\n                [slideTransitionDuration]=\"1000\"\r\n                (slideChange)=\"slideChange($event)\"\r\n                [loop]=\"true\"\r\n                [navigation]=\"false\"\r\n                [navigatorInPageIndicator]=\"false\"\r\n                width=\"100%\"\r\n            >\r\n                <fd-carousel-item *ngFor=\"let slide of slides\" [value]=\"slide\">\r\n                    <img\r\n                        [src]=\"slide.Img ? (slide.Img.FileId | picFieldSrc: 'ID':null:slide.Img.FileId:335:170) : ''\"\r\n                    />\r\n                </fd-carousel-item>\r\n            </fd-carousel>\r\n        </div>\r\n    </div>\r\n</bt-tile>\r\n\r\n<!--  tile footer-->\r\n<ng-template #newsFooter>\r\n    <div fd-tile-footer [twoColumn]=\"twoColumn\" *untilInView=\"el\">\r\n        <ng-container *ngIf=\"twoColumn; else oneColumn\">\r\n            <div fd-tile-section>\r\n                <span fd-tile-footer-text>{{ activeNews?.Footer1 }}</span>\r\n            </div>\r\n            <div fd-tile-section>\r\n                <span fd-tile-footer-text>{{ activeNews?.Footer2 }}</span>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #oneColumn>\r\n            <span fd-tile-footer-text>{{ activeNews?.Footer1 }}</span>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{position:relative;display:block}:host bt-tile{position:relative}:host bt-tile .wrapper-carousel{position:absolute;top:0;width:100%;height:100%;left:0;z-index:0}:host bt-tile .wrapper-carousel img{width:335px;height:165px;object-fit:cover}:host ::ng-deep span{z-index:3;color:#fff}:host ::ng-deep button{position:absolute;right:15px;top:15px;display:none}:host ::ng-deep button fd-icon{z-index:4;min-width:1.5rem!important;font-size:1.5rem!important;color:#fff!important}:host ::ng-deep .fd-carousel__content{z-index:3}:host ::ng-deep .fd-carousel__page-indicator-container{position:absolute;bottom:0;display:none;background-color:transparent}:host ::ng-deep .fd-carousel__page-indicator-container ol{z-index:5}:host ::ng-deep .fd-carousel__page-indicator-container ol li{background-color:#dad7d7}:host ::ng-deep .fd-carousel__page-indicator-container ol li.fd-carousel__page-indicator--active{background-color:#fff}:host .cover{background-color:#064079d9;position:absolute;bottom:0;left:0;right:0;height:50%;z-index:4;opacity:.6}:host:hover ::ng-deep .fd-carousel__page-indicator-container{display:inherit}:host:hover ::ng-deep button{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3$2.CarouselComponent, selector: "fd-carousel", inputs: ["id", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "pageIndicatorsOrientation", "height", "width", "loop", "leftNavigationBtnLabel", "rightNavigationBtnLabel", "navigation", "navigatorInPageIndicator", "numericIndicator", "pageIndicatorContainer", "pageIndicator", "resourceStrings", "slideTransitionDuration", "swipeEnabled", "vertical", "visibleSlidesCount"], outputs: ["slideChange"] }, { kind: "component", type: i3$2.CarouselItemComponent, selector: "fd-carousel-item", inputs: ["id", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "loading", "title", "initialHeight", "initialWidth", "value"] }, { kind: "directive", type: i1$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileFooterDirective, selector: "[fdTileFooter], [fd-tile-footer]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileSectionDirective, selector: "[fdTileSection], [fd-tile-section]" }, { kind: "directive", type: i1$3.TileFooterTextDirective, selector: "[fdTileFooterText], [fd-tile-footer-text]" }, { kind: "directive", type: i1.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: i1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NewsTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: NewsTileComponent, selector: "bt-news-tile", viewQueries: [{ propertyName: "carouselComponent", first: true, predicate: CarouselComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [footerTemplate]=\"newsFooter\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content style=\"align-items: center; padding-top: 1rem\">\n        <span>\n            {{ activeNews?.Text | bbbTranslate }}\n        </span>\n\n        <div class=\"wrapper-carousel\">\n            <div class=\"cover\"></div>\n            <button\n                fd-button\n                fdType=\"transparent\"\n                [glyph]=\"isStop ? 'play' : 'pause'\"\n                (click)=\"isStop = !isStop; $event.preventDefault(); $event.stopPropagation()\"\n            ></button>\n            <fd-carousel\n                carouselIndicatorsOrientation=\"top\"\n                [slideTransitionDuration]=\"1000\"\n                (slideChange)=\"slideChange($event)\"\n                [loop]=\"true\"\n                [navigation]=\"false\"\n                [navigatorInPageIndicator]=\"false\"\n                width=\"100%\"\n            >\n                <fd-carousel-item *ngFor=\"let slide of slides\" [value]=\"slide\">\n                    <img\n                        [src]=\"slide.Img ? (slide.Img.FileId | picFieldSrc: 'ID':null:slide.Img.FileId:335:170) : ''\"\n                    />\n                </fd-carousel-item>\n            </fd-carousel>\n        </div>\n    </div>\n</bt-tile>\n\n<!--  tile footer-->\n<ng-template #newsFooter>\n    <div fd-tile-footer [twoColumn]=\"twoColumn\" *untilInView=\"el\">\n        <ng-container *ngIf=\"twoColumn; else oneColumn\">\n            <div fd-tile-section>\n                <span fd-tile-footer-text>{{ activeNews?.Footer1 | bbbTranslate }}</span>\n            </div>\n            <div fd-tile-section>\n                <span fd-tile-footer-text>{{ activeNews?.Footer2 | bbbTranslate }}</span>\n            </div>\n        </ng-container>\n        <ng-template #oneColumn>\n            <span fd-tile-footer-text>{{ activeNews?.Footer1 | bbbTranslate }}</span>\n        </ng-template>\n    </div>\n</ng-template>\n", styles: [":host{position:relative;display:block}:host bt-tile{position:relative}:host bt-tile .wrapper-carousel{position:absolute;top:0;width:100%;height:100%;left:0;z-index:0}:host bt-tile .wrapper-carousel img{width:335px;height:165px;object-fit:cover}:host ::ng-deep span{z-index:3;color:#fff}:host ::ng-deep button{position:absolute;right:15px;top:15px;display:none}:host ::ng-deep button fd-icon{z-index:4;min-width:1.5rem!important;font-size:1.5rem!important;color:#fff!important}:host ::ng-deep .fd-carousel__content{z-index:3}:host ::ng-deep .fd-carousel__page-indicator-container{position:absolute;bottom:0;display:none;background-color:transparent}:host ::ng-deep .fd-carousel__page-indicator-container ol{z-index:5}:host ::ng-deep .fd-carousel__page-indicator-container ol li{background-color:#dad7d7}:host ::ng-deep .fd-carousel__page-indicator-container ol li.fd-carousel__page-indicator--active{background-color:#fff}:host .cover{background-color:#064079d9;position:absolute;bottom:0;left:0;right:0;height:50%;z-index:4;opacity:.6}:host:hover ::ng-deep .fd-carousel__page-indicator-container{display:inherit}:host:hover ::ng-deep button{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3$2.CarouselComponent, selector: "fd-carousel", inputs: ["id", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "pageIndicatorsOrientation", "height", "width", "loop", "leftNavigationBtnLabel", "rightNavigationBtnLabel", "navigation", "navigatorInPageIndicator", "numericIndicator", "pageIndicatorContainer", "pageIndicator", "resourceStrings", "slideTransitionDuration", "swipeEnabled", "vertical", "visibleSlidesCount"], outputs: ["slideChange"] }, { kind: "component", type: i3$2.CarouselItemComponent, selector: "fd-carousel-item", inputs: ["id", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "loading", "title", "initialHeight", "initialWidth", "value"] }, { kind: "directive", type: i1$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileFooterDirective, selector: "[fdTileFooter], [fd-tile-footer]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileSectionDirective, selector: "[fdTileSection], [fd-tile-section]" }, { kind: "directive", type: i1$3.TileFooterTextDirective, selector: "[fdTileFooterText], [fd-tile-footer-text]" }, { kind: "directive", type: i1.UntilInViewDirective, selector: "[untilInView]", inputs: ["untilInView", "intersectionDebounce"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "subtitle", "isDouble", "edit", "dynamicCommand"] }, { kind: "pipe", type: i1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: NewsTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-news-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'launch'\"\r\n    [footerTemplate]=\"newsFooter\"\r\n    [edit]=\"edit\"\r\n    [title]=\"data | tileProp: 'Title':parameters\"\r\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\r\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\r\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\r\n    [footer]=\"data | tileProp: 'Footer':parameters\"\r\n    (hideClick)=\"hideClick.emit()\"\r\n    (renameClick)=\"renameClick.emit()\"\r\n    (click)=\"onTileClick()\"\r\n>\r\n    <div fd-tile-content style=\"align-items: center; padding-top: 1rem\">\r\n        <span>\r\n            {{ activeNews?.Text }}\r\n        </span>\r\n\r\n        <div class=\"wrapper-carousel\">\r\n            <div class=\"cover\"></div>\r\n            <button\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [glyph]=\"isStop ? 'play' : 'pause'\"\r\n                (click)=\"isStop = !isStop; $event.preventDefault(); $event.stopPropagation()\"\r\n            ></button>\r\n            <fd-carousel\r\n                carouselIndicatorsOrientation=\"top\"\r\n                [slideTransitionDuration]=\"1000\"\r\n                (slideChange)=\"slideChange($event)\"\r\n                [loop]=\"true\"\r\n                [navigation]=\"false\"\r\n                [navigatorInPageIndicator]=\"false\"\r\n                width=\"100%\"\r\n            >\r\n                <fd-carousel-item *ngFor=\"let slide of slides\" [value]=\"slide\">\r\n                    <img\r\n                        [src]=\"slide.Img ? (slide.Img.FileId | picFieldSrc: 'ID':null:slide.Img.FileId:335:170) : ''\"\r\n                    />\r\n                </fd-carousel-item>\r\n            </fd-carousel>\r\n        </div>\r\n    </div>\r\n</bt-tile>\r\n\r\n<!--  tile footer-->\r\n<ng-template #newsFooter>\r\n    <div fd-tile-footer [twoColumn]=\"twoColumn\" *untilInView=\"el\">\r\n        <ng-container *ngIf=\"twoColumn; else oneColumn\">\r\n            <div fd-tile-section>\r\n                <span fd-tile-footer-text>{{ activeNews?.Footer1 }}</span>\r\n            </div>\r\n            <div fd-tile-section>\r\n                <span fd-tile-footer-text>{{ activeNews?.Footer2 }}</span>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #oneColumn>\r\n            <span fd-tile-footer-text>{{ activeNews?.Footer1 }}</span>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{position:relative;display:block}:host bt-tile{position:relative}:host bt-tile .wrapper-carousel{position:absolute;top:0;width:100%;height:100%;left:0;z-index:0}:host bt-tile .wrapper-carousel img{width:335px;height:165px;object-fit:cover}:host ::ng-deep span{z-index:3;color:#fff}:host ::ng-deep button{position:absolute;right:15px;top:15px;display:none}:host ::ng-deep button fd-icon{z-index:4;min-width:1.5rem!important;font-size:1.5rem!important;color:#fff!important}:host ::ng-deep .fd-carousel__content{z-index:3}:host ::ng-deep .fd-carousel__page-indicator-container{position:absolute;bottom:0;display:none;background-color:transparent}:host ::ng-deep .fd-carousel__page-indicator-container ol{z-index:5}:host ::ng-deep .fd-carousel__page-indicator-container ol li{background-color:#dad7d7}:host ::ng-deep .fd-carousel__page-indicator-container ol li.fd-carousel__page-indicator--active{background-color:#fff}:host .cover{background-color:#064079d9;position:absolute;bottom:0;left:0;right:0;height:50%;z-index:4;opacity:.6}:host:hover ::ng-deep .fd-carousel__page-indicator-container{display:inherit}:host:hover ::ng-deep button{display:inline-flex}\n"] }]
+            args: [{ selector: 'bt-news-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\n    [footerTemplate]=\"newsFooter\"\n    [edit]=\"edit\"\n    [title]=\"data | tileProp: 'Title':parameters\"\n    [subtitle]=\"data | tileProp: 'Subtitle':parameters\"\n    [dynamicCommand]=\"data | tileProp: 'DynamicCommand':parameters\"\n    [isDouble]=\"data | tileProp: 'IsDouble':parameters\"\n    [footer]=\"data | tileProp: 'Footer':parameters\"\n    (hideClick)=\"hideClick.emit()\"\n    (renameClick)=\"renameClick.emit()\"\n    (click)=\"onTileClick()\"\n>\n    <div fd-tile-content style=\"align-items: center; padding-top: 1rem\">\n        <span>\n            {{ activeNews?.Text | bbbTranslate }}\n        </span>\n\n        <div class=\"wrapper-carousel\">\n            <div class=\"cover\"></div>\n            <button\n                fd-button\n                fdType=\"transparent\"\n                [glyph]=\"isStop ? 'play' : 'pause'\"\n                (click)=\"isStop = !isStop; $event.preventDefault(); $event.stopPropagation()\"\n            ></button>\n            <fd-carousel\n                carouselIndicatorsOrientation=\"top\"\n                [slideTransitionDuration]=\"1000\"\n                (slideChange)=\"slideChange($event)\"\n                [loop]=\"true\"\n                [navigation]=\"false\"\n                [navigatorInPageIndicator]=\"false\"\n                width=\"100%\"\n            >\n                <fd-carousel-item *ngFor=\"let slide of slides\" [value]=\"slide\">\n                    <img\n                        [src]=\"slide.Img ? (slide.Img.FileId | picFieldSrc: 'ID':null:slide.Img.FileId:335:170) : ''\"\n                    />\n                </fd-carousel-item>\n            </fd-carousel>\n        </div>\n    </div>\n</bt-tile>\n\n<!--  tile footer-->\n<ng-template #newsFooter>\n    <div fd-tile-footer [twoColumn]=\"twoColumn\" *untilInView=\"el\">\n        <ng-container *ngIf=\"twoColumn; else oneColumn\">\n            <div fd-tile-section>\n                <span fd-tile-footer-text>{{ activeNews?.Footer1 | bbbTranslate }}</span>\n            </div>\n            <div fd-tile-section>\n                <span fd-tile-footer-text>{{ activeNews?.Footer2 | bbbTranslate }}</span>\n            </div>\n        </ng-container>\n        <ng-template #oneColumn>\n            <span fd-tile-footer-text>{{ activeNews?.Footer1 | bbbTranslate }}</span>\n        </ng-template>\n    </div>\n</ng-template>\n", styles: [":host{position:relative;display:block}:host bt-tile{position:relative}:host bt-tile .wrapper-carousel{position:absolute;top:0;width:100%;height:100%;left:0;z-index:0}:host bt-tile .wrapper-carousel img{width:335px;height:165px;object-fit:cover}:host ::ng-deep span{z-index:3;color:#fff}:host ::ng-deep button{position:absolute;right:15px;top:15px;display:none}:host ::ng-deep button fd-icon{z-index:4;min-width:1.5rem!important;font-size:1.5rem!important;color:#fff!important}:host ::ng-deep .fd-carousel__content{z-index:3}:host ::ng-deep .fd-carousel__page-indicator-container{position:absolute;bottom:0;display:none;background-color:transparent}:host ::ng-deep .fd-carousel__page-indicator-container ol{z-index:5}:host ::ng-deep .fd-carousel__page-indicator-container ol li{background-color:#dad7d7}:host ::ng-deep .fd-carousel__page-indicator-container ol li.fd-carousel__page-indicator--active{background-color:#fff}:host .cover{background-color:#064079d9;position:absolute;bottom:0;left:0;right:0;height:50%;z-index:4;opacity:.6}:host:hover ::ng-deep .fd-carousel__page-indicator-container{display:inherit}:host:hover ::ng-deep button{display:inline-flex}\n"] }]
         }], propDecorators: { carouselComponent: [{
                 type: ViewChild,
                 args: [CarouselComponent]
@@ -2409,8 +2434,16 @@ class ShellbarComponent extends BaseComponent {
     }
     get subtitle() {
         var _a, _b, _c;
-        return ((_a = this.shellbarData) === null || _a === void 0 ? void 0 : _a.Subtitle)
-            ? `${(_b = this.shellbarData) === null || _b === void 0 ? void 0 : _b.Subtitle} ${typeof ((_c = this.shellbarData) === null || _c === void 0 ? void 0 : _c.CalcSubtitle) === 'string' ? this.shellbarData.CalcSubtitle : ''}`
+        if (!this.shellbarData) {
+            return '';
+        }
+        if (this.deviceSize === 's' && this.shellbarData.MobileSubtitle) {
+            return this.shellbarData.MobileSubtitle
+                ? `${this.shellbarData.MobileSubtitle} ${typeof ((_a = this.shellbarData) === null || _a === void 0 ? void 0 : _a.calcSubtitle) === 'string' ? this.shellbarData.calcSubtitle : ''}`
+                : '';
+        }
+        return this.shellbarData.Subtitle
+            ? `${(_b = this.shellbarData) === null || _b === void 0 ? void 0 : _b.Subtitle} ${typeof ((_c = this.shellbarData) === null || _c === void 0 ? void 0 : _c.calcSubtitle) === 'string' ? this.shellbarData.calcSubtitle : ''}`
             : '';
     }
     get logo() {
@@ -2554,10 +2587,10 @@ class ShellbarComponent extends BaseComponent {
     }
 }
 ShellbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ShellbarComponent, deps: [{ token: i1.PortalService }, { token: i1.BreadcrumbService }, { token: TilesService }, { token: i0.ChangeDetectorRef }, { token: i1.BbbTranslatePipe }, { token: i3$3.DomSanitizer }, { token: i1.NotificationService }, { token: i1$1.DialogService }, { token: DOCUMENT }, { token: APP_VERSION }], target: i0.ɵɵFactoryTarget.Component });
-ShellbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ShellbarComponent, selector: "bt-shellbar", viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ComboboxComponent, descendants: true }, { propertyName: "popoverComponent", first: true, predicate: ["popoverComponent"], descendants: true }, { propertyName: "_notificationsDialog", first: true, predicate: ["notificationsDialog"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<link *ngIf=\"cssUrl$ | async as cssUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\n<link *ngIf=\"cssCustomUrl$ | async as cssCustomUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\n\n<fd-shellbar *ngIf=\"(userLoggedIn$ | async) || allowAnonymous\" [size]=\"deviceSize\" [ngClass]=\"deviceSize\">\n    <fd-shellbar-logo *ngIf=\"logo\">\n        <a\n            [style.backgroundImage]=\"'url(' + (logo?.FileId | picFieldSrc: 'GetPictureFromFileInfo':null) + ')'\"\n            href=\"/\"\n            class=\"fd-shellbar__logo fd-shellbar__logo--image-replaced\"\n            aria-label=\"Barsa Novin Ray\"\n        ></a>\n    </fd-shellbar-logo>\n\n    <fd-product-menu\n        *ngIf=\"!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0\"\n        [control]=\"productMenuControl\"\n        [closePopoverOnSelect]=\"true\"\n        [items]=\"productMenuItems1\"\n    >\n    </fd-product-menu>\n\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }} </fd-shellbar-subtitle>\n    <fd-shellbar-actions\n        *ngIf=\"user && (userMenu?.length || !settings?.HideLanguage)\"\n        [user]=\"user\"\n        [userMenu]=\"userMenu\"\n        #langRef\n    >\n        <fd-shellbar-action\n            *ngFor=\"let action of actions\"\n            [glyph]=\"action.Icon\"\n            [callback]=\"action.Callback\"\n            [label]=\"action.Label\"\n        >\n        </fd-shellbar-action>\n        <fd-shellbar-action\n            *ngIf=\"deviceSize === 's'\"\n            [glyph]=\"'bell'\"\n            [label]=\"'Notifications' | bbbTranslate\"\n            [notificationCount]=\"(notificationsCount$ | async)?.unread ?? 0\"\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\n            [callback]=\"onBellNotification\"\n        >\n        </fd-shellbar-action>\n        <fd-popover\n            *ngIf=\"!settings?.HideNotifications && (notificationsCount$ | async) as notificationCount\"\n            [(isOpen)]=\"isOpenNotificatoin\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [noArrow]=\"true\"\n            placement=\"bottom\"\n            title=\"Notification Popover\"\n            [focusAutoCapture]=\"true\"\n            [mobile]=\"deviceSize === 's'\"\n            #popoverComponent\n        >\n            <fd-popover-control>\n                <fd-shellbar-action\n                    [glyph]=\"'bell'\"\n                    [label]=\"'Notification'\"\n                    [notificationCount]=\"notificationCount.unread\"\n                    [notificationLabel]=\"'Notification Label'\"\n                    [callback]=\"onOpenNotification\"\n                >\n                </fd-shellbar-action>\n            </fd-popover-control>\n            <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\n                <ng-container\n                    *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\n                ></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n\n        <fd-shellbar-action\n            *ngIf=\"!settings?.HideLanguage && deviceSize !== 's'\"\n            [glyph]=\"'world'\"\n            [label]=\"'language'\"\n            [fdMenuTrigger]=\"menu\"\n            (callback)=\"(onLanguage)\"\n        >\n        </fd-shellbar-action>\n        <ng-container *ngIf=\"!settings?.HideLanguage && deviceSize === 's'\">\n            <fd-shellbar-action\n                *ngFor=\"let culture of cultures | keyvalue\"\n                [label]=\"culture.value\"\n                [callback]=\"onLanguage\"\n                class=\"culture-abbrivation\"\n                [ngClass]=\"culture.key\"\n            >\n            </fd-shellbar-action>\n        </ng-container>\n\n        <fd-product-switch *ngIf=\"productSwitcher.length > 0\">\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\n            </fd-product-switch-body>\n        </fd-product-switch>\n        <!-- <fd-combobox\n            [(ngModel)]=\"searchTerm\"\n            [dropdownValues]=\"searchTerms\"\n            [placeholder]=\"('EnterSearchCriteria' | bbbTranslate) + ' ...'\"\n            [compact]=\"true\"\n        >\n        </fd-combobox> -->\n    </fd-shellbar-actions>\n</fd-shellbar>\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<fd-menu #menu>\n    <ul fd-list>\n        <li fd-list-item *ngFor=\"let culture of cultures | keyvalue\">\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\n                <span fd-list-title>\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\n                    {{ culture.value }}\n                </span>\n            </a>\n        </li>\n    </ul>\n</fd-menu>\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\n    <div\n        style=\"position: relative; height: 100px\"\n        *ngIf=\"!notifcationLoaded && (notificationLoading$ | async) === true\"\n    >\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    <bt-notification-group\n        [notifications]=\"notifications$ | async\"\n        [notificationCount]=\"notificationCount\"\n        [loading]=\"(notificationLoading$ | async) === true\"\n        (viewed)=\"onNotificationItemViewed($event)\"\n        (remove)=\"onRemoveNotifications($event)\"\n        (show)=\"popoverComponent.close(); onShowNotification($event)\"\n        (actionClick)=\"popoverComponent.close(); onNotificationAction($event)\"\n        (loadMore)=\"onNotificationLoadMore()\"\n        [deviceSize]=\"deviceSize\"\n    ></bt-notification-group>\n</ng-template>\n\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\n        </fd-dialog-header>\n        <fd-dialog-body class=\"mobile\">\n            <ng-container\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationsCount$ | async }\"\n            ></ng-container>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{display:block}:host ::ng-deep fd-shellbar-actions fd-avatar{background-color:transparent!important;color:var(--sapShell_InteractiveTextColor, #d1e8ff)}:host ::ng-deep fd-combobox .fd-input-group input{min-width:2rem;height:1.625rem;margin-top:.1875rem;margin-bottom:.1875rem;padding:0 .5rem;box-sizing:border-box}:host ::ng-deep fd-combobox .fd-input-group span{min-width:2rem;min-height:1.625rem}:host ::ng-deep .fd-shellbar__subtitle{font-size:1rem}:host ::ng-deep .fd-shellbar--s .fd-shellbar__subtitle{display:block}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}.fd-shellbar--s{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i3.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i8$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i8$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i10$2.ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "ariaLabel", "disabled"] }, { kind: "component", type: i10$2.ProductSwitchBodyComponent, selector: "fd-product-switch-body", inputs: ["dragAndDropEnabled", "products", "forceListMode"], outputs: ["productsChange", "itemClicked"] }, { kind: "component", type: i11.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i11.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i11.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i12.ShellbarComponent, selector: "fd-shellbar", inputs: ["size", "sideNav"] }, { kind: "component", type: i12.ProductMenuComponent, selector: "fd-product-menu", inputs: ["closeOnEscapeKey", "closeOnOutsideClick", "triggers", "placement", "disabled", "fillControlMode", "control", "items", "closePopoverOnSelect"] }, { kind: "component", type: i12.ShellbarSubtitleComponent, selector: "fd-shellbar-subtitle" }, { kind: "component", type: i12.ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: ["user", "userMenu", "closePopoverOnSelect", "collapsedItemMenuLabel"] }, { kind: "component", type: i12.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i12.ShellbarLogoComponent, selector: "fd-shellbar-logo" }, { kind: "directive", type: i1.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i5.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: NotificationGroupComponent, selector: "bt-notification-group", inputs: ["notifications", "loading", "deviceSize", "notificationCount"], outputs: ["viewed", "remove", "actionClick", "show", "loadMore"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ShellbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ShellbarComponent, selector: "bt-shellbar", viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ComboboxComponent, descendants: true }, { propertyName: "popoverComponent", first: true, predicate: ["popoverComponent"], descendants: true }, { propertyName: "_notificationsDialog", first: true, predicate: ["notificationsDialog"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<link *ngIf=\"cssUrl$ | async as cssUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\n<link *ngIf=\"cssCustomUrl$ | async as cssCustomUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\n\n<fd-shellbar *ngIf=\"(userLoggedIn$ | async) || allowAnonymous\" [size]=\"deviceSize\" [ngClass]=\"deviceSize\">\n    <fd-shellbar-logo *ngIf=\"logo\">\n        <a\n            [style.backgroundImage]=\"'url(' + (logo?.FileId | picFieldSrc: 'GetPictureFromFileInfo':null) + ')'\"\n            href=\"/\"\n            class=\"fd-shellbar__logo fd-shellbar__logo--image-replaced\"\n            aria-label=\"Barsa Novin Ray\"\n        ></a>\n    </fd-shellbar-logo>\n\n    <fd-product-menu\n        *ngIf=\"!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0\"\n        [control]=\"productMenuControl\"\n        [closePopoverOnSelect]=\"true\"\n        [items]=\"productMenuItems1\"\n    >\n    </fd-product-menu>\n\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }} </fd-shellbar-subtitle>\n    <fd-shellbar-actions\n        *ngIf=\"user && (userMenu?.length || !settings?.HideLanguage)\"\n        [user]=\"user\"\n        [userMenu]=\"userMenu\"\n        #langRef\n    >\n        <fd-shellbar-action\n            *ngFor=\"let action of actions\"\n            [glyph]=\"action.Icon\"\n            [callback]=\"action.Callback\"\n            [label]=\"action.Label\"\n        >\n        </fd-shellbar-action>\n        <fd-shellbar-action\n            *ngIf=\"deviceSize === 's'\"\n            [glyph]=\"'bell'\"\n            [label]=\"'Notifications' | bbbTranslate\"\n            [notificationCount]=\"(notificationsCount$ | async)?.unread ?? 0\"\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\n            [callback]=\"onBellNotification\"\n        >\n        </fd-shellbar-action>\n        <fd-popover\n            *ngIf=\"!settings?.HideNotifications && (notificationsCount$ | async) as notificationCount\"\n            [(isOpen)]=\"isOpenNotificatoin\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [noArrow]=\"true\"\n            placement=\"bottom\"\n            title=\"Notification Popover\"\n            [focusAutoCapture]=\"true\"\n            [mobile]=\"deviceSize === 's'\"\n            #popoverComponent\n        >\n            <fd-popover-control>\n                <fd-shellbar-action\n                    [glyph]=\"'bell'\"\n                    [label]=\"'Notification'\"\n                    [notificationCount]=\"notificationCount.unread\"\n                    [notificationLabel]=\"'Notification Label'\"\n                    [callback]=\"onOpenNotification\"\n                >\n                </fd-shellbar-action>\n            </fd-popover-control>\n            <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\n                <ng-container\n                    *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\n                ></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n\n        <fd-shellbar-action\n            *ngIf=\"!settings?.HideLanguage && deviceSize !== 's'\"\n            [glyph]=\"'world'\"\n            [label]=\"'language'\"\n            [fdMenuTrigger]=\"menu\"\n            (callback)=\"(onLanguage)\"\n        >\n        </fd-shellbar-action>\n        <ng-container *ngIf=\"!settings?.HideLanguage && deviceSize === 's'\">\n            <fd-shellbar-action\n                *ngFor=\"let culture of cultures | keyvalue\"\n                [label]=\"culture.value\"\n                [callback]=\"onLanguage\"\n                class=\"culture-abbrivation\"\n                [glyph]=\"culture.key\"\n                [ngClass]=\"'flags'\"\n            >\n            </fd-shellbar-action>\n        </ng-container>\n\n        <fd-product-switch *ngIf=\"productSwitcher.length > 0\">\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\n            </fd-product-switch-body>\n        </fd-product-switch>\n        <!-- <fd-combobox\n            [(ngModel)]=\"searchTerm\"\n            [dropdownValues]=\"searchTerms\"\n            [placeholder]=\"('EnterSearchCriteria' | bbbTranslate) + ' ...'\"\n            [compact]=\"true\"\n        >\n        </fd-combobox> -->\n    </fd-shellbar-actions>\n</fd-shellbar>\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<fd-menu #menu>\n    <ul fd-list>\n        <li fd-list-item *ngFor=\"let culture of cultures | keyvalue\">\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\n                <span fd-list-title>\n                    <img width=\"14px\" height=\"12px\" [src]=\"'/assets/flags/' + culture.key + '.png'\" />\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\n                </span>\n            </a>\n        </li>\n    </ul>\n</fd-menu>\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\n    <div\n        style=\"position: relative; height: 100px\"\n        *ngIf=\"!notifcationLoaded && (notificationLoading$ | async) === true\"\n    >\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    <bt-notification-group\n        [notifications]=\"notifications$ | async\"\n        [notificationCount]=\"notificationCount\"\n        [loading]=\"(notificationLoading$ | async) === true\"\n        (viewed)=\"onNotificationItemViewed($event)\"\n        (remove)=\"onRemoveNotifications($event)\"\n        (show)=\"popoverComponent.close(); onShowNotification($event)\"\n        (actionClick)=\"popoverComponent.close(); onNotificationAction($event)\"\n        (loadMore)=\"onNotificationLoadMore()\"\n        [deviceSize]=\"deviceSize\"\n    ></bt-notification-group>\n</ng-template>\n\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\n        </fd-dialog-header>\n        <fd-dialog-body class=\"mobile\">\n            <ng-container\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationsCount$ | async }\"\n            ></ng-container>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{display:block}:host ::ng-deep fd-shellbar-actions fd-avatar{background-color:transparent!important;color:var(--sapShell_InteractiveTextColor, #d1e8ff)}:host ::ng-deep fd-combobox .fd-input-group input{min-width:2rem;height:1.625rem;margin-top:.1875rem;margin-bottom:.1875rem;padding:0 .5rem;box-sizing:border-box}:host ::ng-deep fd-combobox .fd-input-group span{min-width:2rem;min-height:1.625rem}:host ::ng-deep .fd-shellbar__subtitle{font-size:1rem}:host ::ng-deep .fd-shellbar--s{padding:0}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__subtitle{display:block;overflow:hidden;text-wrap:wrap;width:100%;word-break:break-all}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--product{flex:1}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--actions{max-width:120px}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "directive", type: i3.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i8$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i8$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i8$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i8$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i9.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i10$2.ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "ariaLabel", "disabled"] }, { kind: "component", type: i10$2.ProductSwitchBodyComponent, selector: "fd-product-switch-body", inputs: ["dragAndDropEnabled", "products", "forceListMode"], outputs: ["productsChange", "itemClicked"] }, { kind: "component", type: i11.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i11.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i11.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i12.ShellbarComponent, selector: "fd-shellbar", inputs: ["size", "sideNav"] }, { kind: "component", type: i12.ProductMenuComponent, selector: "fd-product-menu", inputs: ["closeOnEscapeKey", "closeOnOutsideClick", "triggers", "placement", "disabled", "fillControlMode", "control", "items", "closePopoverOnSelect"] }, { kind: "component", type: i12.ShellbarSubtitleComponent, selector: "fd-shellbar-subtitle" }, { kind: "component", type: i12.ShellbarActionsComponent, selector: "fd-shellbar-actions", inputs: ["user", "userMenu", "closePopoverOnSelect", "collapsedItemMenuLabel"] }, { kind: "component", type: i12.ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "callback", "label", "notificationLabel", "notificationCount"] }, { kind: "component", type: i12.ShellbarLogoComponent, selector: "fd-shellbar-logo" }, { kind: "directive", type: i1.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i5.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: NotificationGroupComponent, selector: "bt-notification-group", inputs: ["notifications", "loading", "deviceSize", "notificationCount"], outputs: ["viewed", "remove", "actionClick", "show", "loadMore"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i1.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ShellbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<link *ngIf=\"cssUrl$ | async as cssUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\n<link *ngIf=\"cssCustomUrl$ | async as cssCustomUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\n\n<fd-shellbar *ngIf=\"(userLoggedIn$ | async) || allowAnonymous\" [size]=\"deviceSize\" [ngClass]=\"deviceSize\">\n    <fd-shellbar-logo *ngIf=\"logo\">\n        <a\n            [style.backgroundImage]=\"'url(' + (logo?.FileId | picFieldSrc: 'GetPictureFromFileInfo':null) + ')'\"\n            href=\"/\"\n            class=\"fd-shellbar__logo fd-shellbar__logo--image-replaced\"\n            aria-label=\"Barsa Novin Ray\"\n        ></a>\n    </fd-shellbar-logo>\n\n    <fd-product-menu\n        *ngIf=\"!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0\"\n        [control]=\"productMenuControl\"\n        [closePopoverOnSelect]=\"true\"\n        [items]=\"productMenuItems1\"\n    >\n    </fd-product-menu>\n\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }} </fd-shellbar-subtitle>\n    <fd-shellbar-actions\n        *ngIf=\"user && (userMenu?.length || !settings?.HideLanguage)\"\n        [user]=\"user\"\n        [userMenu]=\"userMenu\"\n        #langRef\n    >\n        <fd-shellbar-action\n            *ngFor=\"let action of actions\"\n            [glyph]=\"action.Icon\"\n            [callback]=\"action.Callback\"\n            [label]=\"action.Label\"\n        >\n        </fd-shellbar-action>\n        <fd-shellbar-action\n            *ngIf=\"deviceSize === 's'\"\n            [glyph]=\"'bell'\"\n            [label]=\"'Notifications' | bbbTranslate\"\n            [notificationCount]=\"(notificationsCount$ | async)?.unread ?? 0\"\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\n            [callback]=\"onBellNotification\"\n        >\n        </fd-shellbar-action>\n        <fd-popover\n            *ngIf=\"!settings?.HideNotifications && (notificationsCount$ | async) as notificationCount\"\n            [(isOpen)]=\"isOpenNotificatoin\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [noArrow]=\"true\"\n            placement=\"bottom\"\n            title=\"Notification Popover\"\n            [focusAutoCapture]=\"true\"\n            [mobile]=\"deviceSize === 's'\"\n            #popoverComponent\n        >\n            <fd-popover-control>\n                <fd-shellbar-action\n                    [glyph]=\"'bell'\"\n                    [label]=\"'Notification'\"\n                    [notificationCount]=\"notificationCount.unread\"\n                    [notificationLabel]=\"'Notification Label'\"\n                    [callback]=\"onOpenNotification\"\n                >\n                </fd-shellbar-action>\n            </fd-popover-control>\n            <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\n                <ng-container\n                    *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\n                ></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n\n        <fd-shellbar-action\n            *ngIf=\"!settings?.HideLanguage && deviceSize !== 's'\"\n            [glyph]=\"'world'\"\n            [label]=\"'language'\"\n            [fdMenuTrigger]=\"menu\"\n            (callback)=\"(onLanguage)\"\n        >\n        </fd-shellbar-action>\n        <ng-container *ngIf=\"!settings?.HideLanguage && deviceSize === 's'\">\n            <fd-shellbar-action\n                *ngFor=\"let culture of cultures | keyvalue\"\n                [label]=\"culture.value\"\n                [callback]=\"onLanguage\"\n                class=\"culture-abbrivation\"\n                [ngClass]=\"culture.key\"\n            >\n            </fd-shellbar-action>\n        </ng-container>\n\n        <fd-product-switch *ngIf=\"productSwitcher.length > 0\">\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\n            </fd-product-switch-body>\n        </fd-product-switch>\n        <!-- <fd-combobox\n            [(ngModel)]=\"searchTerm\"\n            [dropdownValues]=\"searchTerms\"\n            [placeholder]=\"('EnterSearchCriteria' | bbbTranslate) + ' ...'\"\n            [compact]=\"true\"\n        >\n        </fd-combobox> -->\n    </fd-shellbar-actions>\n</fd-shellbar>\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<fd-menu #menu>\n    <ul fd-list>\n        <li fd-list-item *ngFor=\"let culture of cultures | keyvalue\">\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\n                <span fd-list-title>\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\n                    {{ culture.value }}\n                </span>\n            </a>\n        </li>\n    </ul>\n</fd-menu>\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\n    <div\n        style=\"position: relative; height: 100px\"\n        *ngIf=\"!notifcationLoaded && (notificationLoading$ | async) === true\"\n    >\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    <bt-notification-group\n        [notifications]=\"notifications$ | async\"\n        [notificationCount]=\"notificationCount\"\n        [loading]=\"(notificationLoading$ | async) === true\"\n        (viewed)=\"onNotificationItemViewed($event)\"\n        (remove)=\"onRemoveNotifications($event)\"\n        (show)=\"popoverComponent.close(); onShowNotification($event)\"\n        (actionClick)=\"popoverComponent.close(); onNotificationAction($event)\"\n        (loadMore)=\"onNotificationLoadMore()\"\n        [deviceSize]=\"deviceSize\"\n    ></bt-notification-group>\n</ng-template>\n\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\n        </fd-dialog-header>\n        <fd-dialog-body class=\"mobile\">\n            <ng-container\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationsCount$ | async }\"\n            ></ng-container>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{display:block}:host ::ng-deep fd-shellbar-actions fd-avatar{background-color:transparent!important;color:var(--sapShell_InteractiveTextColor, #d1e8ff)}:host ::ng-deep fd-combobox .fd-input-group input{min-width:2rem;height:1.625rem;margin-top:.1875rem;margin-bottom:.1875rem;padding:0 .5rem;box-sizing:border-box}:host ::ng-deep fd-combobox .fd-input-group span{min-width:2rem;min-height:1.625rem}:host ::ng-deep .fd-shellbar__subtitle{font-size:1rem}:host ::ng-deep .fd-shellbar--s .fd-shellbar__subtitle{display:block}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}.fd-shellbar--s{padding:0}\n"] }]
+            args: [{ selector: 'bt-shellbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<link *ngIf=\"cssUrl$ | async as cssUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssUrl\" />\n<link *ngIf=\"cssCustomUrl$ | async as cssCustomUrl\" type=\"text/css\" rel=\"stylesheet\" [href]=\"cssCustomUrl\" />\n\n<fd-shellbar *ngIf=\"(userLoggedIn$ | async) || allowAnonymous\" [size]=\"deviceSize\" [ngClass]=\"deviceSize\">\n    <fd-shellbar-logo *ngIf=\"logo\">\n        <a\n            [style.backgroundImage]=\"'url(' + (logo?.FileId | picFieldSrc: 'GetPictureFromFileInfo':null) + ')'\"\n            href=\"/\"\n            class=\"fd-shellbar__logo fd-shellbar__logo--image-replaced\"\n            aria-label=\"Barsa Novin Ray\"\n        ></a>\n    </fd-shellbar-logo>\n\n    <fd-product-menu\n        *ngIf=\"!settings?.HideProductMenu && productMenuItems1 && productMenuItems1.length > 0\"\n        [control]=\"productMenuControl\"\n        [closePopoverOnSelect]=\"true\"\n        [items]=\"productMenuItems1\"\n    >\n    </fd-product-menu>\n\n    <fd-shellbar-subtitle> {{ subtitle | bbbTranslate }}{{ showVersion ? appVersion : '' }} </fd-shellbar-subtitle>\n    <fd-shellbar-actions\n        *ngIf=\"user && (userMenu?.length || !settings?.HideLanguage)\"\n        [user]=\"user\"\n        [userMenu]=\"userMenu\"\n        #langRef\n    >\n        <fd-shellbar-action\n            *ngFor=\"let action of actions\"\n            [glyph]=\"action.Icon\"\n            [callback]=\"action.Callback\"\n            [label]=\"action.Label\"\n        >\n        </fd-shellbar-action>\n        <fd-shellbar-action\n            *ngIf=\"deviceSize === 's'\"\n            [glyph]=\"'bell'\"\n            [label]=\"'Notifications' | bbbTranslate\"\n            [notificationCount]=\"(notificationsCount$ | async)?.unread ?? 0\"\n            [notificationLabel]=\"'Notifications' | bbbTranslate\"\n            [callback]=\"onBellNotification\"\n        >\n        </fd-shellbar-action>\n        <fd-popover\n            *ngIf=\"!settings?.HideNotifications && (notificationsCount$ | async) as notificationCount\"\n            [(isOpen)]=\"isOpenNotificatoin\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [noArrow]=\"true\"\n            placement=\"bottom\"\n            title=\"Notification Popover\"\n            [focusAutoCapture]=\"true\"\n            [mobile]=\"deviceSize === 's'\"\n            #popoverComponent\n        >\n            <fd-popover-control>\n                <fd-shellbar-action\n                    [glyph]=\"'bell'\"\n                    [label]=\"'Notification'\"\n                    [notificationCount]=\"notificationCount.unread\"\n                    [notificationLabel]=\"'Notification Label'\"\n                    [callback]=\"onOpenNotification\"\n                >\n                </fd-shellbar-action>\n            </fd-popover-control>\n            <fd-popover-body style=\"min-width: 320px; overflow-x: auto; box-shadow: var(--sapContent_Shadow0)\">\n                <ng-container\n                    *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationCount }\"\n                ></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n\n        <fd-shellbar-action\n            *ngIf=\"!settings?.HideLanguage && deviceSize !== 's'\"\n            [glyph]=\"'world'\"\n            [label]=\"'language'\"\n            [fdMenuTrigger]=\"menu\"\n            (callback)=\"(onLanguage)\"\n        >\n        </fd-shellbar-action>\n        <ng-container *ngIf=\"!settings?.HideLanguage && deviceSize === 's'\">\n            <fd-shellbar-action\n                *ngFor=\"let culture of cultures | keyvalue\"\n                [label]=\"culture.value\"\n                [callback]=\"onLanguage\"\n                class=\"culture-abbrivation\"\n                [glyph]=\"culture.key\"\n                [ngClass]=\"'flags'\"\n            >\n            </fd-shellbar-action>\n        </ng-container>\n\n        <fd-product-switch *ngIf=\"productSwitcher.length > 0\">\n            <fd-product-switch-body [products]=\"productSwitcher\" [forceListMode]=\"deviceSize === 's'\">\n            </fd-product-switch-body>\n        </fd-product-switch>\n        <!-- <fd-combobox\n            [(ngModel)]=\"searchTerm\"\n            [dropdownValues]=\"searchTerms\"\n            [placeholder]=\"('EnterSearchCriteria' | bbbTranslate) + ' ...'\"\n            [compact]=\"true\"\n        >\n        </fd-combobox> -->\n    </fd-shellbar-actions>\n</fd-shellbar>\n<ng-template #loading>\n    <bsu-mask></bsu-mask>\n</ng-template>\n\n<fd-menu #menu>\n    <ul fd-list>\n        <li fd-list-item *ngFor=\"let culture of cultures | keyvalue\">\n            <a fd-list-link (click)=\"onCultureChange(culture.value)\">\n                <span fd-list-title>\n                    <img width=\"14px\" height=\"12px\" [src]=\"'/assets/flags/' + culture.key + '.png'\" />\n                    <span class=\"culture-abbrivation\" [ngClass]=\"culture.key\"> {{ culture.key }}</span>\n                </span>\n            </a>\n        </li>\n    </ul>\n</fd-menu>\n<ng-template #notificationGroupTpl let-notificationCount=\"notificationCount\">\n    <div\n        style=\"position: relative; height: 100px\"\n        *ngIf=\"!notifcationLoaded && (notificationLoading$ | async) === true\"\n    >\n        <bsu-mask size=\"s\"></bsu-mask>\n    </div>\n    <bt-notification-group\n        [notifications]=\"notifications$ | async\"\n        [notificationCount]=\"notificationCount\"\n        [loading]=\"(notificationLoading$ | async) === true\"\n        (viewed)=\"onNotificationItemViewed($event)\"\n        (remove)=\"onRemoveNotifications($event)\"\n        (show)=\"popoverComponent.close(); onShowNotification($event)\"\n        (actionClick)=\"popoverComponent.close(); onNotificationAction($event)\"\n        (loadMore)=\"onNotificationLoadMore()\"\n        [deviceSize]=\"deviceSize\"\n    ></bt-notification-group>\n</ng-template>\n\n<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #notificationsDialog>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 id=\"fd-dialog-header-10\" fd-title>{{ 'Notification' | bbbTranslate }}</h1>\n            <button fd-dialog-close-button (click)=\"dialog.dismiss()\"></button>\n        </fd-dialog-header>\n        <fd-dialog-body class=\"mobile\">\n            <ng-container\n                *ngTemplateOutlet=\"notificationGroupTpl; context: { notificationCount: notificationsCount$ | async }\"\n            ></ng-container>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{display:block}:host ::ng-deep fd-shellbar-actions fd-avatar{background-color:transparent!important;color:var(--sapShell_InteractiveTextColor, #d1e8ff)}:host ::ng-deep fd-combobox .fd-input-group input{min-width:2rem;height:1.625rem;margin-top:.1875rem;margin-bottom:.1875rem;padding:0 .5rem;box-sizing:border-box}:host ::ng-deep fd-combobox .fd-input-group span{min-width:2rem;min-height:1.625rem}:host ::ng-deep .fd-shellbar__subtitle{font-size:1rem}:host ::ng-deep .fd-shellbar--s{padding:0}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__subtitle{display:block;overflow:hidden;text-wrap:wrap;width:100%;word-break:break-all}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--product{flex:1}:host ::ng-deep .fd-shellbar--s ::ng-deep .fd-shellbar__group.fd-shellbar__group--actions{max-width:120px}.fd-shellbar__logo{min-height:3rem;height:3rem;width:3rem}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1.PortalService }, { type: i1.BreadcrumbService }, { type: TilesService }, { type: i0.ChangeDetectorRef }, { type: i1.BbbTranslatePipe }, { type: i3$3.DomSanitizer }, { type: i1.NotificationService }, { type: i1$1.DialogService }, { type: Document, decorators: [{
                         type: Inject,