@skyux/tiles 5.0.0-beta.1 → 5.0.2

package/fesm2015/skyux-tiles.js

@@ -1,13 +1,20 @@
-import { NgModule, EventEmitter, Injector, Injectable, Output, Component, ElementRef, ChangeDetectorRef, Optional, Input, ViewChild, ComponentFactoryResolver, ViewContainerRef, ViewChildren } from '@angular/core';
+import * as i0 from '@angular/core';
+import { NgModule, EventEmitter, Injector, Injectable, Output, ElementRef, Component, Optional, Input, ViewChild, ViewContainerRef, ViewChildren } from '@angular/core';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyLibResourcesService } from '@skyux/i18n';
+import * as i3$1 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import * as i2$1 from '@skyux/indicators';
 import { SkyChevronModule, SkyIconModule } from '@skyux/indicators';
+import * as i4 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
 import { skyAnimationSlide } from '@skyux/animations';
 import { Subject } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
-import { DragulaService, DragulaModule } from 'ng2-dragula';
-import { SkyMediaBreakpoints, SkyMediaQueryService, SkyUIConfigService } from '@skyux/core';
+import * as i2 from '@skyux/core';
+import { SkyMediaBreakpoints, SkyIdModule } from '@skyux/core';
+import * as i1 from 'ng2-dragula';
+import { DragulaModule, DragulaService } from 'ng2-dragula';
 
 /**
  * NOTICE: DO NOT MODIFY THIS FILE!
@@ -16,7 +23,22 @@ import { SkyMediaBreakpoints, SkyMediaQueryService, SkyUIConfigService } from '@
  * To update this file, simply rerun the command.
  */
 const 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}',
+        },
+    },
 };
 class SkyTilesResourcesProvider {
     getString(localeInfo, name) {
@@ -28,16 +50,28 @@ class SkyTilesResourcesProvider {
  */
 class SkyTilesResourcesModule {
 }
-SkyTilesResourcesModule.decorators = [
-    { type: NgModule, args: [{
-                exports: [SkyI18nModule],
-                providers: [{
-                        provide: SKY_LIB_RESOURCES_PROVIDERS,
-                        useClass: SkyTilesResourcesProvider,
-                        multi: true
-                    }]
-            },] }
-];
+SkyTilesResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTilesResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTilesResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTilesResourcesModule, exports: [SkyI18nModule] });
+SkyTilesResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTilesResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyTilesResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTilesResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyTilesResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
 
 const ATTR_TILE_ID = '_sky-tile-dashboard-tile-id';
 let bagIdIndex = 0;
@@ -54,7 +88,7 @@ class SkyTileDashboardService {
          * Fires when the tile dashboard's initialization is complete.
          */
         this.dashboardInitialized = new EventEmitter();
-        this.bagId = 'sky-tile-dashboard-bag-' + (++bagIdIndex);
+        this.bagId = 'sky-tile-dashboard-bag-' + ++bagIdIndex;
         this.initDragula();
     }
     /**
@@ -66,7 +100,9 @@ class SkyTileDashboardService {
             // the config used inside and vice versa.
             this.defaultConfig = this.config = Object.assign({}, config);
             this.settingsKey = settingsKey;
-            this.uiConfigService.getConfig(settingsKey, config).pipe(take(1))
+            this.uiConfigService
+                .getConfig(settingsKey, config)
+                .pipe(take(1))
                 .subscribe((value) => {
                 if (value.persisted) {
                     this.config.layout = value.layout;
@@ -178,7 +214,8 @@ class SkyTileDashboardService {
      */
     getTileComponent(tileId) {
         for (let tileComponent of this.tileComponents) {
-            if (tileComponent.location.nativeElement.getAttribute(ATTR_TILE_ID) === tileId) {
+            if (tileComponent.location.nativeElement.getAttribute(ATTR_TILE_ID) ===
+                tileId) {
                 return tileComponent;
             }
         }
@@ -198,8 +235,8 @@ class SkyTileDashboardService {
      * @internal
      */
     moveTileOnKeyDown(tileCmp, direction, tileDescription) {
-        const isSingleColumnMode = this.mediaQuery.current === SkyMediaBreakpoints.xs
-            || this.mediaQuery.current === SkyMediaBreakpoints.sm;
+        const isSingleColumnMode = this.mediaQuery.current === SkyMediaBreakpoints.xs ||
+            this.mediaQuery.current === SkyMediaBreakpoints.sm;
         let tileId = this.getTileId(tileCmp);
         let tile = this.findTile(tileId);
         let column;
@@ -211,20 +248,23 @@ class SkyTileDashboardService {
             column = this.findTileColumn(tileId);
             colIndex = this.config.layout.multiColumn.findIndex((value) => value === column);
         }
-        if ((direction === 'left' || direction === 'right') && !isSingleColumnMode) {
+        if ((direction === 'left' || direction === 'right') &&
+            !isSingleColumnMode) {
             let operator = direction === 'left' ? -1 : 1;
             let newColumn = this.config.layout.multiColumn[colIndex + operator];
             if (newColumn) {
                 // Move the tile to the end of the new column
                 newColumn.tiles.push(tile);
-                column.tiles = column.tiles.filter(item => item !== tile);
-                this.moveTilesToColumn(this.columns.toArray()[colIndex + operator], [tile]);
+                column.tiles = column.tiles.filter((item) => item !== tile);
+                this.moveTilesToColumn(this.columns.toArray()[colIndex + operator], [
+                    tile,
+                ]);
                 // Report the change in configuration
                 let 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);
             }
@@ -250,14 +290,15 @@ class SkyTileDashboardService {
                     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
                 let 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);
             }
@@ -288,12 +329,13 @@ class SkyTileDashboardService {
             // If the layout tile was not found in the list of tiles, it was removed since last the user updated settings
             /*istanbul ignore else */
             if (this.config.layout.singleColumn) {
-                this.config.layout.singleColumn.tiles = this.config.layout.singleColumn.tiles.filter(elem => elem.id !== layoutTile.id);
+                this.config.layout.singleColumn.tiles =
+                    this.config.layout.singleColumn.tiles.filter((elem) => elem.id !== layoutTile.id);
             }
             /*istanbul ignore else */
             if (this.config.layout.multiColumn) {
-                this.config.layout.multiColumn.forEach(elem => {
-                    elem.tiles = elem.tiles.filter(res => res.id !== layoutTile.id);
+                this.config.layout.multiColumn.forEach((elem) => {
+                    elem.tiles = elem.tiles.filter((res) => res.id !== layoutTile.id);
                 });
             }
         }
@@ -309,8 +351,8 @@ class SkyTileDashboardService {
     }
     loadTiles() {
         let layout = this.config.layout;
-        if (this.mediaQuery.current === SkyMediaBreakpoints.xs
-            || this.mediaQuery.current === SkyMediaBreakpoints.sm) {
+        if (this.mediaQuery.current === SkyMediaBreakpoints.xs ||
+            this.mediaQuery.current === SkyMediaBreakpoints.sm) {
             for (let tile of layout.singleColumn.tiles) {
                 this.loadTileIntoColumn(this.singleColumn, tile);
             }
@@ -333,7 +375,7 @@ class SkyTileDashboardService {
             let providers = tile.providers /* istanbul ignore next */ || [];
             const injector = Injector.create({
                 providers,
-                parent: column.injector
+                parent: column.injector,
             });
             const factory = column.resolver.resolveComponentFactory(componentType);
             const componentRef = column.content.createComponent(factory, undefined, injector);
@@ -370,30 +412,30 @@ class SkyTileDashboardService {
                 tiles: this.config.tiles,
                 layout: {
                     singleColumn: this.getSingleColumnLayoutForUIState(),
-                    multiColumn: this.getMultiColumnLayoutForUIState()
-                }
+                    multiColumn: this.getMultiColumnLayoutForUIState(),
+                },
             };
         }
         return this.config;
     }
     getSingleColumnLayoutForUIState() {
-        if (this.mediaQuery.current === SkyMediaBreakpoints.xs
-            || this.mediaQuery.current === SkyMediaBreakpoints.sm) {
+        if (this.mediaQuery.current === SkyMediaBreakpoints.xs ||
+            this.mediaQuery.current === SkyMediaBreakpoints.sm) {
             return {
-                tiles: this.getTilesInEl(this.getColumnEl(this.singleColumn))
+                tiles: this.getTilesInEl(this.getColumnEl(this.singleColumn)),
             };
         }
         return this.config.layout.singleColumn;
     }
     getMultiColumnLayoutForUIState() {
-        if (!(this.mediaQuery.current === SkyMediaBreakpoints.xs
-            || this.mediaQuery.current === SkyMediaBreakpoints.sm)) {
+        if (!(this.mediaQuery.current === SkyMediaBreakpoints.xs ||
+            this.mediaQuery.current === SkyMediaBreakpoints.sm)) {
             let layoutColumns = [];
             let columns = this.columns.toArray();
             for (let column of columns) {
                 if (column !== this.singleColumn) {
                     let layoutColumn = {
-                        tiles: this.getTilesInEl(this.getColumnEl(column))
+                        tiles: this.getTilesInEl(this.getColumnEl(column)),
                     };
                     layoutColumns.push(layoutColumn);
                 }
@@ -432,7 +474,7 @@ class SkyTileDashboardService {
             moves: (el, container, handle) => {
                 const target = el.querySelector('.sky-tile-grab-handle');
                 return target.contains(handle);
-            }
+            },
         });
         this.dragulaService.drop.subscribe((value) => {
             let config = this.getConfigForUIState();
@@ -467,7 +509,7 @@ class SkyTileDashboardService {
     findTileColumn(tileId) {
         /*istanbul ignore else */
         if (this.config && this.config.layout.multiColumn) {
-            return this.config.layout.multiColumn.find(col => col.tiles && !!col.tiles.find(tile => tile.id === tileId));
+            return this.config.layout.multiColumn.find((col) => col.tiles && !!col.tiles.find((tile) => tile.id === tileId));
         }
         /*istanbul ignore next */
         return undefined;
@@ -479,18 +521,20 @@ class SkyTileDashboardService {
         this.checkReadyAndLoadTiles();
     }
     setUserConfig(config) {
-        this.uiConfigService.setConfig(this.settingsKey, {
+        this.uiConfigService
+            .setConfig(this.settingsKey, {
             layout: this.config.layout,
             persisted: true,
-            tileIds: this.defaultConfig.tiles.map(elem => elem.id)
-        }).subscribe(() => { }, (err) => {
+            tileIds: this.defaultConfig.tiles.map((elem) => elem.id),
+        })
+            .subscribe(() => { }, (err) => {
             console.warn('Could not save tile dashboard settings.');
             console.warn(err);
         });
     }
     checkForNewTiles(oldUserTiles) {
         // Get a list of tiles that are in the config's default list but not in the user's settings
-        let newTiles = this.config.tiles.filter(elem => {
+        let newTiles = this.config.tiles.filter((elem) => {
             return oldUserTiles.indexOf(elem.id) === -1;
         });
         const { multiColumn, singleColumn } = this.config.layout;
@@ -499,7 +543,7 @@ class SkyTileDashboardService {
         if (newTiles.length > 0) {
             /*istanbul ignore else */
             if (multiColumn) {
-                newTiles.forEach(elem => {
+                newTiles.forEach((elem) => {
                     let locationToAdd = 0;
                     let smallest = multiColumn[0].tiles.length;
                     multiColumn.forEach((item, index) => {
@@ -508,12 +552,15 @@ class SkyTileDashboardService {
                             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 */
             if (singleColumn) {
-                newTiles.forEach(elem => {
+                newTiles.forEach((elem) => {
                     singleColumn.tiles.push({ id: elem.id, isCollapsed: false });
                 });
             }
@@ -534,17 +581,13 @@ class SkyTileDashboardService {
         }
     }
 }
-SkyTileDashboardService.decorators = [
-    { type: Injectable }
-];
-SkyTileDashboardService.ctorParameters = () => [
-    { type: DragulaService },
-    { type: SkyMediaQueryService },
-    { type: SkyUIConfigService }
-];
-SkyTileDashboardService.propDecorators = {
-    dashboardInitialized: [{ type: Output }]
-};
+SkyTileDashboardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileDashboardService, deps: [{ token: i1.DragulaService }, { token: i2.SkyMediaQueryService }, { token: i2.SkyUIConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTileDashboardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileDashboardService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileDashboardService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.DragulaService }, { type: i2.SkyMediaQueryService }, { type: i2.SkyUIConfigService }]; }, propDecorators: { dashboardInitialized: [{
+                type: Output
+            }] } });
 
 /**
  * Provides a common look-and-feel for tab content.
@@ -643,13 +686,14 @@ class SkyTileComponent {
         if (this.isInDashboardColumn) {
             let 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();
             }
         }
@@ -658,35 +702,45 @@ class SkyTileComponent {
         this.grabHandle.nativeElement.focus();
     }
 }
-SkyTileComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sky-tile',
-                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",
-                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:-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}.sky-theme-modern .sky-tile-header,.sky-theme-modern .sky-tile-content,:host-context(.sky-theme-modern) .sky-tile-header,:host-context(.sky-theme-modern) .sky-tile-content{border:none}.sky-theme-modern .sky-tile-header-column-tools,:host-context(.sky-theme-modern) .sky-tile-header-column-tools{align-items:flex-start}.sky-theme-modern .sky-tile-tools,:host-context(.sky-theme-modern) .sky-tile-tools{padding:0}.sky-theme-modern .sky-tile-tools-control,:host-context(.sky-theme-modern) .sky-tile-tools-control{font-size:18px;color:#686c73}.sky-theme-modern .sky-tile-grab-handle,:host-context(.sky-theme-modern) .sky-tile-grab-handle{font-size:16px}.sky-theme-modern .sky-tile-content ::ng-deep .sky-tile-content-section,:host-context(.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,:host-context(.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,: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}.sky-theme-modern :host .sky-tile,:host-context(.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,: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){.sky-theme-modern :host .sky-tile,:host-context(.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,: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}\n"]
-            },] }
-];
-SkyTileComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ChangeDetectorRef },
-    { type: SkyTileDashboardService, decorators: [{ type: Optional }] }
-];
-SkyTileComponent.propDecorators = {
-    showSettings: [{ type: Input }],
-    showHelp: [{ type: Input }],
-    settingsClick: [{ type: Output }],
-    isCollapsedChange: [{ type: Output }],
-    helpClick: [{ type: Output }],
-    isCollapsed: [{ type: Input }],
-    grabHandle: [{ type: ViewChild, args: ['grabHandle', {
-                    read: ElementRef,
-                    static: false
-                },] }],
-    title: [{ type: ViewChild, args: ['titleContainer', {
-                    read: ElementRef,
-                    static: false
-                },] }]
-};
+SkyTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: SkyTileDashboardService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyTileComponent.ɵcmp = i0.ɵɵ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: ElementRef }, { propertyName: "title", first: true, predicate: ["titleContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<section\n  class=\"sky-tile\"\n  [ngClass]=\"{\n    'sky-tile-collapsed': isCollapsed\n  }\"\n  [skyThemeClass]=\"{\n    'sky-box sky-elevation-1-bordered sky-padding-even-xl': 'modern'\n  }\"\n>\n  <header class=\"sky-tile-header\">\n    <div class=\"sky-tile-header-content\" (click)=\"titleClick()\">\n      <div class=\"sky-tile-header-title\" #titleContainer>\n        <ng-content select=\"sky-tile-title\"></ng-content>\n      </div>\n      <div\n        class=\"sky-tile-summary\"\n        [skyThemeClass]=\"{\n          'sky-font-display-3': 'modern',\n          'sky-headline': 'default'\n        }\"\n      >\n        <ng-content select=\"sky-tile-summary\"></ng-content>\n      </div>\n    </div>\n    <div class=\"sky-tile-header-column-tools\">\n      <div class=\"sky-tile-tools\">\n        <ng-container *skyThemeIf=\"'default'\">\n          <button\n            *ngIf=\"hasHelp\"\n            class=\"sky-btn sky-tile-tools-control sky-tile-help\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              tileName\n                ? ('skyux_tile_help' | skyLibResources: tileName)\n                : ('skyux_tile_help_default' | skyLibResources)\n            \"\n            [skyThemeClass]=\"{\n              'sky-btn-icon-borderless': 'modern'\n            }\"\n            (click)=\"helpButtonClicked()\"\n          >\n            <sky-icon icon=\"question-circle\"></sky-icon>\n          </button>\n        </ng-container>\n        <sky-chevron\n          [ariaControls]=\"tileContent.id\"\n          [ariaLabel]=\"\n            tileName\n              ? ('skyux_tile_expand' | skyLibResources: tileName)\n              : ('skyux_tile_expand_default' | skyLibResources)\n          \"\n          [direction]=\"isCollapsed ? 'down' : 'up'\"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-margin-inline-default': 'modern'\n          }\"\n          (directionChange)=\"chevronDirectionChange($event)\"\n        >\n        </sky-chevron>\n        <button\n          *ngIf=\"hasSettings\"\n          class=\"sky-btn sky-tile-settings\"\n          type=\"button\"\n          [attr.aria-label]=\"\n            tileName\n              ? ('skyux_tile_settings' | skyLibResources: tileName)\n              : ('skyux_tile_settings_default' | skyLibResources)\n          \"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-btn-icon-borderless sky-margin-inline-default': 'modern'\n          }\"\n          (click)=\"settingsButtonClicked()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"cog\"></sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"cog-line\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n        <button\n          *ngIf=\"isInDashboardColumn\"\n          class=\"sky-btn sky-tile-grab-handle\"\n          [attr.aria-label]=\"\n            tileName\n              ? ('skyux_tile_move' | skyLibResources: tileName)\n              : ('skyux_tile_move_default' | skyLibResources)\n          \"\n          [attr.aria-describedby]=\"\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$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i2$1.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i4.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.λ2, selector: "[skyId]", exportAs: ["skyId"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe }, animations: [skyAnimationSlide] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-tile',
+                    styleUrls: ['./tile.component.scss'],
+                    templateUrl: './tile.component.html',
+                    animations: [skyAnimationSlide],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: SkyTileDashboardService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { showSettings: [{
+                type: Input
+            }], showHelp: [{
+                type: Input
+            }], tileName: [{
+                type: Input
+            }], settingsClick: [{
+                type: Output
+            }], isCollapsedChange: [{
+                type: Output
+            }], helpClick: [{
+                type: Output
+            }], isCollapsed: [{
+                type: Input
+            }], grabHandle: [{
+                type: ViewChild,
+                args: ['grabHandle', {
+                        read: ElementRef,
+                        static: false,
+                    }]
+            }], title: [{
+                type: ViewChild,
+                args: ['titleContainer', {
+                        read: ElementRef,
+                        static: false,
+                    }]
+            }] } });
 
 /**
  * Specifies content to display in the tile's summary.
@@ -695,95 +749,119 @@ SkyTileComponent.propDecorators = {
 /* Code coverage having problems with no statements in classes */
 class SkyTileSummaryComponent {
 }
-SkyTileSummaryComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sky-tile-summary',
-                template: "<ng-content></ng-content>\n"
-            },] }
-];
+SkyTileSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyTileSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTileSummaryComponent, selector: "sky-tile-summary", ngImport: i0, template: "<ng-content></ng-content>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileSummaryComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-tile-summary',
+                    templateUrl: 'tile-summary.component.html',
+                }]
+        }] });
 
 /**
  * Specifies content to display in the tile's title.
  */
 class SkyTileTitleComponent {
 }
-SkyTileTitleComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sky-tile-title',
-                template: "<h2\n  class=\"sky-tile-title\"\n  [skyThemeClass]=\"{\n    'sky-font-heading-2' : 'modern',\n    'sky-section-heading' : 'default'\n  }\"\n>\n  <ng-content></ng-content>\n</h2>\n",
-                styles: [".sky-tile-title{margin:0;padding:10px 15px}.sky-theme-modern .sky-tile-title,:host-context(.sky-theme-modern) .sky-tile-title{margin:0 30px 0 0;padding:0}\n"]
-            },] }
-];
+SkyTileTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyTileTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTileTitleComponent, selector: "sky-tile-title", ngImport: i0, 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.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-tile-title',
+                    templateUrl: './tile-title.component.html',
+                    styleUrls: ['./tile-title.component.scss'],
+                }]
+        }] });
 
 class SkyTileModule {
 }
-SkyTileModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SkyTileComponent,
-                    SkyTileSummaryComponent,
-                    SkyTileTitleComponent
-                ],
-                imports: [
-                    CommonModule,
-                    SkyChevronModule,
-                    SkyI18nModule,
-                    SkyIconModule,
-                    SkyThemeModule,
-                    SkyTilesResourcesModule
-                ],
-                exports: [
-                    SkyTileComponent,
-                    SkyTileSummaryComponent,
-                    SkyTileTitleComponent
-                ]
-            },] }
-];
+SkyTileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileModule, declarations: [SkyTileComponent,
+        SkyTileSummaryComponent,
+        SkyTileTitleComponent], imports: [CommonModule,
+        SkyChevronModule,
+        SkyIdModule,
+        SkyI18nModule,
+        SkyIconModule,
+        SkyThemeModule,
+        SkyTilesResourcesModule], exports: [SkyTileComponent, SkyTileSummaryComponent, SkyTileTitleComponent] });
+SkyTileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileModule, imports: [[
+            CommonModule,
+            SkyChevronModule,
+            SkyIdModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyThemeModule,
+            SkyTilesResourcesModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyTileComponent,
+                        SkyTileSummaryComponent,
+                        SkyTileTitleComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyChevronModule,
+                        SkyIdModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyThemeModule,
+                        SkyTilesResourcesModule,
+                    ],
+                    exports: [SkyTileComponent, SkyTileSummaryComponent, SkyTileTitleComponent],
+                }]
+        }] });
 
 /**
  * Specifies content to display inside a padded section of a SkyTileContentComponent.
  */
 class SkyTileContentSectionComponent {
 }
-SkyTileContentSectionComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sky-tile-content-section',
-                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: [".sky-theme-modern .sky-tile-content-section,:host-context(.sky-theme-modern) .sky-tile-content-section{padding:15px 0}\n"]
-            },] }
-];
+SkyTileContentSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileContentSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyTileContentSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTileContentSectionComponent, selector: "sky-tile-content-section", ngImport: i0, 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.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileContentSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-tile-content-section',
+                    styleUrls: ['./tile-content-section.component.scss'],
+                    templateUrl: './tile-content-section.component.html',
+                }]
+        }] });
 
 /**
  * Specifies content to display in the tile's body.
  */
 class SkyTileContentComponent {
 }
-SkyTileContentComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sky-tile-content',
-                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"]
-            },] }
-];
+SkyTileContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyTileContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTileContentComponent, selector: "sky-tile-content", ngImport: i0, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-tile-content',
+                    styleUrls: ['./tile-content.component.scss'],
+                    templateUrl: 'tile-content.component.html',
+                }]
+        }] });
 
 class SkyTileContentModule {
 }
-SkyTileContentModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SkyTileContentComponent,
-                    SkyTileContentSectionComponent
-                ],
-                imports: [
-                    CommonModule,
-                    SkyThemeModule
-                ],
-                exports: [
-                    SkyTileContentComponent,
-                    SkyTileContentSectionComponent
-                ]
-            },] }
-];
+SkyTileContentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTileContentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileContentModule, declarations: [SkyTileContentComponent, SkyTileContentSectionComponent], imports: [CommonModule, SkyThemeModule], exports: [SkyTileContentComponent, SkyTileContentSectionComponent] });
+SkyTileContentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileContentModule, imports: [[CommonModule, SkyThemeModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileContentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyTileContentComponent, SkyTileContentSectionComponent],
+                    imports: [CommonModule, SkyThemeModule],
+                    exports: [SkyTileContentComponent, SkyTileContentSectionComponent],
+                }]
+        }] });
 
 /**
  * Specifies the type of message to send to the tile dashboard component.
@@ -814,24 +892,22 @@ class SkyTileDashboardColumnComponent {
         this.bagId = this.dashboardService.bagId;
     }
 }
-SkyTileDashboardColumnComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sky-tile-dashboard-column',
-                template: "<div class=\"sky-tile-dashboard-column\" [dragula]=\"bagId\">\n  <div #content></div>\n</div>\n",
-                styles: [":host{display:flex;flex-grow:1;overflow:hidden}:host{padding:0}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0}@media (min-width: 768px){:host{padding:0 10px}}:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0 10px}.sky-tile-dashboard-column{min-height:100px;width:100%}@media (min-width: 768px){.sky-theme-modern :host,:host-context(.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),: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}\n"]
-            },] }
-];
-SkyTileDashboardColumnComponent.ctorParameters = () => [
-    { type: ComponentFactoryResolver },
-    { type: Injector },
-    { type: SkyTileDashboardService }
-];
-SkyTileDashboardColumnComponent.propDecorators = {
-    content: [{ type: ViewChild, args: ['content', {
-                    read: ViewContainerRef,
-                    static: false
-                },] }]
-};
+SkyTileDashboardColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileDashboardColumnComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: SkyTileDashboardService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTileDashboardColumnComponent.ɵcmp = i0.ɵɵ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: ViewContainerRef }], ngImport: i0, template: "<div class=\"sky-tile-dashboard-column\" [dragula]=\"bagId\">\n  <div #content></div>\n</div>\n", styles: [":host{display:flex;flex-grow:1;overflow:hidden}:host{padding:0}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0}@media (min-width: 768px){:host{padding:0 10px}}:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0 10px}.sky-tile-dashboard-column{min-height:100px;width:100%}@media (min-width: 768px){:host-context(.sky-theme-modern) :host{padding:0 15px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg){padding:0 15px}@media (min-width: 768px){.sky-theme-modern :host{padding:0 15px}}.sky-theme-modern :host-context(.sky-responsive-container-sm),.sky-theme-modern :host-context(.sky-responsive-container-md),.sky-theme-modern :host-context(.sky-responsive-container-lg){padding:0 15px}\n"], directives: [{ type: i1.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel", "dragulaOptions"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileDashboardColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-tile-dashboard-column',
+                    styleUrls: ['./tile-dashboard-column.component.scss'],
+                    templateUrl: './tile-dashboard-column.component.html',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: SkyTileDashboardService }]; }, propDecorators: { content: [{
+                type: ViewChild,
+                args: ['content', {
+                        read: ViewContainerRef,
+                        static: false,
+                    }]
+            }] } });
 
 /**
  * Specifies a container to group multiple tiles.
@@ -852,6 +928,7 @@ class SkyTileDashboardComponent {
          * tiles to rearrange them.
          */
         this.configChange = new EventEmitter();
+        this.moveInstructionsId = this.dashboardService.bagId + '-move-instructions';
         this.configSet = false;
         this.ngUnsubscribe = new Subject();
         this.viewReady = false;
@@ -867,9 +944,7 @@ class SkyTileDashboardComponent {
                 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(take(1))
-                    .subscribe((message) => {
+                messageObservable.pipe(take(1)).subscribe((message) => {
                     this.tileMovedReport = message;
                 });
             }
@@ -922,87 +997,103 @@ class SkyTileDashboardComponent {
         }
     }
 }
-SkyTileDashboardComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'sky-tile-dashboard',
-                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",
-                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){.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,: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}}.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,: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}\n"]
-            },] }
-];
-SkyTileDashboardComponent.ctorParameters = () => [
-    { type: SkyTileDashboardService },
-    { type: SkyMediaQueryService },
-    { type: SkyLibResourcesService, decorators: [{ type: Optional }] }
-];
-SkyTileDashboardComponent.propDecorators = {
-    config: [{ type: Input }],
-    messageStream: [{ type: Input }],
-    settingsKey: [{ type: Input }],
-    configChange: [{ type: Output }],
-    columns: [{ type: ViewChildren, args: [SkyTileDashboardColumnComponent,] }],
-    singleColumn: [{ type: ViewChild, args: ['singleColumn', {
-                    read: SkyTileDashboardColumnComponent,
-                    static: false
-                },] }]
-};
+SkyTileDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileDashboardComponent, deps: [{ token: SkyTileDashboardService }, { token: i2.SkyMediaQueryService }, { token: i3$1.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyTileDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "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, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "skyLibResources": i3$1.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileDashboardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-tile-dashboard',
+                    styleUrls: ['./tile-dashboard.component.scss'],
+                    templateUrl: './tile-dashboard.component.html',
+                    providers: [SkyTileDashboardService],
+                }]
+        }], ctorParameters: function () { return [{ type: SkyTileDashboardService }, { type: i2.SkyMediaQueryService }, { type: i3$1.SkyLibResourcesService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { config: [{
+                type: Input
+            }], messageStream: [{
+                type: Input
+            }], settingsKey: [{
+                type: Input
+            }], configChange: [{
+                type: Output
+            }], columns: [{
+                type: ViewChildren,
+                args: [SkyTileDashboardColumnComponent]
+            }], singleColumn: [{
+                type: ViewChild,
+                args: ['singleColumn', {
+                        read: SkyTileDashboardColumnComponent,
+                        static: false,
+                    }]
+            }] } });
 
 class SkyTileDashboardColumnModule {
 }
-SkyTileDashboardColumnModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SkyTileDashboardColumnComponent
-                ],
-                imports: [
-                    CommonModule,
-                    DragulaModule
-                ],
-                exports: [
-                    SkyTileDashboardColumnComponent
-                ]
-            },] }
-];
+SkyTileDashboardColumnModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileDashboardColumnModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTileDashboardColumnModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileDashboardColumnModule, declarations: [SkyTileDashboardColumnComponent], imports: [CommonModule, DragulaModule], exports: [SkyTileDashboardColumnComponent] });
+SkyTileDashboardColumnModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileDashboardColumnModule, imports: [[CommonModule, DragulaModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileDashboardColumnModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyTileDashboardColumnComponent],
+                    imports: [CommonModule, DragulaModule],
+                    exports: [SkyTileDashboardColumnComponent],
+                }]
+        }] });
 
 class SkyTileDashboardModule {
 }
-SkyTileDashboardModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SkyTileDashboardComponent
-                ],
-                providers: [
-                    DragulaService
-                ],
-                imports: [
-                    CommonModule,
-                    SkyTileDashboardColumnModule
-                ],
-                exports: [
-                    SkyTileDashboardComponent
-                ]
-            },] }
-];
+SkyTileDashboardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTileDashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileDashboardModule, declarations: [SkyTileDashboardComponent], imports: [CommonModule,
+        SkyTileDashboardColumnModule,
+        SkyTilesResourcesModule], exports: [SkyTileDashboardComponent] });
+SkyTileDashboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileDashboardModule, providers: [DragulaService], imports: [[
+            CommonModule,
+            SkyTileDashboardColumnModule,
+            SkyTilesResourcesModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTileDashboardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyTileDashboardComponent],
+                    providers: [DragulaService],
+                    imports: [
+                        CommonModule,
+                        SkyTileDashboardColumnModule,
+                        SkyTilesResourcesModule,
+                    ],
+                    exports: [SkyTileDashboardComponent],
+                }]
+        }] });
 
 class SkyTilesModule {
 }
-SkyTilesModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule
-                ],
-                exports: [
-                    SkyTileContentModule,
-                    SkyTileModule,
-                    SkyTileDashboardColumnModule,
-                    SkyTileDashboardModule
-                ]
-            },] }
-];
+SkyTilesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTilesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTilesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTilesModule, imports: [CommonModule], exports: [SkyTileContentModule,
+        SkyTileModule,
+        SkyTileDashboardColumnModule,
+        SkyTileDashboardModule] });
+SkyTilesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTilesModule, imports: [[CommonModule], SkyTileContentModule,
+        SkyTileModule,
+        SkyTileDashboardColumnModule,
+        SkyTileDashboardModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTilesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [
+                        SkyTileContentModule,
+                        SkyTileModule,
+                        SkyTileDashboardColumnModule,
+                        SkyTileDashboardModule,
+                    ],
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SkyTileContentModule, SkyTileDashboardColumnModule, SkyTileDashboardMessageType, SkyTileDashboardModule, SkyTileDashboardService, SkyTileModule, SkyTilesModule, SkyTileComponent as ɵa, SkyTileSummaryComponent as ɵb, SkyTileTitleComponent as ɵc, SkyTilesResourcesProvider as ɵd, SkyTilesResourcesModule as ɵe, SkyTileContentComponent as ɵf, SkyTileContentSectionComponent as ɵg, SkyTileDashboardComponent as ɵh, SkyTileDashboardColumnComponent as ɵi };
+export { SkyTileContentModule, SkyTileDashboardColumnModule, SkyTileDashboardMessageType, SkyTileDashboardModule, SkyTileDashboardService, SkyTileModule, SkyTilesModule, SkyTileComponent as λ1, SkyTileSummaryComponent as λ2, SkyTileTitleComponent as λ3, SkyTileContentSectionComponent as λ4, SkyTileContentComponent as λ5, SkyTileDashboardColumnComponent as λ6, SkyTileDashboardComponent as λ7 };
 //# sourceMappingURL=skyux-tiles.js.map