barsa-tiles 2.0.1 → 2.0.2

package/esm2022/lib/numeric-tile/numeric-tile.component.mjs

@@ -6,6 +6,36 @@ import * as i2 from "../tile/tile.component";
 import * as i3 from "barsa-sap-ui";
 import * as i4 from "../pipes/tile-prop.pipe";
 export class NumericTileComponent extends BaseBtTileComponent {
+    constructor() {
+        super(...arguments);
+        this.kpiStateIsColor = false;
+        this.scalseStateIsColor = false;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        switch (this.kpiState) {
+            case 'positive':
+            case 'negative':
+            case 'informative':
+            case 'critical':
+            case 'neutral':
+                break;
+            default:
+                this.kpiStateIsColor = this.kpiState !== '';
+                break;
+        }
+        switch (this.scaleState) {
+            case 'positive':
+            case 'negative':
+            case 'informative':
+            case 'critical':
+            case 'neutral':
+                break;
+            default:
+                this.scalseStateIsColor = this.scaleState !== '';
+                break;
+        }
+    }
     get launchIcon() {
         return this.settings.LaunchIcon;
     }
@@ -25,10 +55,10 @@ export class NumericTileComponent extends BaseBtTileComponent {
         return this.settings.ScaleArrowIcon;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NumericTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: NumericTileComponent, selector: "bt-numeric-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\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>\n        <div fd-numeric-content>\n            <div fd-numeric-content-launch-icon-container>\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\n            </div>\n            <div fd-numeric-content-kpi-container>\n                <div fd-numeric-content-kpi [state]=\"kpiState\">{{ kpi }}</div>\n            </div>\n            <div fd-numeric-content-scale-container style=\"padding-top: 0.2rem\">\n                <div fd-numeric-content-scale [state]=\"scaleState\">\n                    <span\n                        fd-numeric-content-scale-arrow\n                        [glyph]=\"scaleArrowIcon\"\n                        [class]=\"scaleArrowIcon | sapFontClass\"\n                    ></span>\n                    <span fd-numeric-content-scale-text>{{ scaleText }}</span>\n                </div>\n            </div>\n        </div>\n    </div>\n</bt-tile>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1.NumericContentDirective, selector: "[fd-numeric-content]", inputs: ["class", "size"] }, { kind: "directive", type: i1.NumericContentKpiContainerDirective, selector: "[fd-numeric-content-kpi-container]" }, { kind: "directive", type: i1.NumericContentKpiDirective, selector: "[fd-numeric-content-kpi]", inputs: ["state", "class", "glyph"] }, { kind: "directive", type: i1.NumericContentLaunchIconContainerDirective, selector: "[fd-numeric-content-launch-icon-container]" }, { kind: "directive", type: i1.NumericContentLaunchIconDirective, selector: "[fd-numeric-content-launch-icon]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1.NumericContentScaleArrowDirective, selector: "[fd-numeric-content-scale-arrow]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1.NumericContentScaleContainerDirective, selector: "[fd-numeric-content-scale-container]" }, { kind: "directive", type: i1.NumericContentScaleDirective, selector: "[fd-numeric-content-scale]", inputs: ["state", "class"] }, { kind: "directive", type: i1.NumericContentScaleTextDirective, selector: "[fd-numeric-content-scale-text]" }, { kind: "component", type: i2.TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand"] }, { kind: "pipe", type: i3.SapFontClassPipe, name: "sapFontClass" }, { kind: "pipe", type: i4.TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: NumericTileComponent, selector: "bt-numeric-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\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>\n        <div fd-numeric-content>\n            <div fd-numeric-content-launch-icon-container>\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\n            </div>\n            <div fd-numeric-content-kpi-container>\n                <div fd-numeric-content-kpi [state]=\"kpiState\" [style.color]=\"kpiStateIsColor ? kpiState : null\">\n                    {{ kpi }}\n                </div>\n            </div>\n            <div fd-numeric-content-scale-container style=\"padding-top: 0.2rem\">\n                <div\n                    fd-numeric-content-scale\n                    [state]=\"scaleState\"\n                    [style.color]=\"scalseStateIsColor ? scaleState : null\"\n                >\n                    <span\n                        fd-numeric-content-scale-arrow\n                        [glyph]=\"scaleArrowIcon\"\n                        [class]=\"scaleArrowIcon | sapFontClass\"\n                        [style.color]=\"scalseStateIsColor ? scaleState : null\"\n                    ></span>\n                    <span fd-numeric-content-scale-text [style.color]=\"scalseStateIsColor ? scaleState : null\">{{\n                        scaleText\n                    }}</span>\n                </div>\n            </div>\n        </div>\n    </div>\n</bt-tile>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.TileContentDirective, selector: "[fdTileContent], [fd-tile-content]", inputs: ["twoColumn"] }, { kind: "directive", type: i1.NumericContentDirective, selector: "[fd-numeric-content]", inputs: ["class", "size"] }, { kind: "directive", type: i1.NumericContentKpiContainerDirective, selector: "[fd-numeric-content-kpi-container]" }, { kind: "directive", type: i1.NumericContentKpiDirective, selector: "[fd-numeric-content-kpi]", inputs: ["state", "class", "glyph"] }, { kind: "directive", type: i1.NumericContentLaunchIconContainerDirective, selector: "[fd-numeric-content-launch-icon-container]" }, { kind: "directive", type: i1.NumericContentLaunchIconDirective, selector: "[fd-numeric-content-launch-icon]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1.NumericContentScaleArrowDirective, selector: "[fd-numeric-content-scale-arrow]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1.NumericContentScaleContainerDirective, selector: "[fd-numeric-content-scale-container]" }, { kind: "directive", type: i1.NumericContentScaleDirective, selector: "[fd-numeric-content-scale]", inputs: ["state", "class"] }, { kind: "directive", type: i1.NumericContentScaleTextDirective, selector: "[fd-numeric-content-scale-text]" }, { kind: "component", type: i2.TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand"] }, { kind: "pipe", type: i3.SapFontClassPipe, name: "sapFontClass" }, { kind: "pipe", type: i4.TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NumericTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-numeric-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\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>\n        <div fd-numeric-content>\n            <div fd-numeric-content-launch-icon-container>\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\n            </div>\n            <div fd-numeric-content-kpi-container>\n                <div fd-numeric-content-kpi [state]=\"kpiState\">{{ kpi }}</div>\n            </div>\n            <div fd-numeric-content-scale-container style=\"padding-top: 0.2rem\">\n                <div fd-numeric-content-scale [state]=\"scaleState\">\n                    <span\n                        fd-numeric-content-scale-arrow\n                        [glyph]=\"scaleArrowIcon\"\n                        [class]=\"scaleArrowIcon | sapFontClass\"\n                    ></span>\n                    <span fd-numeric-content-scale-text>{{ scaleText }}</span>\n                </div>\n            </div>\n        </div>\n    </div>\n</bt-tile>\n" }]
+            args: [{ selector: 'bt-numeric-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\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>\n        <div fd-numeric-content>\n            <div fd-numeric-content-launch-icon-container>\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\n            </div>\n            <div fd-numeric-content-kpi-container>\n                <div fd-numeric-content-kpi [state]=\"kpiState\" [style.color]=\"kpiStateIsColor ? kpiState : null\">\n                    {{ kpi }}\n                </div>\n            </div>\n            <div fd-numeric-content-scale-container style=\"padding-top: 0.2rem\">\n                <div\n                    fd-numeric-content-scale\n                    [state]=\"scaleState\"\n                    [style.color]=\"scalseStateIsColor ? scaleState : null\"\n                >\n                    <span\n                        fd-numeric-content-scale-arrow\n                        [glyph]=\"scaleArrowIcon\"\n                        [class]=\"scaleArrowIcon | sapFontClass\"\n                        [style.color]=\"scalseStateIsColor ? scaleState : null\"\n                    ></span>\n                    <span fd-numeric-content-scale-text [style.color]=\"scalseStateIsColor ? scaleState : null\">{{\n                        scaleText\n                    }}</span>\n                </div>\n            </div>\n        </div>\n    </div>\n</bt-tile>\n" }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibnVtZXJpYy10aWxlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2JhcnNhLXRpbGVzL3NyYy9saWIvbnVtZXJpYy10aWxlL251bWVyaWMtdGlsZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9iYXJzYS10aWxlcy9zcmMvbGliL251bWVyaWMtdGlsZS9udW1lcmljLXRpbGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNuRSxPQUFPLEVBQUUsbUJBQW1CLEVBQXNCLE1BQU0sV0FBVyxDQUFDOzs7Ozs7QUFPcEUsTUFBTSxPQUFPLG9CQUFxQixTQUFRLG1CQUF1QztJQUM3RSxJQUFJLFVBQVU7UUFDVixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDO0lBQ3BDLENBQUM7SUFDRCxJQUFJLFFBQVE7UUFDUixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsZUFBZSxDQUFDO0lBQ3pDLENBQUM7SUFDRCxJQUFJLEdBQUc7UUFDSCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDO0lBQ3BDLENBQUM7SUFDRCxJQUFJLFVBQVU7UUFDVixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDO0lBQ3BDLENBQUM7SUFDRCxJQUFJLFNBQVM7UUFDVCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDO0lBQ25DLENBQUM7SUFDRCxJQUFJLGNBQWM7UUFDZCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsY0FBYyxDQUFDO0lBQ3hDLENBQUM7OEdBbEJRLG9CQUFvQjtrR0FBcEIsb0JBQW9CLDhFQ1JqQyw0OENBbUNBOzsyRkQzQmEsb0JBQW9CO2tCQU5oQyxTQUFTOytCQUNJLGlCQUFpQixtQkFHVix1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBCYXNlQnRUaWxlQ29tcG9uZW50LCBOdW1lcmljVGlsZVNldHRpbmcgfSBmcm9tICcuLi9tb2RlbHMnO1xyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnYnQtbnVtZXJpYy10aWxlJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9udW1lcmljLXRpbGUuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vbnVtZXJpYy10aWxlLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxyXG59KVxyXG5leHBvcnQgY2xhc3MgTnVtZXJpY1RpbGVDb21wb25lbnQgZXh0ZW5kcyBCYXNlQnRUaWxlQ29tcG9uZW50PE51bWVyaWNUaWxlU2V0dGluZz4ge1xyXG4gICAgZ2V0IGxhdW5jaEljb24oKTogc3RyaW5nIHtcclxuICAgICAgICByZXR1cm4gdGhpcy5zZXR0aW5ncy5MYXVuY2hJY29uO1xyXG4gICAgfVxyXG4gICAgZ2V0IGtwaVN0YXRlKCk6ICdwb3NpdGl2ZScgfCAnbmVnYXRpdmUnIHtcclxuICAgICAgICByZXR1cm4gdGhpcy5zZXR0aW5ncy5Db250ZW50S3BpU3RhdGU7XHJcbiAgICB9XHJcbiAgICBnZXQga3BpKCk6IHN0cmluZyB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMuc2V0dGluZ3MuQ29udGVudEtwaTtcclxuICAgIH1cclxuICAgIGdldCBzY2FsZVN0YXRlKCk6ICdwb3NpdGl2ZScgfCAnbmVnYXRpdmUnIHtcclxuICAgICAgICByZXR1cm4gdGhpcy5zZXR0aW5ncy5TY2FsZVN0YXRlO1xyXG4gICAgfVxyXG4gICAgZ2V0IHNjYWxlVGV4dCgpOiBzdHJpbmcge1xyXG4gICAgICAgIHJldHVybiB0aGlzLnNldHRpbmdzLlNjYWxlVGV4dDtcclxuICAgIH1cclxuICAgIGdldCBzY2FsZUFycm93SWNvbigpOiBzdHJpbmcge1xyXG4gICAgICAgIHJldHVybiB0aGlzLnNldHRpbmdzLlNjYWxlQXJyb3dJY29uO1xyXG4gICAgfVxyXG59XHJcbiIsIjxidC10aWxlXG4gICAgW2RhdGFdPVwiZGF0YVwiXG4gICAgW3R5cGVdPVwiJ2xhdW5jaCdcIlxuICAgIFtlZGl0XT1cImVkaXRcIlxuICAgIFtiYWNrQ29sb3JdPVwiYmFja0NvbG9yXCJcbiAgICBbdGl0bGVdPVwiZGF0YSB8IHRpbGVQcm9wOiAnVGl0bGUnOnBhcmFtZXRlcnNcIlxuICAgIFtzdWJ0aXRsZV09XCJkYXRhIHwgdGlsZVByb3A6ICdTdWJ0aXRsZSc6cGFyYW1ldGVyc1wiXG4gICAgW2R5bmFtaWNDb21tYW5kXT1cImRhdGEgfCB0aWxlUHJvcDogJ0R5bmFtaWNDb21tYW5kJzpwYXJhbWV0ZXJzXCJcbiAgICBbaXNEb3VibGVdPVwiZGF0YSB8IHRpbGVQcm9wOiAnSXNEb3VibGUnOnBhcmFtZXRlcnNcIlxuICAgIFtmb290ZXJdPVwiZGF0YSB8IHRpbGVQcm9wOiAnRm9vdGVyJzpwYXJhbWV0ZXJzXCJcbiAgICAoaGlkZUNsaWNrKT1cImhpZGVDbGljay5lbWl0KClcIlxuICAgIChyZW5hbWVDbGljayk9XCJyZW5hbWVDbGljay5lbWl0KClcIlxuICAgIChjbGljayk9XCJvblRpbGVDbGljaygpXCJcbj5cbiAgICA8ZGl2IGZkLXRpbGUtY29udGVudD5cbiAgICAgICAgPGRpdiBmZC1udW1lcmljLWNvbnRlbnQ+XG4gICAgICAgICAgICA8ZGl2IGZkLW51bWVyaWMtY29udGVudC1sYXVuY2gtaWNvbi1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgPGkgZmQtbnVtZXJpYy1jb250ZW50LWxhdW5jaC1pY29uIFtnbHlwaF09XCJsYXVuY2hJY29uXCIgW2NsYXNzXT1cImxhdW5jaEljb24gfCBzYXBGb250Q2xhc3NcIj48L2k+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDxkaXYgZmQtbnVtZXJpYy1jb250ZW50LWtwaS1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgPGRpdiBmZC1udW1lcmljLWNvbnRlbnQta3BpIFtzdGF0ZV09XCJrcGlTdGF0ZVwiPnt7IGtwaSB9fTwvZGl2PlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGZkLW51bWVyaWMtY29udGVudC1zY2FsZS1jb250YWluZXIgc3R5bGU9XCJwYWRkaW5nLXRvcDogMC4ycmVtXCI+XG4gICAgICAgICAgICAgICAgPGRpdiBmZC1udW1lcmljLWNvbnRlbnQtc2NhbGUgW3N0YXRlXT1cInNjYWxlU3RhdGVcIj5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW5cbiAgICAgICAgICAgICAgICAgICAgICAgIGZkLW51bWVyaWMtY29udGVudC1zY2FsZS1hcnJvd1xuICAgICAgICAgICAgICAgICAgICAgICAgW2dseXBoXT1cInNjYWxlQXJyb3dJY29uXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtjbGFzc109XCJzY2FsZUFycm93SWNvbiB8IHNhcEZvbnRDbGFzc1wiXG4gICAgICAgICAgICAgICAgICAgID48L3NwYW4+XG4gICAgICAgICAgICAgICAgICAgIDxzcGFuIGZkLW51bWVyaWMtY29udGVudC1zY2FsZS10ZXh0Pnt7IHNjYWxlVGV4dCB9fTwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbjwvYnQtdGlsZT5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibnVtZXJpYy10aWxlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2JhcnNhLXRpbGVzL3NyYy9saWIvbnVtZXJpYy10aWxlL251bWVyaWMtdGlsZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9iYXJzYS10aWxlcy9zcmMvbGliL251bWVyaWMtdGlsZS9udW1lcmljLXRpbGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNuRSxPQUFPLEVBQUUsbUJBQW1CLEVBQXNCLE1BQU0sV0FBVyxDQUFDOzs7Ozs7QUFRcEUsTUFBTSxPQUFPLG9CQUFxQixTQUFRLG1CQUF1QztJQU5qRjs7UUFPSSxvQkFBZSxHQUFHLEtBQUssQ0FBQztRQUN4Qix1QkFBa0IsR0FBRyxLQUFLLENBQUM7S0E0QzlCO0lBM0NHLFFBQVE7UUFDSixLQUFLLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDakIsUUFBUSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDcEIsS0FBSyxVQUFVLENBQUM7WUFDaEIsS0FBSyxVQUFVLENBQUM7WUFDaEIsS0FBSyxhQUFhLENBQUM7WUFDbkIsS0FBSyxVQUFVLENBQUM7WUFDaEIsS0FBSyxTQUFTO2dCQUNWLE1BQU07WUFDVjtnQkFDSSxJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxRQUFRLEtBQUssRUFBRSxDQUFDO2dCQUM1QyxNQUFNO1FBQ2QsQ0FBQztRQUNELFFBQVEsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1lBQ3RCLEtBQUssVUFBVSxDQUFDO1lBQ2hCLEtBQUssVUFBVSxDQUFDO1lBQ2hCLEtBQUssYUFBYSxDQUFDO1lBQ25CLEtBQUssVUFBVSxDQUFDO1lBQ2hCLEtBQUssU0FBUztnQkFDVixNQUFNO1lBQ1Y7Z0JBQ0ksSUFBSSxDQUFDLGtCQUFrQixHQUFHLElBQUksQ0FBQyxVQUFVLEtBQUssRUFBRSxDQUFDO2dCQUNqRCxNQUFNO1FBQ2QsQ0FBQztJQUNMLENBQUM7SUFDRCxJQUFJLFVBQVU7UUFDVixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDO0lBQ3BDLENBQUM7SUFDRCxJQUFJLFFBQVE7UUFDUixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsZUFBZSxDQUFDO0lBQ3pDLENBQUM7SUFDRCxJQUFJLEdBQUc7UUFDSCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDO0lBQ3BDLENBQUM7SUFDRCxJQUFJLFVBQVU7UUFDVixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDO0lBQ3BDLENBQUM7SUFDRCxJQUFJLFNBQVM7UUFDVCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDO0lBQ25DLENBQUM7SUFDRCxJQUFJLGNBQWM7UUFDZCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsY0FBYyxDQUFDO0lBQ3hDLENBQUM7OEdBN0NRLG9CQUFvQjtrR0FBcEIsb0JBQW9CLDhFQ1RqQywyMkRBNENBOzsyRkRuQ2Esb0JBQW9CO2tCQU5oQyxTQUFTOytCQUNJLGlCQUFpQixtQkFHVix1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQmFzZUJ0VGlsZUNvbXBvbmVudCwgTnVtZXJpY1RpbGVTZXR0aW5nIH0gZnJvbSAnLi4vbW9kZWxzJztcbmltcG9ydCB7IE51bWVyaWNDb250ZW50U3RhdGUgfSBmcm9tICdAZnVuZGFtZW50YWwtbmd4L2NvcmUnO1xuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdidC1udW1lcmljLXRpbGUnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9udW1lcmljLXRpbGUuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL251bWVyaWMtdGlsZS5jb21wb25lbnQuc2NzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIE51bWVyaWNUaWxlQ29tcG9uZW50IGV4dGVuZHMgQmFzZUJ0VGlsZUNvbXBvbmVudDxOdW1lcmljVGlsZVNldHRpbmc+IHtcbiAgICBrcGlTdGF0ZUlzQ29sb3IgPSBmYWxzZTtcbiAgICBzY2Fsc2VTdGF0ZUlzQ29sb3IgPSBmYWxzZTtcbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgc3VwZXIubmdPbkluaXQoKTtcbiAgICAgICAgc3dpdGNoICh0aGlzLmtwaVN0YXRlKSB7XG4gICAgICAgICAgICBjYXNlICdwb3NpdGl2ZSc6XG4gICAgICAgICAgICBjYXNlICduZWdhdGl2ZSc6XG4gICAgICAgICAgICBjYXNlICdpbmZvcm1hdGl2ZSc6XG4gICAgICAgICAgICBjYXNlICdjcml0aWNhbCc6XG4gICAgICAgICAgICBjYXNlICduZXV0cmFsJzpcbiAgICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgIGRlZmF1bHQ6XG4gICAgICAgICAgICAgICAgdGhpcy5rcGlTdGF0ZUlzQ29sb3IgPSB0aGlzLmtwaVN0YXRlICE9PSAnJztcbiAgICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgfVxuICAgICAgICBzd2l0Y2ggKHRoaXMuc2NhbGVTdGF0ZSkge1xuICAgICAgICAgICAgY2FzZSAncG9zaXRpdmUnOlxuICAgICAgICAgICAgY2FzZSAnbmVnYXRpdmUnOlxuICAgICAgICAgICAgY2FzZSAnaW5mb3JtYXRpdmUnOlxuICAgICAgICAgICAgY2FzZSAnY3JpdGljYWwnOlxuICAgICAgICAgICAgY2FzZSAnbmV1dHJhbCc6XG4gICAgICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgICAgICBkZWZhdWx0OlxuICAgICAgICAgICAgICAgIHRoaXMuc2NhbHNlU3RhdGVJc0NvbG9yID0gdGhpcy5zY2FsZVN0YXRlICE9PSAnJztcbiAgICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgfVxuICAgIH1cbiAgICBnZXQgbGF1bmNoSWNvbigpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5zZXR0aW5ncy5MYXVuY2hJY29uO1xuICAgIH1cbiAgICBnZXQga3BpU3RhdGUoKTogTnVtZXJpY0NvbnRlbnRTdGF0ZSB7XG4gICAgICAgIHJldHVybiB0aGlzLnNldHRpbmdzLkNvbnRlbnRLcGlTdGF0ZTtcbiAgICB9XG4gICAgZ2V0IGtwaSgpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5zZXR0aW5ncy5Db250ZW50S3BpO1xuICAgIH1cbiAgICBnZXQgc2NhbGVTdGF0ZSgpOiBOdW1lcmljQ29udGVudFN0YXRlIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuc2V0dGluZ3MuU2NhbGVTdGF0ZTtcbiAgICB9XG4gICAgZ2V0IHNjYWxlVGV4dCgpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5zZXR0aW5ncy5TY2FsZVRleHQ7XG4gICAgfVxuICAgIGdldCBzY2FsZUFycm93SWNvbigpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5zZXR0aW5ncy5TY2FsZUFycm93SWNvbjtcbiAgICB9XG59XG4iLCI8YnQtdGlsZVxuICAgIFtkYXRhXT1cImRhdGFcIlxuICAgIFt0eXBlXT1cIidsYXVuY2gnXCJcbiAgICBbZWRpdF09XCJlZGl0XCJcbiAgICBbYmFja0NvbG9yXT1cImJhY2tDb2xvclwiXG4gICAgW3RpdGxlXT1cImRhdGEgfCB0aWxlUHJvcDogJ1RpdGxlJzpwYXJhbWV0ZXJzXCJcbiAgICBbc3VidGl0bGVdPVwiZGF0YSB8IHRpbGVQcm9wOiAnU3VidGl0bGUnOnBhcmFtZXRlcnNcIlxuICAgIFtkeW5hbWljQ29tbWFuZF09XCJkYXRhIHwgdGlsZVByb3A6ICdEeW5hbWljQ29tbWFuZCc6cGFyYW1ldGVyc1wiXG4gICAgW2lzRG91YmxlXT1cImRhdGEgfCB0aWxlUHJvcDogJ0lzRG91YmxlJzpwYXJhbWV0ZXJzXCJcbiAgICBbZm9vdGVyXT1cImRhdGEgfCB0aWxlUHJvcDogJ0Zvb3Rlcic6cGFyYW1ldGVyc1wiXG4gICAgKGhpZGVDbGljayk9XCJoaWRlQ2xpY2suZW1pdCgpXCJcbiAgICAocmVuYW1lQ2xpY2spPVwicmVuYW1lQ2xpY2suZW1pdCgpXCJcbiAgICAoY2xpY2spPVwib25UaWxlQ2xpY2soKVwiXG4+XG4gICAgPGRpdiBmZC10aWxlLWNvbnRlbnQ+XG4gICAgICAgIDxkaXYgZmQtbnVtZXJpYy1jb250ZW50PlxuICAgICAgICAgICAgPGRpdiBmZC1udW1lcmljLWNvbnRlbnQtbGF1bmNoLWljb24tY29udGFpbmVyPlxuICAgICAgICAgICAgICAgIDxpIGZkLW51bWVyaWMtY29udGVudC1sYXVuY2gtaWNvbiBbZ2x5cGhdPVwibGF1bmNoSWNvblwiIFtjbGFzc109XCJsYXVuY2hJY29uIHwgc2FwRm9udENsYXNzXCI+PC9pPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGZkLW51bWVyaWMtY29udGVudC1rcGktY29udGFpbmVyPlxuICAgICAgICAgICAgICAgIDxkaXYgZmQtbnVtZXJpYy1jb250ZW50LWtwaSBbc3RhdGVdPVwia3BpU3RhdGVcIiBbc3R5bGUuY29sb3JdPVwia3BpU3RhdGVJc0NvbG9yID8ga3BpU3RhdGUgOiBudWxsXCI+XG4gICAgICAgICAgICAgICAgICAgIHt7IGtwaSB9fVxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGZkLW51bWVyaWMtY29udGVudC1zY2FsZS1jb250YWluZXIgc3R5bGU9XCJwYWRkaW5nLXRvcDogMC4ycmVtXCI+XG4gICAgICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICAgICBmZC1udW1lcmljLWNvbnRlbnQtc2NhbGVcbiAgICAgICAgICAgICAgICAgICAgW3N0YXRlXT1cInNjYWxlU3RhdGVcIlxuICAgICAgICAgICAgICAgICAgICBbc3R5bGUuY29sb3JdPVwic2NhbHNlU3RhdGVJc0NvbG9yID8gc2NhbGVTdGF0ZSA6IG51bGxcIlxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW5cbiAgICAgICAgICAgICAgICAgICAgICAgIGZkLW51bWVyaWMtY29udGVudC1zY2FsZS1hcnJvd1xuICAgICAgICAgICAgICAgICAgICAgICAgW2dseXBoXT1cInNjYWxlQXJyb3dJY29uXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtjbGFzc109XCJzY2FsZUFycm93SWNvbiB8IHNhcEZvbnRDbGFzc1wiXG4gICAgICAgICAgICAgICAgICAgICAgICBbc3R5bGUuY29sb3JdPVwic2NhbHNlU3RhdGVJc0NvbG9yID8gc2NhbGVTdGF0ZSA6IG51bGxcIlxuICAgICAgICAgICAgICAgICAgICA+PC9zcGFuPlxuICAgICAgICAgICAgICAgICAgICA8c3BhbiBmZC1udW1lcmljLWNvbnRlbnQtc2NhbGUtdGV4dCBbc3R5bGUuY29sb3JdPVwic2NhbHNlU3RhdGVJc0NvbG9yID8gc2NhbGVTdGF0ZSA6IG51bGxcIj57e1xuICAgICAgICAgICAgICAgICAgICAgICAgc2NhbGVUZXh0XG4gICAgICAgICAgICAgICAgICAgIH19PC9zcGFuPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9idC10aWxlPlxuIl19

package/esm2022/lib/tiles-viewer/tiles-viewer.component.mjs

@@ -106,11 +106,11 @@ export class TilesViewerComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TilesViewerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SaveScrollPositionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: TilesViewerComponent, selector: "bt-tiles-viewer", inputs: { appTileGroups: "appTileGroups", loading: "loading", edit: "edit", rtl: "rtl", defaultTab: "defaultTab", stackContent: "stackContent", deviceSize: "deviceSize", selectedAppGroupId: "selectedAppGroupId", DynamicComponents: "DynamicComponents" }, outputs: { stackContentChange: "stackContentChange", closeEditHome: "closeEditHome", save: "save", listDropped: "listDropped", tabChanged: "tabChanged", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", tilesDropped: "tilesDropped" }, host: { properties: { "class.page-content": "this.pageContentClass", "attr.rtl": "this._rtl" } }, viewQueries: [{ propertyName: "tabListComponent", first: true, predicate: TabListComponent, descendants: true }, { propertyName: "contentPageRef", first: true, predicate: ["contentPage"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-dynamic-page\r\n    size=\"large\"\r\n    [ariaLabel]=\"'HomeEdit' | bbbTranslate\"\r\n    [autoResponsive]=\"true\"\r\n    [class.stack-mode]=\"stackContent\"\r\n>\r\n    @if (edit) {\r\n    <fd-dynamic-page-header [title]=\"'HomeEdit' | bbbTranslate\">\r\n        <fd-dynamic-page-global-actions>\r\n            @if (edit) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <label fd-form-label fd-toolbar-item>Stacked Content </label>\r\n                <fd-switch\r\n                    fd-toolbar-item\r\n                    [checked]=\"stackContent\"\r\n                    (checkedChange)=\"onStackContentChanged($event)\"\r\n                ></fd-switch>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\r\n                    <i class=\"sap-icon--decline\"></i>\r\n                </button>\r\n            </fd-toolbar>\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    }\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [stackContent]=\"stackContent\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"vertical\"\r\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\r\n        (selectedTabChange)=\"onSelectedTabChange($event, appTileGroups)\"\r\n        [defaultTab]=\"defaultTab\"\r\n    >\r\n        @for (appTileGroup of appTileGroups; track _trackById(i, appTileGroup); let i = $index) { @if (edit ||\r\n        appTileGroup.navigatorVisible) {\r\n        <fd-tab\r\n            [id]=\"appTileGroup.Id\"\r\n            [label]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n        >\r\n            <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                <bt-tiles-viewer-group\r\n                    [appTileGroup]=\"appTileGroup\"\r\n                    [edit]=\"edit\"\r\n                    [rtl]=\"rtl\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [stackContent]=\"stackContent\"\r\n                    [isAppTileSubGroup]=\"false\"\r\n                    (tilesDropped)=\"onDrop($event)\"\r\n                    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n                    (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n                    (resetGroup)=\"resetGroup.emit($event)\"\r\n                    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n                    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n                ></bt-tiles-viewer-group>\r\n            </fd-dynamic-page-content>\r\n        </fd-tab>\r\n        } }\r\n    </fd-tab-list>\r\n\r\n    <fd-dynamic-page-footer>\r\n        @if (edit) {\r\n        <div fd-bar barDesign=\"footer\">\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    [label]=\"'SaveAndClose' | bbbTranslate\"\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"onExitEditHome(appTileGroups)\"\r\n                ></fd-button-bar>\r\n            </div>\r\n        </div>\r\n        }\r\n    </fd-dynamic-page-footer>\r\n</fd-dynamic-page>\r\n\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #renderGroup\r\n    let-appTileGroup\r\n    let-stackContent=\"stackContent\"\r\n    let-edit=\"edit\"\r\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\r\n>\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileGroup\"\r\n        [edit]=\"edit\"\r\n        [rtl]=\"rtl\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"isAppTileSubGroup\"\r\n        (tilesDropped)=\"onDrop($event)\"\r\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n        (resetGroup)=\"resetGroup.emit($event)\"\r\n        (deleteGroup)=\"deleteGroup.emit($event)\"\r\n        (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    ></bt-tiles-viewer-group>\r\n</ng-template>\r\n", styles: [":host{display:block}:host ::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}:host ::ng-deep fd-tab-list[noSpy] .fd-tabs__content{overflow-y:initial}:host ::ng-deep fd-dynamic-page section{height:calc(100vh - 44px)!important}:host ::ng-deep .footer-spacer{height:0}.fd-tabs__panel:not(.is-expanded){display:none}fd-dynamic-page.stack-mode fd-dynamic-page-content{overflow-y:hidden}fd-dynamic-page-content{padding:0!important}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.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: "component", type: i4.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i6.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap"] }, { kind: "component", type: i6.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i6.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i6.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i6.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i7.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i8.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "id", "required", "checked", "semantic", "ariaLabel", "ariaLabelledBy"], outputs: ["checkedChange"] }, { kind: "component", type: i9.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i9.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { 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: i11.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: i12.TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "edit", "rtl", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { 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: TilesViewerComponent, selector: "bt-tiles-viewer", inputs: { appTileGroups: "appTileGroups", loading: "loading", edit: "edit", rtl: "rtl", defaultTab: "defaultTab", stackContent: "stackContent", deviceSize: "deviceSize", selectedAppGroupId: "selectedAppGroupId", DynamicComponents: "DynamicComponents" }, outputs: { stackContentChange: "stackContentChange", closeEditHome: "closeEditHome", save: "save", listDropped: "listDropped", tabChanged: "tabChanged", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", tilesDropped: "tilesDropped" }, host: { properties: { "class.page-content": "this.pageContentClass", "attr.rtl": "this._rtl" } }, viewQueries: [{ propertyName: "tabListComponent", first: true, predicate: TabListComponent, descendants: true }, { propertyName: "contentPageRef", first: true, predicate: ["contentPage"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-dynamic-page\r\n    size=\"large\"\r\n    [ariaLabel]=\"'HomeEdit' | bbbTranslate\"\r\n    [autoResponsive]=\"true\"\r\n    [class.stack-mode]=\"stackContent\"\r\n>\r\n    @if (edit) {\r\n    <fd-dynamic-page-header [title]=\"'HomeEdit' | bbbTranslate\">\r\n        <fd-dynamic-page-global-actions>\r\n            @if (edit) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <label fd-form-label fd-toolbar-item>Stacked Content </label>\r\n                <fd-switch\r\n                    fd-toolbar-item\r\n                    [checked]=\"stackContent\"\r\n                    (checkedChange)=\"onStackContentChanged($event)\"\r\n                ></fd-switch>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\r\n                    <i class=\"sap-icon--decline\"></i>\r\n                </button>\r\n            </fd-toolbar>\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    }\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [stackContent]=\"stackContent\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"vertical\"\r\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\r\n        (selectedTabChange)=\"onSelectedTabChange($event, appTileGroups)\"\r\n        [defaultTab]=\"defaultTab\"\r\n    >\r\n        @for (appTileGroup of appTileGroups; track _trackById(i, appTileGroup); let i = $index) { @if (edit ||\r\n        appTileGroup.navigatorVisible) {\r\n        <fd-tab\r\n            [id]=\"appTileGroup.Id\"\r\n            [label]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n        >\r\n            <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                <bt-tiles-viewer-group\r\n                    [appTileGroup]=\"appTileGroup\"\r\n                    [edit]=\"edit\"\r\n                    [rtl]=\"rtl\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [stackContent]=\"stackContent\"\r\n                    [isAppTileSubGroup]=\"false\"\r\n                    (tilesDropped)=\"onDrop($event)\"\r\n                    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n                    (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n                    (resetGroup)=\"resetGroup.emit($event)\"\r\n                    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n                    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n                ></bt-tiles-viewer-group>\r\n            </fd-dynamic-page-content>\r\n        </fd-tab>\r\n        } }\r\n    </fd-tab-list>\r\n\r\n    <fd-dynamic-page-footer>\r\n        @if (edit) {\r\n        <div fd-bar barDesign=\"footer\">\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    [label]=\"'SaveAndClose' | bbbTranslate\"\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"onExitEditHome(appTileGroups)\"\r\n                ></fd-button-bar>\r\n            </div>\r\n        </div>\r\n        }\r\n    </fd-dynamic-page-footer>\r\n</fd-dynamic-page>\r\n\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #renderGroup\r\n    let-appTileGroup\r\n    let-stackContent=\"stackContent\"\r\n    let-edit=\"edit\"\r\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\r\n>\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileGroup\"\r\n        [edit]=\"edit\"\r\n        [rtl]=\"rtl\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"isAppTileSubGroup\"\r\n        (tilesDropped)=\"onDrop($event)\"\r\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n        (resetGroup)=\"resetGroup.emit($event)\"\r\n        (deleteGroup)=\"deleteGroup.emit($event)\"\r\n        (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    ></bt-tiles-viewer-group>\r\n</ng-template>\r\n", styles: [":host{display:block}:host ::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}:host ::ng-deep fd-tab-list[noSpy] .fd-tabs__content{overflow-y:initial}:host ::ng-deep fd-dynamic-page article{height:calc(100vh - 44px)!important}:host ::ng-deep .footer-spacer{height:0}.fd-tabs__panel:not(.is-expanded){display:none}fd-dynamic-page.stack-mode fd-dynamic-page-content{overflow-y:hidden}fd-dynamic-page-content{padding:0!important}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.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: "component", type: i4.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i6.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap"] }, { kind: "component", type: i6.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i6.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i6.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i6.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i7.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i8.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "id", "required", "checked", "semantic", "ariaLabel", "ariaLabelledBy"], outputs: ["checkedChange"] }, { kind: "component", type: i9.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i9.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { 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: i11.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: i12.TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "edit", "rtl", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TilesViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-tiles-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dynamic-page\r\n    size=\"large\"\r\n    [ariaLabel]=\"'HomeEdit' | bbbTranslate\"\r\n    [autoResponsive]=\"true\"\r\n    [class.stack-mode]=\"stackContent\"\r\n>\r\n    @if (edit) {\r\n    <fd-dynamic-page-header [title]=\"'HomeEdit' | bbbTranslate\">\r\n        <fd-dynamic-page-global-actions>\r\n            @if (edit) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <label fd-form-label fd-toolbar-item>Stacked Content </label>\r\n                <fd-switch\r\n                    fd-toolbar-item\r\n                    [checked]=\"stackContent\"\r\n                    (checkedChange)=\"onStackContentChanged($event)\"\r\n                ></fd-switch>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\r\n                    <i class=\"sap-icon--decline\"></i>\r\n                </button>\r\n            </fd-toolbar>\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    }\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [stackContent]=\"stackContent\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"vertical\"\r\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\r\n        (selectedTabChange)=\"onSelectedTabChange($event, appTileGroups)\"\r\n        [defaultTab]=\"defaultTab\"\r\n    >\r\n        @for (appTileGroup of appTileGroups; track _trackById(i, appTileGroup); let i = $index) { @if (edit ||\r\n        appTileGroup.navigatorVisible) {\r\n        <fd-tab\r\n            [id]=\"appTileGroup.Id\"\r\n            [label]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n        >\r\n            <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                <bt-tiles-viewer-group\r\n                    [appTileGroup]=\"appTileGroup\"\r\n                    [edit]=\"edit\"\r\n                    [rtl]=\"rtl\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [stackContent]=\"stackContent\"\r\n                    [isAppTileSubGroup]=\"false\"\r\n                    (tilesDropped)=\"onDrop($event)\"\r\n                    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n                    (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n                    (resetGroup)=\"resetGroup.emit($event)\"\r\n                    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n                    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n                ></bt-tiles-viewer-group>\r\n            </fd-dynamic-page-content>\r\n        </fd-tab>\r\n        } }\r\n    </fd-tab-list>\r\n\r\n    <fd-dynamic-page-footer>\r\n        @if (edit) {\r\n        <div fd-bar barDesign=\"footer\">\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    [label]=\"'SaveAndClose' | bbbTranslate\"\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"onExitEditHome(appTileGroups)\"\r\n                ></fd-button-bar>\r\n            </div>\r\n        </div>\r\n        }\r\n    </fd-dynamic-page-footer>\r\n</fd-dynamic-page>\r\n\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #renderGroup\r\n    let-appTileGroup\r\n    let-stackContent=\"stackContent\"\r\n    let-edit=\"edit\"\r\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\r\n>\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileGroup\"\r\n        [edit]=\"edit\"\r\n        [rtl]=\"rtl\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"isAppTileSubGroup\"\r\n        (tilesDropped)=\"onDrop($event)\"\r\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n        (resetGroup)=\"resetGroup.emit($event)\"\r\n        (deleteGroup)=\"deleteGroup.emit($event)\"\r\n        (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    ></bt-tiles-viewer-group>\r\n</ng-template>\r\n", styles: [":host{display:block}:host ::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}:host ::ng-deep fd-tab-list[noSpy] .fd-tabs__content{overflow-y:initial}:host ::ng-deep fd-dynamic-page section{height:calc(100vh - 44px)!important}:host ::ng-deep .footer-spacer{height:0}.fd-tabs__panel:not(.is-expanded){display:none}fd-dynamic-page.stack-mode fd-dynamic-page-content{overflow-y:hidden}fd-dynamic-page-content{padding:0!important}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"] }]
+            args: [{ selector: 'bt-tiles-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dynamic-page\r\n    size=\"large\"\r\n    [ariaLabel]=\"'HomeEdit' | bbbTranslate\"\r\n    [autoResponsive]=\"true\"\r\n    [class.stack-mode]=\"stackContent\"\r\n>\r\n    @if (edit) {\r\n    <fd-dynamic-page-header [title]=\"'HomeEdit' | bbbTranslate\">\r\n        <fd-dynamic-page-global-actions>\r\n            @if (edit) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <label fd-form-label fd-toolbar-item>Stacked Content </label>\r\n                <fd-switch\r\n                    fd-toolbar-item\r\n                    [checked]=\"stackContent\"\r\n                    (checkedChange)=\"onStackContentChanged($event)\"\r\n                ></fd-switch>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\r\n                    <i class=\"sap-icon--decline\"></i>\r\n                </button>\r\n            </fd-toolbar>\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    }\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [stackContent]=\"stackContent\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"vertical\"\r\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\r\n        (selectedTabChange)=\"onSelectedTabChange($event, appTileGroups)\"\r\n        [defaultTab]=\"defaultTab\"\r\n    >\r\n        @for (appTileGroup of appTileGroups; track _trackById(i, appTileGroup); let i = $index) { @if (edit ||\r\n        appTileGroup.navigatorVisible) {\r\n        <fd-tab\r\n            [id]=\"appTileGroup.Id\"\r\n            [label]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n        >\r\n            <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                <bt-tiles-viewer-group\r\n                    [appTileGroup]=\"appTileGroup\"\r\n                    [edit]=\"edit\"\r\n                    [rtl]=\"rtl\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [stackContent]=\"stackContent\"\r\n                    [isAppTileSubGroup]=\"false\"\r\n                    (tilesDropped)=\"onDrop($event)\"\r\n                    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n                    (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n                    (resetGroup)=\"resetGroup.emit($event)\"\r\n                    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n                    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n                ></bt-tiles-viewer-group>\r\n            </fd-dynamic-page-content>\r\n        </fd-tab>\r\n        } }\r\n    </fd-tab-list>\r\n\r\n    <fd-dynamic-page-footer>\r\n        @if (edit) {\r\n        <div fd-bar barDesign=\"footer\">\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    [label]=\"'SaveAndClose' | bbbTranslate\"\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"onExitEditHome(appTileGroups)\"\r\n                ></fd-button-bar>\r\n            </div>\r\n        </div>\r\n        }\r\n    </fd-dynamic-page-footer>\r\n</fd-dynamic-page>\r\n\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #renderGroup\r\n    let-appTileGroup\r\n    let-stackContent=\"stackContent\"\r\n    let-edit=\"edit\"\r\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\r\n>\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileGroup\"\r\n        [edit]=\"edit\"\r\n        [rtl]=\"rtl\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"isAppTileSubGroup\"\r\n        (tilesDropped)=\"onDrop($event)\"\r\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n        (resetGroup)=\"resetGroup.emit($event)\"\r\n        (deleteGroup)=\"deleteGroup.emit($event)\"\r\n        (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    ></bt-tiles-viewer-group>\r\n</ng-template>\r\n", styles: [":host{display:block}:host ::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}:host ::ng-deep fd-tab-list[noSpy] .fd-tabs__content{overflow-y:initial}:host ::ng-deep fd-dynamic-page article{height:calc(100vh - 44px)!important}:host ::ng-deep .footer-spacer{height:0}.fd-tabs__panel:not(.is-expanded){display:none}fd-dynamic-page.stack-mode fd-dynamic-page-content{overflow-y:hidden}fd-dynamic-page-content{padding:0!important}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.SaveScrollPositionService }], propDecorators: { tabListComponent: [{
                 type: ViewChild,
                 args: [TabListComponent]

package/fesm2022/barsa-tiles.mjs

@@ -1433,11 +1433,11 @@ class TilesViewerComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TilesViewerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SaveScrollPositionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: TilesViewerComponent, selector: "bt-tiles-viewer", inputs: { appTileGroups: "appTileGroups", loading: "loading", edit: "edit", rtl: "rtl", defaultTab: "defaultTab", stackContent: "stackContent", deviceSize: "deviceSize", selectedAppGroupId: "selectedAppGroupId", DynamicComponents: "DynamicComponents" }, outputs: { stackContentChange: "stackContentChange", closeEditHome: "closeEditHome", save: "save", listDropped: "listDropped", tabChanged: "tabChanged", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", tilesDropped: "tilesDropped" }, host: { properties: { "class.page-content": "this.pageContentClass", "attr.rtl": "this._rtl" } }, viewQueries: [{ propertyName: "tabListComponent", first: true, predicate: TabListComponent, descendants: true }, { propertyName: "contentPageRef", first: true, predicate: ["contentPage"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-dynamic-page\r\n    size=\"large\"\r\n    [ariaLabel]=\"'HomeEdit' | bbbTranslate\"\r\n    [autoResponsive]=\"true\"\r\n    [class.stack-mode]=\"stackContent\"\r\n>\r\n    @if (edit) {\r\n    <fd-dynamic-page-header [title]=\"'HomeEdit' | bbbTranslate\">\r\n        <fd-dynamic-page-global-actions>\r\n            @if (edit) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <label fd-form-label fd-toolbar-item>Stacked Content </label>\r\n                <fd-switch\r\n                    fd-toolbar-item\r\n                    [checked]=\"stackContent\"\r\n                    (checkedChange)=\"onStackContentChanged($event)\"\r\n                ></fd-switch>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\r\n                    <i class=\"sap-icon--decline\"></i>\r\n                </button>\r\n            </fd-toolbar>\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    }\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [stackContent]=\"stackContent\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"vertical\"\r\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\r\n        (selectedTabChange)=\"onSelectedTabChange($event, appTileGroups)\"\r\n        [defaultTab]=\"defaultTab\"\r\n    >\r\n        @for (appTileGroup of appTileGroups; track _trackById(i, appTileGroup); let i = $index) { @if (edit ||\r\n        appTileGroup.navigatorVisible) {\r\n        <fd-tab\r\n            [id]=\"appTileGroup.Id\"\r\n            [label]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n        >\r\n            <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                <bt-tiles-viewer-group\r\n                    [appTileGroup]=\"appTileGroup\"\r\n                    [edit]=\"edit\"\r\n                    [rtl]=\"rtl\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [stackContent]=\"stackContent\"\r\n                    [isAppTileSubGroup]=\"false\"\r\n                    (tilesDropped)=\"onDrop($event)\"\r\n                    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n                    (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n                    (resetGroup)=\"resetGroup.emit($event)\"\r\n                    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n                    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n                ></bt-tiles-viewer-group>\r\n            </fd-dynamic-page-content>\r\n        </fd-tab>\r\n        } }\r\n    </fd-tab-list>\r\n\r\n    <fd-dynamic-page-footer>\r\n        @if (edit) {\r\n        <div fd-bar barDesign=\"footer\">\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    [label]=\"'SaveAndClose' | bbbTranslate\"\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"onExitEditHome(appTileGroups)\"\r\n                ></fd-button-bar>\r\n            </div>\r\n        </div>\r\n        }\r\n    </fd-dynamic-page-footer>\r\n</fd-dynamic-page>\r\n\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #renderGroup\r\n    let-appTileGroup\r\n    let-stackContent=\"stackContent\"\r\n    let-edit=\"edit\"\r\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\r\n>\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileGroup\"\r\n        [edit]=\"edit\"\r\n        [rtl]=\"rtl\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"isAppTileSubGroup\"\r\n        (tilesDropped)=\"onDrop($event)\"\r\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n        (resetGroup)=\"resetGroup.emit($event)\"\r\n        (deleteGroup)=\"deleteGroup.emit($event)\"\r\n        (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    ></bt-tiles-viewer-group>\r\n</ng-template>\r\n", styles: [":host{display:block}:host ::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}:host ::ng-deep fd-tab-list[noSpy] .fd-tabs__content{overflow-y:initial}:host ::ng-deep fd-dynamic-page section{height:calc(100vh - 44px)!important}:host ::ng-deep .footer-spacer{height:0}.fd-tabs__panel:not(.is-expanded){display:none}fd-dynamic-page.stack-mode fd-dynamic-page-content{overflow-y:hidden}fd-dynamic-page-content{padding:0!important}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"], dependencies: [{ kind: "directive", type: i3.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: "component", type: i4$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i4$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6$2.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i6$2.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap"] }, { kind: "component", type: i6$2.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i6$2.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i6$2.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i6$2.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i5.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i8$2.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "id", "required", "checked", "semantic", "ariaLabel", "ariaLabelledBy"], outputs: ["checkedChange"] }, { kind: "component", type: i9$2.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i9$2.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { 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: i4.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "edit", "rtl", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { 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: TilesViewerComponent, selector: "bt-tiles-viewer", inputs: { appTileGroups: "appTileGroups", loading: "loading", edit: "edit", rtl: "rtl", defaultTab: "defaultTab", stackContent: "stackContent", deviceSize: "deviceSize", selectedAppGroupId: "selectedAppGroupId", DynamicComponents: "DynamicComponents" }, outputs: { stackContentChange: "stackContentChange", closeEditHome: "closeEditHome", save: "save", listDropped: "listDropped", tabChanged: "tabChanged", toggleGroup: "toggleGroup", resetGroup: "resetGroup", deleteGroup: "deleteGroup", hideAppTileClick: "hideAppTileClick", renameAppTileClick: "renameAppTileClick", tilesDropped: "tilesDropped" }, host: { properties: { "class.page-content": "this.pageContentClass", "attr.rtl": "this._rtl" } }, viewQueries: [{ propertyName: "tabListComponent", first: true, predicate: TabListComponent, descendants: true }, { propertyName: "contentPageRef", first: true, predicate: ["contentPage"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-dynamic-page\r\n    size=\"large\"\r\n    [ariaLabel]=\"'HomeEdit' | bbbTranslate\"\r\n    [autoResponsive]=\"true\"\r\n    [class.stack-mode]=\"stackContent\"\r\n>\r\n    @if (edit) {\r\n    <fd-dynamic-page-header [title]=\"'HomeEdit' | bbbTranslate\">\r\n        <fd-dynamic-page-global-actions>\r\n            @if (edit) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <label fd-form-label fd-toolbar-item>Stacked Content </label>\r\n                <fd-switch\r\n                    fd-toolbar-item\r\n                    [checked]=\"stackContent\"\r\n                    (checkedChange)=\"onStackContentChanged($event)\"\r\n                ></fd-switch>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\r\n                    <i class=\"sap-icon--decline\"></i>\r\n                </button>\r\n            </fd-toolbar>\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    }\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [stackContent]=\"stackContent\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"vertical\"\r\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\r\n        (selectedTabChange)=\"onSelectedTabChange($event, appTileGroups)\"\r\n        [defaultTab]=\"defaultTab\"\r\n    >\r\n        @for (appTileGroup of appTileGroups; track _trackById(i, appTileGroup); let i = $index) { @if (edit ||\r\n        appTileGroup.navigatorVisible) {\r\n        <fd-tab\r\n            [id]=\"appTileGroup.Id\"\r\n            [label]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n        >\r\n            <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                <bt-tiles-viewer-group\r\n                    [appTileGroup]=\"appTileGroup\"\r\n                    [edit]=\"edit\"\r\n                    [rtl]=\"rtl\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [stackContent]=\"stackContent\"\r\n                    [isAppTileSubGroup]=\"false\"\r\n                    (tilesDropped)=\"onDrop($event)\"\r\n                    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n                    (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n                    (resetGroup)=\"resetGroup.emit($event)\"\r\n                    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n                    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n                ></bt-tiles-viewer-group>\r\n            </fd-dynamic-page-content>\r\n        </fd-tab>\r\n        } }\r\n    </fd-tab-list>\r\n\r\n    <fd-dynamic-page-footer>\r\n        @if (edit) {\r\n        <div fd-bar barDesign=\"footer\">\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    [label]=\"'SaveAndClose' | bbbTranslate\"\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"onExitEditHome(appTileGroups)\"\r\n                ></fd-button-bar>\r\n            </div>\r\n        </div>\r\n        }\r\n    </fd-dynamic-page-footer>\r\n</fd-dynamic-page>\r\n\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #renderGroup\r\n    let-appTileGroup\r\n    let-stackContent=\"stackContent\"\r\n    let-edit=\"edit\"\r\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\r\n>\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileGroup\"\r\n        [edit]=\"edit\"\r\n        [rtl]=\"rtl\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"isAppTileSubGroup\"\r\n        (tilesDropped)=\"onDrop($event)\"\r\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n        (resetGroup)=\"resetGroup.emit($event)\"\r\n        (deleteGroup)=\"deleteGroup.emit($event)\"\r\n        (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    ></bt-tiles-viewer-group>\r\n</ng-template>\r\n", styles: [":host{display:block}:host ::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}:host ::ng-deep fd-tab-list[noSpy] .fd-tabs__content{overflow-y:initial}:host ::ng-deep fd-dynamic-page article{height:calc(100vh - 44px)!important}:host ::ng-deep .footer-spacer{height:0}.fd-tabs__panel:not(.is-expanded){display:none}fd-dynamic-page.stack-mode fd-dynamic-page-content{overflow-y:hidden}fd-dynamic-page-content{padding:0!important}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"], dependencies: [{ kind: "directive", type: i3.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: "component", type: i4$2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4$2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i4$2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6$2.DynamicPageComponent, selector: "fd-dynamic-page", inputs: ["disableSnapOnScroll", "ariaLabel", "background", "autoResponsive", "size", "offset", "expandContent"] }, { kind: "component", type: i6$2.DynamicPageHeaderComponent, selector: "fd-dynamic-page-header", inputs: ["title", "titleWrap", "subtitle", "subtitleWrap"] }, { kind: "component", type: i6$2.DynamicPageGlobalActionsComponent, selector: "fd-dynamic-page-global-actions" }, { kind: "component", type: i6$2.DynamicPageLayoutActionsComponent, selector: "fd-dynamic-page-layout-actions" }, { kind: "component", type: i6$2.DynamicPageContentComponent, selector: "fd-dynamic-page-content", inputs: ["tabLabel", "id"] }, { kind: "component", type: i6$2.DynamicPageFooterComponent, selector: "fd-dynamic-page-footer" }, { kind: "component", type: i5.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i8$2.SwitchComponent, selector: "fd-switch", inputs: ["activeText", "inactiveText", "id", "required", "checked", "semantic", "ariaLabel", "ariaLabelledBy"], outputs: ["checkedChange"] }, { kind: "component", type: i9$2.TabListComponent, selector: "fd-tab-list", inputs: ["size", "mode", "collapseOverflow", "maxVisibleTabs", "stackContent", "maxContentHeight", "collapsibleTabs", "defaultTab", "selectDefaultOnTabsChange", "focusFirstFocusableElement"], outputs: ["selectedTabChange", "selectedTabIndexChange", "visibleItemsCount", "hiddenItemsCount"] }, { kind: "component", type: i9$2.TabPanelComponent, selector: "fd-tab", inputs: ["id", "ariaLabel", "ariaLabelledBy", "title", "count", "glyph", "header", "disabled", "tabState"], outputs: ["opened", "closed"] }, { 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: i4.MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: TilesViewerGroupComponent, selector: "bt-tiles-viewer-group", inputs: ["appTileGroup", "stackContent", "edit", "rtl", "isAppTileSubGroup", "deviceSize"], outputs: ["tilesDropped", "hideAppTileClick", "renameAppTileClick", "toggleGroup", "resetGroup", "deleteGroup"] }, { kind: "pipe", type: i1.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TilesViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-tiles-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dynamic-page\r\n    size=\"large\"\r\n    [ariaLabel]=\"'HomeEdit' | bbbTranslate\"\r\n    [autoResponsive]=\"true\"\r\n    [class.stack-mode]=\"stackContent\"\r\n>\r\n    @if (edit) {\r\n    <fd-dynamic-page-header [title]=\"'HomeEdit' | bbbTranslate\">\r\n        <fd-dynamic-page-global-actions>\r\n            @if (edit) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <label fd-form-label fd-toolbar-item>Stacked Content </label>\r\n                <fd-switch\r\n                    fd-toolbar-item\r\n                    [checked]=\"stackContent\"\r\n                    (checkedChange)=\"onStackContentChanged($event)\"\r\n                ></fd-switch>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\r\n                    <i class=\"sap-icon--decline\"></i>\r\n                </button>\r\n            </fd-toolbar>\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    }\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [stackContent]=\"stackContent\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"vertical\"\r\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\r\n        (selectedTabChange)=\"onSelectedTabChange($event, appTileGroups)\"\r\n        [defaultTab]=\"defaultTab\"\r\n    >\r\n        @for (appTileGroup of appTileGroups; track _trackById(i, appTileGroup); let i = $index) { @if (edit ||\r\n        appTileGroup.navigatorVisible) {\r\n        <fd-tab\r\n            [id]=\"appTileGroup.Id\"\r\n            [label]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n        >\r\n            <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                <bt-tiles-viewer-group\r\n                    [appTileGroup]=\"appTileGroup\"\r\n                    [edit]=\"edit\"\r\n                    [rtl]=\"rtl\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [stackContent]=\"stackContent\"\r\n                    [isAppTileSubGroup]=\"false\"\r\n                    (tilesDropped)=\"onDrop($event)\"\r\n                    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n                    (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n                    (resetGroup)=\"resetGroup.emit($event)\"\r\n                    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n                    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n                ></bt-tiles-viewer-group>\r\n            </fd-dynamic-page-content>\r\n        </fd-tab>\r\n        } }\r\n    </fd-tab-list>\r\n\r\n    <fd-dynamic-page-footer>\r\n        @if (edit) {\r\n        <div fd-bar barDesign=\"footer\">\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    [label]=\"'SaveAndClose' | bbbTranslate\"\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"onExitEditHome(appTileGroups)\"\r\n                ></fd-button-bar>\r\n            </div>\r\n        </div>\r\n        }\r\n    </fd-dynamic-page-footer>\r\n</fd-dynamic-page>\r\n\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #renderGroup\r\n    let-appTileGroup\r\n    let-stackContent=\"stackContent\"\r\n    let-edit=\"edit\"\r\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\r\n>\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileGroup\"\r\n        [edit]=\"edit\"\r\n        [rtl]=\"rtl\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"isAppTileSubGroup\"\r\n        (tilesDropped)=\"onDrop($event)\"\r\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n        (resetGroup)=\"resetGroup.emit($event)\"\r\n        (deleteGroup)=\"deleteGroup.emit($event)\"\r\n        (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    ></bt-tiles-viewer-group>\r\n</ng-template>\r\n", styles: [":host{display:block}:host ::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}:host ::ng-deep fd-tab-list[noSpy] .fd-tabs__content{overflow-y:initial}:host ::ng-deep fd-dynamic-page section{height:calc(100vh - 44px)!important}:host ::ng-deep .footer-spacer{height:0}.fd-tabs__panel:not(.is-expanded){display:none}fd-dynamic-page.stack-mode fd-dynamic-page-content{overflow-y:hidden}fd-dynamic-page-content{padding:0!important}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"] }]
+            args: [{ selector: 'bt-tiles-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-dynamic-page\r\n    size=\"large\"\r\n    [ariaLabel]=\"'HomeEdit' | bbbTranslate\"\r\n    [autoResponsive]=\"true\"\r\n    [class.stack-mode]=\"stackContent\"\r\n>\r\n    @if (edit) {\r\n    <fd-dynamic-page-header [title]=\"'HomeEdit' | bbbTranslate\">\r\n        <fd-dynamic-page-global-actions>\r\n            @if (edit) {\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <label fd-form-label fd-toolbar-item>Stacked Content </label>\r\n                <fd-switch\r\n                    fd-toolbar-item\r\n                    [checked]=\"stackContent\"\r\n                    (checkedChange)=\"onStackContentChanged($event)\"\r\n                ></fd-switch>\r\n            </fd-toolbar>\r\n            }\r\n        </fd-dynamic-page-global-actions>\r\n        <fd-dynamic-page-layout-actions>\r\n            <fd-toolbar fdType=\"transparent\" [clearBorder]=\"true\">\r\n                <button fd-button fdType=\"transparent\" aria-label=\"Close\" title=\"Close\" (click)=\"onCloseEditHome()\">\r\n                    <i class=\"sap-icon--decline\"></i>\r\n                </button>\r\n            </fd-toolbar>\r\n        </fd-dynamic-page-layout-actions>\r\n    </fd-dynamic-page-header>\r\n    }\r\n    <fd-tab-list\r\n        class=\"tile-tabs\"\r\n        [size]=\"deviceSize\"\r\n        [collapseOverflow]=\"true\"\r\n        [stackContent]=\"stackContent\"\r\n        [expandOverflowText]=\"'More' | bbbTranslate\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"vertical\"\r\n        (cdkDropListDropped)=\"onDropGroup(appTileGroups, $event)\"\r\n        (selectedTabChange)=\"onSelectedTabChange($event, appTileGroups)\"\r\n        [defaultTab]=\"defaultTab\"\r\n    >\r\n        @for (appTileGroup of appTileGroups; track _trackById(i, appTileGroup); let i = $index) { @if (edit ||\r\n        appTileGroup.navigatorVisible) {\r\n        <fd-tab\r\n            [id]=\"appTileGroup.Id\"\r\n            [label]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [title]=\"appTileGroup.navigatorTitle | bbbTranslate\"\r\n            [ngClass]=\"'fd-tabs--' + deviceSize\"\r\n        >\r\n            <fd-dynamic-page-content [id]=\"appTileGroup.Id\">\r\n                <bt-tiles-viewer-group\r\n                    [appTileGroup]=\"appTileGroup\"\r\n                    [edit]=\"edit\"\r\n                    [rtl]=\"rtl\"\r\n                    [deviceSize]=\"deviceSize\"\r\n                    [stackContent]=\"stackContent\"\r\n                    [isAppTileSubGroup]=\"false\"\r\n                    (tilesDropped)=\"onDrop($event)\"\r\n                    (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n                    (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n                    (resetGroup)=\"resetGroup.emit($event)\"\r\n                    (deleteGroup)=\"deleteGroup.emit($event)\"\r\n                    (toggleGroup)=\"toggleGroup.emit($event)\"\r\n                ></bt-tiles-viewer-group>\r\n            </fd-dynamic-page-content>\r\n        </fd-tab>\r\n        } }\r\n    </fd-tab-list>\r\n\r\n    <fd-dynamic-page-footer>\r\n        @if (edit) {\r\n        <div fd-bar barDesign=\"footer\">\r\n            <div fd-bar-right>\r\n                <fd-button-bar\r\n                    [label]=\"'SaveAndClose' | bbbTranslate\"\r\n                    fdType=\"emphasized\"\r\n                    (click)=\"onExitEditHome(appTileGroups)\"\r\n                ></fd-button-bar>\r\n            </div>\r\n        </div>\r\n        }\r\n    </fd-dynamic-page-footer>\r\n</fd-dynamic-page>\r\n\r\n<ng-template #loadingTpl>\r\n    <bsu-mask></bsu-mask>\r\n</ng-template>\r\n\r\n<ng-template\r\n    #renderGroup\r\n    let-appTileGroup\r\n    let-stackContent=\"stackContent\"\r\n    let-edit=\"edit\"\r\n    let-isAppTileSubGroup=\"isAppTileSubGroup\"\r\n>\r\n    <bt-tiles-viewer-group\r\n        [appTileGroup]=\"appTileGroup\"\r\n        [edit]=\"edit\"\r\n        [rtl]=\"rtl\"\r\n        [deviceSize]=\"deviceSize\"\r\n        [stackContent]=\"stackContent\"\r\n        [isAppTileSubGroup]=\"isAppTileSubGroup\"\r\n        (tilesDropped)=\"onDrop($event)\"\r\n        (renameAppTileClick)=\"renameAppTileClick.emit($event)\"\r\n        (hideAppTileClick)=\"hideAppTileClick.emit($event)\"\r\n        (resetGroup)=\"resetGroup.emit($event)\"\r\n        (deleteGroup)=\"deleteGroup.emit($event)\"\r\n        (toggleGroup)=\"toggleGroup.emit($event)\"\r\n    ></bt-tiles-viewer-group>\r\n</ng-template>\r\n", styles: [":host{display:block}:host ::ng-deep .fd-panel__header{border:none;padding-left:0;padding-right:0}:host ::ng-deep fd-panel[edithome=false] .fd-panel__header:first-child{display:none}:host ::ng-deep .fd-panel__content{border-bottom:none;padding:1px}:host ::ng-deep fd-tab-list[noSpy] .fd-tabs__content{overflow-y:initial}:host ::ng-deep fd-dynamic-page article{height:calc(100vh - 44px)!important}:host ::ng-deep .footer-spacer{height:0}.fd-tabs__panel:not(.is-expanded){display:none}fd-dynamic-page.stack-mode fd-dynamic-page-content{overflow-y:hidden}fd-dynamic-page-content{padding:0!important}@media (max-width: 599px){bnrc-dynamic-component{margin-right:0!important;margin-left:0!important}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.SaveScrollPositionService }], propDecorators: { tabListComponent: [{
                 type: ViewChild,
                 args: [TabListComponent]
@@ -2176,6 +2176,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
         }] });
 
 class NumericTileComponent extends BaseBtTileComponent {
+    constructor() {
+        super(...arguments);
+        this.kpiStateIsColor = false;
+        this.scalseStateIsColor = false;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        switch (this.kpiState) {
+            case 'positive':
+            case 'negative':
+            case 'informative':
+            case 'critical':
+            case 'neutral':
+                break;
+            default:
+                this.kpiStateIsColor = this.kpiState !== '';
+                break;
+        }
+        switch (this.scaleState) {
+            case 'positive':
+            case 'negative':
+            case 'informative':
+            case 'critical':
+            case 'neutral':
+                break;
+            default:
+                this.scalseStateIsColor = this.scaleState !== '';
+                break;
+        }
+    }
     get launchIcon() {
         return this.settings.LaunchIcon;
     }
@@ -2195,11 +2225,11 @@ class NumericTileComponent extends BaseBtTileComponent {
         return this.settings.ScaleArrowIcon;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NumericTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: NumericTileComponent, selector: "bt-numeric-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\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>\n        <div fd-numeric-content>\n            <div fd-numeric-content-launch-icon-container>\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\n            </div>\n            <div fd-numeric-content-kpi-container>\n                <div fd-numeric-content-kpi [state]=\"kpiState\">{{ kpi }}</div>\n            </div>\n            <div fd-numeric-content-scale-container style=\"padding-top: 0.2rem\">\n                <div fd-numeric-content-scale [state]=\"scaleState\">\n                    <span\n                        fd-numeric-content-scale-arrow\n                        [glyph]=\"scaleArrowIcon\"\n                        [class]=\"scaleArrowIcon | sapFontClass\"\n                    ></span>\n                    <span fd-numeric-content-scale-text>{{ scaleText }}</span>\n                </div>\n            </div>\n        </div>\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.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: "directive", type: i1$3.NumericContentLaunchIconContainerDirective, selector: "[fd-numeric-content-launch-icon-container]" }, { kind: "directive", type: i1$3.NumericContentLaunchIconDirective, selector: "[fd-numeric-content-launch-icon]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1$3.NumericContentScaleArrowDirective, selector: "[fd-numeric-content-scale-arrow]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1$3.NumericContentScaleContainerDirective, selector: "[fd-numeric-content-scale-container]" }, { kind: "directive", type: i1$3.NumericContentScaleDirective, selector: "[fd-numeric-content-scale]", inputs: ["state", "class"] }, { kind: "directive", type: i1$3.NumericContentScaleTextDirective, selector: "[fd-numeric-content-scale-text]" }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand"] }, { kind: "pipe", type: i4.SapFontClassPipe, name: "sapFontClass" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: NumericTileComponent, selector: "bt-numeric-tile", usesInheritance: true, ngImport: i0, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\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>\n        <div fd-numeric-content>\n            <div fd-numeric-content-launch-icon-container>\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\n            </div>\n            <div fd-numeric-content-kpi-container>\n                <div fd-numeric-content-kpi [state]=\"kpiState\" [style.color]=\"kpiStateIsColor ? kpiState : null\">\n                    {{ kpi }}\n                </div>\n            </div>\n            <div fd-numeric-content-scale-container style=\"padding-top: 0.2rem\">\n                <div\n                    fd-numeric-content-scale\n                    [state]=\"scaleState\"\n                    [style.color]=\"scalseStateIsColor ? scaleState : null\"\n                >\n                    <span\n                        fd-numeric-content-scale-arrow\n                        [glyph]=\"scaleArrowIcon\"\n                        [class]=\"scaleArrowIcon | sapFontClass\"\n                        [style.color]=\"scalseStateIsColor ? scaleState : null\"\n                    ></span>\n                    <span fd-numeric-content-scale-text [style.color]=\"scalseStateIsColor ? scaleState : null\">{{\n                        scaleText\n                    }}</span>\n                </div>\n            </div>\n        </div>\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.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: "directive", type: i1$3.NumericContentLaunchIconContainerDirective, selector: "[fd-numeric-content-launch-icon-container]" }, { kind: "directive", type: i1$3.NumericContentLaunchIconDirective, selector: "[fd-numeric-content-launch-icon]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1$3.NumericContentScaleArrowDirective, selector: "[fd-numeric-content-scale-arrow]", inputs: ["class", "glyph", "glyphFont"] }, { kind: "directive", type: i1$3.NumericContentScaleContainerDirective, selector: "[fd-numeric-content-scale-container]" }, { kind: "directive", type: i1$3.NumericContentScaleDirective, selector: "[fd-numeric-content-scale]", inputs: ["state", "class"] }, { kind: "directive", type: i1$3.NumericContentScaleTextDirective, selector: "[fd-numeric-content-scale-text]" }, { kind: "component", type: TileComponent, selector: "bt-tile", inputs: ["type", "footerTemplate", "footer", "disableClick", "title", "icon", "subtitle", "isDouble", "edit", "backColor", "dynamicCommand"] }, { kind: "pipe", type: i4.SapFontClassPipe, name: "sapFontClass" }, { kind: "pipe", type: TilePropPipe, name: "tileProp" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: NumericTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bt-numeric-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\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>\n        <div fd-numeric-content>\n            <div fd-numeric-content-launch-icon-container>\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\n            </div>\n            <div fd-numeric-content-kpi-container>\n                <div fd-numeric-content-kpi [state]=\"kpiState\">{{ kpi }}</div>\n            </div>\n            <div fd-numeric-content-scale-container style=\"padding-top: 0.2rem\">\n                <div fd-numeric-content-scale [state]=\"scaleState\">\n                    <span\n                        fd-numeric-content-scale-arrow\n                        [glyph]=\"scaleArrowIcon\"\n                        [class]=\"scaleArrowIcon | sapFontClass\"\n                    ></span>\n                    <span fd-numeric-content-scale-text>{{ scaleText }}</span>\n                </div>\n            </div>\n        </div>\n    </div>\n</bt-tile>\n" }]
+            args: [{ selector: 'bt-numeric-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<bt-tile\n    [data]=\"data\"\n    [type]=\"'launch'\"\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>\n        <div fd-numeric-content>\n            <div fd-numeric-content-launch-icon-container>\n                <i fd-numeric-content-launch-icon [glyph]=\"launchIcon\" [class]=\"launchIcon | sapFontClass\"></i>\n            </div>\n            <div fd-numeric-content-kpi-container>\n                <div fd-numeric-content-kpi [state]=\"kpiState\" [style.color]=\"kpiStateIsColor ? kpiState : null\">\n                    {{ kpi }}\n                </div>\n            </div>\n            <div fd-numeric-content-scale-container style=\"padding-top: 0.2rem\">\n                <div\n                    fd-numeric-content-scale\n                    [state]=\"scaleState\"\n                    [style.color]=\"scalseStateIsColor ? scaleState : null\"\n                >\n                    <span\n                        fd-numeric-content-scale-arrow\n                        [glyph]=\"scaleArrowIcon\"\n                        [class]=\"scaleArrowIcon | sapFontClass\"\n                        [style.color]=\"scalseStateIsColor ? scaleState : null\"\n                    ></span>\n                    <span fd-numeric-content-scale-text [style.color]=\"scalseStateIsColor ? scaleState : null\">{{\n                        scaleText\n                    }}</span>\n                </div>\n            </div>\n        </div>\n    </div>\n</bt-tile>\n" }]
         }] });
 
 class LogoTileComponent extends BaseBtTileComponent {