barsa-tiles 2.0.21 → 2.0.23

package/fesm2022/barsa-tiles.mjs

@@ -780,11 +780,11 @@ class TileComponent extends TilePropsComponent {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: TileComponent, selector: "bt-tile", inputs: { type: "type", footerTemplate: "footerTemplate", footer: "footer", disableClick: "disableClick", title: "title", icon: "icon", subtitle: "subtitle", isDouble: "isDouble", edit: "edit", backColor: "backColor", dynamicCommand: "dynamicCommand" }, host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<fd-tile [type]=\"type\" [double]=\"isDouble\" [action]=\"edit\" tileStyle [backColor]=\"backColor\">\n    @if (edit && !data.Locked) {\n    <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\n    } @if (edit && !data.Locked) {\n    <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\n    }\n    <div fd-tile-header>\n        <h1 fd-tile-title>\n            {{ title | bbbTranslate }}\n        </h1>\n        <h2 fd-tile-subtitle>\n            {{ subtitle | bbbTranslate }}\n        </h2>\n    </div>\n    <ng-content></ng-content>\n    <ng-container [ngTemplateOutlet]=\"footerTemplate ? footerTemplate : defaultFooter\"></ng-container>\n</fd-tile>\n<ng-template #defaultFooter>\n    @if (footer) {\n    <bt-footer-tile [settings]=\"footer\"></bt-footer-tile>\n    }\n</ng-template>\n<fd-menu #menu>\n    <li fd-menu-item>\n        <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\n            <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\n        </a>\n    </li>\n</fd-menu>\n@if (runningCommand) {\n<bsu-mask></bsu-mask>\n}\n", styles: [":host,fd-tile{display:block}\n"], dependencies: [{ kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i3.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i3.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i3.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i3.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i1$3.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "directive", type: i1$3.TileHeaderDirective, selector: "[fdTileHeader], [fd-tile-header]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileTitleDirective, selector: "[fdTileTitle], [fd-tile-title]" }, { kind: "directive", type: i1$3.TileSubtitleDirective, selector: "[fdTileTitle], [fd-tile-subtitle]" }, { kind: "directive", type: i1$3.TileActionCloseDirective, selector: "[fdTileActionClose], [fd-tile-action-close]", inputs: ["class"] }, { kind: "directive", type: i1$3.TileActionIndicatorDirective, selector: "[fdTileActionIndicator], [fd-tile-action-indicator]", inputs: ["class"] }, { kind: "component", type: i4.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: FooterTileComponent, selector: "bt-footer-tile", inputs: ["settings"] }, { kind: "directive", type: TileStyleDirective, selector: "[tileStyle]", inputs: ["backColor"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: TileComponent, selector: "bt-tile", inputs: { type: "type", footerTemplate: "footerTemplate", footer: "footer", disableClick: "disableClick", title: "title", icon: "icon", subtitle: "subtitle", isDouble: "isDouble", edit: "edit", backColor: "backColor", dynamicCommand: "dynamicCommand" }, host: { listeners: { "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<fd-tile [type]=\"type\" [double]=\"isDouble\" [action]=\"edit\" tileStyle [backColor]=\"backColor\">\r\n    @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\r\n    } @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\r\n    }\r\n    <div fd-tile-header>\r\n        <h1 fd-tile-title>\r\n            {{ title | bbbTranslate }}\r\n        </h1>\r\n        <h2 fd-tile-subtitle>\r\n            {{ subtitle | bbbTranslate }}\r\n        </h2>\r\n    </div>\r\n    <ng-content></ng-content>\r\n    <ng-container [ngTemplateOutlet]=\"footerTemplate ? footerTemplate : defaultFooter\"></ng-container>\r\n</fd-tile>\r\n<ng-template #defaultFooter>\r\n    @if (footer) {\r\n    <bt-footer-tile [settings]=\"footer\"></bt-footer-tile>\r\n    }\r\n</ng-template>\r\n<fd-menu #menu>\r\n    <li fd-menu-item>\r\n        <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n</fd-menu>\r\n@if (runningCommand) {\r\n<bsu-mask></bsu-mask>\r\n}\r\n", styles: [":host,fd-tile{display:block}\n"], dependencies: [{ kind: "directive", type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i3.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i3.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i3.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i3.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i1$3.TileComponent, selector: "fd-tile", inputs: ["class", "size", "double", "type", "action", "clickable"], outputs: ["tileClick"] }, { kind: "directive", type: i1$3.TileHeaderDirective, selector: "[fdTileHeader], [fd-tile-header]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileTitleDirective, selector: "[fdTileTitle], [fd-tile-title]" }, { kind: "directive", type: i1$3.TileSubtitleDirective, selector: "[fdTileTitle], [fd-tile-subtitle]" }, { kind: "directive", type: i1$3.TileActionCloseDirective, selector: "[fdTileActionClose], [fd-tile-action-close]", inputs: ["class"] }, { kind: "directive", type: i1$3.TileActionIndicatorDirective, selector: "[fdTileActionIndicator], [fd-tile-action-indicator]", inputs: ["class"] }, { kind: "component", type: i4.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: FooterTileComponent, selector: "bt-footer-tile", inputs: ["settings"] }, { kind: "directive", type: TileStyleDirective, selector: "[tileStyle]", inputs: ["backColor"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-tile [type]=\"type\" [double]=\"isDouble\" [action]=\"edit\" tileStyle [backColor]=\"backColor\">\n    @if (edit && !data.Locked) {\n    <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\n    } @if (edit && !data.Locked) {\n    <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\n    }\n    <div fd-tile-header>\n        <h1 fd-tile-title>\n            {{ title | bbbTranslate }}\n        </h1>\n        <h2 fd-tile-subtitle>\n            {{ subtitle | bbbTranslate }}\n        </h2>\n    </div>\n    <ng-content></ng-content>\n    <ng-container [ngTemplateOutlet]=\"footerTemplate ? footerTemplate : defaultFooter\"></ng-container>\n</fd-tile>\n<ng-template #defaultFooter>\n    @if (footer) {\n    <bt-footer-tile [settings]=\"footer\"></bt-footer-tile>\n    }\n</ng-template>\n<fd-menu #menu>\n    <li fd-menu-item>\n        <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\n            <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\n        </a>\n    </li>\n</fd-menu>\n@if (runningCommand) {\n<bsu-mask></bsu-mask>\n}\n", styles: [":host,fd-tile{display:block}\n"] }]
+            args: [{ selector: 'bt-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-tile [type]=\"type\" [double]=\"isDouble\" [action]=\"edit\" tileStyle [backColor]=\"backColor\">\r\n    @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-close fdType=\"transparent\" (click)=\"hideClick.emit()\"></button>\r\n    } @if (edit && !data.Locked) {\r\n    <button fd-button fd-tile-action-indicator fdType=\"transparent\" [fdMenuTrigger]=\"menu\"></button>\r\n    }\r\n    <div fd-tile-header>\r\n        <h1 fd-tile-title>\r\n            {{ title | bbbTranslate }}\r\n        </h1>\r\n        <h2 fd-tile-subtitle>\r\n            {{ subtitle | bbbTranslate }}\r\n        </h2>\r\n    </div>\r\n    <ng-content></ng-content>\r\n    <ng-container [ngTemplateOutlet]=\"footerTemplate ? footerTemplate : defaultFooter\"></ng-container>\r\n</fd-tile>\r\n<ng-template #defaultFooter>\r\n    @if (footer) {\r\n    <bt-footer-tile [settings]=\"footer\"></bt-footer-tile>\r\n    }\r\n</ng-template>\r\n<fd-menu #menu>\r\n    <li fd-menu-item>\r\n        <a (click)=\"menu.close(); renameClick.emit()\" fd-menu-interactive>\r\n            <span fd-menu-title>{{ 'Rename' | bbbTranslate }}</span>\r\n        </a>\r\n    </li>\r\n</fd-menu>\r\n@if (runningCommand) {\r\n<bsu-mask></bsu-mask>\r\n}\r\n", styles: [":host,fd-tile{display:block}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], footerTemplate: [{
@@ -1018,11 +1018,11 @@ class TilesViewerGroupComponent extends BaseComponent {
         this.resetGroup.emit(appTileGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TilesViewerGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", 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    @if (edit || stackContent || isAppTileSubGroup) {\n    <fd-layout-panel-header>\n        <fd-layout-panel-head>\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\n        </fd-layout-panel-head>\n        @if (edit) {\n        <fd-layout-panel-actions 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                @if (appTileGroup.Predefined && appTileGroup.$TileSettingChanged) {\n                <button fd-button [label]=\"'Refresh' | bbbTranslate\" (click)=\"onReset(appTileGroup)\"></button>\n                } @if (!appTileGroup.Predefined) {\n                <button\n                    fd-button\n                    [label]=\"'Delete' | bbbTranslate\"\n                    [fdType]=\"'negative'\"\n                    (click)=\"onDelete(appTileGroup)\"\n                ></button>\n                }\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n        }\n    </fd-layout-panel-header>\n    }\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            @if (!edit) { @if (!appTileGroup.$TilesLoaded) {\n            <fd-busy-indicator [loading]=\"true\"></fd-busy-indicator>\n            } @else if (!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded) {\n            <h5 fd-title></h5>\n            } } @for (appTile of appTileGroup?.navigatorTiles; track appTile.Id; let k = $index) {\n            <div\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            } @if (edit) {\n            <fd-tile class=\"add-tile\" [routerLink]=\"['/home/appfinder']\">\n                <div>\n                    <fd-icon glyph=\"add\"></fd-icon>\n                </div>\n            </fd-tile>\n            }\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@for (appTileSubGroup of appTileGroup.$Children; track appTileSubGroup) {\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}\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}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: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.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$1.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.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i1$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i6.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage", "id", "transparent"] }, { 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: i8.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i8$1.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: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i10.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", 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\n    [fixed]=\"true\"\n    [attr.editHome]=\"edit\"\n    cdkDrag\n    [cdkDragDisabled]=\"!edit || !stackContent\"\n    [class.empty-tiles-group]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\n>\n    @if (edit || stackContent || isAppTileSubGroup) {\n    <fd-layout-panel-header>\n        <fd-layout-panel-head>\n            <h5 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h5>\n        </fd-layout-panel-head>\n        @if (edit) {\n        <fd-layout-panel-actions 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                @if (appTileGroup.Predefined && appTileGroup.$TileSettingChanged) {\n                <button fd-button [label]=\"'Refresh' | bbbTranslate\" (click)=\"onReset(appTileGroup)\"></button>\n                } @if (!appTileGroup.Predefined) {\n                <button\n                    fd-button\n                    [label]=\"'Delete' | bbbTranslate\"\n                    [fdType]=\"'negative'\"\n                    (click)=\"onDelete(appTileGroup)\"\n                ></button>\n                }\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n        }\n    </fd-layout-panel-header>\n    }\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            @if (!edit) { @if (!appTileGroup.$TilesLoaded) {\n            <fd-busy-indicator [loading]=\"true\"></fd-busy-indicator>\n            } @else if (!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded) {\n            <h5 fd-title></h5>\n            } } @for (appTile of appTileGroup?.navigatorTiles; track appTile.Id; let k = $index) {\n            <div\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            } @if (edit) {\n            <fd-tile class=\"add-tile\" [routerLink]=\"['/home/appfinder']\">\n                <div>\n                    <fd-icon glyph=\"add\"></fd-icon>\n                </div>\n            </fd-tile>\n            }\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@for (appTileSubGroup of appTileGroup.$Children; track appTileSubGroup) {\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}\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel.empty-tiles-group:not([edithome=true]){display:none}fd-layout-panel fd-layout-panel-header fd-layout-panel-head h5{font-weight:500}fd-layout-panel fd-layout-panel-body:not(.small-size){margin-top:1rem}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}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: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.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$1.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.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i1$2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i6.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage", "id", "transparent"] }, { 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: i8.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i8$1.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: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i10.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { 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: "17.3.5", 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    @if (edit || stackContent || isAppTileSubGroup) {\n    <fd-layout-panel-header>\n        <fd-layout-panel-head>\n            <h2 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h2>\n        </fd-layout-panel-head>\n        @if (edit) {\n        <fd-layout-panel-actions 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                @if (appTileGroup.Predefined && appTileGroup.$TileSettingChanged) {\n                <button fd-button [label]=\"'Refresh' | bbbTranslate\" (click)=\"onReset(appTileGroup)\"></button>\n                } @if (!appTileGroup.Predefined) {\n                <button\n                    fd-button\n                    [label]=\"'Delete' | bbbTranslate\"\n                    [fdType]=\"'negative'\"\n                    (click)=\"onDelete(appTileGroup)\"\n                ></button>\n                }\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n        }\n    </fd-layout-panel-header>\n    }\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            @if (!edit) { @if (!appTileGroup.$TilesLoaded) {\n            <fd-busy-indicator [loading]=\"true\"></fd-busy-indicator>\n            } @else if (!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded) {\n            <h5 fd-title></h5>\n            } } @for (appTile of appTileGroup?.navigatorTiles; track appTile.Id; let k = $index) {\n            <div\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            } @if (edit) {\n            <fd-tile class=\"add-tile\" [routerLink]=\"['/home/appfinder']\">\n                <div>\n                    <fd-icon glyph=\"add\"></fd-icon>\n                </div>\n            </fd-tile>\n            }\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@for (appTileSubGroup of appTileGroup.$Children; track appTileSubGroup) {\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}\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}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"] }]
+            args: [{ selector: 'bt-tiles-viewer-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-layout-panel\n    [fixed]=\"true\"\n    [attr.editHome]=\"edit\"\n    cdkDrag\n    [cdkDragDisabled]=\"!edit || !stackContent\"\n    [class.empty-tiles-group]=\"!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded\"\n>\n    @if (edit || stackContent || isAppTileSubGroup) {\n    <fd-layout-panel-header>\n        <fd-layout-panel-head>\n            <h5 fd-layout-panel-title>{{ appTileGroup.navigatorTitle }}</h5>\n        </fd-layout-panel-head>\n        @if (edit) {\n        <fd-layout-panel-actions 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                @if (appTileGroup.Predefined && appTileGroup.$TileSettingChanged) {\n                <button fd-button [label]=\"'Refresh' | bbbTranslate\" (click)=\"onReset(appTileGroup)\"></button>\n                } @if (!appTileGroup.Predefined) {\n                <button\n                    fd-button\n                    [label]=\"'Delete' | bbbTranslate\"\n                    [fdType]=\"'negative'\"\n                    (click)=\"onDelete(appTileGroup)\"\n                ></button>\n                }\n            </fd-toolbar>\n        </fd-layout-panel-actions>\n        }\n    </fd-layout-panel-header>\n    }\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            @if (!edit) { @if (!appTileGroup.$TilesLoaded) {\n            <fd-busy-indicator [loading]=\"true\"></fd-busy-indicator>\n            } @else if (!appTileGroup.navigatorTiles.length && appTileGroup.$TilesLoaded) {\n            <h5 fd-title></h5>\n            } } @for (appTile of appTileGroup?.navigatorTiles; track appTile.Id; let k = $index) {\n            <div\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            } @if (edit) {\n            <fd-tile class=\"add-tile\" [routerLink]=\"['/home/appfinder']\">\n                <div>\n                    <fd-icon glyph=\"add\"></fd-icon>\n                </div>\n            </fd-tile>\n            }\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@for (appTileSubGroup of appTileGroup.$Children; track appTileSubGroup) {\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}\n", styles: [":host{display:block}fd-layout-panel{box-shadow:none}fd-layout-panel.empty-tiles-group:not([edithome=true]){display:none}fd-layout-panel fd-layout-panel-header fd-layout-panel-head h5{font-weight:500}fd-layout-panel fd-layout-panel-body:not(.small-size){margin-top:1rem}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}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: () => [{ type: i0.ElementRef }], propDecorators: { appTileGroup: [{
                 type: Input
             }], stackContent: [{
@@ -2266,11 +2266,11 @@ class FeedTileComponent extends BaseBtTileComponent {
         return this.settings.State;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FeedTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: FeedTileComponent, selector: "bt-feed-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'feed'\"\n    [edit]=\"edit\"\n    [backColor]=\"backColor\"\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 [twoColumn]=\"twoColumn\">\n        @if (twoColumn) {\n        <div fd-tile-section>\n            <div fd-tile-content-text>{{ text | bbbTranslate }}</div>\n            <div fd-tile-content-byline>{{ byline }}</div>\n        </div>\n        <div fd-tile-section>\n            <div fd-numeric-content>\n                <div fd-numeric-content-kpi-container>\n                    <div fd-numeric-content-kpi [state]=\"state\">{{ kpi }}</div>\n                </div>\n            </div>\n        </div>\n        } @else {\n        <div fd-numeric-content>\n            <div fd-numeric-content-kpi-container>\n                <div fd-numeric-content-kpi [state]=\"state\">{{ kpi }}</div>\n            </div>\n        </div>\n        }\n    </div>\n</bt-tile>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileSectionDirective, selector: "[fdTileSection], [fd-tile-section]" }, { kind: "directive", type: i1$3.TileContentBylineDirective, selector: "[fdTileContentByline], [fd-tile-content-byline]" }, { kind: "directive", type: i1$3.TileContentTextDirective, selector: "[fdTileContentText], [fd-tile-content-text]" }, { kind: "directive", type: i1$3.NumericContentDirective, selector: "[fd-numeric-content]", inputs: ["class", "size"] }, { kind: "directive", type: i1$3.NumericContentKpiContainerDirective, selector: "[fd-numeric-content-kpi-container]" }, { kind: "directive", type: i1$3.NumericContentKpiDirective, selector: "[fd-numeric-content-kpi]", inputs: ["state", "class", "glyph"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: FeedTileComponent, selector: "bt-feed-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'feed'\"\r\n    [edit]=\"edit\"\r\n    [backColor]=\"backColor\"\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 [twoColumn]=\"twoColumn\">\r\n        @if (twoColumn) {\r\n        <div fd-tile-section>\r\n            <div fd-tile-content-text>{{ text | bbbTranslate }}</div>\r\n            <div fd-tile-content-byline>{{ byline }}</div>\r\n        </div>\r\n        <div fd-tile-section>\r\n            <div fd-numeric-content>\r\n                <div fd-numeric-content-kpi-container>\r\n                    <div fd-numeric-content-kpi [state]=\"state\">{{ kpi }}</div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        } @else {\r\n        <div fd-numeric-content>\r\n            <div fd-numeric-content-kpi-container>\r\n                <div fd-numeric-content-kpi [state]=\"state\">{{ kpi }}</div>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1$3.TileSectionDirective, selector: "[fdTileSection], [fd-tile-section]" }, { kind: "directive", type: i1$3.TileContentBylineDirective, selector: "[fdTileContentByline], [fd-tile-content-byline]" }, { kind: "directive", type: i1$3.TileContentTextDirective, selector: "[fdTileContentText], [fd-tile-content-text]" }, { kind: "directive", type: i1$3.NumericContentDirective, selector: "[fd-numeric-content]", inputs: ["class", "size"] }, { kind: "directive", type: i1$3.NumericContentKpiContainerDirective, selector: "[fd-numeric-content-kpi-container]" }, { kind: "directive", type: i1$3.NumericContentKpiDirective, selector: "[fd-numeric-content-kpi]", inputs: ["state", "class", "glyph"] }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FeedTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-feed-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'feed'\"\n    [edit]=\"edit\"\n    [backColor]=\"backColor\"\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 [twoColumn]=\"twoColumn\">\n        @if (twoColumn) {\n        <div fd-tile-section>\n            <div fd-tile-content-text>{{ text | bbbTranslate }}</div>\n            <div fd-tile-content-byline>{{ byline }}</div>\n        </div>\n        <div fd-tile-section>\n            <div fd-numeric-content>\n                <div fd-numeric-content-kpi-container>\n                    <div fd-numeric-content-kpi [state]=\"state\">{{ kpi }}</div>\n                </div>\n            </div>\n        </div>\n        } @else {\n        <div fd-numeric-content>\n            <div fd-numeric-content-kpi-container>\n                <div fd-numeric-content-kpi [state]=\"state\">{{ kpi }}</div>\n            </div>\n        </div>\n        }\n    </div>\n</bt-tile>\n" }]
+            args: [{ selector: 'bt-feed-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\r\n    [data]=\"data\"\r\n    [type]=\"'feed'\"\r\n    [edit]=\"edit\"\r\n    [backColor]=\"backColor\"\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 [twoColumn]=\"twoColumn\">\r\n        @if (twoColumn) {\r\n        <div fd-tile-section>\r\n            <div fd-tile-content-text>{{ text | bbbTranslate }}</div>\r\n            <div fd-tile-content-byline>{{ byline }}</div>\r\n        </div>\r\n        <div fd-tile-section>\r\n            <div fd-numeric-content>\r\n                <div fd-numeric-content-kpi-container>\r\n                    <div fd-numeric-content-kpi [state]=\"state\">{{ kpi }}</div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        } @else {\r\n        <div fd-numeric-content>\r\n            <div fd-numeric-content-kpi-container>\r\n                <div fd-numeric-content-kpi [state]=\"state\">{{ kpi }}</div>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n</bt-tile>\r\n" }]
         }] });
 
 class SimpleTileComponent extends BaseBtTileComponent {
@@ -3046,6 +3046,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 }]
         }] });
 
+class TileSizeDirective extends BaseDirective {
+    constructor(_renderer2, _el, _portalService) {
+        super(_el);
+        this._renderer2 = _renderer2;
+        this._el = _el;
+        this._portalService = _portalService;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this._portalService.deviceSize$.pipe(takeUntil$1(this._onDestroy$)).subscribe((c) => {
+            if (c === 's') {
+                this._renderer2.addClass(this._el.nativeElement.firstChild, 'fd-tile--s');
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TileSizeDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.PortalService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: TileSizeDirective, selector: "[tileSize]", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TileSizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tileSize]'
+                }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.PortalService }] });
+
 const components = [
     ShellbarComponent,
     SimpleTileComponent,
@@ -3081,7 +3106,7 @@ const components = [
     PopoverAppFinderComponent
 ];
 const pipes = [GroupTilesPipe, TileHomeFilterPipe, HomeGroupPipe, ActionLinksPipe, TilePropPipe];
-const directives = [EmptyListDirective, TileRendererDirective, TileStyleDirective];
+const directives = [EmptyListDirective, TileRendererDirective, TileStyleDirective, TileSizeDirective];
 class BarsaTilesModule extends BaseModule {
     constructor(dcm, componentFactoryResolver) {
         super(dcm, componentFactoryResolver, 'BarsaTilesModule');
@@ -3121,7 +3146,7 @@ class BarsaTilesModule extends BaseModule {
             TilesViewerGroupComponent,
             FormTileComponent,
             BarsaShellbarComponent,
-            PopoverAppFinderComponent, GroupTilesPipe, TileHomeFilterPipe, HomeGroupPipe, ActionLinksPipe, TilePropPipe, EmptyListDirective, TileRendererDirective, TileStyleDirective, NotificationGroupComponent,
+            PopoverAppFinderComponent, GroupTilesPipe, TileHomeFilterPipe, HomeGroupPipe, ActionLinksPipe, TilePropPipe, EmptyListDirective, TileRendererDirective, TileStyleDirective, TileSizeDirective, NotificationGroupComponent,
             NotificationGroupHeaderComponent], imports: [CommonModule,
             FormsModule,
             DragDropModule,