@skyux/tiles 8.7.2 → 9.0.0-alpha.1

package/fesm2022/skyux-tiles.mjs

@@ -0,0 +1,1123 @@
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { NgModule, Component, EventEmitter, inject, Injectable, Output, ElementRef, Optional, Input, ViewChild, ViewContainerRef, ViewChildren } from '@angular/core';
+import * as i2 from '@skyux/core';
+import { SkyDynamicComponentService, SkyMediaQueryService, SkyUIConfigService, SkyMediaBreakpoints, SkyDynamicComponentLocation, SkyIdModule, SkyTrimModule } from '@skyux/core';
+import * as i3$1 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import * as i3 from '@skyux/indicators';
+import { SkyChevronModule, SkyIconModule } from '@skyux/indicators';
+import * as i5 from '@skyux/theme';
+import { SkyThemeModule } from '@skyux/theme';
+import { skyAnimationSlide } from '@skyux/animations';
+import { Subject } from 'rxjs';
+import { take, takeUntil } from 'rxjs/operators';
+import * as i2$1 from 'ng2-dragula';
+import { DragulaService, DragulaModule } from 'ng2-dragula';
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-tiles' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    '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) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyTilesResourcesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTilesResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyTilesResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTilesResourcesModule, providers: [
+            {
+                provide: SKY_LIB_RESOURCES_PROVIDERS,
+                useClass: SkyTilesResourcesProvider,
+                multi: true,
+            },
+        ], imports: [SkyI18nModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTilesResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyTilesResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * Specifies content to display in the tile's summary.
+ */
+/* istanbul ignore next */
+/* Code coverage having problems with no statements in classes */
+class SkyTileSummaryComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyTileSummaryComponent, selector: "sky-tile-summary", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileSummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-tile-summary', template: "<ng-content></ng-content>\n" }]
+        }] });
+
+/**
+ * Specifies content to display in the tile's title.
+ */
+class SkyTileTitleComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyTileTitleComponent, selector: "sky-tile-title", ngImport: i0, template: "<h2 class=\"sky-tile-title sky-font-heading-2\">\n  <span skyTrim><ng-content></ng-content></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\"></ng-content\n  ></span>\n</h2>\n", styles: [".sky-tile-title{margin:0;padding:10px 15px}:host-context(.sky-theme-modern) .sky-tile-title{margin:0 30px 0 0;padding:0}.sky-theme-modern .sky-tile-title{margin:0 30px 0 0;padding:0}\n"], dependencies: [{ kind: "directive", type: i2.λ4, selector: "[skyTrim]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-tile-title', template: "<h2 class=\"sky-tile-title sky-font-heading-2\">\n  <span skyTrim><ng-content></ng-content></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\"></ng-content\n  ></span>\n</h2>\n", styles: [".sky-tile-title{margin:0;padding:10px 15px}:host-context(.sky-theme-modern) .sky-tile-title{margin:0 30px 0 0;padding:0}.sky-theme-modern .sky-tile-title{margin:0 30px 0 0;padding:0}\n"] }]
+        }] });
+
+const ATTR_TILE_ID = '_sky-tile-dashboard-tile-id';
+let bagIdIndex = 0;
+class SkyTileDashboardService {
+    #columns;
+    #config;
+    #mediaSubscription;
+    #singleColumn;
+    #settingsKey;
+    #tileComponents;
+    #dragulaService;
+    #dynamicComponentService;
+    #mediaQuery;
+    #uiConfigService;
+    constructor() {
+        /**
+         * @internal
+         */
+        this.configChange = new EventEmitter();
+        /**
+         * Fires when the tile dashboard's initialization is complete.
+         */
+        this.dashboardInitialized = new EventEmitter();
+        this.#dragulaService = inject(DragulaService);
+        this.#dynamicComponentService = inject(SkyDynamicComponentService);
+        this.#mediaQuery = inject(SkyMediaQueryService);
+        this.#uiConfigService = inject(SkyUIConfigService);
+        this.bagId = `sky-tile-dashboard-bag-${++bagIdIndex}`;
+        this.#initDragula();
+    }
+    /**
+     * @internal
+     */
+    init(config, columns, singleColumn, settingsKey) {
+        if (settingsKey) {
+            // Clone this so changes to the config object outside of this class don't modify
+            // the config used inside and vice versa.
+            this.#config = Object.assign({}, config);
+            this.#settingsKey = settingsKey;
+            this.#uiConfigService
+                .getConfig(settingsKey, config)
+                .pipe(take(1))
+                .subscribe((value) => {
+                if (this.#config && value.persisted) {
+                    this.#config.layout = value.layout;
+                    this.#checkForNewTiles(value.tileIds);
+                    this.configChange.emit(this.#config);
+                    this.#columns = columns;
+                    this.#singleColumn = singleColumn;
+                    this.#checkReadyAndLoadTiles();
+                }
+                else {
+                    // Bad data, or config is the default config.
+                    this.#initToDefaults(config, columns, singleColumn);
+                }
+            }, (error) => {
+                // Config setting key doesn't exist or other config service error
+                this.#initToDefaults(config, columns, singleColumn);
+            });
+        }
+        else {
+            this.#initToDefaults(config, columns, singleColumn);
+        }
+    }
+    /**
+     * Adds a new tile to the tile dashboard.
+     * @param tile Specifies the tile configuration.
+     * @param component Specifies the tile component to add.
+     */
+    addTileComponent(tile, component) {
+        this.#tileComponents = this.#tileComponents || [];
+        this.#tileComponents.push(component);
+        component.location.nativeElement.setAttribute(ATTR_TILE_ID, tile.id);
+    }
+    /**
+     * Checks whether a specified tile is collapsed.
+     * @param tile Specifies the tile component to check.
+     */
+    tileIsCollapsed(tile) {
+        const tileConfig = this.#findTile(this.#getTileId(tile));
+        if (tileConfig) {
+            return tileConfig.isCollapsed;
+        }
+        return false;
+    }
+    /**
+     * Sets the collapsed state of all tiles.
+     * @param isCollapsed Indicates whether tiles are collapsed.
+     */
+    setAllTilesCollapsed(isCollapsed) {
+        /*istanbul ignore else */
+        if (this.#config && this.#config.layout.multiColumn) {
+            for (const column of this.#config.layout.multiColumn) {
+                for (const tile of column.tiles) {
+                    tile.isCollapsed = isCollapsed;
+                }
+            }
+            for (const tile of this.#config.layout.singleColumn.tiles) {
+                tile.isCollapsed = isCollapsed;
+            }
+        }
+        if (this.#settingsKey) {
+            this.#setUserConfig(this.#config);
+        }
+        this.configChange.emit(this.#config);
+    }
+    /**
+     * Sets the collapsed state of a specified tile.
+     * @param tile Specifies the tile component.
+     * @param isCollapsed Indicates whether the tile is collapsed.
+     */
+    setTileCollapsed(tile, isCollapsed) {
+        const tileConfig = this.#findTile(this.#getTileId(tile));
+        if (tileConfig) {
+            tileConfig.isCollapsed = isCollapsed;
+            if (this.#settingsKey) {
+                this.#setUserConfig(this.#config);
+            }
+            this.configChange.emit(this.#config);
+        }
+    }
+    /**
+     * @internal
+     */
+    getTileComponentType(layoutTile) {
+        if (layoutTile && this.#config) {
+            for (const tile of this.#config.tiles) {
+                if (tile.id === layoutTile.id) {
+                    return tile.componentType;
+                }
+            }
+        }
+        return undefined;
+    }
+    /**
+     * @internal
+     */
+    changeColumnMode(isSingleColumn) {
+        /*istanbul ignore else */
+        if (this.#config) {
+            if (isSingleColumn) {
+                this.#moveTilesToSingleColumn();
+            }
+            else {
+                this.#moveTilesToMultiColumn();
+            }
+        }
+    }
+    /**
+     * @internal
+     */
+    getTileComponent(tileId) {
+        if (this.#tileComponents) {
+            for (const tileComponent of this.#tileComponents) {
+                if (tileComponent.location.nativeElement.getAttribute(ATTR_TILE_ID) ===
+                    tileId) {
+                    return tileComponent;
+                }
+            }
+        }
+        /*istanbul ignore next */
+        return undefined;
+    }
+    /**
+     * @internal
+     */
+    destroy() {
+        /*istanbul ignore else */
+        if (this.#mediaSubscription) {
+            this.#mediaSubscription.unsubscribe();
+        }
+    }
+    /**
+     * @internal
+     */
+    moveTileOnKeyDown(tileCmp, direction, tileDescription) {
+        if (this.#config) {
+            const isSingleColumnMode = this.#mediaQuery.current === SkyMediaBreakpoints.xs ||
+                this.#mediaQuery.current === SkyMediaBreakpoints.sm;
+            const tileId = this.#getTileId(tileCmp);
+            const tile = this.#findTile(tileId);
+            let column;
+            let colIndex = 0;
+            if (isSingleColumnMode) {
+                column = this.#config.layout.singleColumn;
+            }
+            else {
+                column = this.#findTileColumn(tileId);
+                colIndex = this.#config.layout.multiColumn.findIndex((value) => value === column);
+            }
+            if (column && tile && tileId) {
+                if ((direction === 'left' || direction === 'right') &&
+                    !isSingleColumnMode) {
+                    const operator = direction === 'left' ? -1 : 1;
+                    const newColumn = this.#config.layout.multiColumn[colIndex + operator];
+                    if (newColumn) {
+                        // Move the tile to the end of the new column
+                        newColumn.tiles.push(tile);
+                        column.tiles = column.tiles.filter((item) => item !== tile);
+                        this.#moveTilesToColumn(this.#columns?.toArray()[colIndex + operator], [tile]);
+                        // Report the change in configuration
+                        const reportConfig = this.#config;
+                        reportConfig.movedTile = {
+                            tileDescription: tileDescription || /* istanbul ignore next */ tile.id,
+                            column: colIndex + operator + 1,
+                            position: newColumn.tiles.length,
+                        };
+                        this.configChange.emit(reportConfig);
+                    }
+                }
+                else {
+                    const operator = direction === 'up' ? -1 : 1;
+                    const curIndex = column.tiles.findIndex((value) => value.id === tile.id);
+                    const tileComponentInstance = this.getTileComponent(tileId);
+                    if (tileComponentInstance && column.tiles[curIndex + operator]) {
+                        const temp = column.tiles[curIndex + operator];
+                        column.tiles[curIndex + operator] = tile;
+                        column.tiles[curIndex] = temp;
+                        // Get the column element
+                        let columnEl;
+                        if (isSingleColumnMode) {
+                            columnEl = this.#getColumnEl(this.#singleColumn);
+                        }
+                        else {
+                            columnEl = this.#getColumnEl(this.#columns?.toArray()[colIndex]);
+                        }
+                        // Move the tile element in the document
+                        if (curIndex + operator === column.tiles.length - 1) {
+                            columnEl?.appendChild(tileComponentInstance.location.nativeElement);
+                        }
+                        else {
+                            columnEl?.insertBefore(tileComponentInstance.location.nativeElement, this.getTileComponent(column.tiles[curIndex + operator + 1].id)
+                                ?.location.nativeElement);
+                        }
+                        // Report the change in configuration
+                        const reportConfig = this.#config;
+                        reportConfig.movedTile = {
+                            tileDescription: tileDescription || /* istanbul ignore next */ tile.id,
+                            column: isSingleColumnMode ? 1 : colIndex + 1,
+                            position: curIndex + operator + 1,
+                        };
+                        this.configChange.emit(reportConfig);
+                    }
+                }
+            }
+        }
+    }
+    #getTileId(tile) {
+        if (tile) {
+            let el = tile.elementRef.nativeElement;
+            let tileId;
+            while (el) {
+                tileId = el.getAttribute(ATTR_TILE_ID);
+                if (tileId) {
+                    return tileId;
+                }
+                el = el.parentElement;
+            }
+        }
+        return undefined;
+    }
+    #getTileOrRemoveFromLayout(layoutTile) {
+        /*istanbul ignore else */
+        if (layoutTile && this.#config) {
+            for (const tile of this.#config.tiles) {
+                if (tile.id === layoutTile.id) {
+                    return tile;
+                }
+            }
+            // If the layout tile was not found in the list of tiles, it was removed since last the user updated settings
+            /*istanbul ignore else */
+            if (this.#config?.layout.singleColumn) {
+                this.#config.layout.singleColumn.tiles =
+                    this.#config.layout.singleColumn.tiles.filter((elem) => elem.id !== layoutTile.id);
+            }
+            /*istanbul ignore else */
+            if (this.#config?.layout.multiColumn) {
+                this.#config.layout.multiColumn.forEach((elem) => {
+                    elem.tiles = elem.tiles.filter((res) => res.id !== layoutTile.id);
+                });
+            }
+        }
+        /*istanbul ignore next */
+        return undefined;
+    }
+    #checkReadyAndLoadTiles() {
+        if (this.#config && this.#columns) {
+            this.#loadTiles(this.#config);
+            this.#initMediaQueries();
+            this.dashboardInitialized.emit();
+        }
+    }
+    #loadTiles(config) {
+        const layout = config.layout;
+        if (this.#mediaQuery.current === SkyMediaBreakpoints.xs ||
+            this.#mediaQuery.current === SkyMediaBreakpoints.sm) {
+            for (const tile of layout.singleColumn.tiles) {
+                this.#loadTileIntoColumn(this.#singleColumn, tile);
+            }
+        }
+        else {
+            let columns = [];
+            /*istanbul ignore else */
+            if (this.#columns) {
+                columns = this.#columns?.toArray();
+            }
+            for (let i = 0, n = layout.multiColumn.length; i < n; i++) {
+                const column = columns[i];
+                for (const tile of layout.multiColumn[i].tiles) {
+                    this.#loadTileIntoColumn(column, tile);
+                }
+            }
+        }
+    }
+    #loadTileIntoColumn(column, layoutTile) {
+        if (column) {
+            const tile = this.#getTileOrRemoveFromLayout(layoutTile);
+            /*istanbul ignore else */
+            if (tile && this.#dynamicComponentService) {
+                const componentType = tile.componentType;
+                const providers = tile.providers /* istanbul ignore next */ || [];
+                const componentRef = this.#dynamicComponentService.createComponent(componentType, {
+                    location: SkyDynamicComponentLocation.ElementBottom,
+                    providers: providers,
+                    viewContainerRef: column.content,
+                    parentInjector: column.injector,
+                });
+                this.addTileComponent(layoutTile, componentRef);
+                // Make sure the component is marked for changes in case the parent component uses
+                // the OnPush change detection strategy.
+                componentRef.changeDetectorRef.markForCheck();
+            }
+        }
+    }
+    #moveTilesToSingleColumn() {
+        this.#moveTilesToColumn(this.#singleColumn, this.#config?.layout.singleColumn.tiles);
+    }
+    #moveTilesToMultiColumn() {
+        let layoutColumns = [];
+        /*istanbul ignore else */
+        if (this.#config) {
+            layoutColumns = this.#config.layout.multiColumn;
+        }
+        let columns = [];
+        /*istanbul ignore else */
+        if (this.#columns) {
+            columns = this.#columns?.toArray();
+        }
+        for (let i = 0, n = layoutColumns.length; i < n; i++) {
+            this.#moveTilesToColumn(columns[i], layoutColumns[i].tiles);
+        }
+    }
+    #moveTilesToColumn(column, layoutTiles) {
+        if (column && layoutTiles) {
+            const columnEl = this.#getColumnEl(column);
+            for (const layoutTile of layoutTiles) {
+                const tileComponentInstance = this.getTileComponent(layoutTile.id);
+                /*istanbul ignore else */
+                if (tileComponentInstance) {
+                    columnEl?.appendChild(tileComponentInstance.location.nativeElement);
+                }
+            }
+        }
+    }
+    #getConfigForUIState() {
+        /*istanbul ignore else */
+        if (this.#config) {
+            this.#config = {
+                tiles: this.#config.tiles,
+                layout: {
+                    singleColumn: this.#getSingleColumnLayoutForUIState(this.#config),
+                    multiColumn: this.#getMultiColumnLayoutForUIState(this.#config),
+                },
+            };
+        }
+        return this.#config;
+    }
+    #getSingleColumnLayoutForUIState(config) {
+        if (this.#mediaQuery.current === SkyMediaBreakpoints.xs ||
+            this.#mediaQuery.current === SkyMediaBreakpoints.sm) {
+            return {
+                tiles: this.#getTilesInEl(this.#getColumnEl(this.#singleColumn)),
+            };
+        }
+        return config.layout.singleColumn;
+    }
+    #getMultiColumnLayoutForUIState(config) {
+        if (!(this.#mediaQuery.current === SkyMediaBreakpoints.xs ||
+            this.#mediaQuery.current === SkyMediaBreakpoints.sm)) {
+            const layoutColumns = [];
+            let columns = [];
+            /*istanbul ignore else */
+            if (this.#columns) {
+                columns = this.#columns?.toArray();
+            }
+            for (const column of columns) {
+                if (column !== this.#singleColumn) {
+                    const layoutColumn = {
+                        tiles: this.#getTilesInEl(this.#getColumnEl(column)),
+                    };
+                    layoutColumns.push(layoutColumn);
+                }
+            }
+            return layoutColumns;
+        }
+        return config.layout.multiColumn;
+    }
+    #getTilesInEl(el) {
+        const tileEls = el?.querySelectorAll('[' + ATTR_TILE_ID + ']');
+        const layoutTiles = [];
+        /*istanbul ignore else */
+        if (tileEls) {
+            for (let i = 0, n = tileEls.length; i < n; i++) {
+                const tileEl = tileEls[i];
+                const tileId = tileEl.getAttribute(ATTR_TILE_ID);
+                const tile = this.#findTile(tileId);
+                /*istanbul ignore else */
+                if (tile) {
+                    layoutTiles.push(tile);
+                }
+            }
+        }
+        return layoutTiles;
+    }
+    #initMediaQueries() {
+        /*istanbul ignore else */
+        if (!this.#mediaSubscription) {
+            this.#mediaSubscription = this.#mediaQuery.subscribe((args) => {
+                this.changeColumnMode(args === SkyMediaBreakpoints.xs || args === SkyMediaBreakpoints.sm);
+            });
+        }
+    }
+    #initDragula() {
+        this.#dragulaService.createGroup(this.bagId, {
+            moves: (el, container, handle) => {
+                const target = el?.querySelector('.sky-tile-grab-handle');
+                return !!target && target.contains(handle);
+            },
+        });
+        this.#dragulaService.drop(this.bagId).subscribe(() => {
+            const config = this.#getConfigForUIState();
+            /*istanbul ignore else */
+            if (config) {
+                if (this.#settingsKey) {
+                    this.#setUserConfig(config);
+                }
+                this.configChange.emit(config);
+            }
+        });
+    }
+    #getColumnEl(column) {
+        return column?.content?.element.nativeElement.parentNode;
+    }
+    #findTile(tileId) {
+        /*istanbul ignore else */
+        if (this.#config && this.#config.layout.multiColumn) {
+            for (const column of this.#config.layout.multiColumn) {
+                /*istanbul ignore else */
+                if (column.tiles) {
+                    for (const tile of column.tiles) {
+                        if (tile.id === tileId) {
+                            return tile;
+                        }
+                    }
+                }
+            }
+        }
+        return undefined;
+    }
+    #findTileColumn(tileId) {
+        /*istanbul ignore else */
+        if (this.#config && this.#config.layout.multiColumn) {
+            return this.#config.layout.multiColumn.find((col) => col.tiles && !!col.tiles.find((tile) => tile.id === tileId));
+        }
+        /*istanbul ignore next */
+        return undefined;
+    }
+    #initToDefaults(config, columns, singleColumn) {
+        this.#config = config;
+        this.#columns = columns;
+        this.#singleColumn = singleColumn;
+        this.#checkReadyAndLoadTiles();
+    }
+    #setUserConfig(config) {
+        if (config && this.#settingsKey)
+            this.#uiConfigService
+                .setConfig(this.#settingsKey, {
+                layout: config.layout,
+                persisted: true,
+                tileIds: config.tiles.map((elem) => elem.id),
+            })
+                .subscribe(
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            () => { }, (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
+        const newTiles = this.#config?.tiles.filter((elem) => {
+            return oldUserTiles.indexOf(elem.id) === -1;
+        });
+        const multiColumn = this.#config?.layout.multiColumn;
+        const singleColumn = this.#config?.layout.singleColumn;
+        // Append new tiles to the end of the layouts
+        /*istanbul ignore else */
+        if (newTiles?.length) {
+            /*istanbul ignore else */
+            if (multiColumn) {
+                newTiles?.forEach((elem) => {
+                    let locationToAdd = 0;
+                    let smallest = multiColumn[0].tiles.length;
+                    multiColumn.forEach((item, index) => {
+                        if (item.tiles.length < smallest) {
+                            locationToAdd = index;
+                            smallest = item.tiles.length;
+                        }
+                    });
+                    multiColumn[locationToAdd].tiles.push({
+                        id: elem.id,
+                        isCollapsed: false,
+                    });
+                });
+            }
+            /*istanbul ignore else */
+            if (singleColumn) {
+                newTiles?.forEach((elem) => {
+                    singleColumn.tiles.push({ id: elem.id, isCollapsed: false });
+                });
+            }
+        }
+        /*istanbul ignore else */
+        if (singleColumn) {
+            for (const tile of singleColumn.tiles) {
+                this.#getTileOrRemoveFromLayout(tile);
+            }
+        }
+        /*istanbul ignore else */
+        if (multiColumn) {
+            for (let i = 0, n = multiColumn.length; i < n; i++) {
+                for (const tile of multiColumn[i].tiles) {
+                    this.#getTileOrRemoveFromLayout(tile);
+                }
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileDashboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileDashboardService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileDashboardService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; }, propDecorators: { dashboardInitialized: [{
+                type: Output
+            }] } });
+
+/**
+ * Provides a common look-and-feel for tab content.
+ */
+class SkyTileComponent {
+    get isCollapsed() {
+        if (this.#dashboardService) {
+            const configCollapsedState = this.#dashboardService.tileIsCollapsed(this);
+            this.#_isCollapsed = configCollapsedState;
+        }
+        return this.#_isCollapsed;
+    }
+    /**
+     * Whether the tile is in a collapsed state.
+     * @default false
+     */
+    set isCollapsed(value) {
+        this.#_isCollapsed = !!value;
+        if (this.#dashboardService) {
+            this.#dashboardService.setTileCollapsed(this, this.#_isCollapsed);
+        }
+        this.isCollapsedChange.emit(this.#_isCollapsed);
+    }
+    #changeDetector;
+    #dashboardService;
+    #ngUnsubscribe;
+    #_isCollapsed;
+    constructor(elementRef, changeDetector, dashboardService) {
+        this.elementRef = elementRef;
+        /**
+         * Whether to display a settings button in the tile header. To display the
+         * button, you must also listen for the `settingsClick` event.
+         * @default true
+         */
+        this.showSettings = true;
+        /**
+         * Whether to display a help button in the tile header. To display the
+         * button, you must also listen for the `helpClick` event.
+         * @default true
+         */
+        this.showHelp = true;
+        /**
+         * Fires when users select the settings button in the tile header. The settings
+         * button only appears when the `showSettings` property is set to `true`.
+         */
+        this.settingsClick = new EventEmitter();
+        /**
+         * Fires when the tile's collapsed state changes. Returns `true` when the tile
+         * collapses and `false` when it expands.
+         */
+        this.isCollapsedChange = new EventEmitter();
+        /**
+         * Fires when users select the help button in the tile header. The help
+         * button only appears when the `showHelp` property is set to `true`.
+         */
+        this.helpClick = new EventEmitter();
+        this.isInDashboardColumn = false;
+        this.#ngUnsubscribe = new Subject();
+        this.#_isCollapsed = false;
+        this.#changeDetector = changeDetector;
+        this.#dashboardService = dashboardService;
+        this.isInDashboardColumn = !!this.#dashboardService;
+        if (this.#dashboardService) {
+            this.ariaDescribedBy = `${this.#dashboardService.bagId}-move-instructions`;
+            /**
+             * This subscription ensures that if any values which come in from the dashboard service are
+             * updated that the component will update if the tile's parent component utilizes OnPush
+             * change detection.
+             */
+            this.#dashboardService.configChange
+                .pipe(takeUntil(this.#ngUnsubscribe))
+                .subscribe(() => {
+                this.#changeDetector.markForCheck();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    settingsButtonClicked() {
+        this.settingsClick.emit(undefined);
+    }
+    helpButtonClicked() {
+        this.helpClick.emit(undefined);
+    }
+    get hasSettings() {
+        return this.settingsClick.observers.length > 0 && this.showSettings;
+    }
+    get hasHelp() {
+        return this.helpClick.observers.length > 0 && this.showHelp;
+    }
+    titleClick() {
+        this.isCollapsed = !this.isCollapsed;
+    }
+    chevronDirectionChange(direction) {
+        this.isCollapsed = direction === 'down';
+    }
+    moveTile(event) {
+        /* istanbul ignore else */
+        if (this.#dashboardService) {
+            const direction = event.key.toLowerCase().replace('arrow', '');
+            /* istanbul ignore else */
+            if (direction === 'up' ||
+                direction === 'down' ||
+                direction === 'left' ||
+                direction === 'right') {
+                this.#dashboardService.moveTileOnKeyDown(this, direction, this.title
+                    ? this.title.nativeElement.innerText
+                    : /* istanbul ignore next */
+                        undefined);
+                this.#focusHandle();
+            }
+        }
+    }
+    #focusHandle() {
+        this.grabHandle?.nativeElement.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: SkyTileDashboardService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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 class=\"sky-tile-summary sky-font-display-3\">\n        <ng-content select=\"sky-tile-summary\"></ng-content>\n      </div>\n    </div>\n    <div class=\"sky-tile-header-column-tools\">\n      <div class=\"sky-tile-tools\">\n        <ng-container *skyThemeIf=\"'default'\">\n          <button\n            *ngIf=\"hasHelp\"\n            class=\"sky-btn sky-tile-tools-control sky-tile-help\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              tileName\n                ? ('skyux_tile_help' | skyLibResources : tileName)\n                : ('skyux_tile_help_default' | skyLibResources)\n            \"\n            [skyThemeClass]=\"{\n              'sky-btn-icon-borderless': 'modern'\n            }\"\n            (click)=\"helpButtonClicked()\"\n          >\n            <sky-icon icon=\"question-circle\"></sky-icon>\n          </button>\n        </ng-container>\n        <sky-chevron\n          [ariaControls]=\"tileContent.id\"\n          [ariaLabel]=\"\n            tileName\n              ? ('skyux_tile_expand' | skyLibResources : tileName)\n              : ('skyux_tile_expand_default' | skyLibResources)\n          \"\n          [direction]=\"isCollapsed ? 'down' : 'up'\"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-margin-inline-default': 'modern'\n          }\"\n          (directionChange)=\"chevronDirectionChange($event)\"\n        >\n        </sky-chevron>\n        <button\n          *ngIf=\"hasSettings\"\n          class=\"sky-btn sky-tile-settings\"\n          type=\"button\"\n          [attr.aria-label]=\"\n            tileName\n              ? ('skyux_tile_settings' | skyLibResources : tileName)\n              : ('skyux_tile_settings_default' | skyLibResources)\n          \"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-btn-icon-borderless sky-margin-inline-default': 'modern'\n          }\"\n          (click)=\"settingsButtonClicked()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"cog\"></sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"cog-line\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n        <button\n          *ngIf=\"isInDashboardColumn\"\n          class=\"sky-btn sky-tile-grab-handle\"\n          [attr.aria-label]=\"\n            tileName\n              ? ('skyux_tile_move' | skyLibResources : tileName)\n              : ('skyux_tile_move_default' | skyLibResources)\n          \"\n          [attr.aria-describedby]=\"ariaDescribedBy\"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-btn-icon-borderless': 'modern'\n          }\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"moveTile($event)\"\n          #grabHandle\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"th\"></sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"tile-drag\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </div>\n    </div>\n  </header>\n  <div\n    class=\"sky-tile-content\"\n    role=\"region\"\n    skyId\n    [attr.aria-label]=\"tileName\"\n    [@skyAnimationSlide]=\"isCollapsed ? 'up' : 'down'\"\n    #tileContent=\"skyId\"\n  >\n    <ng-content select=\"sky-tile-content\"></ng-content>\n  </div>\n</section>\n", styles: [".sky-tile{background-color:#fff;margin-bottom:20px}.sky-tile-header{border-color:#cdcfd2;border-style:solid solid none;border-width:4px 0 0;display:flex}.sky-tile-header-content{display:flex;flex:1;align-items:baseline;cursor:pointer}.sky-tile-header-title{display:inline-flex}.sky-tile-summary{color:#0974a1;opacity:0;padding-right:15px;transition:opacity .25s;max-height:30px;overflow:hidden}.sky-tile-collapsed .sky-tile-summary{opacity:1}.sky-tile-header-column-tools{display:flex;align-items:center;flex:0 0 auto}.sky-tile-tools{display:flex;padding-right:15px}.sky-tile-tools-control{color:#cdcfd2;cursor:pointer;border:0;width:24px;height:24px;padding:0;display:block;margin:0 0 0 9px}.sky-tile-tools-control:hover{color:#979ba2;transition:color .15s}.sky-tile-grab-handle{cursor:move;cursor:-moz-grab;font-size:15px}.sky-tile-content{border-color:#e2e3e4;border-image:none;border-style:solid solid none;border-width:1px 0}:host-context(.sky-theme-modern) .sky-tile-header,:host-context(.sky-theme-modern) .sky-tile-content{border:none}:host-context(.sky-theme-modern) .sky-tile-header-column-tools{align-items:flex-start}:host-context(.sky-theme-modern) .sky-tile-tools{padding:0}:host-context(.sky-theme-modern) .sky-tile-tools-control{font-size:18px;color:#686c73}:host-context(.sky-theme-modern) .sky-tile-grab-handle{font-size:16px}:host-context(.sky-theme-modern) .sky-tile-content ::ng-deep .sky-tile-content-section{border-bottom:1px dotted #c0c2c5}:host-context(.sky-theme-modern) .sky-tile-content ::ng-deep sky-tile-content-section:first-child .sky-tile-content-section{margin-top:15px}:host-context(.sky-theme-modern) .sky-tile-content ::ng-deep sky-tile-content-section:last-child .sky-tile-content-section{padding-bottom:0;border-bottom:none}:host-context(.sky-theme-modern) :host .sky-tile{border-radius:0}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-xs) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:0}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-tile{border-radius:6px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:6px}.sky-theme-modern .sky-tile-header,.sky-theme-modern .sky-tile-content{border:none}.sky-theme-modern .sky-tile-header-column-tools{align-items:flex-start}.sky-theme-modern .sky-tile-tools{padding:0}.sky-theme-modern .sky-tile-tools-control{font-size:18px;color:#686c73}.sky-theme-modern .sky-tile-grab-handle{font-size:16px}.sky-theme-modern .sky-tile-content ::ng-deep .sky-tile-content-section{border-bottom:1px dotted #c0c2c5}.sky-theme-modern .sky-tile-content ::ng-deep sky-tile-content-section:first-child .sky-tile-content-section{margin-top:15px}.sky-theme-modern .sky-tile-content ::ng-deep sky-tile-content-section:last-child .sky-tile-content-section{padding-bottom:0;border-bottom:none}.sky-theme-modern :host .sky-tile{border-radius:0}.sky-theme-modern :host-context(.sky-responsive-container-xs) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:0}@media (min-width: 768px){.sky-theme-modern :host .sky-tile{border-radius:6px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }, { kind: "directive", type: i2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i3.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [skyAnimationSlide] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-tile', animations: [skyAnimationSlide], template: "<section\n  class=\"sky-tile\"\n  [ngClass]=\"{\n    'sky-tile-collapsed': isCollapsed\n  }\"\n  [skyThemeClass]=\"{\n    'sky-box sky-elevation-1-bordered sky-padding-even-xl': 'modern'\n  }\"\n>\n  <header class=\"sky-tile-header\">\n    <div class=\"sky-tile-header-content\" (click)=\"titleClick()\">\n      <div class=\"sky-tile-header-title\" #titleContainer>\n        <ng-content select=\"sky-tile-title\"></ng-content>\n      </div>\n      <div class=\"sky-tile-summary sky-font-display-3\">\n        <ng-content select=\"sky-tile-summary\"></ng-content>\n      </div>\n    </div>\n    <div class=\"sky-tile-header-column-tools\">\n      <div class=\"sky-tile-tools\">\n        <ng-container *skyThemeIf=\"'default'\">\n          <button\n            *ngIf=\"hasHelp\"\n            class=\"sky-btn sky-tile-tools-control sky-tile-help\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              tileName\n                ? ('skyux_tile_help' | skyLibResources : tileName)\n                : ('skyux_tile_help_default' | skyLibResources)\n            \"\n            [skyThemeClass]=\"{\n              'sky-btn-icon-borderless': 'modern'\n            }\"\n            (click)=\"helpButtonClicked()\"\n          >\n            <sky-icon icon=\"question-circle\"></sky-icon>\n          </button>\n        </ng-container>\n        <sky-chevron\n          [ariaControls]=\"tileContent.id\"\n          [ariaLabel]=\"\n            tileName\n              ? ('skyux_tile_expand' | skyLibResources : tileName)\n              : ('skyux_tile_expand_default' | skyLibResources)\n          \"\n          [direction]=\"isCollapsed ? 'down' : 'up'\"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-margin-inline-default': 'modern'\n          }\"\n          (directionChange)=\"chevronDirectionChange($event)\"\n        >\n        </sky-chevron>\n        <button\n          *ngIf=\"hasSettings\"\n          class=\"sky-btn sky-tile-settings\"\n          type=\"button\"\n          [attr.aria-label]=\"\n            tileName\n              ? ('skyux_tile_settings' | skyLibResources : tileName)\n              : ('skyux_tile_settings_default' | skyLibResources)\n          \"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-btn-icon-borderless sky-margin-inline-default': 'modern'\n          }\"\n          (click)=\"settingsButtonClicked()\"\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"cog\"></sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"cog-line\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n        <button\n          *ngIf=\"isInDashboardColumn\"\n          class=\"sky-btn sky-tile-grab-handle\"\n          [attr.aria-label]=\"\n            tileName\n              ? ('skyux_tile_move' | skyLibResources : tileName)\n              : ('skyux_tile_move_default' | skyLibResources)\n          \"\n          [attr.aria-describedby]=\"ariaDescribedBy\"\n          [skyThemeClass]=\"{\n            'sky-tile-tools-control': 'default',\n            'sky-btn-icon-borderless': 'modern'\n          }\"\n          (click)=\"$event.stopPropagation()\"\n          (keydown)=\"moveTile($event)\"\n          #grabHandle\n        >\n          <sky-icon *skyThemeIf=\"'default'\" icon=\"th\"></sky-icon>\n          <sky-icon\n            *skyThemeIf=\"'modern'\"\n            icon=\"tile-drag\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </div>\n    </div>\n  </header>\n  <div\n    class=\"sky-tile-content\"\n    role=\"region\"\n    skyId\n    [attr.aria-label]=\"tileName\"\n    [@skyAnimationSlide]=\"isCollapsed ? 'up' : 'down'\"\n    #tileContent=\"skyId\"\n  >\n    <ng-content select=\"sky-tile-content\"></ng-content>\n  </div>\n</section>\n", styles: [".sky-tile{background-color:#fff;margin-bottom:20px}.sky-tile-header{border-color:#cdcfd2;border-style:solid solid none;border-width:4px 0 0;display:flex}.sky-tile-header-content{display:flex;flex:1;align-items:baseline;cursor:pointer}.sky-tile-header-title{display:inline-flex}.sky-tile-summary{color:#0974a1;opacity:0;padding-right:15px;transition:opacity .25s;max-height:30px;overflow:hidden}.sky-tile-collapsed .sky-tile-summary{opacity:1}.sky-tile-header-column-tools{display:flex;align-items:center;flex:0 0 auto}.sky-tile-tools{display:flex;padding-right:15px}.sky-tile-tools-control{color:#cdcfd2;cursor:pointer;border:0;width:24px;height:24px;padding:0;display:block;margin:0 0 0 9px}.sky-tile-tools-control:hover{color:#979ba2;transition:color .15s}.sky-tile-grab-handle{cursor:move;cursor:-moz-grab;font-size:15px}.sky-tile-content{border-color:#e2e3e4;border-image:none;border-style:solid solid none;border-width:1px 0}:host-context(.sky-theme-modern) .sky-tile-header,:host-context(.sky-theme-modern) .sky-tile-content{border:none}:host-context(.sky-theme-modern) .sky-tile-header-column-tools{align-items:flex-start}:host-context(.sky-theme-modern) .sky-tile-tools{padding:0}:host-context(.sky-theme-modern) .sky-tile-tools-control{font-size:18px;color:#686c73}:host-context(.sky-theme-modern) .sky-tile-grab-handle{font-size:16px}:host-context(.sky-theme-modern) .sky-tile-content ::ng-deep .sky-tile-content-section{border-bottom:1px dotted #c0c2c5}:host-context(.sky-theme-modern) .sky-tile-content ::ng-deep sky-tile-content-section:first-child .sky-tile-content-section{margin-top:15px}:host-context(.sky-theme-modern) .sky-tile-content ::ng-deep sky-tile-content-section:last-child .sky-tile-content-section{padding-bottom:0;border-bottom:none}:host-context(.sky-theme-modern) :host .sky-tile{border-radius:0}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-xs) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:0}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-tile{border-radius:6px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:6px}.sky-theme-modern .sky-tile-header,.sky-theme-modern .sky-tile-content{border:none}.sky-theme-modern .sky-tile-header-column-tools{align-items:flex-start}.sky-theme-modern .sky-tile-tools{padding:0}.sky-theme-modern .sky-tile-tools-control{font-size:18px;color:#686c73}.sky-theme-modern .sky-tile-grab-handle{font-size:16px}.sky-theme-modern .sky-tile-content ::ng-deep .sky-tile-content-section{border-bottom:1px dotted #c0c2c5}.sky-theme-modern .sky-tile-content ::ng-deep sky-tile-content-section:first-child .sky-tile-content-section{margin-top:15px}.sky-theme-modern .sky-tile-content ::ng-deep sky-tile-content-section:last-child .sky-tile-content-section{padding-bottom:0;border-bottom:none}.sky-theme-modern :host .sky-tile{border-radius:0}.sky-theme-modern :host-context(.sky-responsive-container-xs) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:0}@media (min-width: 768px){.sky-theme-modern :host .sky-tile{border-radius:6px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:6px}\n"] }]
+        }], 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,
+                    }]
+            }] } });
+
+class SkyTileModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyTileModule, declarations: [SkyTileComponent,
+            SkyTileSummaryComponent,
+            SkyTileTitleComponent], imports: [CommonModule,
+            SkyChevronModule,
+            SkyIdModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyThemeModule,
+            SkyTilesResourcesModule,
+            SkyTrimModule], exports: [SkyTileComponent, SkyTileSummaryComponent, SkyTileTitleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileModule, imports: [CommonModule,
+            SkyChevronModule,
+            SkyIdModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyThemeModule,
+            SkyTilesResourcesModule,
+            SkyTrimModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyTileComponent,
+                        SkyTileSummaryComponent,
+                        SkyTileTitleComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyChevronModule,
+                        SkyIdModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyThemeModule,
+                        SkyTilesResourcesModule,
+                        SkyTrimModule,
+                    ],
+                    exports: [SkyTileComponent, SkyTileSummaryComponent, SkyTileTitleComponent],
+                }]
+        }] });
+
+/**
+ * Specifies content to display inside a padded section of a SkyTileContentComponent.
+ */
+class SkyTileContentSectionComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileContentSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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"], dependencies: [{ kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: 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: [":host-context(.sky-theme-modern) .sky-tile-content-section{padding:15px 0}.sky-theme-modern .sky-tile-content-section{padding:15px 0}\n"] }]
+        }] });
+
+/**
+ * Specifies content to display in the tile's body.
+ */
+class SkyTileContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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: "16.1.7", ngImport: i0, type: 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"] }]
+        }] });
+
+class SkyTileContentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyTileContentModule, declarations: [SkyTileContentComponent, SkyTileContentSectionComponent], imports: [CommonModule, SkyThemeModule], exports: [SkyTileContentComponent, SkyTileContentSectionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileContentModule, imports: [CommonModule, SkyThemeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileContentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyTileContentComponent, SkyTileContentSectionComponent],
+                    imports: [CommonModule, SkyThemeModule],
+                    exports: [SkyTileContentComponent, SkyTileContentSectionComponent],
+                }]
+        }] });
+
+/**
+ * The type of message to send to the tile dashboard component.
+ */
+var SkyTileDashboardMessageType;
+(function (SkyTileDashboardMessageType) {
+    /**
+     * Expands all tiles within the tile dashboard.
+     */
+    SkyTileDashboardMessageType[SkyTileDashboardMessageType["ExpandAll"] = 0] = "ExpandAll";
+    /**
+     * Collapses all tiles within the tile dashboard.
+     */
+    SkyTileDashboardMessageType[SkyTileDashboardMessageType["CollapseAll"] = 1] = "CollapseAll";
+})(SkyTileDashboardMessageType || (SkyTileDashboardMessageType = {}));
+
+let columnIdIndex = 0;
+/**
+ * @internal
+ */
+class SkyTileDashboardColumnComponent {
+    #dashboardService;
+    constructor(injector, dashboardService) {
+        this.injector = injector;
+        this.#dashboardService = dashboardService;
+        this.columnId = `tile-dashboard-column-${++columnIdIndex}`;
+        this.bagId = this.#dashboardService.bagId;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileDashboardColumnComponent, deps: [{ token: i0.Injector }, { token: SkyTileDashboardService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyTileDashboardColumnComponent, selector: "sky-tile-dashboard-column", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"sky-tile-dashboard-column\" [dragula]=\"bagId\">\n  <div #content></div>\n</div>\n", styles: [":host{display:flex;flex-grow:1;overflow:hidden}:host{padding:0}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0}@media (min-width: 768px){:host{padding:0 10px}}:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0 10px}.sky-tile-dashboard-column{min-height:100px;width:100%}@media (min-width: 768px){:host-context(.sky-theme-modern) :host{padding:0 15px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg){padding:0 15px}@media (min-width: 768px){.sky-theme-modern :host{padding:0 15px}}.sky-theme-modern :host-context(.sky-responsive-container-sm),.sky-theme-modern :host-context(.sky-responsive-container-md),.sky-theme-modern :host-context(.sky-responsive-container-lg){padding:0 15px}\n"], dependencies: [{ kind: "directive", type: i2$1.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel"], outputs: ["dragulaModelChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileDashboardColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-tile-dashboard-column', template: "<div class=\"sky-tile-dashboard-column\" [dragula]=\"bagId\">\n  <div #content></div>\n</div>\n", styles: [":host{display:flex;flex-grow:1;overflow:hidden}:host{padding:0}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0}@media (min-width: 768px){:host{padding:0 10px}}:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0 10px}.sky-tile-dashboard-column{min-height:100px;width:100%}@media (min-width: 768px){:host-context(.sky-theme-modern) :host{padding:0 15px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg){padding:0 15px}@media (min-width: 768px){.sky-theme-modern :host{padding:0 15px}}.sky-theme-modern :host-context(.sky-responsive-container-sm),.sky-theme-modern :host-context(.sky-responsive-container-md),.sky-theme-modern :host-context(.sky-responsive-container-lg){padding:0 15px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: SkyTileDashboardService }]; }, propDecorators: { content: [{
+                type: ViewChild,
+                args: ['content', {
+                        read: ViewContainerRef,
+                        static: false,
+                    }]
+            }] } });
+
+class SkyTileDashboardColumnModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileDashboardColumnModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyTileDashboardColumnModule, declarations: [SkyTileDashboardColumnComponent], imports: [CommonModule, DragulaModule], exports: [SkyTileDashboardColumnComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileDashboardColumnModule, imports: [CommonModule, DragulaModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileDashboardColumnModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyTileDashboardColumnComponent],
+                    imports: [CommonModule, DragulaModule],
+                    exports: [SkyTileDashboardColumnComponent],
+                }]
+        }] });
+
+/**
+ * Specifies a container to group multiple tiles.
+ */
+class SkyTileDashboardComponent {
+    /**
+     * Populates the tile dashboard based on the `SkyTileDashboardConfig` object.
+     * @required
+     */
+    set config(value) {
+        if (value && !this.#configSet) {
+            this.#_config = value;
+            this.#configSet = true;
+            this.#checkReady();
+        }
+    }
+    get config() {
+        return this.#_config;
+    }
+    #configSet;
+    #dashboardService;
+    #mediaQueryService;
+    #ngUnsubscribe;
+    #resourcesService;
+    #viewReady;
+    #_config;
+    constructor(dashboardService, mediaQueryService, resourcesService) {
+        /**
+         * The observable to send commands to the tile dashboard. The commands must respect the
+         * `SkyTileDashboardMessage` type.
+         */
+        this.messageStream = new Subject();
+        /**
+         * Fires when the tile dashboard changes state and emits a SkyTileDashboardConfig
+         * object. This occurs when tiles collapse or expand and when users drag and drop
+         * tiles to rearrange them.
+         */
+        this.configChange = new EventEmitter();
+        this.tileMovedReport = '';
+        this.#configSet = false;
+        this.#ngUnsubscribe = new Subject();
+        this.#viewReady = false;
+        this.#dashboardService = dashboardService;
+        this.#mediaQueryService = mediaQueryService;
+        this.#resourcesService = resourcesService;
+        this.moveInstructionsId =
+            this.#dashboardService.bagId + '-move-instructions';
+        this.#dashboardService.configChange.subscribe((config) => {
+            this.configChange.emit(config);
+            // Update aria live region with tile drag info
+            if (config.movedTile && this.#resourcesService) {
+                let messageObservable;
+                if (this.#mediaQueryService.current === SkyMediaBreakpoints.xs ||
+                    this.#mediaQueryService.current === SkyMediaBreakpoints.sm) {
+                    messageObservable = this.#resourcesService.getString('skyux_tile_moved_assistive_text', config.movedTile.tileDescription, '1', '1', config.movedTile.position.toString(), config.layout.singleColumn.tiles.length.toString());
+                }
+                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) => {
+                    this.tileMovedReport = message;
+                });
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.messageStream
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((message) => {
+            this.#handleIncomingMessages(message);
+        });
+        this.#viewReady = true;
+        this.#checkReady();
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+        this.#dashboardService.destroy();
+    }
+    #checkReady() {
+        if (this.#viewReady && this.config) {
+            setTimeout(() => {
+                if (this.config && this.columns && this.singleColumn) {
+                    this.#dashboardService.init(this.config, this.columns, this.singleColumn, this.settingsKey);
+                }
+            }, 0);
+        }
+    }
+    #handleIncomingMessages(message) {
+        switch (message.type) {
+            case SkyTileDashboardMessageType.ExpandAll:
+                this.#dashboardService.setAllTilesCollapsed(false);
+                break;
+            case SkyTileDashboardMessageType.CollapseAll:
+                this.#dashboardService.setAllTilesCollapsed(true);
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileDashboardComponent, deps: [{ token: SkyTileDashboardService }, { token: i2.SkyMediaQueryService }, { token: i3$1.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyTileDashboardComponent, selector: "sky-tile-dashboard", inputs: { config: "config", messageStream: "messageStream", settingsKey: "settingsKey" }, outputs: { configChange: "configChange" }, providers: [SkyTileDashboardService], viewQueries: [{ propertyName: "singleColumn", first: true, predicate: ["singleColumn"], descendants: true, read: SkyTileDashboardColumnComponent }, { propertyName: "columns", predicate: SkyTileDashboardColumnComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"config\">\n  <span aria-live=\"assertive\" class=\"sky-assistive-text\">\n    {{ tileMovedReport }}\n  </span>\n  <sky-tile-dashboard-column\n    *ngFor=\"let column of config.layout.multiColumn\"\n    class=\"sky-tile-dashboard-layout-multi\"\n    [ngStyle]=\"{\n      'flex-basis': 100 / config.layout.multiColumn.length + '%'\n    }\"\n  >\n  </sky-tile-dashboard-column>\n  <sky-tile-dashboard-column\n    class=\"sky-tile-dashboard-layout-single\"\n    #singleColumn\n  >\n  </sky-tile-dashboard-column>\n  <span class=\"sky-screen-reader-only\" [id]=\"moveInstructionsId\">{{\n    'skyux_tile_move_instructions' | skyLibResources\n  }}</span>\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{display:block;padding:0}:host .sky-tile-dashboard-layout-multi{display:none}:host .sky-tile-dashboard-layout-single{display:block}:host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:0}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){display:block;padding:0}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi{display:none}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single{display:block}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:0}@media (min-width: 768px){:host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:20px}:host :host-context(.sky-theme-default){padding-top:20px}}:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:20px}:host-context(.sky-responsive-container-sm) :host-context(.sky-theme-default),:host-context(.sky-responsive-container-md) :host-context(.sky-theme-default),:host-context(.sky-responsive-container-lg) :host-context(.sky-theme-default){padding-top:20px}@media (min-width: 992px){:host{display:flex;padding:0 10px}:host .sky-tile-dashboard-layout-multi{display:block}:host .sky-tile-dashboard-layout-single{display:none}}:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){display:flex;padding:0 10px}:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi{display:block}:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single{display:none}@media screen{.sky-assistive-text{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}}:host-context(.sky-theme-default){background-color:#eeeeef}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}@media (min-width: 768px){.sky-theme-modern :host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SkyTileDashboardColumnComponent, selector: "sky-tile-dashboard-column" }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileDashboardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-tile-dashboard', providers: [SkyTileDashboardService], template: "<ng-container *ngIf=\"config\">\n  <span aria-live=\"assertive\" class=\"sky-assistive-text\">\n    {{ tileMovedReport }}\n  </span>\n  <sky-tile-dashboard-column\n    *ngFor=\"let column of config.layout.multiColumn\"\n    class=\"sky-tile-dashboard-layout-multi\"\n    [ngStyle]=\"{\n      'flex-basis': 100 / config.layout.multiColumn.length + '%'\n    }\"\n  >\n  </sky-tile-dashboard-column>\n  <sky-tile-dashboard-column\n    class=\"sky-tile-dashboard-layout-single\"\n    #singleColumn\n  >\n  </sky-tile-dashboard-column>\n  <span class=\"sky-screen-reader-only\" [id]=\"moveInstructionsId\">{{\n    'skyux_tile_move_instructions' | skyLibResources\n  }}</span>\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{display:block;padding:0}:host .sky-tile-dashboard-layout-multi{display:none}:host .sky-tile-dashboard-layout-single{display:block}:host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:0}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){display:block;padding:0}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi{display:none}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single{display:block}:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-xs) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:0}@media (min-width: 768px){:host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:20px}:host :host-context(.sky-theme-default){padding-top:20px}}:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:20px}:host-context(.sky-responsive-container-sm) :host-context(.sky-theme-default),:host-context(.sky-responsive-container-md) :host-context(.sky-theme-default),:host-context(.sky-responsive-container-lg) :host-context(.sky-theme-default){padding-top:20px}@media (min-width: 992px){:host{display:flex;padding:0 10px}:host .sky-tile-dashboard-layout-multi{display:block}:host .sky-tile-dashboard-layout-single{display:none}}:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){display:flex;padding:0 10px}:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi{display:block}:host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single{display:none}@media screen{.sky-assistive-text{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}}:host-context(.sky-theme-default){background-color:#eeeeef}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}@media (min-width: 768px){.sky-theme-modern :host .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile{margin-bottom:30px}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyTileDashboardService }, { type: i2.SkyMediaQueryService }, { type: i3$1.SkyLibResourcesService, decorators: [{
+                    type: Optional
+                }] }]; }, 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 SkyTileDashboardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyTileDashboardModule, declarations: [SkyTileDashboardComponent], imports: [CommonModule,
+            SkyTileDashboardColumnModule,
+            SkyTilesResourcesModule], exports: [SkyTileDashboardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileDashboardModule, providers: [DragulaService], imports: [CommonModule,
+            SkyTileDashboardColumnModule,
+            SkyTilesResourcesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTileDashboardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyTileDashboardComponent],
+                    providers: [DragulaService],
+                    imports: [
+                        CommonModule,
+                        SkyTileDashboardColumnModule,
+                        SkyTilesResourcesModule,
+                    ],
+                    exports: [SkyTileDashboardComponent],
+                }]
+        }] });
+
+class SkyTilesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTilesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyTilesModule, imports: [CommonModule], exports: [SkyTileContentModule,
+            SkyTileModule,
+            SkyTileDashboardColumnModule,
+            SkyTileDashboardModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTilesModule, providers: [DragulaService], imports: [CommonModule, SkyTileContentModule,
+            SkyTileModule,
+            SkyTileDashboardColumnModule,
+            SkyTileDashboardModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTilesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [
+                        SkyTileContentModule,
+                        SkyTileModule,
+                        SkyTileDashboardColumnModule,
+                        SkyTileDashboardModule,
+                    ],
+                    providers: [DragulaService],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+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.mjs.map