@skyux/tiles 5.0.0-beta.2 → 5.0.3

package/bundles/skyux-tiles.umd.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@skyux/i18n'), require('@skyux/indicators'), require('@skyux/theme'), require('@skyux/animations'), require('rxjs'), require('rxjs/operators'), require('@skyux/core'), require('ng2-dragula')) :
     typeof define === 'function' && define.amd ? define('@skyux/tiles', ['exports', '@angular/core', '@angular/common', '@skyux/i18n', '@skyux/indicators', '@skyux/theme', '@skyux/animations', 'rxjs', 'rxjs/operators', '@skyux/core', 'ng2-dragula'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.tiles = {}), global.ng.core, global.ng.common, global.i3, global.i2$1, global.i4, global.animations, global.rxjs, global.rxjs.operators, global.i2, global.i1));
-}(this, (function (exports, i0, i3$1, i3, i2$1, i4, animations, rxjs, operators, i2, i1) { 'use strict';
+})(this, (function (exports, i0, i3$1, i3, i2$1, i4, animations, rxjs, operators, i2, i1) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -13,14 +13,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -39,7 +37,22 @@
      * To update this file, simply rerun the command.
      */
     var RESOURCES = {
-        'EN-US': { "skyux_tile_help": { "message": "Help" }, "skyux_tile_settings": { "message": "Settings" }, "skyux_tile_grab_handle": { "message": "Use arrow keys to reorder. Press up and down arrow keys to change position in column. Press left and right arrow keys to change position to another column." }, "skyux_tile_moved_assistive_text": { "message": "{0} moved. Current column: {1} of {2}. Current position in column: {3} of {4}" } },
+        'EN-US': {
+            skyux_tile_expand: { message: 'Expand or collapse {0}' },
+            skyux_tile_expand_default: { message: 'Expand or collapse' },
+            skyux_tile_help: { message: '{0} help' },
+            skyux_tile_help_default: { message: 'Help' },
+            skyux_tile_settings: { message: '{0} settings' },
+            skyux_tile_settings_default: { message: 'Settings' },
+            skyux_tile_move: { message: 'Move {0}' },
+            skyux_tile_move_default: { message: 'Move' },
+            skyux_tile_move_instructions: {
+                message: "When focus is placed on a tile's move button, use the arrow keys to move it. The up and down keys change its position within a column. The left and right keys move it between columns.",
+            },
+            skyux_tile_moved_assistive_text: {
+                message: '{0} moved. Current column: {1} of {2}. Current position in column: {3} of {4}',
+            },
+        },
     };
     var SkyTilesResourcesProvider = /** @class */ (function () {
         function SkyTilesResourcesProvider() {
@@ -57,22 +70,26 @@
         }
         return SkyTilesResourcesModule;
     }());
-    SkyTilesResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTilesResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyTilesResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTilesResourcesModule, exports: [i3.SkyI18nModule] });
-    SkyTilesResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTilesResourcesModule, providers: [{
+    SkyTilesResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTilesResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyTilesResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTilesResourcesModule, exports: [i3.SkyI18nModule] });
+    SkyTilesResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTilesResourcesModule, providers: [
+            {
                 provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
                 useClass: SkyTilesResourcesProvider,
-                multi: true
-            }], imports: [i3.SkyI18nModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTilesResourcesModule, decorators: [{
+                multi: true,
+            },
+        ], imports: [i3.SkyI18nModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTilesResourcesModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         exports: [i3.SkyI18nModule],
-                        providers: [{
+                        providers: [
+                            {
                                 provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
                                 useClass: SkyTilesResourcesProvider,
-                                multi: true
-                            }]
+                                multi: true,
+                            },
+                        ],
                     }]
             }] });
 
@@ -409,7 +426,7 @@
              * Fires when the tile dashboard's initialization is complete.
              */
             this.dashboardInitialized = new i0.EventEmitter();
-            this.bagId = 'sky-tile-dashboard-bag-' + (++bagIdIndex);
+            this.bagId = 'sky-tile-dashboard-bag-' + ++bagIdIndex;
             this.initDragula();
         }
         /**
@@ -422,7 +439,9 @@
                 // the config used inside and vice versa.
                 this.defaultConfig = this.config = Object.assign({}, config);
                 this.settingsKey = settingsKey;
-                this.uiConfigService.getConfig(settingsKey, config).pipe(operators.take(1))
+                this.uiConfigService
+                    .getConfig(settingsKey, config)
+                    .pipe(operators.take(1))
                     .subscribe(function (value) {
                     if (value.persisted) {
                         _this.config.layout = value.layout;
@@ -579,7 +598,8 @@
             try {
                 for (var _b = __values(this.tileComponents), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var tileComponent = _c.value;
-                    if (tileComponent.location.nativeElement.getAttribute(ATTR_TILE_ID) === tileId) {
+                    if (tileComponent.location.nativeElement.getAttribute(ATTR_TILE_ID) ===
+                        tileId) {
                         return tileComponent;
                     }
                 }
@@ -607,8 +627,8 @@
          * @internal
          */
         SkyTileDashboardService.prototype.moveTileOnKeyDown = function (tileCmp, direction, tileDescription) {
-            var isSingleColumnMode = this.mediaQuery.current === i2.SkyMediaBreakpoints.xs
-                || this.mediaQuery.current === i2.SkyMediaBreakpoints.sm;
+            var isSingleColumnMode = this.mediaQuery.current === i2.SkyMediaBreakpoints.xs ||
+                this.mediaQuery.current === i2.SkyMediaBreakpoints.sm;
             var tileId = this.getTileId(tileCmp);
             var tile = this.findTile(tileId);
             var column;
@@ -620,20 +640,23 @@
                 column = this.findTileColumn(tileId);
                 colIndex = this.config.layout.multiColumn.findIndex(function (value) { return value === column; });
             }
-            if ((direction === 'left' || direction === 'right') && !isSingleColumnMode) {
+            if ((direction === 'left' || direction === 'right') &&
+                !isSingleColumnMode) {
                 var operator = direction === 'left' ? -1 : 1;
                 var 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(function (item) { return item !== tile; });
-                    this.moveTilesToColumn(this.columns.toArray()[colIndex + operator], [tile]);
+                    this.moveTilesToColumn(this.columns.toArray()[colIndex + operator], [
+                        tile,
+                    ]);
                     // Report the change in configuration
                     var reportConfig = this.config;
                     reportConfig.movedTile = {
                         tileDescription: tileDescription || /* istanbul ignore next */ tile.id,
                         column: colIndex + operator + 1,
-                        position: newColumn.tiles.length
+                        position: newColumn.tiles.length,
                     };
                     this.configChange.emit(reportConfig);
                 }
@@ -659,14 +682,15 @@
                         columnEl.appendChild(tileComponentInstance.location.nativeElement);
                     }
                     else {
-                        columnEl.insertBefore(tileComponentInstance.location.nativeElement, this.getTileComponent(column.tiles[curIndex + operator + 1].id).location.nativeElement);
+                        columnEl.insertBefore(tileComponentInstance.location.nativeElement, this.getTileComponent(column.tiles[curIndex + operator + 1].id)
+                            .location.nativeElement);
                     }
                     // Report the change in configuration
                     var reportConfig = this.config;
                     reportConfig.movedTile = {
                         tileDescription: tileDescription || /* istanbul ignore next */ tile.id,
                         column: isSingleColumnMode ? undefined : colIndex + 1,
-                        position: curIndex + operator + 1
+                        position: curIndex + operator + 1,
                     };
                     this.configChange.emit(reportConfig);
                 }
@@ -708,7 +732,8 @@
                 // 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(function (elem) { return elem.id !== layoutTile.id; });
+                    this.config.layout.singleColumn.tiles =
+                        this.config.layout.singleColumn.tiles.filter(function (elem) { return elem.id !== layoutTile.id; });
                 }
                 /*istanbul ignore else */
                 if (this.config.layout.multiColumn) {
@@ -730,8 +755,8 @@
         SkyTileDashboardService.prototype.loadTiles = function () {
             var e_7, _a, e_8, _b;
             var layout = this.config.layout;
-            if (this.mediaQuery.current === i2.SkyMediaBreakpoints.xs
-                || this.mediaQuery.current === i2.SkyMediaBreakpoints.sm) {
+            if (this.mediaQuery.current === i2.SkyMediaBreakpoints.xs ||
+                this.mediaQuery.current === i2.SkyMediaBreakpoints.sm) {
                 try {
                     for (var _c = __values(layout.singleColumn.tiles), _d = _c.next(); !_d.done; _d = _c.next()) {
                         var tile = _d.value;
@@ -774,7 +799,7 @@
                 var providers = tile.providers /* istanbul ignore next */ || [];
                 var injector = i0.Injector.create({
                     providers: providers,
-                    parent: column.injector
+                    parent: column.injector,
                 });
                 var factory = column.resolver.resolveComponentFactory(componentType);
                 var componentRef = column.content.createComponent(factory, undefined, injector);
@@ -822,25 +847,25 @@
                     tiles: this.config.tiles,
                     layout: {
                         singleColumn: this.getSingleColumnLayoutForUIState(),
-                        multiColumn: this.getMultiColumnLayoutForUIState()
-                    }
+                        multiColumn: this.getMultiColumnLayoutForUIState(),
+                    },
                 };
             }
             return this.config;
         };
         SkyTileDashboardService.prototype.getSingleColumnLayoutForUIState = function () {
-            if (this.mediaQuery.current === i2.SkyMediaBreakpoints.xs
-                || this.mediaQuery.current === i2.SkyMediaBreakpoints.sm) {
+            if (this.mediaQuery.current === i2.SkyMediaBreakpoints.xs ||
+                this.mediaQuery.current === i2.SkyMediaBreakpoints.sm) {
                 return {
-                    tiles: this.getTilesInEl(this.getColumnEl(this.singleColumn))
+                    tiles: this.getTilesInEl(this.getColumnEl(this.singleColumn)),
                 };
             }
             return this.config.layout.singleColumn;
         };
         SkyTileDashboardService.prototype.getMultiColumnLayoutForUIState = function () {
             var e_10, _a;
-            if (!(this.mediaQuery.current === i2.SkyMediaBreakpoints.xs
-                || this.mediaQuery.current === i2.SkyMediaBreakpoints.sm)) {
+            if (!(this.mediaQuery.current === i2.SkyMediaBreakpoints.xs ||
+                this.mediaQuery.current === i2.SkyMediaBreakpoints.sm)) {
                 var layoutColumns = [];
                 var columns = this.columns.toArray();
                 try {
@@ -848,7 +873,7 @@
                         var column = columns_1_1.value;
                         if (column !== this.singleColumn) {
                             var layoutColumn = {
-                                tiles: this.getTilesInEl(this.getColumnEl(column))
+                                tiles: this.getTilesInEl(this.getColumnEl(column)),
                             };
                             layoutColumns.push(layoutColumn);
                         }
@@ -897,7 +922,7 @@
                 moves: function (el, container, handle) {
                     var target = el.querySelector('.sky-tile-grab-handle');
                     return target.contains(handle);
-                }
+                },
             });
             this.dragulaService.drop.subscribe(function (value) {
                 var config = _this.getConfigForUIState();
@@ -965,11 +990,13 @@
             this.checkReadyAndLoadTiles();
         };
         SkyTileDashboardService.prototype.setUserConfig = function (config) {
-            this.uiConfigService.setConfig(this.settingsKey, {
+            this.uiConfigService
+                .setConfig(this.settingsKey, {
                 layout: this.config.layout,
                 persisted: true,
-                tileIds: this.defaultConfig.tiles.map(function (elem) { return elem.id; })
-            }).subscribe(function () { }, function (err) {
+                tileIds: this.defaultConfig.tiles.map(function (elem) { return elem.id; }),
+            })
+                .subscribe(function () { }, function (err) {
                 console.warn('Could not save tile dashboard settings.');
                 console.warn(err);
             });
@@ -995,7 +1022,10 @@
                                 smallest = item.tiles.length;
                             }
                         });
-                        multiColumn[locationToAdd].tiles.push({ id: elem.id, isCollapsed: false });
+                        multiColumn[locationToAdd].tiles.push({
+                            id: elem.id,
+                            isCollapsed: false,
+                        });
                     });
                 }
                 /*istanbul ignore else */
@@ -1042,9 +1072,9 @@
         };
         return SkyTileDashboardService;
     }());
-    SkyTileDashboardService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileDashboardService, deps: [{ token: i1__namespace.DragulaService }, { token: i2__namespace.SkyMediaQueryService }, { token: i2__namespace.SkyUIConfigService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyTileDashboardService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileDashboardService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileDashboardService, decorators: [{
+    SkyTileDashboardService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileDashboardService, deps: [{ token: i1__namespace.DragulaService }, { token: i2__namespace.SkyMediaQueryService }, { token: i2__namespace.SkyUIConfigService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyTileDashboardService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileDashboardService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileDashboardService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i1__namespace.DragulaService }, { type: i2__namespace.SkyMediaQueryService }, { type: i2__namespace.SkyUIConfigService }]; }, propDecorators: { dashboardInitialized: [{
                     type: i0.Output
@@ -1160,13 +1190,14 @@
             if (this.isInDashboardColumn) {
                 var 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 ? this.title.nativeElement.innerText :
-                        /* istanbul ignore next */
-                        undefined);
+                if (direction === 'up' ||
+                    direction === 'down' ||
+                    direction === 'left' ||
+                    direction === 'right') {
+                    this.dashboardService.moveTileOnKeyDown(this, direction, this.title
+                        ? this.title.nativeElement.innerText
+                        : /* istanbul ignore next */
+                            undefined);
                     this.focusHandle();
                 }
             }
@@ -1176,15 +1207,15 @@
         };
         return SkyTileComponent;
     }());
-    SkyTileComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyTileDashboardService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyTileComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: SkyTileComponent, selector: "sky-tile", inputs: { showSettings: "showSettings", showHelp: "showHelp", isCollapsed: "isCollapsed" }, outputs: { settingsClick: "settingsClick", isCollapsedChange: "isCollapsedChange", helpClick: "helpClick" }, viewQueries: [{ propertyName: "grabHandle", first: true, predicate: ["grabHandle"], descendants: true, read: i0.ElementRef }, { propertyName: "title", first: true, predicate: ["titleContainer"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, 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\n      class=\"sky-tile-header-content\"\n      (click)=\"titleClick()\"\n    >\n      <div\n        class=\"sky-tile-header-title\"\n        #titleContainer\n      >\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 *ngIf=\"hasHelp\"\n            class=\"sky-btn sky-tile-tools-control sky-tile-help\"\n            type=\"button\"\n            [attr.aria-label]=\"'skyux_tile_help' | skyLibResources\"\n            [skyThemeClass]=\"{\n              'sky-btn-icon-borderless' : 'modern'\n            }\"\n            (click)=\"helpButtonClicked();\"\n          >\n            <sky-icon\n              icon=\"question-circle\"\n            ></sky-icon>\n          </button>\n        </ng-container>\n        <sky-chevron\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 *ngIf=\"hasSettings\"\n          class=\"sky-btn sky-tile-settings\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_tile_settings' | skyLibResources\"\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'\"\n            icon=\"cog\"\n          ></sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\"\n            icon=\"cog-line\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n        <button *ngIf=\"isInDashboardColumn\"\n          class=\"sky-btn sky-tile-grab-handle\"\n          [attr.aria-label]=\"'skyux_tile_grab_handle' | skyLibResources\"\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'\"\n            icon=\"th\"\n          ></sky-icon>\n          <sky-icon *skyThemeIf=\"'modern'\"\n            icon=\"tile-drag\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </div>\n    </div>\n  </header>\n  <div class=\"sky-tile-content\" [@skyAnimationSlide]=\"isCollapsed ? 'up' : 'down'\">\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:-webkit-grab;cursor:-moz-grab;font-size:15px}.sky-tile-content{border-color:#e2e3e4;-o-border-image:none;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"], components: [{ type: i2__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i2__namespace$1.λ2, selector: "sky-chevron", inputs: ["direction", "disabled"], outputs: ["directionChange"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i4__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, animations: [animations.skyAnimationSlide] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileComponent, decorators: [{
+    SkyTileComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyTileDashboardService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyTileComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: i0.ElementRef }, { propertyName: "title", first: true, predicate: ["titleContainer"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, 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]=\"\n            dashboardService?.bagId + '-move-instructions'\n          \"\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"], components: [{ type: i2__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i2__namespace$1.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i4__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.λ2, selector: "[skyId]", exportAs: ["skyId"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe }, animations: [animations.skyAnimationSlide] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-tile',
-                        styleUrls: ['./tile.component.scss'],
-                        templateUrl: './tile.component.html',
-                        animations: [animations.skyAnimationSlide]
+                        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"],
+                        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]=\"\n            dashboardService?.bagId + '-move-instructions'\n          \"\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",
+                        animations: [animations.skyAnimationSlide],
                     }]
             }], ctorParameters: function () {
             return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: SkyTileDashboardService, decorators: [{
@@ -1194,6 +1225,8 @@
                     type: i0.Input
                 }], showHelp: [{
                     type: i0.Input
+                }], tileName: [{
+                    type: i0.Input
                 }], settingsClick: [{
                     type: i0.Output
                 }], isCollapsedChange: [{
@@ -1206,13 +1239,13 @@
                     type: i0.ViewChild,
                     args: ['grabHandle', {
                             read: i0.ElementRef,
-                            static: false
+                            static: false,
                         }]
                 }], title: [{
                     type: i0.ViewChild,
                     args: ['titleContainer', {
                             read: i0.ElementRef,
-                            static: false
+                            static: false,
                         }]
                 }] } });
 
@@ -1226,13 +1259,13 @@
         }
         return SkyTileSummaryComponent;
     }());
-    SkyTileSummaryComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileSummaryComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyTileSummaryComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: SkyTileSummaryComponent, selector: "sky-tile-summary", ngImport: i0__namespace, template: "<ng-content></ng-content>\n" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileSummaryComponent, decorators: [{
+    SkyTileSummaryComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileSummaryComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyTileSummaryComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTileSummaryComponent, selector: "sky-tile-summary", ngImport: i0__namespace, template: "<ng-content></ng-content>\n" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileSummaryComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-tile-summary',
-                        templateUrl: 'tile-summary.component.html'
+                        template: "<ng-content></ng-content>\n",
                     }]
             }] });
 
@@ -1244,14 +1277,14 @@
         }
         return SkyTileTitleComponent;
     }());
-    SkyTileTitleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileTitleComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyTileTitleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: SkyTileTitleComponent, selector: "sky-tile-title", ngImport: i0__namespace, template: "<h2\n  class=\"sky-tile-title\"\n  [skyThemeClass]=\"{\n    'sky-font-heading-2' : 'modern',\n    'sky-section-heading' : 'default'\n  }\"\n>\n  <ng-content></ng-content>\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"], directives: [{ type: i4__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileTitleComponent, decorators: [{
+    SkyTileTitleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileTitleComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyTileTitleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTileTitleComponent, selector: "sky-tile-title", ngImport: i0__namespace, template: "<h2\n  class=\"sky-tile-title\"\n  [skyThemeClass]=\"{\n    'sky-font-heading-2': 'modern',\n    'sky-section-heading': 'default'\n  }\"\n>\n  <ng-content></ng-content>\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"], directives: [{ type: i4__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileTitleComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-tile-title',
-                        templateUrl: './tile-title.component.html',
-                        styleUrls: ['./tile-title.component.scss']
+                        template: "<h2\n  class=\"sky-tile-title\"\n  [skyThemeClass]=\"{\n    'sky-font-heading-2': 'modern',\n    'sky-section-heading': 'default'\n  }\"\n>\n  <ng-content></ng-content>\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"],
                     }]
             }] });
 
@@ -1260,46 +1293,43 @@
         }
         return SkyTileModule;
     }());
-    SkyTileModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyTileModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileModule, declarations: [SkyTileComponent,
+    SkyTileModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyTileModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileModule, declarations: [SkyTileComponent,
             SkyTileSummaryComponent,
             SkyTileTitleComponent], imports: [i3$1.CommonModule,
             i2$1.SkyChevronModule,
+            i2.SkyIdModule,
             i3.SkyI18nModule,
             i2$1.SkyIconModule,
             i4.SkyThemeModule,
-            SkyTilesResourcesModule], exports: [SkyTileComponent,
-            SkyTileSummaryComponent,
-            SkyTileTitleComponent] });
-    SkyTileModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileModule, imports: [[
+            SkyTilesResourcesModule], exports: [SkyTileComponent, SkyTileSummaryComponent, SkyTileTitleComponent] });
+    SkyTileModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileModule, imports: [[
                 i3$1.CommonModule,
                 i2$1.SkyChevronModule,
+                i2.SkyIdModule,
                 i3.SkyI18nModule,
                 i2$1.SkyIconModule,
                 i4.SkyThemeModule,
-                SkyTilesResourcesModule
+                SkyTilesResourcesModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [
                             SkyTileComponent,
                             SkyTileSummaryComponent,
-                            SkyTileTitleComponent
+                            SkyTileTitleComponent,
                         ],
                         imports: [
                             i3$1.CommonModule,
                             i2$1.SkyChevronModule,
+                            i2.SkyIdModule,
                             i3.SkyI18nModule,
                             i2$1.SkyIconModule,
                             i4.SkyThemeModule,
-                            SkyTilesResourcesModule
+                            SkyTilesResourcesModule,
                         ],
-                        exports: [
-                            SkyTileComponent,
-                            SkyTileSummaryComponent,
-                            SkyTileTitleComponent
-                        ]
+                        exports: [SkyTileComponent, SkyTileSummaryComponent, SkyTileTitleComponent],
                     }]
             }] });
 
@@ -1311,14 +1341,14 @@
         }
         return SkyTileContentSectionComponent;
     }());
-    SkyTileContentSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileContentSectionComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyTileContentSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: SkyTileContentSectionComponent, selector: "sky-tile-content-section", ngImport: i0__namespace, template: "<div\n  class=\"sky-tile-content-section\"\n  [skyThemeClass]=\"{\n    'sky-padding-even-large' : 'default'\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host-context(.sky-theme-modern) .sky-tile-content-section{padding:15px 0}.sky-theme-modern .sky-tile-content-section{padding:15px 0}\n"], directives: [{ type: i4__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileContentSectionComponent, decorators: [{
+    SkyTileContentSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileContentSectionComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyTileContentSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTileContentSectionComponent, selector: "sky-tile-content-section", ngImport: i0__namespace, template: "<div\n  class=\"sky-tile-content-section\"\n  [skyThemeClass]=\"{\n    'sky-padding-even-large': 'default'\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host-context(.sky-theme-modern) .sky-tile-content-section{padding:15px 0}.sky-theme-modern .sky-tile-content-section{padding:15px 0}\n"], directives: [{ type: i4__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileContentSectionComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-tile-content-section',
-                        styleUrls: ['./tile-content-section.component.scss'],
-                        templateUrl: './tile-content-section.component.html'
+                        styles: [":host-context(.sky-theme-modern) .sky-tile-content-section{padding:15px 0}.sky-theme-modern .sky-tile-content-section{padding:15px 0}\n"],
+                        template: "<div\n  class=\"sky-tile-content-section\"\n  [skyThemeClass]=\"{\n    'sky-padding-even-large': 'default'\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n",
                     }]
             }] });
 
@@ -1330,14 +1360,14 @@
         }
         return SkyTileContentComponent;
     }());
-    SkyTileContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileContentComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyTileContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: SkyTileContentComponent, selector: "sky-tile-content", ngImport: i0__namespace, template: "<ng-content></ng-content>\n", styles: [":host ::ng-deep sky-tile-content-section:not(:last-child) .sky-tile-content-section{border-bottom:1px solid #e2e3e4}\n"] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileContentComponent, decorators: [{
+    SkyTileContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileContentComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyTileContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTileContentComponent, selector: "sky-tile-content", ngImport: i0__namespace, template: "<ng-content></ng-content>\n", styles: [":host ::ng-deep sky-tile-content-section:not(:last-child) .sky-tile-content-section{border-bottom:1px solid #e2e3e4}\n"] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileContentComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-tile-content',
-                        styleUrls: ['./tile-content.component.scss'],
-                        templateUrl: 'tile-content.component.html'
+                        styles: [":host ::ng-deep sky-tile-content-section:not(:last-child) .sky-tile-content-section{border-bottom:1px solid #e2e3e4}\n"],
+                        template: "<ng-content></ng-content>\n",
                     }]
             }] });
 
@@ -1346,30 +1376,15 @@
         }
         return SkyTileContentModule;
     }());
-    SkyTileContentModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileContentModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyTileContentModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileContentModule, declarations: [SkyTileContentComponent,
-            SkyTileContentSectionComponent], imports: [i3$1.CommonModule,
-            i4.SkyThemeModule], exports: [SkyTileContentComponent,
-            SkyTileContentSectionComponent] });
-    SkyTileContentModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileContentModule, imports: [[
-                i3$1.CommonModule,
-                i4.SkyThemeModule
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileContentModule, decorators: [{
+    SkyTileContentModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileContentModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyTileContentModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileContentModule, declarations: [SkyTileContentComponent, SkyTileContentSectionComponent], imports: [i3$1.CommonModule, i4.SkyThemeModule], exports: [SkyTileContentComponent, SkyTileContentSectionComponent] });
+    SkyTileContentModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileContentModule, imports: [[i3$1.CommonModule, i4.SkyThemeModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileContentModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [
-                            SkyTileContentComponent,
-                            SkyTileContentSectionComponent
-                        ],
-                        imports: [
-                            i3$1.CommonModule,
-                            i4.SkyThemeModule
-                        ],
-                        exports: [
-                            SkyTileContentComponent,
-                            SkyTileContentSectionComponent
-                        ]
+                        declarations: [SkyTileContentComponent, SkyTileContentSectionComponent],
+                        imports: [i3$1.CommonModule, i4.SkyThemeModule],
+                        exports: [SkyTileContentComponent, SkyTileContentSectionComponent],
                     }]
             }] });
 
@@ -1403,20 +1418,20 @@
         }
         return SkyTileDashboardColumnComponent;
     }());
-    SkyTileDashboardColumnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileDashboardColumnComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.Injector }, { token: SkyTileDashboardService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyTileDashboardColumnComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: SkyTileDashboardColumnComponent, selector: "sky-tile-dashboard-column", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: i0.ViewContainerRef }], ngImport: i0__namespace, 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"], directives: [{ type: i1__namespace.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel", "dragulaOptions"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileDashboardColumnComponent, decorators: [{
+    SkyTileDashboardColumnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileDashboardColumnComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.Injector }, { token: SkyTileDashboardService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyTileDashboardColumnComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTileDashboardColumnComponent, selector: "sky-tile-dashboard-column", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: i0.ViewContainerRef }], ngImport: i0__namespace, 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"], directives: [{ type: i1__namespace.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel", "dragulaOptions"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileDashboardColumnComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-tile-dashboard-column',
-                        styleUrls: ['./tile-dashboard-column.component.scss'],
-                        templateUrl: './tile-dashboard-column.component.html'
+                        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"],
+                        template: "<div class=\"sky-tile-dashboard-column\" [dragula]=\"bagId\">\n  <div #content></div>\n</div>\n",
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.Injector }, { type: SkyTileDashboardService }]; }, propDecorators: { content: [{
                     type: i0.ViewChild,
                     args: ['content', {
                             read: i0.ViewContainerRef,
-                            static: false
+                            static: false,
                         }]
                 }] } });
 
@@ -1440,6 +1455,7 @@
              * tiles to rearrange them.
              */
             this.configChange = new i0.EventEmitter();
+            this.moveInstructionsId = this.dashboardService.bagId + '-move-instructions';
             this.configSet = false;
             this.ngUnsubscribe = new rxjs.Subject();
             this.viewReady = false;
@@ -1455,9 +1471,7 @@
                     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
-                        .pipe(operators.take(1))
-                        .subscribe(function (message) {
+                    messageObservable.pipe(operators.take(1)).subscribe(function (message) {
                         _this.tileMovedReport = message;
                     });
                 }
@@ -1517,15 +1531,15 @@
         };
         return SkyTileDashboardComponent;
     }());
-    SkyTileDashboardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileDashboardComponent, deps: [{ token: SkyTileDashboardService }, { token: i2__namespace.SkyMediaQueryService }, { token: i3__namespace$1.SkyLibResourcesService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyTileDashboardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", 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__namespace, template: "<span\n  aria-live=\"assertive\"\n  class=\"sky-assistive-text\"\n>\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 class=\"sky-tile-dashboard-layout-single\" #singleColumn>\n</sky-tile-dashboard-column>\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"], components: [{ type: SkyTileDashboardColumnComponent, selector: "sky-tile-dashboard-column" }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileDashboardComponent, decorators: [{
+    SkyTileDashboardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileDashboardComponent, deps: [{ token: SkyTileDashboardService }, { token: i2__namespace.SkyMediaQueryService }, { token: i3__namespace$1.SkyLibResourcesService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyTileDashboardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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__namespace, 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"], components: [{ type: SkyTileDashboardColumnComponent, selector: "sky-tile-dashboard-column" }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "skyLibResources": i3__namespace$1.SkyLibResourcesPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileDashboardComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-tile-dashboard',
-                        styleUrls: ['./tile-dashboard.component.scss'],
-                        templateUrl: './tile-dashboard.component.html',
-                        providers: [SkyTileDashboardService]
+                        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"],
+                        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",
+                        providers: [SkyTileDashboardService],
                     }]
             }], ctorParameters: function () {
             return [{ type: SkyTileDashboardService }, { type: i2__namespace.SkyMediaQueryService }, { type: i3__namespace$1.SkyLibResourcesService, decorators: [{
@@ -1546,7 +1560,7 @@
                     type: i0.ViewChild,
                     args: ['singleColumn', {
                             read: SkyTileDashboardColumnComponent,
-                            static: false
+                            static: false,
                         }]
                 }] } });
 
@@ -1555,26 +1569,15 @@
         }
         return SkyTileDashboardColumnModule;
     }());
-    SkyTileDashboardColumnModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileDashboardColumnModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyTileDashboardColumnModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileDashboardColumnModule, declarations: [SkyTileDashboardColumnComponent], imports: [i3$1.CommonModule,
-            i1.DragulaModule], exports: [SkyTileDashboardColumnComponent] });
-    SkyTileDashboardColumnModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileDashboardColumnModule, imports: [[
-                i3$1.CommonModule,
-                i1.DragulaModule
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileDashboardColumnModule, decorators: [{
+    SkyTileDashboardColumnModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileDashboardColumnModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyTileDashboardColumnModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileDashboardColumnModule, declarations: [SkyTileDashboardColumnComponent], imports: [i3$1.CommonModule, i1.DragulaModule], exports: [SkyTileDashboardColumnComponent] });
+    SkyTileDashboardColumnModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileDashboardColumnModule, imports: [[i3$1.CommonModule, i1.DragulaModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileDashboardColumnModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [
-                            SkyTileDashboardColumnComponent
-                        ],
-                        imports: [
-                            i3$1.CommonModule,
-                            i1.DragulaModule
-                        ],
-                        exports: [
-                            SkyTileDashboardColumnComponent
-                        ]
+                        declarations: [SkyTileDashboardColumnComponent],
+                        imports: [i3$1.CommonModule, i1.DragulaModule],
+                        exports: [SkyTileDashboardColumnComponent],
                     }]
             }] });
 
@@ -1583,31 +1586,26 @@
         }
         return SkyTileDashboardModule;
     }());
-    SkyTileDashboardModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileDashboardModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyTileDashboardModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileDashboardModule, declarations: [SkyTileDashboardComponent], imports: [i3$1.CommonModule,
-            SkyTileDashboardColumnModule], exports: [SkyTileDashboardComponent] });
-    SkyTileDashboardModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileDashboardModule, providers: [
-            i1.DragulaService
-        ], imports: [[
+    SkyTileDashboardModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileDashboardModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyTileDashboardModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileDashboardModule, declarations: [SkyTileDashboardComponent], imports: [i3$1.CommonModule,
+            SkyTileDashboardColumnModule,
+            SkyTilesResourcesModule], exports: [SkyTileDashboardComponent] });
+    SkyTileDashboardModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileDashboardModule, providers: [i1.DragulaService], imports: [[
                 i3$1.CommonModule,
-                SkyTileDashboardColumnModule
+                SkyTileDashboardColumnModule,
+                SkyTilesResourcesModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTileDashboardModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTileDashboardModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [
-                            SkyTileDashboardComponent
-                        ],
-                        providers: [
-                            i1.DragulaService
-                        ],
+                        declarations: [SkyTileDashboardComponent],
+                        providers: [i1.DragulaService],
                         imports: [
                             i3$1.CommonModule,
-                            SkyTileDashboardColumnModule
+                            SkyTileDashboardColumnModule,
+                            SkyTilesResourcesModule,
                         ],
-                        exports: [
-                            SkyTileDashboardComponent
-                        ]
+                        exports: [SkyTileDashboardComponent],
                     }]
             }] });
 
@@ -1616,29 +1614,25 @@
         }
         return SkyTilesModule;
     }());
-    SkyTilesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTilesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyTilesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTilesModule, imports: [i3$1.CommonModule], exports: [SkyTileContentModule,
+    SkyTilesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTilesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyTilesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTilesModule, imports: [i3$1.CommonModule], exports: [SkyTileContentModule,
             SkyTileModule,
             SkyTileDashboardColumnModule,
             SkyTileDashboardModule] });
-    SkyTilesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTilesModule, imports: [[
-                i3$1.CommonModule
-            ], SkyTileContentModule,
+    SkyTilesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTilesModule, imports: [[i3$1.CommonModule], SkyTileContentModule,
             SkyTileModule,
             SkyTileDashboardColumnModule,
             SkyTileDashboardModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: SkyTilesModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTilesModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [
-                            i3$1.CommonModule
-                        ],
+                        imports: [i3$1.CommonModule],
                         exports: [
                             SkyTileContentModule,
                             SkyTileModule,
                             SkyTileDashboardColumnModule,
-                            SkyTileDashboardModule
-                        ]
+                            SkyTileDashboardModule,
+                        ],
                     }]
             }] });
 
@@ -1652,15 +1646,15 @@
     exports.SkyTileDashboardService = SkyTileDashboardService;
     exports.SkyTileModule = SkyTileModule;
     exports.SkyTilesModule = SkyTilesModule;
-    exports.λ1 = SkyTileComponent;
-    exports.λ2 = SkyTileSummaryComponent;
-    exports.λ3 = SkyTileTitleComponent;
-    exports.λ4 = SkyTileContentSectionComponent;
-    exports.λ5 = SkyTileContentComponent;
-    exports.λ6 = SkyTileDashboardColumnComponent;
-    exports.λ7 = SkyTileDashboardComponent;
+    exports["λ1"] = SkyTileComponent;
+    exports["λ2"] = SkyTileSummaryComponent;
+    exports["λ3"] = SkyTileTitleComponent;
+    exports["λ4"] = SkyTileContentSectionComponent;
+    exports["λ5"] = SkyTileContentComponent;
+    exports["λ6"] = SkyTileDashboardColumnComponent;
+    exports["λ7"] = SkyTileDashboardComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=skyux-tiles.umd.js.map