Merge branch 'main' into FIO-8727-fix-panel-component-not-showing-lab…

…el-in-data-grid

src/templates/bootstrap3/grid/html.ejs

@@ -17,6 +17,9 @@
       <div class="spinner-wrapper" ref="loader">
         <div class="spinner-grow"></div>
       </div>
+      {% if (ctx.component.selectAllRows) { %}
+      <div ref="selectAllRowsContainer"></div>
+      {% } %}
       <table class="table{{ ctx.classes }} formio-grid">
         <thead>
           <tr>

src/templates/bootstrap3/index.ts

@@ -42,6 +42,7 @@ import pagination from './pagination';
 import columnMenu from './column-menu';
 import tbody from './tbody';
 import paginationBottom from './pagination-bottom';
+import selectAllContent from './selectAllContent';
 
 export default {
   transform(type, text) {
@@ -58,6 +59,7 @@ export default {
     if (builder.scrollResizeObserver) {
       builder.scrollResizeObserver.disconnect();
     }
+    // @ts-ignore
     builder.scrollResizeObserver = new ResizeObserver(() => {
       setTimeout(() => {
         const { form, sidebar } = builder.refs;
@@ -124,5 +126,6 @@ export default {
   pagination,
   columnMenu,
   tbody,
-  paginationBottom
+  paginationBottom,
+  selectAllContent
 };

src/templates/bootstrap3/selectAllContent/html.ejs

@@ -0,0 +1,23 @@
+<div class="formio-grid-select-wrapper alert text-secondary text-center">
+  <span class="formio-grid-select-info">
+    {% if (!ctx.allRowsSelected) { %}
+      All {{ ctx.totalSelected }} records on this page are selected.
+    {% } %}
+    {% if (ctx.allRowsSelected) { %}
+      All {{ ctx.totalItems }} records in the table are selected.
+    {% } %}
+  </span>
+  <span class="formio-grid-select-spinner">
+    <div class="spinner-grow"></div>
+  </span>
+  <span ref="selectAllBtn" class="formio-grid-select-btn text-primary">
+    <span>
+      {% if (!ctx.allRowsSelected) { %}
+        Select all {{ ctx.totalItems }} items in the table.
+      {% } %}
+      {% if (ctx.allRowsSelected) { %}
+        Clear selection.
+      {% } %}
+    </span>
+  </span>
+</div>

src/templates/bootstrap3/selectAllContent/index.ts

@@ -0,0 +1,2 @@
+import html from './html.ejs';
+export default { html };

src/templates/bootstrap4/componentModal/form.ejs

@@ -9,9 +9,9 @@
       {% } else { %}
       <button class="formio-dialog-close float-right btn btn-secondary btn-sm" aria-label="Close button. Click to get back to the form" ref="modalClose"></button>
       {% } %}
-      <div ref="modalContents">
+      <div ref="modalContent">
         {% if (ctx.visible) { %}
-        {{ctx.children}}
+        <div ref="componentContent">{{ctx.children}}</div>
         {% } %}
         <div class="formio-dialog-buttons">
           {% if (ctx.options.vpat) { %}

src/templates/bootstrap4/datagrid/form.ejs

@@ -38,8 +38,8 @@
     {% } %}
     <tr ref="{{ctx.datagridKey}}-row">
       {% if (ctx.component.reorder) { %}
-        <td class="col-1">
-          <button type="button" class="formio-drag-button btn btn-default fa fa-bars" data-key="{{ctx.datagridKey}}"></button>
+        <td>
+          <button type="button" class="formio-drag-button btn btn-default fa fa-bars" data-key="{{ctx.datagridKey}}" style="display: block; margin: 0 auto"></button>
         </td>
       {% } %}
       {% ctx.columns.forEach(function(col) { %}
@@ -49,8 +49,8 @@
       {% }) %}
       {% if (ctx.hasExtraColumn) { %}
         {% if (ctx.hasRemoveButtons) { %}
-        <td class="col-1">
-          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}" aria-label="{{ctx.t('remove')}}">
+        <td>
+          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}" aria-label="{{ctx.t('remove')}}" style="display: block; margin: 0 auto">
             <i class="{{ctx.iconClass('remove-circle')}}"></i>
           </button>
         </td>

src/templates/bootstrap4/file/form.ejs

@@ -124,6 +124,18 @@
         </span>
       </div>
     {% }) %}
+    {% ctx.filesToUpload.forEach(function(file) { %}
+      {% if (file.status === 'progress') { %}
+        <div class="text-right">{{ctx.fileSize(file.size)}}</div>
+        <div class="status progress">
+          <div id={{file.id}} class="progress-bar" role="progressbar" aria-valuenow="{{file.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{file.progress}}%" ref="progress">
+            <span class="sr-only">{{file.progress}}% {{ctx.t('Complete')}}</span>
+          </div>
+        </div>
+      {% } else { %}
+        <div class="status text-{{file.status === 'error' ? 'danger': file.status}}">{{ctx.t(file.message)}}</div>
+      {% } %}
+    {% }) %}
   </div>
 {% } %}
 {% if (!ctx.disabled && (ctx.component.multiple || !ctx.files.length)) { %}

src/templates/bootstrap4/grid/html.ejs

@@ -15,6 +15,9 @@
       <div class="spinner-wrapper" ref="loader">
         <div class="spinner-grow"></div>
       </div>
+      {% if (ctx.component.selectAllRows) { %}
+      <div ref="selectAllRowsContainer"></div>
+      {% } %}
       <table class="table{{ ctx.classes }} formio-grid">
         <thead>
           <tr>

src/templates/bootstrap4/index.ts

@@ -67,6 +67,7 @@ import pagination from './pagination';
 import columnMenu from './column-menu';
 import tbody from './tbody';
 import paginationBottom from './pagination-bottom';
+import selectAllContent from './selectAllContent';
 
 export default {
   transform(type, text) {
@@ -148,5 +149,6 @@ export default {
   pagination,
   columnMenu,
   tbody,
-  paginationBottom
+  paginationBottom,
+  selectAllContent
 };

src/templates/bootstrap4/selectAllContent/html.ejs

@@ -0,0 +1,23 @@
+<div class="formio-grid-select-wrapper alert text-secondary text-center">
+  <span class="formio-grid-select-info">
+    {% if (!ctx.allRowsSelected) { %}
+      All {{ ctx.totalSelected }} records on this page are selected.
+    {% } %}
+    {% if (ctx.allRowsSelected) { %}
+      All {{ ctx.totalItems }} records in the table are selected.
+    {% } %}
+  </span>
+  <span class="formio-grid-select-spinner">
+    <div class="spinner-grow"></div>
+  </span>
+  <span ref="selectAllBtn" class="formio-grid-select-btn text-primary">
+    <span>
+      {% if (!ctx.allRowsSelected) { %}
+        Select all {{ ctx.totalItems }} items in the table.
+      {% } %}
+      {% if (ctx.allRowsSelected) { %}
+        Clear selection.
+      {% } %}
+    </span>
+  </span>
+</div>

src/templates/bootstrap4/selectAllContent/index.ts

@@ -0,0 +1,2 @@
+import html from './html.ejs';
+export default { html };

src/templates/bootstrap5/componentModal/form.ejs

@@ -9,9 +9,9 @@
       {% } else { %}
       <button class="formio-dialog-close float-end btn btn-secondary btn-sm" aria-label="Close button. Click to get back to the form" ref="modalClose"></button>
       {% } %}
-      <div ref="modalContents">
+      <div ref="modalContent">
         {% if (ctx.visible) { %}
-        {{ctx.children}}
+        <div ref="componentContent">{{ctx.children}}</div>
         {% } %}
         <div class="formio-dialog-buttons">
           {% if (ctx.options.vpat) { %}

src/templates/bootstrap5/datagrid/form.ejs

@@ -38,8 +38,8 @@
     {% } %}
     <tr ref="{{ctx.datagridKey}}-row">
       {% if (ctx.component.reorder) { %}
-        <td class="col-1">
-          <button type="button" class="formio-drag-button btn btn-default bi bi-list" data-key="{{ctx.datagridKey}}"></button>
+        <td>
+          <button type="button" class="formio-drag-button btn btn-default bi bi-list" data-key="{{ctx.datagridKey}}" style="display: block; margin: 0 auto"></button>
         </td>
       {% } %}
       {% ctx.columns.forEach(function(col) { %}
@@ -49,8 +49,8 @@
       {% }) %}
       {% if (ctx.hasExtraColumn) { %}
         {% if (ctx.hasRemoveButtons) { %}
-        <td class="col-1">
-          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}" aria-label="{{ctx.t('remove')}}">
+        <td>
+          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}" aria-label="{{ctx.t('remove')}}" style="display: block; margin: 0 auto">
             <i class="{{ctx.iconClass('remove-circle')}}"></i>
           </button>
         </td>

src/templates/bootstrap5/file/form.ejs

@@ -124,6 +124,18 @@
         </span>
       </div>
     {% }) %}
+    {% ctx.filesToUpload.forEach(function(file) { %}
+      {% if (file.status === 'progress') { %}
+        <div class="text-end">{{ctx.fileSize(file.size)}}</div>
+        <div class="status progress">
+          <div id="{{file.id}}" class="progress-bar" role="progressbar" aria-valuenow="{{file.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{file.progress}}%" ref="progress">
+            <span class="visually-hidden">{{file.progress}}% {{ctx.t('Complete')}}</span>
+          </div>
+        </div>
+      {% } else { %}
+        <div class="status text-{{file.status === 'error' ? 'danger': file.status}}">{{ctx.t(file.message)}}</div>
+      {% } %}
+    {% }) %}
   </div>
 {% } %}
 {% if (!ctx.disabled && (ctx.component.multiple || !ctx.files.length)) { %}