@skyux/data-grid 0.0.1-alpha.0 → 14.5.1

package/README.md

@@ -0,0 +1,25 @@
+# @skyux/data-grid
+
+`@skyux/data-grid` provides a declarative, signal-based data grid for displaying
+tabular data. You supply a `data` array and one `<sky-data-grid-column>` for each
+column, and the grid handles sorting, paging, multiselect, loading states, column
+sizing, templates, and inline help. It is a simpler, higher-level alternative to the
+deprecated `@skyux/grids` and `@skyux/list-builder` grid view, and to building directly
+on the lower-level `@skyux/ag-grid` wrapper.
+
+## When to use
+
+- Reach for **`@skyux/data-grid`** when you want a straightforward grid driven by inputs
+  and column declarations, with the common features (sorting, paging, selection, loading)
+  built in.
+- Reach for **`@skyux/ag-grid`** when you need direct access to AG Grid's full
+  configuration and APIs for advanced scenarios this component does not cover.
+
+## Documentation
+
+See the [data grid documentation](https://developer.blackbaud.com/skyux/components/data-grid)
+on the SKY UX developer center for the full API reference, demos, and code examples.
+
+## Running unit tests
+
+Run `nx test data-grid` to execute the unit tests.

package/fesm2022/skyux-data-grid-testing.mjs

@@ -0,0 +1,100 @@
+import { SkyAgGridWrapperHarness } from '@skyux/ag-grid/testing';
+import { SkyQueryableComponentHarness } from '@skyux/core/testing';
+import { SkyWaitHarness } from '@skyux/indicators/testing';
+import { SkyPagingHarness } from '@skyux/lists/testing';
+
+/**
+ * Harness for interacting with SKY UX data grid components in tests.
+ * @preview
+ */
+class SkyDataGridHarness extends SkyQueryableComponentHarness {
+    /**
+     * @internal
+     */
+    static { this.hostSelector = 'sky-data-grid'; }
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a
+     * `SkyDataGridHarness` that meets certain criteria
+     */
+    static with(filters) {
+        return SkyDataGridHarness.getDataSkyIdPredicate(filters);
+    }
+    /**
+     * Checks whether the grid is ready.
+     */
+    async isGridReady() {
+        return await this.#getGridWrapper()
+            .then(async (grid) => await grid.isGridReady())
+            .catch(() => false);
+    }
+    /**
+     * Checks whether the grid is loading.
+     */
+    async isLoading() {
+        const waits = await this.queryHarnesses(SkyWaitHarness);
+        return await Promise.all(waits.map(async (wait) => await wait.isWaiting())).then((loadingStates) => loadingStates.some((isLoading) => isLoading));
+    }
+    /**
+     * Retrieves the IDs of the currently displayed columns.
+     */
+    async getDisplayedColumnIds() {
+        return await this.#getGridWrapper()
+            .then(async (grid) => await grid.getDisplayedColumnIds())
+            .catch(() => Promise.reject(new Error('Unable to retrieve displayed column IDs.')));
+    }
+    /**
+     * Retrieves the header names of the currently displayed columns.
+     */
+    async getDisplayedColumnHeaderNames() {
+        return await this.#getGridWrapper()
+            .then(async (grid) => await grid.getDisplayedColumnHeaderNames())
+            .catch(() => Promise.reject(new Error('Unable to retrieve displayed column header names.')));
+    }
+    /**
+     * Retrieves the total number of displayed rows.
+     */
+    async getDisplayedRowCount() {
+        return await this.#getGridWrapper()
+            .then(async (grid) => (await grid.getGridApi()).getDisplayedRowCount())
+            .catch(() => Promise.reject(new Error('Unable to retrieve total number of displayed rows.')));
+    }
+    /**
+     * Clicks the column header sort button.
+     */
+    async clickColumnSortButton(column) {
+        const btn = await this.locatorFor(`.ag-header-cell.ag-header-cell-sortable[col-id="${column}"] button.ag-header-cell-label-sortable`)();
+        await btn.click();
+    }
+    /**
+     * Gets the paging harness for the data grid. Throws if the grid is not paged.
+     */
+    async getPaging() {
+        const paging = await this.getPagingOrNull();
+        if (paging === null) {
+            throw new Error('Unable to retrieve paging. The data grid is not paged.');
+        }
+        return paging;
+    }
+    /**
+     * Gets the paging harness for the data grid, or `null` if the grid is not paged.
+     */
+    async getPagingOrNull() {
+        return await this.queryHarnessOrNull(SkyPagingHarness);
+    }
+    /**
+     * Gets the wait harness for the data grid.
+     */
+    async getWait() {
+        return await this.queryHarness(SkyWaitHarness);
+    }
+    async #getGridWrapper() {
+        return await this.queryHarness(SkyAgGridWrapperHarness);
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyDataGridHarness };
+//# sourceMappingURL=skyux-data-grid-testing.mjs.map

package/fesm2022/skyux-data-grid-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skyux-data-grid-testing.mjs","sources":["../../../../../libs/components/data-grid/testing/src/modules/data-grid/data-grid-harness.ts","../../../../../libs/components/data-grid/testing/src/skyux-data-grid-testing.ts"],"sourcesContent":["import { HarnessPredicate } from '@angular/cdk/testing';\nimport { SkyAgGridWrapperHarness } from '@skyux/ag-grid/testing';\nimport { SkyQueryableComponentHarness } from '@skyux/core/testing';\nimport { SkyWaitHarness } from '@skyux/indicators/testing';\nimport { SkyPagingHarness } from '@skyux/lists/testing';\n\nimport { SkyDataGridHarnessFilters } from './data-grid-harness.filters';\n\n/**\n * Harness for interacting with SKY UX data grid components in tests.\n * @preview\n */\nexport class SkyDataGridHarness extends SkyQueryableComponentHarness {\n  /**\n   * @internal\n   */\n  public static hostSelector = 'sky-data-grid';\n\n  /**\n   * Gets a `HarnessPredicate` that can be used to search for a\n   * `SkyDataGridHarness` that meets certain criteria\n   */\n  public static with(\n    filters: SkyDataGridHarnessFilters,\n  ): HarnessPredicate<SkyDataGridHarness> {\n    return SkyDataGridHarness.getDataSkyIdPredicate(filters);\n  }\n\n  /**\n   * Checks whether the grid is ready.\n   */\n  public async isGridReady(): Promise<boolean> {\n    return await this.#getGridWrapper()\n      .then(async (grid) => await grid.isGridReady())\n      .catch(() => false);\n  }\n\n  /**\n   * Checks whether the grid is loading.\n   */\n  public async isLoading(): Promise<boolean> {\n    const waits = await this.queryHarnesses(SkyWaitHarness);\n    return await Promise.all(\n      waits.map(async (wait): Promise<boolean> => await wait.isWaiting()),\n    ).then((loadingStates) => loadingStates.some((isLoading) => isLoading));\n  }\n\n  /**\n   * Retrieves the IDs of the currently displayed columns.\n   */\n  public async getDisplayedColumnIds(): Promise<string[]> {\n    return await this.#getGridWrapper()\n      .then(async (grid) => await grid.getDisplayedColumnIds())\n      .catch(() =>\n        Promise.reject(new Error('Unable to retrieve displayed column IDs.')),\n      );\n  }\n\n  /**\n   * Retrieves the header names of the currently displayed columns.\n   */\n  public async getDisplayedColumnHeaderNames(): Promise<string[]> {\n    return await this.#getGridWrapper()\n      .then(async (grid) => await grid.getDisplayedColumnHeaderNames())\n      .catch(() =>\n        Promise.reject(\n          new Error('Unable to retrieve displayed column header names.'),\n        ),\n      );\n  }\n\n  /**\n   * Retrieves the total number of displayed rows.\n   */\n  public async getDisplayedRowCount(): Promise<number> {\n    return await this.#getGridWrapper()\n      .then(async (grid) => (await grid.getGridApi()).getDisplayedRowCount())\n      .catch(() =>\n        Promise.reject(\n          new Error('Unable to retrieve total number of displayed rows.'),\n        ),\n      );\n  }\n\n  /**\n   * Clicks the column header sort button.\n   */\n  public async clickColumnSortButton(column: string): Promise<void> {\n    const btn = await this.locatorFor(\n      `.ag-header-cell.ag-header-cell-sortable[col-id=\"${column}\"] button.ag-header-cell-label-sortable`,\n    )();\n    await btn.click();\n  }\n\n  /**\n   * Gets the paging harness for the data grid. Throws if the grid is not paged.\n   */\n  public async getPaging(): Promise<SkyPagingHarness> {\n    const paging = await this.getPagingOrNull();\n\n    if (paging === null) {\n      throw new Error('Unable to retrieve paging. The data grid is not paged.');\n    }\n\n    return paging;\n  }\n\n  /**\n   * Gets the paging harness for the data grid, or `null` if the grid is not paged.\n   */\n  public async getPagingOrNull(): Promise<SkyPagingHarness | null> {\n    return await this.queryHarnessOrNull(SkyPagingHarness);\n  }\n\n  /**\n   * Gets the wait harness for the data grid.\n   */\n  public async getWait(): Promise<SkyWaitHarness> {\n    return await this.queryHarness(SkyWaitHarness);\n  }\n\n  async #getGridWrapper(): Promise<SkyAgGridWrapperHarness> {\n    return await this.queryHarness(SkyAgGridWrapperHarness);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}