Added JSdocs for tile component (#70)

* Added JSdocs for tile component

* Fix build failure

* Upgrade package-lock

* Upgrade dependencies

Co-authored-by: Blackbaud-SteveBrush <steve.brush@blackbaud.com>

package.json

@@ -42,35 +42,35 @@
     "@angular/platform-browser": "9.1.12",
     "@angular/platform-browser-dynamic": "9.1.12",
     "@angular/router": "9.1.12",
-    "@blackbaud/auth-client": "2.31.0",
+    "@blackbaud/auth-client": "2.33.0",
     "@blackbaud/skyux-lib-clipboard": "4.0.0",
     "@blackbaud/skyux-lib-code-block": "4.0.1",
     "@blackbaud/skyux-lib-media": "4.0.0",
     "@blackbaud/skyux-lib-restricted-view": "4.1.0",
     "@blackbaud/skyux-lib-stache": "4.2.1",
-    "@skyux-sdk/builder": "4.3.1",
-    "@skyux-sdk/builder-plugin-skyux": "4.0.0",
+    "@skyux-sdk/builder": "4.5.0",
+    "@skyux-sdk/builder-plugin-skyux": "4.1.1",
     "@skyux-sdk/e2e": "4.0.0",
     "@skyux-sdk/testing": "4.1.0",
     "@skyux/animations": "4.0.1",
     "@skyux/assets": "4.0.1",
     "@skyux/config": "4.0.3",
-    "@skyux/core": "4.2.0",
-    "@skyux/docs-tools": "4.2.1",
-    "@skyux/forms": "4.7.0",
+    "@skyux/core": "4.3.0",
+    "@skyux/docs-tools": "4.4.3",
+    "@skyux/forms": "4.9.0",
     "@skyux/http": "4.0.1",
     "@skyux/i18n": "4.0.1",
     "@skyux/indicators": "4.2.0",
-    "@skyux/inline-form": "4.0.1",
-    "@skyux/layout": "4.2.2",
-    "@skyux/lists": "4.2.0",
-    "@skyux/lookup": "4.2.1",
+    "@skyux/inline-form": "4.1.0",
+    "@skyux/layout": "4.2.3",
+    "@skyux/lists": "4.3.0",
+    "@skyux/lookup": "4.3.0",
     "@skyux/modals": "4.5.0",
     "@skyux/omnibar-interop": "4.0.1",
-    "@skyux/popovers": "4.2.0",
+    "@skyux/popovers": "4.2.1",
     "@skyux/router": "4.0.1",
-    "@skyux/tabs": "4.3.1",
-    "@skyux/theme": "4.8.0",
+    "@skyux/tabs": "4.3.2",
+    "@skyux/theme": "4.10.2",
     "@skyux/tiles": "4.0.2",
     "codelyzer": "5.2.2",
     "rxjs": "6.6.2",

src/app/docs/tiles/index.html

@@ -0,0 +1,2 @@
+<app-tile-docs>
+</app-tile-docs>

src/app/docs/tiles/tile-docs.component.html

@@ -0,0 +1,14 @@
+<sky-docs-demo-page
+  moduleName="SkyTilesModule"
+  moduleSourceCodePath="src/app/public/modules/tiles/"
+  pageTitle="Tile"
+>
+  <sky-docs-demo-page-summary>
+    The tile component creates a collapsible container that serves as a building block for pages and forms in SKY UX applications.
+  </sky-docs-demo-page-summary>
+
+  <sky-docs-design-guidelines>
+
+  </sky-docs-design-guidelines>
+
+</sky-docs-demo-page>

src/app/docs/tiles/tile-docs.component.ts

@@ -0,0 +1,9 @@
+import {
+  Component
+} from '@angular/core';
+
+@Component({
+  selector: 'app-tile-docs',
+  templateUrl: './tile-docs.component.html'
+})
+export class TileDocsComponent { }

src/app/index.html

@@ -1,3 +1,17 @@
+<h2>
+  Docs
+</h2>
+
+<ul>
+  <li>
+    <a skyAppLink="/docs/tiles">Tile</a>
+  </li>
+</ul>
+
+<h2>
+  Visual tests
+</h2>
+
 <ul>
   <li>
     <a skyAppLink="/visual/tiles">Tiles</a>

src/app/public/modules/tiles/tile-dashboard-config/tile-dashboard-config-layout-column.ts

@@ -1,5 +1,9 @@
 import { SkyTileDashboardConfigLayoutTile } from './tile-dashboard-config-layout-tile';
 
 export interface SkyTileDashboardConfigLayoutColumn {
+  /**
+   * An array of `SkyTileDashboardConfigTile` objects that specifies the
+   * tiles to include in the dashboard.
+   */
   tiles: SkyTileDashboardConfigLayoutTile[];
 }

src/app/public/modules/tiles/tile-dashboard-config/tile-dashboard-config-layout-tile.ts

@@ -1,4 +1,10 @@
 export interface SkyTileDashboardConfigLayoutTile {
+  /**
+   * Specifies the ID of a tile to display in the dashboard.
+   */
   id: string;
+  /**
+   * Indicates whether the tile is in a collapsed state.
+   */
   isCollapsed: boolean;
 }

src/app/public/modules/tiles/tile-dashboard-config/tile-dashboard-config-layout.ts

@@ -1,6 +1,14 @@
 import { SkyTileDashboardConfigLayoutColumn } from './tile-dashboard-config-layout-column';
 
 export interface SkyTileDashboardConfigLayout {
+  /**
+   * A `SkyTileDashboardConfigLayoutColumn` object that describes how to
+   * display tiles in a single column on small screens.
+   */
   singleColumn: SkyTileDashboardConfigLayoutColumn;
+  /**
+   * An array of `SkyTileDashboardConfigLayoutColumn` objects that describes
+   * how to display tiles in multiple columns on larger screens.
+   */
   multiColumn: SkyTileDashboardConfigLayoutColumn[];
 }

src/app/public/modules/tiles/tile-dashboard-config/tile-dashboard-config-reorder-data.ts

@@ -1,5 +1,14 @@
 export interface SkyTileDashboardConfigReorderData {
+  /**
+   * Specifies the description of the tile.
+   */
   tileDescription: string;
+  /**
+   * Specifies the column for the tile.
+   */
   column: number;
+  /**
+   * Specifies the position of the tile within the column.
+   */
   position: number;
 }

src/app/public/modules/tiles/tile-dashboard-config/tile-dashboard-config-tile.ts

@@ -1,5 +1,18 @@
 export interface SkyTileDashboardConfigTile {
+  /**
+   * Specifies the ID of the tile.
+   */
   id: string;
+  /**
+   * Specifies the class type of the tile component. Since you generate the
+   * component dynamically instead of with HTML selectors, you must register
+   * it with the entryComponents property in the app-extras.module.ts file.
+   * For more information, see the
+   * [entry components tutorial](https://developer.blackbaud.com/skyux/learn/get-started/advanced/entry-components).
+   */
   componentType: any;
+  /**
+   * Specifies an array of data providers that can be passed to the tile.
+   */
   providers?: any[];
 }

src/app/public/modules/tiles/tile-dashboard-config/tile-dashboard-config.ts

@@ -9,7 +9,19 @@ import {
 } from './tile-dashboard-config-reorder-data';
 
 export interface SkyTileDashboardConfig {
+  /**
+   * An array of SkyTileDashboardConfigTile objects that specifies the tiles
+   * to include in the dashboard.
+   * @required
+   */
   tiles: SkyTileDashboardConfigTile[];
+  /**
+   * A `SkyTileDashboardConfigLayout` object that describes the tile dashboard's layout.
+   */
   layout: SkyTileDashboardConfigLayout;
+  /**
+   * A `SkyTileDashboardConfigReorderData` object that describes
+   * how to move a tile within the dashboard.
+   */
   movedTile?: SkyTileDashboardConfigReorderData;
 }

src/app/public/modules/tiles/tile-dashboard/tile-dashboard.component.ts

@@ -55,6 +55,10 @@ import {
   providers: [SkyTileDashboardService]
 })
 export class SkyTileDashboardComponent implements AfterViewInit, OnDestroy {
+  /**
+   * Populates the tile dashboard based on the `SkyTileDashboardConfig` object.
+   * @required
+   */
   @Input()
   public set config(value: SkyTileDashboardConfig) {
     if (value && !this.configSet) {
@@ -75,9 +79,21 @@ export class SkyTileDashboardComponent implements AfterViewInit, OnDestroy {
   @Input()
   public messageStream = new Subject<SkyTileDashboardMessage>();
 
+  /**
+   * Specifies a unique key for the UI Config Service to retrieve stored settings
+   * from a database. The UI Config Service saves configuration settings for users
+   * to preserve the layout and collapsed state of tile dashboards. For more information
+   * about the UI Config Service, see the
+   * [sticky settings documentation](https://developer.blackbaud.com/skyux/learn/get-started/advanced/sticky-settings).
+   */
   @Input()
   public settingsKey: string;
 
+  /**
+   * 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.
+   */
   @Output()
   public configChange = new EventEmitter<SkyTileDashboardConfig>();
 

src/app/public/modules/tiles/tile-dashboard/tile-dashboard.service.ts

@@ -59,6 +59,9 @@ export class SkyTileDashboardService {
 
   public configChange = new EventEmitter<SkyTileDashboardConfig>();
 
+  /**
+   * Fires when the tile dashboard's initialization is complete.
+   */
   @Output()
   public dashboardInitialized = new EventEmitter<void>();
 

src/app/public/modules/tiles/tile/tile.component.ts

@@ -35,18 +35,40 @@ import {
 export class SkyTileComponent implements OnDestroy {
   public isInDashboardColumn = false;
 
+  /**
+   * Indicates whether to display a settings button in the tile header. To display the
+   * button, you must also listen for the `settingsClick` event.
+   * @default true
+   */
   @Input()
   public showSettings = true;
 
+  /**
+   * Indicates whether to display a help button in the tile header. To display the
+   * button, you must also listen for the `helpClick` event.
+   * @default true
+   */
   @Input()
   public 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`.
+   */
   @Output()
   public settingsClick = new EventEmitter();
 
+  /**
+   * Fires when the tile's collapsed state changes. Returns `true` when the tile
+   * collapses and `false` when it expands.
+   */
   @Output()
   public isCollapsedChange = new EventEmitter<boolean>();
 
+  /**
+   * Fires when users select the help button in the tile header. The help
+   * button only appears when the `showHelp` property is set to `true`.
+   */
   @Output()
   public helpClick = new EventEmitter();
 
@@ -59,6 +81,10 @@ export class SkyTileComponent implements OnDestroy {
     return this._isCollapsed;
   }
 
+  /**
+   * Indicates whether the tile is in a collapsed state.
+   * @default false
+   */
   @Input()
   public set isCollapsed(value: boolean) {
     if (this.dashboardService) {