Adding grid templates to keep the build sizes low on the grid library.

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 .idea
 .nyc_output
 coverage

lib/index.d.ts

@@ -188,6 +188,21 @@ declare const _default: {
                 'formio-modal-confirm-button': string;
                 'form-control ui fluid selection dropdown': string;
             };
+            grid: {
+                html: string;
+            };
+            pagination: {
+                html: string;
+            };
+            columnMenu: {
+                html: string;
+            };
+            tbody: {
+                html: string;
+            };
+            paginationBottom: {
+                html: string;
+            };
         };
     };
     components: {

lib/templates/index.d.ts

@@ -187,6 +187,21 @@ declare const _default: {
             'formio-modal-confirm-button': string;
             'form-control ui fluid selection dropdown': string;
         };
+        grid: {
+            html: string;
+        };
+        pagination: {
+            html: string;
+        };
+        columnMenu: {
+            html: string;
+        };
+        tbody: {
+            html: string;
+        };
+        paginationBottom: {
+            html: string;
+        };
     };
 };
 export default _default;

lib/templates/uswds/column-menu/html.ejs.js

@@ -0,0 +1,45 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default=function(ctx) {
+var __t, __p = '', __j = Array.prototype.join;
+function print() { __p += __j.call(arguments, '') }
+__p += '<div class="dropdown" ref="menu">\r\n  <ul class="dropdown-menu" ref="dropdown">\r\n    ';
+ if (ctx.options.sortable && ctx.component && ctx.component.sortable) { ;
+__p += '\r\n    <li class="dropdown-item" ref="sortAscending">↑ Sort Ascending</li>\r\n    <li class="dropdown-item" ref="sortDescending">↓ Sort Descending</li>\r\n    <li ref="rootItem" class="dropdown-divider"></li>\r\n    ';
+ } ;
+__p += '\r\n    <li ref="rootItem" class="dropdown-item">\r\n      Columns <span class="arrow-right">›</span>\r\n      <ul ref="nestedDropdown" class="dropdown-menu">\r\n        ';
+ ctx.components.forEach(function(comp) { ;
+__p += '\r\n        <li class="dropdown-item">\r\n          <div class="usa-checkbox">\r\n            <input\r\n                ref="checkbox"\r\n                ' +
+((__t = ( comp.show ? 'checked' : '' )) == null ? '' : __t) +
+'\r\n                ' +
+((__t = ( ctx.lastColumn && comp.show ? 'disabled' : '' )) == null ? '' : __t) +
+'\r\n                type="checkbox"\r\n                class="usa-checkbox__input"\r\n                id="' +
+((__t = (comp.id)) == null ? '' : __t) +
+'-checkbox"\r\n            >\r\n            <label for="' +
+((__t = (comp.id)) == null ? '' : __t) +
+'-checkbox" class="usa-checkbox__label">\r\n              ' +
+((__t = ( comp.label )) == null ? '' : __t) +
+'\r\n            </label>\r\n        </div>\r\n        </li>\r\n        ';
+ }); ;
+__p += '\r\n      </ul>\r\n    </li>\r\n    ';
+ if (ctx.options.filterable && ctx.component && ctx.component.filterable) { ;
+__p += '\r\n    <li ref="rootItem" class="dropdown-divider"></li>\r\n    <li ref="rootItem" class="dropdown-item">\r\n      Filter <span class="arrow-right">›</span>\r\n      <ul ref="nestedDropdown" class="dropdown-menu">\r\n        <form ref="filterForm" class="padding-x-2 padding-y-1">\r\n          Show items with value that:\r\n          <div class="formio-form-group">\r\n            <select ref="filterType" class="usa-select">\r\n              ';
+ ctx.filterTypes.forEach(function(filterType) { ;
+__p += '\r\n                ';
+ if (!(ctx.hideFilters.includes(ctx.component.key) && (['startsWith', 'contain', 'notContain', 'endsWith', 'matches' ].includes(filterType.type)))) { ;
+__p += '\r\n                  <option value="' +
+((__t = ( filterType.type )) == null ? '' : __t) +
+'">' +
+((__t = ( filterType.label )) == null ? '' : __t) +
+'</option>\r\n                ';
+ } ;
+__p += '\r\n              ';
+ }); ;
+__p += '\r\n            </select>\r\n          </div>\r\n          <div class="formio-form-group">\r\n            <input type="text" ref="filterInput" name="' +
+((__t = ( ctx.component && ctx.component.key )) == null ? '' : __t) +
+'" class="form-control" placeholder="Filter">\r\n          </div>\r\n          <div class="display-flex justify-content-around margin-right-0">\r\n            <button ref="filterButton" type="button" class="usa-button">Filter</button>\r\n            <button ref="clearBtn" type="button" class="usa-button usa-button--secondary">Clear</button>\r\n          </div>\r\n        </form>\r\n      </ul>\r\n    </li>\r\n    ';
+ } ;
+__p += '\r\n  </ul>\r\n</div>\r\n';
+return __p
+}

lib/templates/uswds/column-menu/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    html: string;
+};
+export default _default;

lib/templates/uswds/column-menu/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var html_ejs_1 = require("./html.ejs");
+exports.default = { html: html_ejs_1.default };

lib/templates/uswds/grid/html.ejs.js

@@ -0,0 +1,73 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default=function(ctx) {
+var __t, __p = '', __j = Array.prototype.join;
+function print() { __p += __j.call(arguments, '') }
+__p += '<div class="data-grid-wrapper data-grid-uswds-wrapper">\r\n  <div class="data-grid">\r\n    <span class="menu-container">\r\n      <div class="dropdown" ref="menu"></div>\r\n    </span>\r\n    <div style="position: relative; max-width: 86vw; display: flex; align-items: center; justify-content: space-between">\r\n        ';
+ if (ctx.component.enableRowSelect) { ;
+__p += '\r\n        <div style="min-height: 20px" >\r\n            ';
+ if (ctx.selectedRows) { ;
+__p += '\r\n            <span style=" font-size: 13px">' +
+((__t = (ctx.selectedRows)) == null ? '' : __t) +
+' selected</span>\r\n            ';
+ } ;
+__p += '\r\n        </div>\r\n        ';
+ } ;
+__p += '\r\n        <div ref="pagination" class="formio-pagination" style="margin-left: auto"></div>\r\n    </div>\r\n    <div class="usa-table-container--scrollable margin-y-1">\r\n      <div class="spinner-wrapper" ref="loader">\r\n        <div class="spinner-grow"></div>\r\n      </div>\r\n      <table class="formio-grid ' +
+((__t = ( ctx.classes )) == null ? '' : __t) +
+' usa-table">\r\n        <thead>\r\n          <tr>\r\n            ';
+ if (!ctx.component.components.length) { ;
+__p += '\r\n              <th>No components have been set up to display in the Data Table. "Table View" must be checked for components to render.</th>\r\n            ';
+ } ;
+__p += '\r\n              ';
+ if (ctx.component.enableRowSelect) { ;
+__p += '\r\n              <th style="width: 2rem" scope="col" role="columnheader">\r\n                  <input type="checkbox" name="selectAll" id="selectAll" ref="selectAll" title="select All" ' +
+((__t = (ctx.selectedAll && 'checked')) == null ? '' : __t) +
+' >\r\n                  <span style="display: none">(' +
+((__t = (ctx.selectedRows)) == null ? '' : __t) +
+' of <span ref="totalRows"></span>)</span>\r\n              </th>\r\n              ';
+ } ;
+__p += '\r\n            ';
+ ctx.component.components.forEach(function(comp, i) { ;
+__p += '\r\n              ';
+ if (comp.show) { ;
+__p += '\r\n              <th scope="col" role="columnheader" class="text-center">\r\n                <span>' +
+((__t = ( comp.label || comp.key )) == null ? '' : __t) +
+'</span>\r\n                ';
+ if (ctx.options.sortable && comp.sortable) { ;
+__p += '\r\n                <span class="sort-btn ' +
+((__t = ( (ctx.component.sort.key === comp.key || ctx.component.sort.key === comp.columnQueryProperty) ? 'sorted' : '' )) == null ? '' : __t) +
+'" ref="sort">\r\n                  ' +
+((__t = ( ctx.component.sort.isAsc ? '↑' : '↓' )) == null ? '' : __t) +
+'\r\n                </span>\r\n                ';
+ } ;
+__p += '\r\n                <span class="menu">\r\n                  <div class="menu-container">\r\n                    <span class="menu-btn' +
+((__t = ( (ctx.component.filters[comp.key] || ctx.component.filters[comp.columnQueryProperty]) ? ' filters-applied' : '' )) == null ? '' : __t) +
+'" ref="menuBtn">⋮</span>\r\n                  </div>\r\n                </span>\r\n              </th>\r\n              ';
+ } ;
+__p += '\r\n            ';
+ }); ;
+__p += '\r\n            ';
+ if ((ctx.component.showEditBtn || ctx.component.showDeleteBtn || ctx.component.showDeleteAllBtn) 
+              && ctx.data.length
+              && !ctx.options.pdf) { ;
+__p += '\r\n            <th class="formio-grid-ops position-sticky padding-0 border-left-0" style="background-color: white; ">\r\n              <div class="text-center">\r\n                <span>Actions</span>\r\n                ';
+ if (ctx.component.showDeleteAllBtn && ctx.data.length) { ;
+__p += '\r\n                <button class="usa-button delete-all-btn ' +
+((__t = ( ctx.options.readOnly ? 'disabled' : '' )) == null ? '' : __t) +
+'" ref="deleteAll"><i class="fa fa-trash"></i></button>\r\n                ';
+ } ;
+__p += '\r\n              </div>\r\n            </th>\r\n            ';
+ } ;
+__p += '\r\n          </tr>\r\n        </thead>\r\n        <tbody ref="tbody"></tbody>\r\n      </table>\r\n    </div>\r\n    <div class="formio-grid-bottom" ' +
+((__t = (ctx.component.showAddBtn ? 'style="margin-top: 10px"' : "")) == null ? '' : __t) +
+'>\r\n      <div ref="paginationBottom"></div>\r\n      ';
+ if (ctx.component.showAddBtn && !ctx.options.pdf) { ;
+__p += '\r\n        <button class="usa-button formio-new-button ' +
+((__t = ( ctx.options.readOnly ? 'disabled' : '' )) == null ? '' : __t) +
+'" ref="addRow">+</button>\r\n      ';
+ } ;
+__p += '\r\n    </div>\r\n  </div>\r\n</div>\r\n';
+return __p
+}

lib/templates/uswds/grid/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    html: string;
+};
+export default _default;

lib/templates/uswds/grid/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var html_ejs_1 = require("./html.ejs");
+exports.default = { html: html_ejs_1.default };

lib/templates/uswds/index.d.ts

@@ -186,5 +186,20 @@ declare const _default: {
         'formio-modal-confirm-button': string;
         'form-control ui fluid selection dropdown': string;
     };
+    grid: {
+        html: string;
+    };
+    pagination: {
+        html: string;
+    };
+    columnMenu: {
+        html: string;
+    };
+    tbody: {
+        html: string;
+    };
+    paginationBottom: {
+        html: string;
+    };
 };
 export default _default;

lib/templates/uswds/index.js

@@ -54,6 +54,11 @@ var wizardHeader_1 = require("./wizardHeader");
 var wizardNav_1 = require("./wizardNav");
 var size_1 = require("./size");
 var cssClasses_1 = require("./cssClasses");
+var grid_1 = require("./grid");
+var pagination_1 = require("./pagination");
+var column_menu_1 = require("./column-menu");
+var tbody_1 = require("./tbody");
+var pagination_bottom_1 = require("./pagination-bottom");
 exports.default = {
     transform: function (type, text) {
         if (!text) {
@@ -119,4 +124,9 @@ exports.default = {
     wizardNav: wizardNav_1.default,
     size: size_1.default,
     cssClasses: cssClasses_1.default,
+    grid: grid_1.default,
+    pagination: pagination_1.default,
+    columnMenu: column_menu_1.default,
+    tbody: tbody_1.default,
+    paginationBottom: pagination_bottom_1.default
 };

lib/templates/uswds/pagination-bottom/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    html: string;
+};
+export default _default;

lib/templates/uswds/pagination-bottom/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var html_ejs_1 = require("./html.ejs");
+exports.default = { html: html_ejs_1.default };

lib/templates/uswds/pagination/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    html: string;
+};
+export default _default;

lib/templates/uswds/pagination/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var html_ejs_1 = require("./html.ejs");
+exports.default = { html: html_ejs_1.default };

lib/templates/uswds/tbody/html.ejs.js

@@ -0,0 +1,45 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default=function(ctx) {
+var __t, __p = '', __j = Array.prototype.join;
+function print() { __p += __j.call(arguments, '') }
+__p += '<table>\n<tbody ref="tbody">\n  ';
+ ctx.eachRow(function(row) { ;
+__p += '\n  <tr ref="row" scope="row">\n      ';
+ if (ctx.component.enableRowSelect) { ;
+__p += '\n      <td style="text-align: center">\n          <input type="checkbox" ref="selectRow" title="select row">\n      </td>\n      ';
+ } ;
+__p += '\n    ';
+ row.forEach(function(rowComp) { ;
+__p += '\n      ';
+ if (rowComp.component.show) { ;
+__p += '\n      <td\n        ' +
+((__t = ( ctx.component.cellMaxWidth ? 'style="max-width:'+ ctx.component.cellMaxWidth + ';"' : '')) == null ? '' : __t) +
+'\n        ' +
+((__t = ( ctx.component.clipCells ? 'class="clip"' : '')) == null ? '' : __t) +
+'>\n          ' +
+((__t = ( ctx.instance.hook('format', rowComp.component.key, rowComp.dataValue) )) == null ? '' : __t) +
+'\n      </td>\n      ';
+ } ;
+__p += '\n    ';
+ }); ;
+__p += '\n    ';
+ if ((ctx.component.showEditBtn || ctx.component.showDeleteBtn || ctx.component.showDeleteAllBtn) && !ctx.options.pdf) { ;
+__p += '\n    <th class="formio-grid-ops formio-actions-col position-sticky" style="height: inherit;">\n      <div tabindex="0" class="row-menu-btn" style="height: 100%;">\n        <div class="dropdown" ref="menu">\n          <ul class="dropdown-menu padding-0" ref="dropdown">\n            ';
+ if (ctx.component.showEditBtn) { ;
+__p += '\n            <li class="dropdown-item" ref="editRow">\n              <span class="formio-grid-ops-button" style="padding: 2px; font-size: 10px; line-height: 1.2em; width: 18px;">&#9999;</span>\n              Edit row\n            </li>\n            ';
+ } ;
+__p += '\n            ';
+ if (ctx.component.showDeleteBtn) { ;
+__p += '\n            <li class="dropdown-item ' +
+((__t = ( ctx.options.readOnly ? 'disabled' : '' )) == null ? '' : __t) +
+'" ref="deleteRow">\n              <span class="formio-grid-ops-button" style="padding: 2px; font-size: 14px; line-height: 1.2em; width: 18px;">\n                <i class="fa fa-trash" aria-hidden="true"></i>\n              </span>\n              Delete row\n            </li>\n            ';
+ } ;
+__p += '\n          </ul>\n        </div>\n        ⋮\n      </div>\n    </th>\n    ';
+ } ;
+__p += '\n  </tr>\n  ';
+ }); ;
+__p += '\n</tbody>\n</table>\n';
+return __p
+}

lib/templates/uswds/tbody/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    html: string;
+};
+export default _default;

lib/templates/uswds/tbody/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var html_ejs_1 = require("./html.ejs");
+exports.default = { html: html_ejs_1.default };