@skyux/tiles 7.0.0-beta.13 → 7.0.0-beta.16

package/fesm2015/skyux-tiles.mjs

@@ -1,15 +1,16 @@
-import * as i2$1 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Component, EventEmitter, Injector, Injectable, Output, ElementRef, Optional, Input, ViewChild, ViewContainerRef, ViewChildren } from '@angular/core';
+import { NgModule, Component, EventEmitter, Injectable, Optional, Output, ElementRef, Input, ViewChild, ViewChildren } from '@angular/core';
 import * as i2 from '@skyux/core';
-import { SkyMediaBreakpoints, SkyIdModule, SkyTrimModule } from '@skyux/core';
+import { SkyMediaBreakpoints, SkyDynamicComponentLocation, SkyIdModule, SkyTrimModule } from '@skyux/core';
 import * as i3$1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import * as i3 from '@skyux/indicators';
 import { SkyChevronModule, SkyIconModule } from '@skyux/indicators';
 import * as i5 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
+import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import { skyAnimationSlide } from '@skyux/animations';
 import { Subject } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
@@ -99,13 +100,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             args: [{ selector: 'sky-tile-title', template: "<h2\n  class=\"sky-tile-title\"\n  [skyThemeClass]=\"{\n    'sky-font-heading-2': 'modern',\n    'sky-section-heading': 'default'\n  }\"\n>\n  <span skyTrim><ng-content></ng-content></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\"></ng-content\n  ></span>\n</h2>\n", styles: [".sky-tile-title{margin:0;padding:10px 15px}:host-context(.sky-theme-modern) .sky-tile-title{margin:0 30px 0 0;padding:0}.sky-theme-modern .sky-tile-title{margin:0 30px 0 0;padding:0}\n"] }]
         }] });
 
+var _SkyTileDashboardService_instances, _SkyTileDashboardService_columns, _SkyTileDashboardService_config, _SkyTileDashboardService_dragulaService, _SkyTileDashboardService_dynamicComponentService, _SkyTileDashboardService_mediaSubscription, _SkyTileDashboardService_mediaQuery, _SkyTileDashboardService_singleColumn, _SkyTileDashboardService_settingsKey, _SkyTileDashboardService_tileComponents, _SkyTileDashboardService_uiConfigService, _SkyTileDashboardService_getTileId, _SkyTileDashboardService_getTileOrRemoveFromLayout, _SkyTileDashboardService_checkReadyAndLoadTiles, _SkyTileDashboardService_loadTiles, _SkyTileDashboardService_loadTileIntoColumn, _SkyTileDashboardService_moveTilesToSingleColumn, _SkyTileDashboardService_moveTilesToMultiColumn, _SkyTileDashboardService_moveTilesToColumn, _SkyTileDashboardService_getConfigForUIState, _SkyTileDashboardService_getSingleColumnLayoutForUIState, _SkyTileDashboardService_getMultiColumnLayoutForUIState, _SkyTileDashboardService_getTilesInEl, _SkyTileDashboardService_initMediaQueries, _SkyTileDashboardService_initDragula, _SkyTileDashboardService_getColumnEl, _SkyTileDashboardService_findTile, _SkyTileDashboardService_findTileColumn, _SkyTileDashboardService_initToDefaults, _SkyTileDashboardService_setUserConfig, _SkyTileDashboardService_checkForNewTiles;
 const ATTR_TILE_ID = '_sky-tile-dashboard-tile-id';
 let bagIdIndex = 0;
 class SkyTileDashboardService {
-    constructor(dragulaService, mediaQuery, uiConfigService) {
-        this.dragulaService = dragulaService;
-        this.mediaQuery = mediaQuery;
-        this.uiConfigService = uiConfigService;
+    // TODO: remove @optional tag in a future breaking change
+    constructor(dragulaService, mediaQuery, uiConfigService, dynamicComponentService) {
+        _SkyTileDashboardService_instances.add(this);
         /**
          * @internal
          */
@@ -114,8 +115,25 @@ class SkyTileDashboardService {
          * Fires when the tile dashboard's initialization is complete.
          */
         this.dashboardInitialized = new EventEmitter();
-        this.bagId = 'sky-tile-dashboard-bag-' + ++bagIdIndex;
-        this.initDragula();
+        _SkyTileDashboardService_columns.set(this, void 0);
+        _SkyTileDashboardService_config.set(this, void 0);
+        _SkyTileDashboardService_dragulaService.set(this, void 0);
+        _SkyTileDashboardService_dynamicComponentService.set(this, void 0);
+        _SkyTileDashboardService_mediaSubscription.set(this, void 0);
+        _SkyTileDashboardService_mediaQuery.set(this, void 0);
+        _SkyTileDashboardService_singleColumn.set(this, void 0);
+        _SkyTileDashboardService_settingsKey.set(this, void 0);
+        _SkyTileDashboardService_tileComponents.set(this, void 0);
+        _SkyTileDashboardService_uiConfigService.set(this, void 0);
+        if (!dynamicComponentService) {
+            console.warn('The SkyTileDashboardService was created without a reference to the SkyDynamicComponentService. The service will be unable to create tiles from the dashboard configuration. Constructing the SkyTileDashboardService without a SkyDynamicComponentService will be removed in a future breaking change.');
+        }
+        __classPrivateFieldSet(this, _SkyTileDashboardService_dragulaService, dragulaService, "f");
+        __classPrivateFieldSet(this, _SkyTileDashboardService_dynamicComponentService, dynamicComponentService, "f");
+        __classPrivateFieldSet(this, _SkyTileDashboardService_mediaQuery, mediaQuery, "f");
+        __classPrivateFieldSet(this, _SkyTileDashboardService_uiConfigService, uiConfigService, "f");
+        this.bagId = `sky-tile-dashboard-bag-${++bagIdIndex}`;
+        __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_initDragula).call(this);
     }
     /**
      * @internal
@@ -124,31 +142,31 @@ class SkyTileDashboardService {
         if (settingsKey) {
             // Clone this so changes to the config object outside of this class don't modify
             // the config used inside and vice versa.
-            this.defaultConfig = this.config = Object.assign({}, config);
-            this.settingsKey = settingsKey;
-            this.uiConfigService
+            __classPrivateFieldSet(this, _SkyTileDashboardService_config, Object.assign({}, config), "f");
+            __classPrivateFieldSet(this, _SkyTileDashboardService_settingsKey, settingsKey, "f");
+            __classPrivateFieldGet(this, _SkyTileDashboardService_uiConfigService, "f")
                 .getConfig(settingsKey, config)
                 .pipe(take(1))
                 .subscribe((value) => {
-                if (value.persisted) {
-                    this.config.layout = value.layout;
-                    this.checkForNewTiles(value.tileIds);
-                    this.configChange.emit(this.config);
-                    this.columns = columns;
-                    this.singleColumn = singleColumn;
-                    this.checkReadyAndLoadTiles();
+                if (__classPrivateFieldGet(this, _SkyTileDashboardService_config, "f") && value.persisted) {
+                    __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").layout = value.layout;
+                    __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_checkForNewTiles).call(this, value.tileIds);
+                    this.configChange.emit(__classPrivateFieldGet(this, _SkyTileDashboardService_config, "f"));
+                    __classPrivateFieldSet(this, _SkyTileDashboardService_columns, columns, "f");
+                    __classPrivateFieldSet(this, _SkyTileDashboardService_singleColumn, singleColumn, "f");
+                    __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_checkReadyAndLoadTiles).call(this);
                 }
                 else {
                     // Bad data, or config is the default config.
-                    this.initToDefaults(config, columns, singleColumn);
+                    __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_initToDefaults).call(this, config, columns, singleColumn);
                 }
             }, (error) => {
                 // Config setting key doesn't exist or other config service error
-                this.initToDefaults(config, columns, singleColumn);
+                __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_initToDefaults).call(this, config, columns, singleColumn);
             });
         }
         else {
-            this.initToDefaults(config, columns, singleColumn);
+            __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_initToDefaults).call(this, config, columns, singleColumn);
         }
     }
     /**
@@ -157,8 +175,8 @@ class SkyTileDashboardService {
      * @param component Specifies the tile component to add.
      */
     addTileComponent(tile, component) {
-        this.tileComponents = this.tileComponents || [];
-        this.tileComponents.push(component);
+        __classPrivateFieldSet(this, _SkyTileDashboardService_tileComponents, __classPrivateFieldGet(this, _SkyTileDashboardService_tileComponents, "f") || [], "f");
+        __classPrivateFieldGet(this, _SkyTileDashboardService_tileComponents, "f").push(component);
         component.location.nativeElement.setAttribute(ATTR_TILE_ID, tile.id);
     }
     /**
@@ -166,11 +184,11 @@ class SkyTileDashboardService {
      * @param tile Specifies the tile component to check.
      */
     tileIsCollapsed(tile) {
-        const tileConfig = this.findTile(this.getTileId(tile));
+        const tileConfig = __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_findTile).call(this, __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_getTileId).call(this, tile));
         if (tileConfig) {
             return tileConfig.isCollapsed;
         }
-        return undefined;
+        return false;
     }
     /**
      * Sets the collapsed state of all tiles.
@@ -178,20 +196,20 @@ class SkyTileDashboardService {
      */
     setAllTilesCollapsed(isCollapsed) {
         /*istanbul ignore else */
-        if (this.config && this.config.layout.multiColumn) {
-            for (const column of this.config.layout.multiColumn) {
+        if (__classPrivateFieldGet(this, _SkyTileDashboardService_config, "f") && __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").layout.multiColumn) {
+            for (const column of __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").layout.multiColumn) {
                 for (const tile of column.tiles) {
                     tile.isCollapsed = isCollapsed;
                 }
             }
-            for (const tile of this.config.layout.singleColumn.tiles) {
+            for (const tile of __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").layout.singleColumn.tiles) {
                 tile.isCollapsed = isCollapsed;
             }
         }
-        if (this.settingsKey) {
-            this.setUserConfig(this.config);
+        if (__classPrivateFieldGet(this, _SkyTileDashboardService_settingsKey, "f")) {
+            __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_setUserConfig).call(this, __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f"));
         }
-        this.configChange.emit(this.config);
+        this.configChange.emit(__classPrivateFieldGet(this, _SkyTileDashboardService_config, "f"));
     }
     /**
      * Sets the collapsed state of a specified tile.
@@ -199,21 +217,21 @@ class SkyTileDashboardService {
      * @param isCollapsed Indicates whether the tile is collapsed.
      */
     setTileCollapsed(tile, isCollapsed) {
-        const tileConfig = this.findTile(this.getTileId(tile));
+        const tileConfig = __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_findTile).call(this, __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_getTileId).call(this, tile));
         if (tileConfig) {
             tileConfig.isCollapsed = isCollapsed;
-            if (this.settingsKey) {
-                this.setUserConfig(this.config);
+            if (__classPrivateFieldGet(this, _SkyTileDashboardService_settingsKey, "f")) {
+                __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_setUserConfig).call(this, __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f"));
             }
-            this.configChange.emit(this.config);
+            this.configChange.emit(__classPrivateFieldGet(this, _SkyTileDashboardService_config, "f"));
         }
     }
     /**
      * @internal
      */
     getTileComponentType(layoutTile) {
-        if (layoutTile) {
-            for (const tile of this.config.tiles) {
+        if (layoutTile && __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f")) {
+            for (const tile of __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").tiles) {
                 if (tile.id === layoutTile.id) {
                     return tile.componentType;
                 }
@@ -226,12 +244,12 @@ class SkyTileDashboardService {
      */
     changeColumnMode(isSingleColumn) {
         /*istanbul ignore else */
-        if (this.config) {
+        if (__classPrivateFieldGet(this, _SkyTileDashboardService_config, "f")) {
             if (isSingleColumn) {
-                this.moveTilesToSingleColumn();
+                __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_moveTilesToSingleColumn).call(this);
             }
             else {
-                this.moveTilesToMultiColumn();
+                __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_moveTilesToMultiColumn).call(this);
             }
         }
     }
@@ -239,10 +257,12 @@ class SkyTileDashboardService {
      * @internal
      */
     getTileComponent(tileId) {
-        for (const tileComponent of this.tileComponents) {
-            if (tileComponent.location.nativeElement.getAttribute(ATTR_TILE_ID) ===
-                tileId) {
-                return tileComponent;
+        if (__classPrivateFieldGet(this, _SkyTileDashboardService_tileComponents, "f")) {
+            for (const tileComponent of __classPrivateFieldGet(this, _SkyTileDashboardService_tileComponents, "f")) {
+                if (tileComponent.location.nativeElement.getAttribute(ATTR_TILE_ID) ===
+                    tileId) {
+                    return tileComponent;
+                }
             }
         }
         /*istanbul ignore next */
@@ -253,305 +273,318 @@ class SkyTileDashboardService {
      */
     destroy() {
         /*istanbul ignore else */
-        if (this.mediaSubscription) {
-            this.mediaSubscription.unsubscribe();
+        if (__classPrivateFieldGet(this, _SkyTileDashboardService_mediaSubscription, "f")) {
+            __classPrivateFieldGet(this, _SkyTileDashboardService_mediaSubscription, "f").unsubscribe();
         }
     }
     /**
      * @internal
      */
     moveTileOnKeyDown(tileCmp, direction, tileDescription) {
-        const isSingleColumnMode = this.mediaQuery.current === SkyMediaBreakpoints.xs ||
-            this.mediaQuery.current === SkyMediaBreakpoints.sm;
-        const tileId = this.getTileId(tileCmp);
-        const tile = this.findTile(tileId);
-        let column;
-        let colIndex;
-        if (isSingleColumnMode) {
-            column = this.config.layout.singleColumn;
-        }
-        else {
-            column = this.findTileColumn(tileId);
-            colIndex = this.config.layout.multiColumn.findIndex((value) => value === column);
-        }
-        if ((direction === 'left' || direction === 'right') &&
-            !isSingleColumnMode) {
-            const operator = direction === 'left' ? -1 : 1;
-            const newColumn = this.config.layout.multiColumn[colIndex + operator];
-            if (newColumn) {
-                // Move the tile to the end of the new column
-                newColumn.tiles.push(tile);
-                column.tiles = column.tiles.filter((item) => item !== tile);
-                this.moveTilesToColumn(this.columns.toArray()[colIndex + operator], [
-                    tile,
-                ]);
-                // Report the change in configuration
-                const reportConfig = this.config;
-                reportConfig.movedTile = {
-                    tileDescription: tileDescription || /* istanbul ignore next */ tile.id,
-                    column: colIndex + operator + 1,
-                    position: newColumn.tiles.length,
-                };
-                this.configChange.emit(reportConfig);
+        var _a, _b, _c;
+        if (__classPrivateFieldGet(this, _SkyTileDashboardService_config, "f")) {
+            const isSingleColumnMode = __classPrivateFieldGet(this, _SkyTileDashboardService_mediaQuery, "f").current === SkyMediaBreakpoints.xs ||
+                __classPrivateFieldGet(this, _SkyTileDashboardService_mediaQuery, "f").current === SkyMediaBreakpoints.sm;
+            const tileId = __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_getTileId).call(this, tileCmp);
+            const tile = __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_findTile).call(this, tileId);
+            let column;
+            let colIndex = 0;
+            if (isSingleColumnMode) {
+                column = __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").layout.singleColumn;
             }
-        }
-        else {
-            const operator = direction === 'up' ? -1 : 1;
-            const curIndex = column.tiles.findIndex((value) => value.id === tile.id);
-            const tileComponentInstance = this.getTileComponent(tileId);
-            if (tileComponentInstance && column.tiles[curIndex + operator]) {
-                const temp = column.tiles[curIndex + operator];
-                column.tiles[curIndex + operator] = tile;
-                column.tiles[curIndex] = temp;
-                // Get the column element
-                let columnEl;
-                if (isSingleColumnMode) {
-                    columnEl = this.getColumnEl(this.singleColumn);
-                }
-                else {
-                    columnEl = this.getColumnEl(this.columns.toArray()[colIndex]);
-                }
-                // Move the tile element in the document
-                if (curIndex + operator === column.tiles.length - 1) {
-                    columnEl.appendChild(tileComponentInstance.location.nativeElement);
+            else {
+                column = __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_findTileColumn).call(this, tileId);
+                colIndex = __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").layout.multiColumn.findIndex((value) => value === column);
+            }
+            if (column && tile && tileId) {
+                if ((direction === 'left' || direction === 'right') &&
+                    !isSingleColumnMode) {
+                    const operator = direction === 'left' ? -1 : 1;
+                    const newColumn = __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").layout.multiColumn[colIndex + operator];
+                    if (newColumn) {
+                        // Move the tile to the end of the new column
+                        newColumn.tiles.push(tile);
+                        column.tiles = column.tiles.filter((item) => item !== tile);
+                        __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_moveTilesToColumn).call(this, (_a = __classPrivateFieldGet(this, _SkyTileDashboardService_columns, "f")) === null || _a === void 0 ? void 0 : _a.toArray()[colIndex + operator], [tile]);
+                        // Report the change in configuration
+                        const reportConfig = __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f");
+                        reportConfig.movedTile = {
+                            tileDescription: tileDescription || /* istanbul ignore next */ tile.id,
+                            column: colIndex + operator + 1,
+                            position: newColumn.tiles.length,
+                        };
+                        this.configChange.emit(reportConfig);
+                    }
                 }
                 else {
-                    columnEl.insertBefore(tileComponentInstance.location.nativeElement, this.getTileComponent(column.tiles[curIndex + operator + 1].id)
-                        .location.nativeElement);
+                    const operator = direction === 'up' ? -1 : 1;
+                    const curIndex = column.tiles.findIndex((value) => value.id === tile.id);
+                    const tileComponentInstance = this.getTileComponent(tileId);
+                    if (tileComponentInstance && column.tiles[curIndex + operator]) {
+                        const temp = column.tiles[curIndex + operator];
+                        column.tiles[curIndex + operator] = tile;
+                        column.tiles[curIndex] = temp;
+                        // Get the column element
+                        let columnEl;
+                        if (isSingleColumnMode) {
+                            columnEl = __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_getColumnEl).call(this, __classPrivateFieldGet(this, _SkyTileDashboardService_singleColumn, "f"));
+                        }
+                        else {
+                            columnEl = __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_getColumnEl).call(this, (_b = __classPrivateFieldGet(this, _SkyTileDashboardService_columns, "f")) === null || _b === void 0 ? void 0 : _b.toArray()[colIndex]);
+                        }
+                        // Move the tile element in the document
+                        if (curIndex + operator === column.tiles.length - 1) {
+                            columnEl === null || columnEl === void 0 ? void 0 : columnEl.appendChild(tileComponentInstance.location.nativeElement);
+                        }
+                        else {
+                            columnEl === null || columnEl === void 0 ? void 0 : columnEl.insertBefore(tileComponentInstance.location.nativeElement, (_c = this.getTileComponent(column.tiles[curIndex + operator + 1].id)) === null || _c === void 0 ? void 0 : _c.location.nativeElement);
+                        }
+                        // Report the change in configuration
+                        const reportConfig = __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f");
+                        reportConfig.movedTile = {
+                            tileDescription: tileDescription || /* istanbul ignore next */ tile.id,
+                            column: isSingleColumnMode ? 1 : colIndex + 1,
+                            position: curIndex + operator + 1,
+                        };
+                        this.configChange.emit(reportConfig);
+                    }
                 }
-                // Report the change in configuration
-                const reportConfig = this.config;
-                reportConfig.movedTile = {
-                    tileDescription: tileDescription || /* istanbul ignore next */ tile.id,
-                    column: isSingleColumnMode ? undefined : colIndex + 1,
-                    position: curIndex + operator + 1,
-                };
-                this.configChange.emit(reportConfig);
             }
         }
     }
-    getTileId(tile) {
-        if (tile) {
-            let el = tile.elementRef.nativeElement;
-            let tileId;
-            while (el) {
-                tileId = el.getAttribute(ATTR_TILE_ID);
-                if (tileId) {
-                    return tileId;
-                }
-                el = el.parentElement;
+}
+_SkyTileDashboardService_columns = new WeakMap(), _SkyTileDashboardService_config = new WeakMap(), _SkyTileDashboardService_dragulaService = new WeakMap(), _SkyTileDashboardService_dynamicComponentService = new WeakMap(), _SkyTileDashboardService_mediaSubscription = new WeakMap(), _SkyTileDashboardService_mediaQuery = new WeakMap(), _SkyTileDashboardService_singleColumn = new WeakMap(), _SkyTileDashboardService_settingsKey = new WeakMap(), _SkyTileDashboardService_tileComponents = new WeakMap(), _SkyTileDashboardService_uiConfigService = new WeakMap(), _SkyTileDashboardService_instances = new WeakSet(), _SkyTileDashboardService_getTileId = function _SkyTileDashboardService_getTileId(tile) {
+    if (tile) {
+        let el = tile.elementRef.nativeElement;
+        let tileId;
+        while (el) {
+            tileId = el.getAttribute(ATTR_TILE_ID);
+            if (tileId) {
+                return tileId;
             }
+            el = el.parentElement;
         }
-        return undefined;
     }
-    getTileOrRemoveFromLayout(layoutTile) {
-        /*istanbul ignore else */
-        if (layoutTile) {
-            for (const tile of this.config.tiles) {
-                if (tile.id === layoutTile.id) {
-                    return tile;
-                }
-            }
-            // If the layout tile was not found in the list of tiles, it was removed since last the user updated settings
-            /*istanbul ignore else */
-            if (this.config.layout.singleColumn) {
-                this.config.layout.singleColumn.tiles =
-                    this.config.layout.singleColumn.tiles.filter((elem) => elem.id !== layoutTile.id);
-            }
-            /*istanbul ignore else */
-            if (this.config.layout.multiColumn) {
-                this.config.layout.multiColumn.forEach((elem) => {
-                    elem.tiles = elem.tiles.filter((res) => res.id !== layoutTile.id);
-                });
+    return undefined;
+}, _SkyTileDashboardService_getTileOrRemoveFromLayout = function _SkyTileDashboardService_getTileOrRemoveFromLayout(layoutTile) {
+    var _a, _b;
+    /*istanbul ignore else */
+    if (layoutTile && __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f")) {
+        for (const tile of __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").tiles) {
+            if (tile.id === layoutTile.id) {
+                return tile;
             }
         }
-        /*istanbul ignore next */
-        return undefined;
+        // If the layout tile was not found in the list of tiles, it was removed since last the user updated settings
+        /*istanbul ignore else */
+        if ((_a = __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f")) === null || _a === void 0 ? void 0 : _a.layout.singleColumn) {
+            __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").layout.singleColumn.tiles =
+                __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").layout.singleColumn.tiles.filter((elem) => elem.id !== layoutTile.id);
+        }
+        /*istanbul ignore else */
+        if ((_b = __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f")) === null || _b === void 0 ? void 0 : _b.layout.multiColumn) {
+            __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").layout.multiColumn.forEach((elem) => {
+                elem.tiles = elem.tiles.filter((res) => res.id !== layoutTile.id);
+            });
+        }
+    }
+    /*istanbul ignore next */
+    return undefined;
+}, _SkyTileDashboardService_checkReadyAndLoadTiles = function _SkyTileDashboardService_checkReadyAndLoadTiles() {
+    if (__classPrivateFieldGet(this, _SkyTileDashboardService_config, "f") && __classPrivateFieldGet(this, _SkyTileDashboardService_columns, "f")) {
+        __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_loadTiles).call(this, __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f"));
+        __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_initMediaQueries).call(this);
+        this.dashboardInitialized.emit();
     }
-    checkReadyAndLoadTiles() {
-        if (this.config && this.columns) {
-            this.loadTiles();
-            this.initMediaQueries();
-            this.dashboardInitialized.emit();
+}, _SkyTileDashboardService_loadTiles = function _SkyTileDashboardService_loadTiles(config) {
+    var _a;
+    const layout = config.layout;
+    if (__classPrivateFieldGet(this, _SkyTileDashboardService_mediaQuery, "f").current === SkyMediaBreakpoints.xs ||
+        __classPrivateFieldGet(this, _SkyTileDashboardService_mediaQuery, "f").current === SkyMediaBreakpoints.sm) {
+        for (const tile of layout.singleColumn.tiles) {
+            __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_loadTileIntoColumn).call(this, __classPrivateFieldGet(this, _SkyTileDashboardService_singleColumn, "f"), tile);
         }
     }
-    loadTiles() {
-        const layout = this.config.layout;
-        if (this.mediaQuery.current === SkyMediaBreakpoints.xs ||
-            this.mediaQuery.current === SkyMediaBreakpoints.sm) {
-            for (const tile of layout.singleColumn.tiles) {
-                this.loadTileIntoColumn(this.singleColumn, tile);
-            }
+    else {
+        let columns = [];
+        /*istanbul ignore else */
+        if (__classPrivateFieldGet(this, _SkyTileDashboardService_columns, "f")) {
+            columns = (_a = __classPrivateFieldGet(this, _SkyTileDashboardService_columns, "f")) === null || _a === void 0 ? void 0 : _a.toArray();
         }
-        else {
-            const columns = this.columns.toArray();
-            for (let i = 0, n = layout.multiColumn.length; i < n; i++) {
-                const column = columns[i];
-                for (const tile of layout.multiColumn[i].tiles) {
-                    this.loadTileIntoColumn(column, tile);
-                }
+        for (let i = 0, n = layout.multiColumn.length; i < n; i++) {
+            const column = columns[i];
+            for (const tile of layout.multiColumn[i].tiles) {
+                __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_loadTileIntoColumn).call(this, column, tile);
             }
         }
     }
-    loadTileIntoColumn(column, layoutTile) {
-        const tile = this.getTileOrRemoveFromLayout(layoutTile);
+}, _SkyTileDashboardService_loadTileIntoColumn = function _SkyTileDashboardService_loadTileIntoColumn(column, layoutTile) {
+    var _a;
+    if (column) {
+        const tile = __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_getTileOrRemoveFromLayout).call(this, layoutTile);
         /*istanbul ignore else */
-        if (tile) {
+        if (tile && __classPrivateFieldGet(this, _SkyTileDashboardService_dynamicComponentService, "f")) {
             const componentType = tile.componentType;
             const providers = tile.providers /* istanbul ignore next */ || [];
-            const injector = Injector.create({
-                providers,
-                parent: column.injector,
+            const componentRef = __classPrivateFieldGet(this, _SkyTileDashboardService_dynamicComponentService, "f").createComponent(componentType, {
+                location: SkyDynamicComponentLocation.ElementBottom,
+                providers: providers,
+                referenceEl: (_a = column.content) === null || _a === void 0 ? void 0 : _a.nativeElement,
+                parentInjector: column.injector,
             });
-            const factory = column.resolver.resolveComponentFactory(componentType);
-            const componentRef = column.content.createComponent(factory, undefined, injector);
             this.addTileComponent(layoutTile, componentRef);
             // Make sure the component is marked for changes in case the parent component uses
             // the OnPush change detection strategy.
             componentRef.changeDetectorRef.markForCheck();
         }
     }
-    moveTilesToSingleColumn() {
-        this.moveTilesToColumn(this.singleColumn, this.config.layout.singleColumn.tiles);
+}, _SkyTileDashboardService_moveTilesToSingleColumn = function _SkyTileDashboardService_moveTilesToSingleColumn() {
+    var _a;
+    __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_moveTilesToColumn).call(this, __classPrivateFieldGet(this, _SkyTileDashboardService_singleColumn, "f"), (_a = __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f")) === null || _a === void 0 ? void 0 : _a.layout.singleColumn.tiles);
+}, _SkyTileDashboardService_moveTilesToMultiColumn = function _SkyTileDashboardService_moveTilesToMultiColumn() {
+    var _a;
+    let layoutColumns = [];
+    /*istanbul ignore else */
+    if (__classPrivateFieldGet(this, _SkyTileDashboardService_config, "f")) {
+        layoutColumns = __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").layout.multiColumn;
     }
-    moveTilesToMultiColumn() {
-        const layoutColumns = this.config.layout.multiColumn;
-        const columns = this.columns.toArray();
-        for (let i = 0, n = layoutColumns.length; i < n; i++) {
-            this.moveTilesToColumn(columns[i], layoutColumns[i].tiles);
-        }
+    let columns = [];
+    /*istanbul ignore else */
+    if (__classPrivateFieldGet(this, _SkyTileDashboardService_columns, "f")) {
+        columns = (_a = __classPrivateFieldGet(this, _SkyTileDashboardService_columns, "f")) === null || _a === void 0 ? void 0 : _a.toArray();
+    }
+    for (let i = 0, n = layoutColumns.length; i < n; i++) {
+        __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_moveTilesToColumn).call(this, columns[i], layoutColumns[i].tiles);
     }
-    moveTilesToColumn(column, layoutTiles) {
-        const columnEl = this.getColumnEl(column);
+}, _SkyTileDashboardService_moveTilesToColumn = function _SkyTileDashboardService_moveTilesToColumn(column, layoutTiles) {
+    if (column && layoutTiles) {
+        const columnEl = __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_getColumnEl).call(this, column);
         for (const layoutTile of layoutTiles) {
             const tileComponentInstance = this.getTileComponent(layoutTile.id);
             /*istanbul ignore else */
             if (tileComponentInstance) {
-                columnEl.appendChild(tileComponentInstance.location.nativeElement);
+                columnEl === null || columnEl === void 0 ? void 0 : columnEl.appendChild(tileComponentInstance.location.nativeElement);
             }
         }
     }
-    getConfigForUIState() {
-        /*istanbul ignore else */
-        if (this.config) {
-            this.config = {
-                tiles: this.config.tiles,
-                layout: {
-                    singleColumn: this.getSingleColumnLayoutForUIState(),
-                    multiColumn: this.getMultiColumnLayoutForUIState(),
-                },
-            };
-        }
-        return this.config;
-    }
-    getSingleColumnLayoutForUIState() {
-        if (this.mediaQuery.current === SkyMediaBreakpoints.xs ||
-            this.mediaQuery.current === SkyMediaBreakpoints.sm) {
-            return {
-                tiles: this.getTilesInEl(this.getColumnEl(this.singleColumn)),
-            };
-        }
-        return this.config.layout.singleColumn;
+}, _SkyTileDashboardService_getConfigForUIState = function _SkyTileDashboardService_getConfigForUIState() {
+    /*istanbul ignore else */
+    if (__classPrivateFieldGet(this, _SkyTileDashboardService_config, "f")) {
+        __classPrivateFieldSet(this, _SkyTileDashboardService_config, {
+            tiles: __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").tiles,
+            layout: {
+                singleColumn: __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_getSingleColumnLayoutForUIState).call(this, __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f")),
+                multiColumn: __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_getMultiColumnLayoutForUIState).call(this, __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f")),
+            },
+        }, "f");
     }
-    getMultiColumnLayoutForUIState() {
-        if (!(this.mediaQuery.current === SkyMediaBreakpoints.xs ||
-            this.mediaQuery.current === SkyMediaBreakpoints.sm)) {
-            const layoutColumns = [];
-            const columns = this.columns.toArray();
-            for (const column of columns) {
-                if (column !== this.singleColumn) {
-                    const layoutColumn = {
-                        tiles: this.getTilesInEl(this.getColumnEl(column)),
-                    };
-                    layoutColumns.push(layoutColumn);
-                }
-            }
-            return layoutColumns;
-        }
-        return this.config.layout.multiColumn;
+    return __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f");
+}, _SkyTileDashboardService_getSingleColumnLayoutForUIState = function _SkyTileDashboardService_getSingleColumnLayoutForUIState(config) {
+    if (__classPrivateFieldGet(this, _SkyTileDashboardService_mediaQuery, "f").current === SkyMediaBreakpoints.xs ||
+        __classPrivateFieldGet(this, _SkyTileDashboardService_mediaQuery, "f").current === SkyMediaBreakpoints.sm) {
+        return {
+            tiles: __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_getTilesInEl).call(this, __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_getColumnEl).call(this, __classPrivateFieldGet(this, _SkyTileDashboardService_singleColumn, "f"))),
+        };
     }
-    getTilesInEl(el) {
-        const tileEls = el.querySelectorAll('[' + ATTR_TILE_ID + ']');
-        const layoutTiles = [];
+    return config.layout.singleColumn;
+}, _SkyTileDashboardService_getMultiColumnLayoutForUIState = function _SkyTileDashboardService_getMultiColumnLayoutForUIState(config) {
+    var _a;
+    if (!(__classPrivateFieldGet(this, _SkyTileDashboardService_mediaQuery, "f").current === SkyMediaBreakpoints.xs ||
+        __classPrivateFieldGet(this, _SkyTileDashboardService_mediaQuery, "f").current === SkyMediaBreakpoints.sm)) {
+        const layoutColumns = [];
+        let columns = [];
         /*istanbul ignore else */
-        if (tileEls) {
-            for (let i = 0, n = tileEls.length; i < n; i++) {
-                const tileEl = tileEls[i];
-                const tileId = tileEl.getAttribute(ATTR_TILE_ID);
-                const tile = this.findTile(tileId);
-                /*istanbul ignore else */
-                if (tile) {
-                    layoutTiles.push(tile);
-                }
-            }
+        if (__classPrivateFieldGet(this, _SkyTileDashboardService_columns, "f")) {
+            columns = (_a = __classPrivateFieldGet(this, _SkyTileDashboardService_columns, "f")) === null || _a === void 0 ? void 0 : _a.toArray();
         }
-        return layoutTiles;
-    }
-    initMediaQueries() {
-        /*istanbul ignore else */
-        if (!this.mediaSubscription) {
-            this.mediaSubscription = this.mediaQuery.subscribe((args) => {
-                this.changeColumnMode(args === SkyMediaBreakpoints.xs || args === SkyMediaBreakpoints.sm);
-            });
+        for (const column of columns) {
+            if (column !== __classPrivateFieldGet(this, _SkyTileDashboardService_singleColumn, "f")) {
+                const layoutColumn = {
+                    tiles: __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_getTilesInEl).call(this, __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_getColumnEl).call(this, column)),
+                };
+                layoutColumns.push(layoutColumn);
+            }
         }
+        return layoutColumns;
     }
-    initDragula() {
-        this.dragulaService.createGroup(this.bagId, {
-            moves: (el, container, handle) => {
-                const target = el.querySelector('.sky-tile-grab-handle');
-                return target.contains(handle);
-            },
-        });
-        this.dragulaService.drop(this.bagId).subscribe(() => {
-            const config = this.getConfigForUIState();
+    return config.layout.multiColumn;
+}, _SkyTileDashboardService_getTilesInEl = function _SkyTileDashboardService_getTilesInEl(el) {
+    const tileEls = el === null || el === void 0 ? void 0 : el.querySelectorAll('[' + ATTR_TILE_ID + ']');
+    const layoutTiles = [];
+    /*istanbul ignore else */
+    if (tileEls) {
+        for (let i = 0, n = tileEls.length; i < n; i++) {
+            const tileEl = tileEls[i];
+            const tileId = tileEl.getAttribute(ATTR_TILE_ID);
+            const tile = __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_findTile).call(this, tileId);
             /*istanbul ignore else */
-            if (config) {
-                if (this.settingsKey) {
-                    this.setUserConfig(config);
-                }
-                this.configChange.emit(config);
+            if (tile) {
+                layoutTiles.push(tile);
             }
-        });
+        }
     }
-    getColumnEl(column) {
-        return column.content.element.nativeElement.parentNode;
+    return layoutTiles;
+}, _SkyTileDashboardService_initMediaQueries = function _SkyTileDashboardService_initMediaQueries() {
+    /*istanbul ignore else */
+    if (!__classPrivateFieldGet(this, _SkyTileDashboardService_mediaSubscription, "f")) {
+        __classPrivateFieldSet(this, _SkyTileDashboardService_mediaSubscription, __classPrivateFieldGet(this, _SkyTileDashboardService_mediaQuery, "f").subscribe((args) => {
+            this.changeColumnMode(args === SkyMediaBreakpoints.xs || args === SkyMediaBreakpoints.sm);
+        }), "f");
     }
-    findTile(tileId) {
+}, _SkyTileDashboardService_initDragula = function _SkyTileDashboardService_initDragula() {
+    __classPrivateFieldGet(this, _SkyTileDashboardService_dragulaService, "f").createGroup(this.bagId, {
+        moves: (el, container, handle) => {
+            const target = el === null || el === void 0 ? void 0 : el.querySelector('.sky-tile-grab-handle');
+            return !!target && target.contains(handle);
+        },
+    });
+    __classPrivateFieldGet(this, _SkyTileDashboardService_dragulaService, "f").drop(this.bagId).subscribe(() => {
+        const config = __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_getConfigForUIState).call(this);
         /*istanbul ignore else */
-        if (this.config && this.config.layout.multiColumn) {
-            for (const column of this.config.layout.multiColumn) {
-                /*istanbul ignore else */
-                if (column.tiles) {
-                    for (const tile of column.tiles) {
-                        if (tile.id === tileId) {
-                            return tile;
-                        }
+        if (config) {
+            if (__classPrivateFieldGet(this, _SkyTileDashboardService_settingsKey, "f")) {
+                __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_setUserConfig).call(this, config);
+            }
+            this.configChange.emit(config);
+        }
+    });
+}, _SkyTileDashboardService_getColumnEl = function _SkyTileDashboardService_getColumnEl(column) {
+    var _a;
+    return (_a = column === null || column === void 0 ? void 0 : column.content) === null || _a === void 0 ? void 0 : _a.nativeElement.parentNode;
+}, _SkyTileDashboardService_findTile = function _SkyTileDashboardService_findTile(tileId) {
+    /*istanbul ignore else */
+    if (__classPrivateFieldGet(this, _SkyTileDashboardService_config, "f") && __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").layout.multiColumn) {
+        for (const column of __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").layout.multiColumn) {
+            /*istanbul ignore else */
+            if (column.tiles) {
+                for (const tile of column.tiles) {
+                    if (tile.id === tileId) {
+                        return tile;
                     }
                 }
             }
         }
-        return undefined;
     }
-    findTileColumn(tileId) {
-        /*istanbul ignore else */
-        if (this.config && this.config.layout.multiColumn) {
-            return this.config.layout.multiColumn.find((col) => col.tiles && !!col.tiles.find((tile) => tile.id === tileId));
-        }
-        /*istanbul ignore next */
-        return undefined;
-    }
-    initToDefaults(config, columns, singleColumn) {
-        this.config = config;
-        this.columns = columns;
-        this.singleColumn = singleColumn;
-        this.checkReadyAndLoadTiles();
+    return undefined;
+}, _SkyTileDashboardService_findTileColumn = function _SkyTileDashboardService_findTileColumn(tileId) {
+    /*istanbul ignore else */
+    if (__classPrivateFieldGet(this, _SkyTileDashboardService_config, "f") && __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").layout.multiColumn) {
+        return __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f").layout.multiColumn.find((col) => col.tiles && !!col.tiles.find((tile) => tile.id === tileId));
     }
-    setUserConfig(config) {
-        this.uiConfigService
-            .setConfig(this.settingsKey, {
-            layout: this.config.layout,
+    /*istanbul ignore next */
+    return undefined;
+}, _SkyTileDashboardService_initToDefaults = function _SkyTileDashboardService_initToDefaults(config, columns, singleColumn) {
+    __classPrivateFieldSet(this, _SkyTileDashboardService_config, config, "f");
+    __classPrivateFieldSet(this, _SkyTileDashboardService_columns, columns, "f");
+    __classPrivateFieldSet(this, _SkyTileDashboardService_singleColumn, singleColumn, "f");
+    __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_checkReadyAndLoadTiles).call(this);
+}, _SkyTileDashboardService_setUserConfig = function _SkyTileDashboardService_setUserConfig(config) {
+    if (config && __classPrivateFieldGet(this, _SkyTileDashboardService_settingsKey, "f"))
+        __classPrivateFieldGet(this, _SkyTileDashboardService_uiConfigService, "f")
+            .setConfig(__classPrivateFieldGet(this, _SkyTileDashboardService_settingsKey, "f"), {
+            layout: config.layout,
             persisted: true,
-            tileIds: this.defaultConfig.tiles.map((elem) => elem.id),
+            tileIds: config.tiles.map((elem) => elem.id),
         })
             .subscribe(
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -559,72 +592,76 @@ class SkyTileDashboardService {
             console.warn('Could not save tile dashboard settings.');
             console.warn(err);
         });
-    }
-    checkForNewTiles(oldUserTiles) {
-        // Get a list of tiles that are in the config's default list but not in the user's settings
-        const newTiles = this.config.tiles.filter((elem) => {
-            return oldUserTiles.indexOf(elem.id) === -1;
-        });
-        const { multiColumn, singleColumn } = this.config.layout;
-        // Append new tiles to the end of the layouts
+}, _SkyTileDashboardService_checkForNewTiles = function _SkyTileDashboardService_checkForNewTiles(oldUserTiles) {
+    var _a, _b, _c;
+    // Get a list of tiles that are in the config's default list but not in the user's settings
+    const newTiles = (_a = __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f")) === null || _a === void 0 ? void 0 : _a.tiles.filter((elem) => {
+        return oldUserTiles.indexOf(elem.id) === -1;
+    });
+    const multiColumn = (_b = __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f")) === null || _b === void 0 ? void 0 : _b.layout.multiColumn;
+    const singleColumn = (_c = __classPrivateFieldGet(this, _SkyTileDashboardService_config, "f")) === null || _c === void 0 ? void 0 : _c.layout.singleColumn;
+    // Append new tiles to the end of the layouts
+    /*istanbul ignore else */
+    if (newTiles === null || newTiles === void 0 ? void 0 : newTiles.length) {
         /*istanbul ignore else */
-        if (newTiles.length > 0) {
-            /*istanbul ignore else */
-            if (multiColumn) {
-                newTiles.forEach((elem) => {
-                    let locationToAdd = 0;
-                    let smallest = multiColumn[0].tiles.length;
-                    multiColumn.forEach((item, index) => {
-                        if (item.tiles.length < smallest) {
-                            locationToAdd = index;
-                            smallest = item.tiles.length;
-                        }
-                    });
-                    multiColumn[locationToAdd].tiles.push({
-                        id: elem.id,
-                        isCollapsed: false,
-                    });
+        if (multiColumn) {
+            newTiles === null || newTiles === void 0 ? void 0 : newTiles.forEach((elem) => {
+                let locationToAdd = 0;
+                let smallest = multiColumn[0].tiles.length;
+                multiColumn.forEach((item, index) => {
+                    if (item.tiles.length < smallest) {
+                        locationToAdd = index;
+                        smallest = item.tiles.length;
+                    }
                 });
-            }
-            /*istanbul ignore else */
-            if (singleColumn) {
-                newTiles.forEach((elem) => {
-                    singleColumn.tiles.push({ id: elem.id, isCollapsed: false });
+                multiColumn[locationToAdd].tiles.push({
+                    id: elem.id,
+                    isCollapsed: false,
                 });
-            }
+            });
         }
         /*istanbul ignore else */
         if (singleColumn) {
-            for (const tile of singleColumn.tiles) {
-                this.getTileOrRemoveFromLayout(tile);
-            }
+            newTiles === null || newTiles === void 0 ? void 0 : newTiles.forEach((elem) => {
+                singleColumn.tiles.push({ id: elem.id, isCollapsed: false });
+            });
         }
-        /*istanbul ignore else */
-        if (multiColumn) {
-            for (let i = 0, n = multiColumn.length; i < n; i++) {
-                for (const tile of multiColumn[i].tiles) {
-                    this.getTileOrRemoveFromLayout(tile);
-                }
+    }
+    /*istanbul ignore else */
+    if (singleColumn) {
+        for (const tile of singleColumn.tiles) {
+            __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_getTileOrRemoveFromLayout).call(this, tile);
+        }
+    }
+    /*istanbul ignore else */
+    if (multiColumn) {
+        for (let i = 0, n = multiColumn.length; i < n; i++) {
+            for (const tile of multiColumn[i].tiles) {
+                __classPrivateFieldGet(this, _SkyTileDashboardService_instances, "m", _SkyTileDashboardService_getTileOrRemoveFromLayout).call(this, tile);
             }
         }
     }
-}
-SkyTileDashboardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTileDashboardService, deps: [{ token: i1.DragulaService }, { token: i2.SkyMediaQueryService }, { token: i2.SkyUIConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+};
+SkyTileDashboardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTileDashboardService, deps: [{ token: i1.DragulaService }, { token: i2.SkyMediaQueryService }, { token: i2.SkyUIConfigService }, { token: i2.SkyDynamicComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyTileDashboardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTileDashboardService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTileDashboardService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.DragulaService }, { type: i2.SkyMediaQueryService }, { type: i2.SkyUIConfigService }]; }, propDecorators: { dashboardInitialized: [{
+        }], ctorParameters: function () {
+        return [{ type: i1.DragulaService }, { type: i2.SkyMediaQueryService }, { type: i2.SkyUIConfigService }, { type: i2.SkyDynamicComponentService, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { dashboardInitialized: [{
                 type: Output
             }] } });
 
+var _SkyTileComponent_instances, _SkyTileComponent_changeDetector, _SkyTileComponent_dashboardService, _SkyTileComponent_ngUnsubscribe, _SkyTileComponent__isCollapsed, _SkyTileComponent_focusHandle;
 /**
  * Provides a common look-and-feel for tab content.
  */
 class SkyTileComponent {
     constructor(elementRef, changeDetector, dashboardService) {
         this.elementRef = elementRef;
-        this.changeDetector = changeDetector;
-        this.dashboardService = dashboardService;
+        _SkyTileComponent_instances.add(this);
         /**
          * Indicates whether to display a settings button in the tile header. To display the
          * button, you must also listen for the `settingsClick` event.
@@ -653,44 +690,48 @@ class SkyTileComponent {
          */
         this.helpClick = new EventEmitter();
         this.isInDashboardColumn = false;
-        this.ngUnsubscribe = new Subject();
-        this._isCollapsed = false;
-        this.isInDashboardColumn = !!dashboardService;
-        if (this.dashboardService) {
-            this.ariaDescribedBy = `${this.dashboardService.bagId}-move-instructions`;
+        _SkyTileComponent_changeDetector.set(this, void 0);
+        _SkyTileComponent_dashboardService.set(this, void 0);
+        _SkyTileComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyTileComponent__isCollapsed.set(this, false);
+        __classPrivateFieldSet(this, _SkyTileComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyTileComponent_dashboardService, dashboardService, "f");
+        this.isInDashboardColumn = !!__classPrivateFieldGet(this, _SkyTileComponent_dashboardService, "f");
+        if (__classPrivateFieldGet(this, _SkyTileComponent_dashboardService, "f")) {
+            this.ariaDescribedBy = `${__classPrivateFieldGet(this, _SkyTileComponent_dashboardService, "f").bagId}-move-instructions`;
             /**
              * This subscription ensures that if any values which come in from the dashboard service are
              * updated that the component will update if the tile's parent component utilizes OnPush
              * change detection.
              */
-            this.dashboardService.configChange
-                .pipe(takeUntil(this.ngUnsubscribe))
+            __classPrivateFieldGet(this, _SkyTileComponent_dashboardService, "f").configChange
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTileComponent_ngUnsubscribe, "f")))
                 .subscribe(() => {
-                this.changeDetector.markForCheck();
+                __classPrivateFieldGet(this, _SkyTileComponent_changeDetector, "f").markForCheck();
             });
         }
     }
     get isCollapsed() {
-        if (this.dashboardService) {
-            const configCollapsedState = this.dashboardService.tileIsCollapsed(this);
-            this._isCollapsed = configCollapsedState;
+        if (__classPrivateFieldGet(this, _SkyTileComponent_dashboardService, "f")) {
+            const configCollapsedState = __classPrivateFieldGet(this, _SkyTileComponent_dashboardService, "f").tileIsCollapsed(this);
+            __classPrivateFieldSet(this, _SkyTileComponent__isCollapsed, configCollapsedState, "f");
         }
-        return this._isCollapsed;
+        return __classPrivateFieldGet(this, _SkyTileComponent__isCollapsed, "f");
     }
     /**
      * Indicates whether the tile is in a collapsed state.
      * @default false
      */
     set isCollapsed(value) {
-        if (this.dashboardService) {
-            this.dashboardService.setTileCollapsed(this, value);
+        __classPrivateFieldSet(this, _SkyTileComponent__isCollapsed, !!value, "f");
+        if (__classPrivateFieldGet(this, _SkyTileComponent_dashboardService, "f")) {
+            __classPrivateFieldGet(this, _SkyTileComponent_dashboardService, "f").setTileCollapsed(this, __classPrivateFieldGet(this, _SkyTileComponent__isCollapsed, "f"));
         }
-        this._isCollapsed = value;
-        this.isCollapsedChange.emit(value);
+        this.isCollapsedChange.emit(__classPrivateFieldGet(this, _SkyTileComponent__isCollapsed, "f"));
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyTileComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyTileComponent_ngUnsubscribe, "f").complete();
     }
     settingsButtonClicked() {
         this.settingsClick.emit(undefined);
@@ -712,27 +753,28 @@ class SkyTileComponent {
     }
     moveTile(event) {
         /* istanbul ignore else */
-        if (this.isInDashboardColumn) {
+        if (__classPrivateFieldGet(this, _SkyTileComponent_dashboardService, "f")) {
             const direction = event.key.toLowerCase().replace('arrow', '');
             /* istanbul ignore else */
             if (direction === 'up' ||
                 direction === 'down' ||
                 direction === 'left' ||
                 direction === 'right') {
-                this.dashboardService.moveTileOnKeyDown(this, direction, this.title
+                __classPrivateFieldGet(this, _SkyTileComponent_dashboardService, "f").moveTileOnKeyDown(this, direction, this.title
                     ? this.title.nativeElement.innerText
                     : /* istanbul ignore next */
                         undefined);
-                this.focusHandle();
+                __classPrivateFieldGet(this, _SkyTileComponent_instances, "m", _SkyTileComponent_focusHandle).call(this);
             }
         }
     }
-    focusHandle() {
-        this.grabHandle.nativeElement.focus();
-    }
 }
+_SkyTileComponent_changeDetector = new WeakMap(), _SkyTileComponent_dashboardService = new WeakMap(), _SkyTileComponent_ngUnsubscribe = new WeakMap(), _SkyTileComponent__isCollapsed = new WeakMap(), _SkyTileComponent_instances = new WeakSet(), _SkyTileComponent_focusHandle = function _SkyTileComponent_focusHandle() {
+    var _a;
+    (_a = this.grabHandle) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+};
 SkyTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTileComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: SkyTileDashboardService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTileComponent, selector: "sky-tile", inputs: { showSettings: "showSettings", showHelp: "showHelp", tileName: "tileName", isCollapsed: "isCollapsed" }, outputs: { settingsClick: "settingsClick", isCollapsedChange: "isCollapsedChange", helpClick: "helpClick" }, viewQueries: [{ propertyName: "grabHandle", first: true, predicate: ["grabHandle"], descendants: true, read: ElementRef }, { propertyName: "title", first: true, predicate: ["titleContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<section\n  class=\"sky-tile\"\n  [ngClass]=\"{\n    'sky-tile-collapsed': isCollapsed\n  }\"\n  [skyThemeClass]=\"{\n    'sky-box sky-elevation-1-bordered sky-padding-even-xl': 'modern'\n  }\"\n>\n  <header class=\"sky-tile-header\">\n    <div class=\"sky-tile-header-content\" (click)=\"titleClick()\">\n      <div class=\"sky-tile-header-title\" #titleContainer>\n        <ng-content select=\"sky-tile-title\"></ng-content>\n      </div>\n      <div\n        class=\"sky-tile-summary\"\n        [skyThemeClass]=\"{\n          'sky-font-display-3': 'modern',\n          'sky-headline': 'default'\n        }\"\n      >\n        <ng-content select=\"sky-tile-summary\"></ng-content>\n      </div>\n    </div>\n    <div class=\"sky-tile-header-column-tools\">\n      <div class=\"sky-tile-tools\">\n        <ng-container *skyThemeIf=\"'default'\">\n          <button\n            *ngIf=\"hasHelp\"\n            class=\"sky-btn sky-tile-tools-control sky-tile-help\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              tileName\n                ? ('skyux_tile_help' | skyLibResources: tileName)\n                : ('skyux_tile_help_default' | skyLibResources)\n            \"\n            [skyThemeClass]=\"{\n              'sky-btn-icon-borderless': 'modern'\n            }\"\n            (click)=\"helpButtonClicked()\"\n          >\n            <sky-icon icon=\"question-circle\"></sky-icon>\n          </button>\n        </ng-container>\n        <sky-chevron\n          [ariaControls]=\"tileContent.id\"\n          [ariaLabel]=\"\n            tileName\n              ? ('skyux_tile_expand' | skyLibResources: tileName)\n              : ('skyux_tile_expand_default' | skyLibResources)\n          \"\n          [direction]=\"isCollapsed ? 'down' : 'up'\"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-margin-inline-default': 'modern'\n          }\"\n          (directionChange)=\"chevronDirectionChange($event)\"\n        >\n        </sky-chevron>\n        <button\n          *ngIf=\"hasSettings\"\n          class=\"sky-btn sky-tile-settings\"\n          type=\"button\"\n          [attr.aria-label]=\"\n            tileName\n              ? ('skyux_tile_settings' | skyLibResources: tileName)\n              : ('skyux_tile_settings_default' | skyLibResources)\n          \"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-btn-icon-borderless sky-margin-inline-default': 'modern'\n          }\"\n          (click)=\"settingsButtonClicked()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"cog\"></sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"cog-line\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n        <button\n          *ngIf=\"isInDashboardColumn\"\n          class=\"sky-btn sky-tile-grab-handle\"\n          [attr.aria-label]=\"\n            tileName\n              ? ('skyux_tile_move' | skyLibResources: tileName)\n              : ('skyux_tile_move_default' | skyLibResources)\n          \"\n          [attr.aria-describedby]=\"ariaDescribedBy\"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-btn-icon-borderless': 'modern'\n          }\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"moveTile($event)\"\n          #grabHandle\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"th\"></sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"tile-drag\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </div>\n    </div>\n  </header>\n  <div\n    class=\"sky-tile-content\"\n    role=\"region\"\n    skyId\n    [attr.aria-label]=\"tileName\"\n    [@skyAnimationSlide]=\"isCollapsed ? 'up' : 'down'\"\n    #tileContent=\"skyId\"\n  >\n    <ng-content select=\"sky-tile-content\"></ng-content>\n  </div>\n</section>\n", styles: [".sky-tile{background-color:#fff;margin-bottom:20px}.sky-tile-header{border-color:#cdcfd2;border-style:solid solid none;border-width:4px 0 0;display:flex}.sky-tile-header-content{display:flex;flex:1;align-items:baseline;cursor:pointer}.sky-tile-header-title{display:inline-flex}.sky-tile-summary{color:#0974a1;opacity:0;padding-right:15px;transition:opacity .25s;max-height:30px;overflow:hidden}.sky-tile-collapsed .sky-tile-summary{opacity:1}.sky-tile-header-column-tools{display:flex;align-items:center;flex:0 0 auto}.sky-tile-tools{display:flex;padding-right:15px}.sky-tile-tools-control{color:#cdcfd2;cursor:pointer;border:0;width:24px;height:24px;padding:0;display:block;margin:0 0 0 9px}.sky-tile-tools-control:hover{color:#979ba2;transition:color .15s}.sky-tile-grab-handle{cursor:move;cursor:-moz-grab;font-size:15px}.sky-tile-content{border-color:#e2e3e4;border-image:none;border-style:solid solid none;border-width:1px 0}:host-context(.sky-theme-modern) .sky-tile-header,:host-context(.sky-theme-modern) .sky-tile-content{border:none}:host-context(.sky-theme-modern) .sky-tile-header-column-tools{align-items:flex-start}:host-context(.sky-theme-modern) .sky-tile-tools{padding:0}:host-context(.sky-theme-modern) .sky-tile-tools-control{font-size:18px;color:#686c73}:host-context(.sky-theme-modern) .sky-tile-grab-handle{font-size:16px}:host-context(.sky-theme-modern) .sky-tile-content ::ng-deep .sky-tile-content-section{border-bottom:1px dotted #c0c2c5}:host-context(.sky-theme-modern) .sky-tile-content ::ng-deep sky-tile-content-section:first-child .sky-tile-content-section{margin-top:15px}:host-context(.sky-theme-modern) .sky-tile-content ::ng-deep sky-tile-content-section:last-child .sky-tile-content-section{padding-bottom:0;border-bottom:none}:host-context(.sky-theme-modern) :host .sky-tile{border-radius:0}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-xs) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:0}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-tile{border-radius:6px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:6px}.sky-theme-modern .sky-tile-header,.sky-theme-modern .sky-tile-content{border:none}.sky-theme-modern .sky-tile-header-column-tools{align-items:flex-start}.sky-theme-modern .sky-tile-tools{padding:0}.sky-theme-modern .sky-tile-tools-control{font-size:18px;color:#686c73}.sky-theme-modern .sky-tile-grab-handle{font-size:16px}.sky-theme-modern .sky-tile-content ::ng-deep .sky-tile-content-section{border-bottom:1px dotted #c0c2c5}.sky-theme-modern .sky-tile-content ::ng-deep sky-tile-content-section:first-child .sky-tile-content-section{margin-top:15px}.sky-theme-modern .sky-tile-content ::ng-deep sky-tile-content-section:last-child .sky-tile-content-section{padding-bottom:0;border-bottom:none}.sky-theme-modern :host .sky-tile{border-radius:0}.sky-theme-modern :host-context(.sky-responsive-container-xs) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:0}@media (min-width: 768px){.sky-theme-modern :host .sky-tile{border-radius:6px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }, { kind: "directive", type: i2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i3.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [skyAnimationSlide] });
+SkyTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTileComponent, selector: "sky-tile", inputs: { showSettings: "showSettings", showHelp: "showHelp", tileName: "tileName", isCollapsed: "isCollapsed" }, outputs: { settingsClick: "settingsClick", isCollapsedChange: "isCollapsedChange", helpClick: "helpClick" }, viewQueries: [{ propertyName: "grabHandle", first: true, predicate: ["grabHandle"], descendants: true, read: ElementRef }, { propertyName: "title", first: true, predicate: ["titleContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<section\n  class=\"sky-tile\"\n  [ngClass]=\"{\n    'sky-tile-collapsed': isCollapsed\n  }\"\n  [skyThemeClass]=\"{\n    'sky-box sky-elevation-1-bordered sky-padding-even-xl': 'modern'\n  }\"\n>\n  <header class=\"sky-tile-header\">\n    <div class=\"sky-tile-header-content\" (click)=\"titleClick()\">\n      <div class=\"sky-tile-header-title\" #titleContainer>\n        <ng-content select=\"sky-tile-title\"></ng-content>\n      </div>\n      <div\n        class=\"sky-tile-summary\"\n        [skyThemeClass]=\"{\n          'sky-font-display-3': 'modern',\n          'sky-headline': 'default'\n        }\"\n      >\n        <ng-content select=\"sky-tile-summary\"></ng-content>\n      </div>\n    </div>\n    <div class=\"sky-tile-header-column-tools\">\n      <div class=\"sky-tile-tools\">\n        <ng-container *skyThemeIf=\"'default'\">\n          <button\n            *ngIf=\"hasHelp\"\n            class=\"sky-btn sky-tile-tools-control sky-tile-help\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              tileName\n                ? ('skyux_tile_help' | skyLibResources: tileName)\n                : ('skyux_tile_help_default' | skyLibResources)\n            \"\n            [skyThemeClass]=\"{\n              'sky-btn-icon-borderless': 'modern'\n            }\"\n            (click)=\"helpButtonClicked()\"\n          >\n            <sky-icon icon=\"question-circle\"></sky-icon>\n          </button>\n        </ng-container>\n        <sky-chevron\n          [ariaControls]=\"tileContent.id\"\n          [ariaLabel]=\"\n            tileName\n              ? ('skyux_tile_expand' | skyLibResources: tileName)\n              : ('skyux_tile_expand_default' | skyLibResources)\n          \"\n          [direction]=\"isCollapsed ? 'down' : 'up'\"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-margin-inline-default': 'modern'\n          }\"\n          (directionChange)=\"chevronDirectionChange($event)\"\n        >\n        </sky-chevron>\n        <button\n          *ngIf=\"hasSettings\"\n          class=\"sky-btn sky-tile-settings\"\n          type=\"button\"\n          [attr.aria-label]=\"\n            tileName\n              ? ('skyux_tile_settings' | skyLibResources: tileName)\n              : ('skyux_tile_settings_default' | skyLibResources)\n          \"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-btn-icon-borderless sky-margin-inline-default': 'modern'\n          }\"\n          (click)=\"settingsButtonClicked()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"cog\"></sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"cog-line\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n        <button\n          *ngIf=\"isInDashboardColumn\"\n          class=\"sky-btn sky-tile-grab-handle\"\n          [attr.aria-label]=\"\n            tileName\n              ? ('skyux_tile_move' | skyLibResources: tileName)\n              : ('skyux_tile_move_default' | skyLibResources)\n          \"\n          [attr.aria-describedby]=\"ariaDescribedBy\"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-btn-icon-borderless': 'modern'\n          }\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"moveTile($event)\"\n          #grabHandle\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"th\"></sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"tile-drag\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </div>\n    </div>\n  </header>\n  <div\n    class=\"sky-tile-content\"\n    role=\"region\"\n    skyId\n    [attr.aria-label]=\"tileName\"\n    [@skyAnimationSlide]=\"isCollapsed ? 'up' : 'down'\"\n    #tileContent=\"skyId\"\n  >\n    <ng-content select=\"sky-tile-content\"></ng-content>\n  </div>\n</section>\n", styles: [".sky-tile{background-color:#fff;margin-bottom:20px}.sky-tile-header{border-color:#cdcfd2;border-style:solid solid none;border-width:4px 0 0;display:flex}.sky-tile-header-content{display:flex;flex:1;align-items:baseline;cursor:pointer}.sky-tile-header-title{display:inline-flex}.sky-tile-summary{color:#0974a1;opacity:0;padding-right:15px;transition:opacity .25s;max-height:30px;overflow:hidden}.sky-tile-collapsed .sky-tile-summary{opacity:1}.sky-tile-header-column-tools{display:flex;align-items:center;flex:0 0 auto}.sky-tile-tools{display:flex;padding-right:15px}.sky-tile-tools-control{color:#cdcfd2;cursor:pointer;border:0;width:24px;height:24px;padding:0;display:block;margin:0 0 0 9px}.sky-tile-tools-control:hover{color:#979ba2;transition:color .15s}.sky-tile-grab-handle{cursor:move;cursor:-moz-grab;font-size:15px}.sky-tile-content{border-color:#e2e3e4;border-image:none;border-style:solid solid none;border-width:1px 0}:host-context(.sky-theme-modern) .sky-tile-header,:host-context(.sky-theme-modern) .sky-tile-content{border:none}:host-context(.sky-theme-modern) .sky-tile-header-column-tools{align-items:flex-start}:host-context(.sky-theme-modern) .sky-tile-tools{padding:0}:host-context(.sky-theme-modern) .sky-tile-tools-control{font-size:18px;color:#686c73}:host-context(.sky-theme-modern) .sky-tile-grab-handle{font-size:16px}:host-context(.sky-theme-modern) .sky-tile-content ::ng-deep .sky-tile-content-section{border-bottom:1px dotted #c0c2c5}:host-context(.sky-theme-modern) .sky-tile-content ::ng-deep sky-tile-content-section:first-child .sky-tile-content-section{margin-top:15px}:host-context(.sky-theme-modern) .sky-tile-content ::ng-deep sky-tile-content-section:last-child .sky-tile-content-section{padding-bottom:0;border-bottom:none}:host-context(.sky-theme-modern) :host .sky-tile{border-radius:0}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-xs) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:0}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-tile{border-radius:6px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:6px}.sky-theme-modern .sky-tile-header,.sky-theme-modern .sky-tile-content{border:none}.sky-theme-modern .sky-tile-header-column-tools{align-items:flex-start}.sky-theme-modern .sky-tile-tools{padding:0}.sky-theme-modern .sky-tile-tools-control{font-size:18px;color:#686c73}.sky-theme-modern .sky-tile-grab-handle{font-size:16px}.sky-theme-modern .sky-tile-content ::ng-deep .sky-tile-content-section{border-bottom:1px dotted #c0c2c5}.sky-theme-modern .sky-tile-content ::ng-deep sky-tile-content-section:first-child .sky-tile-content-section{margin-top:15px}.sky-theme-modern .sky-tile-content ::ng-deep sky-tile-content-section:last-child .sky-tile-content-section{padding-bottom:0;border-bottom:none}.sky-theme-modern :host .sky-tile{border-radius:0}.sky-theme-modern :host-context(.sky-responsive-container-xs) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:0}@media (min-width: 768px){.sky-theme-modern :host .sky-tile{border-radius:6px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }, { kind: "directive", type: i2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i3.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [skyAnimationSlide] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-tile', animations: [skyAnimationSlide], template: "<section\n  class=\"sky-tile\"\n  [ngClass]=\"{\n    'sky-tile-collapsed': isCollapsed\n  }\"\n  [skyThemeClass]=\"{\n    'sky-box sky-elevation-1-bordered sky-padding-even-xl': 'modern'\n  }\"\n>\n  <header class=\"sky-tile-header\">\n    <div class=\"sky-tile-header-content\" (click)=\"titleClick()\">\n      <div class=\"sky-tile-header-title\" #titleContainer>\n        <ng-content select=\"sky-tile-title\"></ng-content>\n      </div>\n      <div\n        class=\"sky-tile-summary\"\n        [skyThemeClass]=\"{\n          'sky-font-display-3': 'modern',\n          'sky-headline': 'default'\n        }\"\n      >\n        <ng-content select=\"sky-tile-summary\"></ng-content>\n      </div>\n    </div>\n    <div class=\"sky-tile-header-column-tools\">\n      <div class=\"sky-tile-tools\">\n        <ng-container *skyThemeIf=\"'default'\">\n          <button\n            *ngIf=\"hasHelp\"\n            class=\"sky-btn sky-tile-tools-control sky-tile-help\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              tileName\n                ? ('skyux_tile_help' | skyLibResources: tileName)\n                : ('skyux_tile_help_default' | skyLibResources)\n            \"\n            [skyThemeClass]=\"{\n              'sky-btn-icon-borderless': 'modern'\n            }\"\n            (click)=\"helpButtonClicked()\"\n          >\n            <sky-icon icon=\"question-circle\"></sky-icon>\n          </button>\n        </ng-container>\n        <sky-chevron\n          [ariaControls]=\"tileContent.id\"\n          [ariaLabel]=\"\n            tileName\n              ? ('skyux_tile_expand' | skyLibResources: tileName)\n              : ('skyux_tile_expand_default' | skyLibResources)\n          \"\n          [direction]=\"isCollapsed ? 'down' : 'up'\"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-margin-inline-default': 'modern'\n          }\"\n          (directionChange)=\"chevronDirectionChange($event)\"\n        >\n        </sky-chevron>\n        <button\n          *ngIf=\"hasSettings\"\n          class=\"sky-btn sky-tile-settings\"\n          type=\"button\"\n          [attr.aria-label]=\"\n            tileName\n              ? ('skyux_tile_settings' | skyLibResources: tileName)\n              : ('skyux_tile_settings_default' | skyLibResources)\n          \"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-btn-icon-borderless sky-margin-inline-default': 'modern'\n          }\"\n          (click)=\"settingsButtonClicked()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"cog\"></sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"cog-line\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n        <button\n          *ngIf=\"isInDashboardColumn\"\n          class=\"sky-btn sky-tile-grab-handle\"\n          [attr.aria-label]=\"\n            tileName\n              ? ('skyux_tile_move' | skyLibResources: tileName)\n              : ('skyux_tile_move_default' | skyLibResources)\n          \"\n          [attr.aria-describedby]=\"ariaDescribedBy\"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-btn-icon-borderless': 'modern'\n          }\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"moveTile($event)\"\n          #grabHandle\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"th\"></sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"tile-drag\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </div>\n    </div>\n  </header>\n  <div\n    class=\"sky-tile-content\"\n    role=\"region\"\n    skyId\n    [attr.aria-label]=\"tileName\"\n    [@skyAnimationSlide]=\"isCollapsed ? 'up' : 'down'\"\n    #tileContent=\"skyId\"\n  >\n    <ng-content select=\"sky-tile-content\"></ng-content>\n  </div>\n</section>\n", styles: [".sky-tile{background-color:#fff;margin-bottom:20px}.sky-tile-header{border-color:#cdcfd2;border-style:solid solid none;border-width:4px 0 0;display:flex}.sky-tile-header-content{display:flex;flex:1;align-items:baseline;cursor:pointer}.sky-tile-header-title{display:inline-flex}.sky-tile-summary{color:#0974a1;opacity:0;padding-right:15px;transition:opacity .25s;max-height:30px;overflow:hidden}.sky-tile-collapsed .sky-tile-summary{opacity:1}.sky-tile-header-column-tools{display:flex;align-items:center;flex:0 0 auto}.sky-tile-tools{display:flex;padding-right:15px}.sky-tile-tools-control{color:#cdcfd2;cursor:pointer;border:0;width:24px;height:24px;padding:0;display:block;margin:0 0 0 9px}.sky-tile-tools-control:hover{color:#979ba2;transition:color .15s}.sky-tile-grab-handle{cursor:move;cursor:-moz-grab;font-size:15px}.sky-tile-content{border-color:#e2e3e4;border-image:none;border-style:solid solid none;border-width:1px 0}:host-context(.sky-theme-modern) .sky-tile-header,:host-context(.sky-theme-modern) .sky-tile-content{border:none}:host-context(.sky-theme-modern) .sky-tile-header-column-tools{align-items:flex-start}:host-context(.sky-theme-modern) .sky-tile-tools{padding:0}:host-context(.sky-theme-modern) .sky-tile-tools-control{font-size:18px;color:#686c73}:host-context(.sky-theme-modern) .sky-tile-grab-handle{font-size:16px}:host-context(.sky-theme-modern) .sky-tile-content ::ng-deep .sky-tile-content-section{border-bottom:1px dotted #c0c2c5}:host-context(.sky-theme-modern) .sky-tile-content ::ng-deep sky-tile-content-section:first-child .sky-tile-content-section{margin-top:15px}:host-context(.sky-theme-modern) .sky-tile-content ::ng-deep sky-tile-content-section:last-child .sky-tile-content-section{padding-bottom:0;border-bottom:none}:host-context(.sky-theme-modern) :host .sky-tile{border-radius:0}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-xs) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:0}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-tile{border-radius:6px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:6px}.sky-theme-modern .sky-tile-header,.sky-theme-modern .sky-tile-content{border:none}.sky-theme-modern .sky-tile-header-column-tools{align-items:flex-start}.sky-theme-modern .sky-tile-tools{padding:0}.sky-theme-modern .sky-tile-tools-control{font-size:18px;color:#686c73}.sky-theme-modern .sky-tile-grab-handle{font-size:16px}.sky-theme-modern .sky-tile-content ::ng-deep .sky-tile-content-section{border-bottom:1px dotted #c0c2c5}.sky-theme-modern .sky-tile-content ::ng-deep sky-tile-content-section:first-child .sky-tile-content-section{margin-top:15px}.sky-theme-modern .sky-tile-content ::ng-deep sky-tile-content-section:last-child .sky-tile-content-section{padding-bottom:0;border-bottom:none}.sky-theme-modern :host .sky-tile{border-radius:0}.sky-theme-modern :host-context(.sky-responsive-container-xs) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:0}@media (min-width: 768px){.sky-theme-modern :host .sky-tile{border-radius:6px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:6px}\n"] }]
@@ -864,29 +906,30 @@ var SkyTileDashboardMessageType;
     SkyTileDashboardMessageType[SkyTileDashboardMessageType["CollapseAll"] = 1] = "CollapseAll";
 })(SkyTileDashboardMessageType || (SkyTileDashboardMessageType = {}));
 
+var _SkyTileDashboardColumnComponent_dashboardService;
 let columnIdIndex = 0;
 /**
  * @internal
  */
 class SkyTileDashboardColumnComponent {
-    constructor(resolver, injector, dashboardService) {
-        this.resolver = resolver;
+    constructor(injector, dashboardService) {
         this.injector = injector;
-        this.dashboardService = dashboardService;
-        columnIdIndex++;
-        this.columnId = 'tile-dashboard-column-' + columnIdIndex;
-        this.bagId = this.dashboardService.bagId;
+        _SkyTileDashboardColumnComponent_dashboardService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyTileDashboardColumnComponent_dashboardService, dashboardService, "f");
+        this.columnId = `tile-dashboard-column-${++columnIdIndex}`;
+        this.bagId = __classPrivateFieldGet(this, _SkyTileDashboardColumnComponent_dashboardService, "f").bagId;
     }
 }
-SkyTileDashboardColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTileDashboardColumnComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: SkyTileDashboardService }], target: i0.ɵɵFactoryTarget.Component });
-SkyTileDashboardColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTileDashboardColumnComponent, selector: "sky-tile-dashboard-column", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"sky-tile-dashboard-column\" [dragula]=\"bagId\">\n  <div #content></div>\n</div>\n", styles: [":host{display:flex;flex-grow:1;overflow:hidden}:host{padding:0}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0}@media (min-width: 768px){:host{padding:0 10px}}:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0 10px}.sky-tile-dashboard-column{min-height:100px;width:100%}@media (min-width: 768px){:host-context(.sky-theme-modern) :host{padding:0 15px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg){padding:0 15px}@media (min-width: 768px){.sky-theme-modern :host{padding:0 15px}}.sky-theme-modern :host-context(.sky-responsive-container-sm),.sky-theme-modern :host-context(.sky-responsive-container-md),.sky-theme-modern :host-context(.sky-responsive-container-lg){padding:0 15px}\n"], dependencies: [{ kind: "directive", type: i1.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel"], outputs: ["dragulaModelChange"] }] });
+_SkyTileDashboardColumnComponent_dashboardService = new WeakMap();
+SkyTileDashboardColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTileDashboardColumnComponent, deps: [{ token: i0.Injector }, { token: SkyTileDashboardService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTileDashboardColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTileDashboardColumnComponent, selector: "sky-tile-dashboard-column", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"sky-tile-dashboard-column\" [dragula]=\"bagId\">\n  <div #content></div>\n</div>\n", styles: [":host{display:flex;flex-grow:1;overflow:hidden}:host{padding:0}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0}@media (min-width: 768px){:host{padding:0 10px}}:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0 10px}.sky-tile-dashboard-column{min-height:100px;width:100%}@media (min-width: 768px){:host-context(.sky-theme-modern) :host{padding:0 15px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg){padding:0 15px}@media (min-width: 768px){.sky-theme-modern :host{padding:0 15px}}.sky-theme-modern :host-context(.sky-responsive-container-sm),.sky-theme-modern :host-context(.sky-responsive-container-md),.sky-theme-modern :host-context(.sky-responsive-container-lg){padding:0 15px}\n"], dependencies: [{ kind: "directive", type: i1.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel"], outputs: ["dragulaModelChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTileDashboardColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-tile-dashboard-column', template: "<div class=\"sky-tile-dashboard-column\" [dragula]=\"bagId\">\n  <div #content></div>\n</div>\n", styles: [":host{display:flex;flex-grow:1;overflow:hidden}:host{padding:0}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0}@media (min-width: 768px){:host{padding:0 10px}}:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0 10px}.sky-tile-dashboard-column{min-height:100px;width:100%}@media (min-width: 768px){:host-context(.sky-theme-modern) :host{padding:0 15px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg){padding:0 15px}@media (min-width: 768px){.sky-theme-modern :host{padding:0 15px}}.sky-theme-modern :host-context(.sky-responsive-container-sm),.sky-theme-modern :host-context(.sky-responsive-container-md),.sky-theme-modern :host-context(.sky-responsive-container-lg){padding:0 15px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: SkyTileDashboardService }]; }, propDecorators: { content: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: SkyTileDashboardService }]; }, propDecorators: { content: [{
                 type: ViewChild,
                 args: ['content', {
-                        read: ViewContainerRef,
+                        read: ElementRef,
                         static: false,
                     }]
             }] } });
@@ -905,14 +948,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 }]
         }] });
 
+var _SkyTileDashboardComponent_configSet, _SkyTileDashboardComponent_dashboardService, _SkyTileDashboardComponent_mediaQueryService, _SkyTileDashboardComponent_ngUnsubscribe, _SkyTileDashboardComponent_resourcesService, _SkyTileDashboardComponent_viewReady, _SkyTileDashboardComponent__config;
 /**
  * Specifies a container to group multiple tiles.
  */
 class SkyTileDashboardComponent {
-    constructor(dashboardService, mediaQuery, resourcesService) {
-        this.dashboardService = dashboardService;
-        this.mediaQuery = mediaQuery;
-        this.resourcesService = resourcesService;
+    constructor(dashboardService, mediaQueryService, resourcesService) {
         /**
          * Provides an observable to send commands to the tile dashboard. The commands should respect the
          * `SkyTileDashboardMessage` type.
@@ -924,21 +965,30 @@ class SkyTileDashboardComponent {
          * tiles to rearrange them.
          */
         this.configChange = new EventEmitter();
-        this.moveInstructionsId = this.dashboardService.bagId + '-move-instructions';
-        this.configSet = false;
-        this.ngUnsubscribe = new Subject();
-        this.viewReady = false;
-        this.dashboardService.configChange.subscribe((config) => {
+        this.tileMovedReport = '';
+        _SkyTileDashboardComponent_configSet.set(this, false);
+        _SkyTileDashboardComponent_dashboardService.set(this, void 0);
+        _SkyTileDashboardComponent_mediaQueryService.set(this, void 0);
+        _SkyTileDashboardComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyTileDashboardComponent_resourcesService.set(this, void 0);
+        _SkyTileDashboardComponent_viewReady.set(this, false);
+        _SkyTileDashboardComponent__config.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyTileDashboardComponent_dashboardService, dashboardService, "f");
+        __classPrivateFieldSet(this, _SkyTileDashboardComponent_mediaQueryService, mediaQueryService, "f");
+        __classPrivateFieldSet(this, _SkyTileDashboardComponent_resourcesService, resourcesService, "f");
+        this.moveInstructionsId =
+            __classPrivateFieldGet(this, _SkyTileDashboardComponent_dashboardService, "f").bagId + '-move-instructions';
+        __classPrivateFieldGet(this, _SkyTileDashboardComponent_dashboardService, "f").configChange.subscribe((config) => {
             this.configChange.emit(config);
             // Update aria live region with tile drag info
-            if (config.movedTile && this.resourcesService) {
+            if (config.movedTile && __classPrivateFieldGet(this, _SkyTileDashboardComponent_resourcesService, "f")) {
                 let messageObservable;
-                if (this.mediaQuery.current === SkyMediaBreakpoints.xs ||
-                    this.mediaQuery.current === SkyMediaBreakpoints.sm) {
-                    messageObservable = this.resourcesService.getString('skyux_tile_moved_assistive_text', config.movedTile.tileDescription, '1', '1', config.movedTile.position.toString(), config.layout.singleColumn.tiles.length.toString());
+                if (__classPrivateFieldGet(this, _SkyTileDashboardComponent_mediaQueryService, "f").current === SkyMediaBreakpoints.xs ||
+                    __classPrivateFieldGet(this, _SkyTileDashboardComponent_mediaQueryService, "f").current === SkyMediaBreakpoints.sm) {
+                    messageObservable = __classPrivateFieldGet(this, _SkyTileDashboardComponent_resourcesService, "f").getString('skyux_tile_moved_assistive_text', config.movedTile.tileDescription, '1', '1', config.movedTile.position.toString(), config.layout.singleColumn.tiles.length.toString());
                 }
                 else {
-                    messageObservable = this.resourcesService.getString('skyux_tile_moved_assistive_text', config.movedTile.tileDescription, config.movedTile.column.toString(), config.layout.multiColumn.length.toString(), config.movedTile.position.toString(), config.layout.multiColumn[config.movedTile.column - 1].tiles.length.toString());
+                    messageObservable = __classPrivateFieldGet(this, _SkyTileDashboardComponent_resourcesService, "f").getString('skyux_tile_moved_assistive_text', config.movedTile.tileDescription, config.movedTile.column.toString(), config.layout.multiColumn.length.toString(), config.movedTile.position.toString(), config.layout.multiColumn[config.movedTile.column - 1].tiles.length.toString());
                 }
                 messageObservable.pipe(take(1)).subscribe((message) => {
                     this.tileMovedReport = message;
@@ -951,52 +1001,55 @@ class SkyTileDashboardComponent {
      * @required
      */
     set config(value) {
-        if (value && !this.configSet) {
-            this._config = value;
-            this.configSet = true;
+        if (value && !__classPrivateFieldGet(this, _SkyTileDashboardComponent_configSet, "f")) {
+            __classPrivateFieldSet(this, _SkyTileDashboardComponent__config, value, "f");
+            __classPrivateFieldSet(this, _SkyTileDashboardComponent_configSet, true, "f");
             this.checkReady();
         }
     }
     get config() {
-        return this._config;
+        return __classPrivateFieldGet(this, _SkyTileDashboardComponent__config, "f");
     }
     ngAfterViewInit() {
         this.messageStream
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTileDashboardComponent_ngUnsubscribe, "f")))
             .subscribe((message) => {
             this.handleIncomingMessages(message);
         });
-        this.viewReady = true;
+        __classPrivateFieldSet(this, _SkyTileDashboardComponent_viewReady, true, "f");
         this.checkReady();
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-        this.dashboardService.destroy();
+        __classPrivateFieldGet(this, _SkyTileDashboardComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyTileDashboardComponent_ngUnsubscribe, "f").complete();
+        __classPrivateFieldGet(this, _SkyTileDashboardComponent_dashboardService, "f").destroy();
     }
     checkReady() {
-        if (this.viewReady && this.config) {
+        if (__classPrivateFieldGet(this, _SkyTileDashboardComponent_viewReady, "f") && this.config && this.columns && this.singleColumn) {
             setTimeout(() => {
-                this.dashboardService.init(this.config, this.columns, this.singleColumn, this.settingsKey);
+                if (this.config && this.columns && this.singleColumn) {
+                    __classPrivateFieldGet(this, _SkyTileDashboardComponent_dashboardService, "f").init(this.config, this.columns, this.singleColumn, this.settingsKey);
+                }
             }, 0);
         }
     }
     handleIncomingMessages(message) {
         switch (message.type) {
             case SkyTileDashboardMessageType.ExpandAll:
-                this.dashboardService.setAllTilesCollapsed(false);
+                __classPrivateFieldGet(this, _SkyTileDashboardComponent_dashboardService, "f").setAllTilesCollapsed(false);
                 break;
             case SkyTileDashboardMessageType.CollapseAll:
-                this.dashboardService.setAllTilesCollapsed(true);
+                __classPrivateFieldGet(this, _SkyTileDashboardComponent_dashboardService, "f").setAllTilesCollapsed(true);
                 break;
         }
     }
 }
+_SkyTileDashboardComponent_configSet = new WeakMap(), _SkyTileDashboardComponent_dashboardService = new WeakMap(), _SkyTileDashboardComponent_mediaQueryService = new WeakMap(), _SkyTileDashboardComponent_ngUnsubscribe = new WeakMap(), _SkyTileDashboardComponent_resourcesService = new WeakMap(), _SkyTileDashboardComponent_viewReady = new WeakMap(), _SkyTileDashboardComponent__config = new WeakMap();
 SkyTileDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTileDashboardComponent, deps: [{ token: SkyTileDashboardService }, { token: i2.SkyMediaQueryService }, { token: i3$1.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyTileDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTileDashboardComponent, selector: "sky-tile-dashboard", inputs: { config: "config", messageStream: "messageStream", settingsKey: "settingsKey" }, outputs: { configChange: "configChange" }, providers: [SkyTileDashboardService], viewQueries: [{ propertyName: "singleColumn", first: true, predicate: ["singleColumn"], descendants: true, read: SkyTileDashboardColumnComponent }, { propertyName: "columns", predicate: SkyTileDashboardColumnComponent, descendants: true }], ngImport: i0, template: "<span aria-live=\"assertive\" class=\"sky-assistive-text\">\n  {{ tileMovedReport }}\n</span>\n<sky-tile-dashboard-column\n  *ngFor=\"let column of config?.layout?.multiColumn\"\n  class=\"sky-tile-dashboard-layout-multi\"\n  [ngStyle]=\"{\n    'flex-basis': 100 / config?.layout?.multiColumn.length + '%'\n  }\"\n>\n</sky-tile-dashboard-column>\n<sky-tile-dashboard-column\n  class=\"sky-tile-dashboard-layout-single\"\n  #singleColumn\n>\n</sky-tile-dashboard-column>\n<span class=\"sky-screen-reader-only\" [id]=\"moveInstructionsId\">{{\n  'skyux_tile_move_instructions' | skyLibResources\n}}</span>\n<ng-content></ng-content>\n", styles: [":host{display:block;padding:0}:host .sky-tile-dashboard-layout-multi{display:none}:host .sky-tile-dashboard-layout-single{display:block}:host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:0}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){display:block;padding:0}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi{display:none}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single{display:block}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:0}@media (min-width: 768px){:host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:20px}:host :host-context(.sky-theme-default){padding-top:20px}}:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:20px}:host-context(.sky-responsive-container-sm) :host-context(.sky-theme-default),:host-context(.sky-responsive-container-md) :host-context(.sky-theme-default),:host-context(.sky-responsive-container-lg) :host-context(.sky-theme-default){padding-top:20px}@media (min-width: 992px){:host{display:flex;padding:0 10px}:host .sky-tile-dashboard-layout-multi{display:block}:host .sky-tile-dashboard-layout-single{display:none}}:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){display:flex;padding:0 10px}:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi{display:block}:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single{display:none}@media screen{.sky-assistive-text{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}}:host-context(.sky-theme-default){background-color:#eeeeef}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}@media (min-width: 768px){.sky-theme-modern :host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SkyTileDashboardColumnComponent, selector: "sky-tile-dashboard-column" }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] });
+SkyTileDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTileDashboardComponent, selector: "sky-tile-dashboard", inputs: { config: "config", messageStream: "messageStream", settingsKey: "settingsKey" }, outputs: { configChange: "configChange" }, providers: [SkyTileDashboardService], viewQueries: [{ propertyName: "singleColumn", first: true, predicate: ["singleColumn"], descendants: true, read: SkyTileDashboardColumnComponent }, { propertyName: "columns", predicate: SkyTileDashboardColumnComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"config\">\n  <span aria-live=\"assertive\" class=\"sky-assistive-text\">\n    {{ tileMovedReport }}\n  </span>\n  <sky-tile-dashboard-column\n    *ngFor=\"let column of config.layout.multiColumn\"\n    class=\"sky-tile-dashboard-layout-multi\"\n    [ngStyle]=\"{\n      'flex-basis': 100 / config.layout.multiColumn.length + '%'\n    }\"\n  >\n  </sky-tile-dashboard-column>\n  <sky-tile-dashboard-column\n    class=\"sky-tile-dashboard-layout-single\"\n    #singleColumn\n  >\n  </sky-tile-dashboard-column>\n  <span class=\"sky-screen-reader-only\" [id]=\"moveInstructionsId\">{{\n    'skyux_tile_move_instructions' | skyLibResources\n  }}</span>\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{display:block;padding:0}:host .sky-tile-dashboard-layout-multi{display:none}:host .sky-tile-dashboard-layout-single{display:block}:host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:0}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){display:block;padding:0}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi{display:none}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single{display:block}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:0}@media (min-width: 768px){:host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:20px}:host :host-context(.sky-theme-default){padding-top:20px}}:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:20px}:host-context(.sky-responsive-container-sm) :host-context(.sky-theme-default),:host-context(.sky-responsive-container-md) :host-context(.sky-theme-default),:host-context(.sky-responsive-container-lg) :host-context(.sky-theme-default){padding-top:20px}@media (min-width: 992px){:host{display:flex;padding:0 10px}:host .sky-tile-dashboard-layout-multi{display:block}:host .sky-tile-dashboard-layout-single{display:none}}:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){display:flex;padding:0 10px}:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi{display:block}:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single{display:none}@media screen{.sky-assistive-text{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}}:host-context(.sky-theme-default){background-color:#eeeeef}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}@media (min-width: 768px){.sky-theme-modern :host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SkyTileDashboardColumnComponent, selector: "sky-tile-dashboard-column" }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTileDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-tile-dashboard', providers: [SkyTileDashboardService], template: "<span aria-live=\"assertive\" class=\"sky-assistive-text\">\n  {{ tileMovedReport }}\n</span>\n<sky-tile-dashboard-column\n  *ngFor=\"let column of config?.layout?.multiColumn\"\n  class=\"sky-tile-dashboard-layout-multi\"\n  [ngStyle]=\"{\n    'flex-basis': 100 / config?.layout?.multiColumn.length + '%'\n  }\"\n>\n</sky-tile-dashboard-column>\n<sky-tile-dashboard-column\n  class=\"sky-tile-dashboard-layout-single\"\n  #singleColumn\n>\n</sky-tile-dashboard-column>\n<span class=\"sky-screen-reader-only\" [id]=\"moveInstructionsId\">{{\n  'skyux_tile_move_instructions' | skyLibResources\n}}</span>\n<ng-content></ng-content>\n", styles: [":host{display:block;padding:0}:host .sky-tile-dashboard-layout-multi{display:none}:host .sky-tile-dashboard-layout-single{display:block}:host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:0}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){display:block;padding:0}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi{display:none}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single{display:block}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:0}@media (min-width: 768px){:host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:20px}:host :host-context(.sky-theme-default){padding-top:20px}}:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:20px}:host-context(.sky-responsive-container-sm) :host-context(.sky-theme-default),:host-context(.sky-responsive-container-md) :host-context(.sky-theme-default),:host-context(.sky-responsive-container-lg) :host-context(.sky-theme-default){padding-top:20px}@media (min-width: 992px){:host{display:flex;padding:0 10px}:host .sky-tile-dashboard-layout-multi{display:block}:host .sky-tile-dashboard-layout-single{display:none}}:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){display:flex;padding:0 10px}:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi{display:block}:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single{display:none}@media screen{.sky-assistive-text{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}}:host-context(.sky-theme-default){background-color:#eeeeef}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}@media (min-width: 768px){.sky-theme-modern :host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}\n"] }]
+            args: [{ selector: 'sky-tile-dashboard', providers: [SkyTileDashboardService], template: "<ng-container *ngIf=\"config\">\n  <span aria-live=\"assertive\" class=\"sky-assistive-text\">\n    {{ tileMovedReport }}\n  </span>\n  <sky-tile-dashboard-column\n    *ngFor=\"let column of config.layout.multiColumn\"\n    class=\"sky-tile-dashboard-layout-multi\"\n    [ngStyle]=\"{\n      'flex-basis': 100 / config.layout.multiColumn.length + '%'\n    }\"\n  >\n  </sky-tile-dashboard-column>\n  <sky-tile-dashboard-column\n    class=\"sky-tile-dashboard-layout-single\"\n    #singleColumn\n  >\n  </sky-tile-dashboard-column>\n  <span class=\"sky-screen-reader-only\" [id]=\"moveInstructionsId\">{{\n    'skyux_tile_move_instructions' | skyLibResources\n  }}</span>\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{display:block;padding:0}:host .sky-tile-dashboard-layout-multi{display:none}:host .sky-tile-dashboard-layout-single{display:block}:host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:0}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){display:block;padding:0}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi{display:none}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single{display:block}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:0}@media (min-width: 768px){:host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:20px}:host :host-context(.sky-theme-default){padding-top:20px}}:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:20px}:host-context(.sky-responsive-container-sm) :host-context(.sky-theme-default),:host-context(.sky-responsive-container-md) :host-context(.sky-theme-default),:host-context(.sky-responsive-container-lg) :host-context(.sky-theme-default){padding-top:20px}@media (min-width: 992px){:host{display:flex;padding:0 10px}:host .sky-tile-dashboard-layout-multi{display:block}:host .sky-tile-dashboard-layout-single{display:none}}:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){display:flex;padding:0 10px}:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi{display:block}:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single{display:none}@media screen{.sky-assistive-text{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}}:host-context(.sky-theme-default){background-color:#eeeeef}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}@media (min-width: 768px){.sky-theme-modern :host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}\n"] }]
         }], ctorParameters: function () {
         return [{ type: SkyTileDashboardService }, { type: i2.SkyMediaQueryService }, { type: i3$1.SkyLibResourcesService, decorators: [{
                         type: Optional