Fixes for 5.x renderer

lib/cjs/bootstrap3.d.ts

@@ -132,6 +132,21 @@ declare const _default: {
             alert: {
                 form: string;
             };
+            grid: {
+                html: string;
+            };
+            pagination: {
+                html: string;
+            };
+            columnMenu: {
+                html: string;
+            };
+            tbody: {
+                html: string;
+            };
+            paginationBottom: {
+                html: string;
+            };
         };
     };
 };

lib/cjs/bootstrap4.d.ts

@@ -31,6 +31,21 @@ declare const _default: {
             alert: {
                 form: string;
             };
+            grid: {
+                html: string;
+            };
+            pagination: {
+                html: string;
+            };
+            columnMenu: {
+                html: string;
+            };
+            tbody: {
+                html: string;
+            };
+            paginationBottom: {
+                html: string;
+            };
             treeView: {
                 form: string;
             };

lib/cjs/templates/bootstrap3/builderSidebar/form.ejs.js

@@ -6,7 +6,9 @@ var __t, __p = '', __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
 __p += '<div class="builder-sidebar' +
 ((__t = (ctx.scrollEnabled ? ' builder-sidebar_scroll' : '')) == null ? '' : __t) +
-'" ref="sidebar">\n  <input class="form-control builder-sidebar_search" type="search" ref="sidebar-search" placeholder="Search field(s)" />\n  <div id="' +
+'" ref="sidebar">\n  <input class="form-control builder-sidebar_search" type="search" ref="sidebar-search" placeholder="' +
+((__t = (ctx.t('Search field(s)'))) == null ? '' : __t) +
+'" />\n  <div id="' +
 ((__t = (ctx.groupId)) == null ? '' : __t) +
 '" class="panel-group" ref="sidebar-groups">\n    ';
  ctx.groups.forEach(function(group) { ;

lib/cjs/templates/bootstrap3/column-menu/html.ejs.js

@@ -0,0 +1,41 @@
+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 ref="menu">\r\n  <ul class="dropdown-menu checkbox-menu allow-focus" 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" role="separator" class="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 checkbox-menu allow-focus">\r\n        ';
+ ctx.components.forEach(function(comp) { ;
+__p += '\r\n        <li class="dropdown-item">\r\n          <label class="radio-btn">\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="form-check-input">\r\n            <span class="form-check-label">\r\n              ' +
+((__t = ( comp.label )) == null ? '' : __t) +
+'\r\n            </span>\r\n          </label>\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" role="separator" class="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="px-3 py-2">\r\n          Show items with value that:\r\n          <div class="form-group">\r\n            <select ref="filterType" class="form-control">\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="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="form-row btn-toolbar">\r\n            <button ref="filterButton" type="button" class="btn btn-primary">Filter</button>\r\n            <button ref="clearBtn" type="button" class="btn btn-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/cjs/templates/bootstrap3/column-menu/index.d.ts

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

lib/cjs/templates/bootstrap3/column-menu/index.js

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

lib/cjs/templates/bootstrap3/grid/html.ejs.js

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

lib/cjs/templates/bootstrap3/grid/index.d.ts

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

lib/cjs/templates/bootstrap3/grid/index.js

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

lib/cjs/templates/bootstrap3/index.d.ts

@@ -129,5 +129,20 @@ declare const _default: {
     alert: {
         form: string;
     };
+    grid: {
+        html: string;
+    };
+    pagination: {
+        html: string;
+    };
+    columnMenu: {
+        html: string;
+    };
+    tbody: {
+        html: string;
+    };
+    paginationBottom: {
+        html: string;
+    };
 };
 export default _default;

lib/cjs/templates/bootstrap3/index.js

@@ -39,6 +39,11 @@ const wizardHeaderVertical_1 = require("./wizardHeaderVertical");
 const wizardNav_1 = require("./wizardNav");
 const alert_1 = require("./alert");
 const errorsList_1 = require("./errorsList");
+const grid_1 = require("./grid");
+const pagination_1 = require("./pagination");
+const column_menu_1 = require("./column-menu");
+const tbody_1 = require("./tbody");
+const pagination_bottom_1 = require("./pagination-bottom");
 exports.default = {
     transform(type, text) {
         if (!text) {
@@ -113,5 +118,10 @@ exports.default = {
     wizardHeaderVertical: wizardHeaderVertical_1.default,
     wizardNav: wizardNav_1.default,
     errorsList: errorsList_1.default,
-    alert: alert_1.default
+    alert: alert_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/cjs/templates/bootstrap3/pagination-bottom/index.d.ts

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

lib/cjs/templates/bootstrap3/pagination-bottom/index.js

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

lib/cjs/templates/bootstrap3/pagination/index.d.ts

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

lib/cjs/templates/bootstrap3/pagination/index.js

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

lib/cjs/templates/bootstrap3/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">\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-b3" style="border: none; padding: 0; position: sticky; height: inherit;">\n      <div class="row-menu-btn" style="height: 100%; border-left: 1px solid #ccc; border-right: 1px solid #ccc;">\n        <div class="dropdown" ref="menu">\n          <ul class="dropdown-menu checkbox-menu allow-focus" ref="dropdown">\n            ';
+ if (ctx.component.showEditBtn) { ;
+__p += '\n            <li class="dropdown-item" ref="editRow">\n              <span class="btn btn-xxs formio-grid-ops-button">&#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="btn btn-xxs formio-grid-ops-button">\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>';
+return __p
+}

lib/cjs/templates/bootstrap3/tbody/index.d.ts

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

lib/cjs/templates/bootstrap3/tbody/index.js

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