From ae7f187212481391846fe78a52a663d36e5af577 Mon Sep 17 00:00:00 2001
From: Travis Tidwell <travis@form.io>
Date: Thu, 28 Nov 2024 14:23:55 -0600
Subject: [PATCH 1/7] Adding component modal ref so components can redraw
 within a modal.

---
 src/templates/bootstrap4/componentModal/form.ejs | 4 ++--
 src/templates/bootstrap5/componentModal/form.ejs | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/templates/bootstrap4/componentModal/form.ejs b/src/templates/bootstrap4/componentModal/form.ejs
index 28933d1e..cdae5720 100644
--- a/src/templates/bootstrap4/componentModal/form.ejs
+++ b/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) { %}
diff --git a/src/templates/bootstrap5/componentModal/form.ejs b/src/templates/bootstrap5/componentModal/form.ejs
index a331220d..81274f57 100644
--- a/src/templates/bootstrap5/componentModal/form.ejs
+++ b/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) { %}

From 644c0ada22d0b49da85223e163113a88d7defb86 Mon Sep 17 00:00:00 2001
From: brendanjbond <brendanbond@gmail.com>
Date: Thu, 5 Dec 2024 14:00:48 -0600
Subject: [PATCH 2/7] add inline styling for select component height

---
 src/templates/bootstrap5/select/form.ejs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/templates/bootstrap5/select/form.ejs b/src/templates/bootstrap5/select/form.ejs
index b2490e28..077452ab 100644
--- a/src/templates/bootstrap5/select/form.ejs
+++ b/src/templates/bootstrap5/select/form.ejs
@@ -20,4 +20,5 @@
        {% } %}
        tabindex="-1"
        aria-label="{{ctx.t('autocomplete')}}"
+       style="height:calc(1.4em + 0.75rem + 2px);"
 />

From 2df70d369755a8d57d78512c707be614934eecf5 Mon Sep 17 00:00:00 2001
From: brendanjbond <brendanbond@gmail.com>
Date: Fri, 6 Dec 2024 14:22:40 -0600
Subject: [PATCH 3/7] fix noop style change

---
 src/templates/bootstrap5/select/form.ejs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/templates/bootstrap5/select/form.ejs b/src/templates/bootstrap5/select/form.ejs
index 077452ab..b2490e28 100644
--- a/src/templates/bootstrap5/select/form.ejs
+++ b/src/templates/bootstrap5/select/form.ejs
@@ -20,5 +20,4 @@
        {% } %}
        tabindex="-1"
        aria-label="{{ctx.t('autocomplete')}}"
-       style="height:calc(1.4em + 0.75rem + 2px);"
 />

From 8cf5ef556e8874e5a954b4681f4ffe31718a8a0b Mon Sep 17 00:00:00 2001
From: HannaKurban <96909212+HannaKurban@users.noreply.github.com>
Date: Thu, 12 Dec 2024 01:13:32 +0300
Subject: [PATCH 4/7] FIO-9377 added progressbar for for file upload with
 Display as image (#113)

---
 src/templates/bootstrap4/file/form.ejs | 12 ++++++++++++
 src/templates/bootstrap5/file/form.ejs | 12 ++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/templates/bootstrap4/file/form.ejs b/src/templates/bootstrap4/file/form.ejs
index c1b37136..23062c4c 100644
--- a/src/templates/bootstrap4/file/form.ejs
+++ b/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)) { %}
diff --git a/src/templates/bootstrap5/file/form.ejs b/src/templates/bootstrap5/file/form.ejs
index 602a130b..61bc0123 100644
--- a/src/templates/bootstrap5/file/form.ejs
+++ b/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)) { %}

From 2cdc27c87cd895c013438c3bf09883ebcc6ea28d Mon Sep 17 00:00:00 2001
From: Blake Krammes <49688912+blakekrammes@users.noreply.github.com>
Date: Wed, 11 Dec 2024 16:15:41 -0600
Subject: [PATCH 5/7] FIO-9245 DataGrid: Fix width and positioning for table
 buttons (#118)

- Remove col-1 bootstrap class, which causes the button to expand to a large width in certain cases
- Reverts https://github.com/formio/bootstrap/commit/3dde49ae769c569d9dec5e0a2126ab47359717ab#diff-d4f4129fd92b63c9446af2cf9a7d3d15b45cfbfc8b7adb61b131e5c8c1227bdf
---
 src/templates/bootstrap4/datagrid/form.ejs | 8 ++++----
 src/templates/bootstrap5/datagrid/form.ejs | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/templates/bootstrap4/datagrid/form.ejs b/src/templates/bootstrap4/datagrid/form.ejs
index 74a23a4c..fd8329fd 100644
--- a/src/templates/bootstrap4/datagrid/form.ejs
+++ b/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>
diff --git a/src/templates/bootstrap5/datagrid/form.ejs b/src/templates/bootstrap5/datagrid/form.ejs
index b3059fda..406b525e 100644
--- a/src/templates/bootstrap5/datagrid/form.ejs
+++ b/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>

From 978bf993586d165fa86e8b0e9d2f6e58709430ab Mon Sep 17 00:00:00 2001
From: Jacob Nichols <32579287+ZenMasterJacob20011@users.noreply.github.com>
Date: Thu, 12 Dec 2024 12:00:41 -0600
Subject: [PATCH 6/7] fix panel ocmponent not showing label in data grid (#114)

---
 src/templates/bootstrap3/panel/form.ejs | 4 ++--
 src/templates/bootstrap4/panel/form.ejs | 4 ++--
 src/templates/bootstrap5/panel/form.ejs | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/templates/bootstrap3/panel/form.ejs b/src/templates/bootstrap3/panel/form.ejs
index 105edd16..ac791d71 100644
--- a/src/templates/bootstrap3/panel/form.ejs
+++ b/src/templates/bootstrap3/panel/form.ejs
@@ -1,5 +1,5 @@
 <div class="panel panel-{{ctx.component.theme}}">
-  {% if (!ctx.component.hideLabel || ctx.builder || ctx.component.collapsible || ctx.component.tooltip) { %}
+  {% if (!ctx.label.hidden || ctx.builder || ctx.component.collapsible || ctx.component.tooltip) { %}
   <div class="panel-heading"
     {% if (ctx.component.collapsible) { %}
     tabindex="0"
@@ -13,7 +13,7 @@
       {% if (ctx.component.collapsible) { %}
         <i class="formio-collapse-icon {{ctx.iconClass(ctx.collapsed ? 'plus' : 'minus')}} text-muted" data-title="Collapse Panel"></i>
       {% } %}
-      {% if (!ctx.component.hideLabel || ctx.builder) { %}
+      {% if (!ctx.label.hidden || ctx.builder) { %}
       {{ctx.t(ctx.component.title, { _userInput: true })}}
       {% } %}
       {% if (ctx.component.tooltip) { %}
diff --git a/src/templates/bootstrap4/panel/form.ejs b/src/templates/bootstrap4/panel/form.ejs
index b41275c1..9184974f 100644
--- a/src/templates/bootstrap4/panel/form.ejs
+++ b/src/templates/bootstrap4/panel/form.ejs
@@ -1,5 +1,5 @@
 <div class="mb-2 card border">
-  {% if (!ctx.component.hideLabel || ctx.builder || ctx.component.collapsible || ctx.component.tooltip) { %}
+  {% if (!ctx.label.hidden || ctx.builder || ctx.component.collapsible || ctx.component.tooltip) { %}
   <div class="card-header {{ctx.transform('class', 'bg-' + ctx.component.theme)}}"
     {% if (ctx.component.collapsible) { %}
     tabindex="0"
@@ -13,7 +13,7 @@
       {% if (ctx.component.collapsible) { %}
         <i class="formio-collapse-icon {{ctx.iconClass(ctx.collapsed ? 'plus-square-o' : 'minus-square-o')}} text-muted" data-title="Collapse Panel"></i>
       {% } %}
-      {% if (!ctx.component.hideLabel || ctx.builder) { %}
+      {% if (!ctx.label.hidden || ctx.builder) { %}
       {{ctx.t(ctx.component.title, { _userInput: true })}}
       {% } %}
       {% if (ctx.component.tooltip) { %}
diff --git a/src/templates/bootstrap5/panel/form.ejs b/src/templates/bootstrap5/panel/form.ejs
index b41275c1..9184974f 100644
--- a/src/templates/bootstrap5/panel/form.ejs
+++ b/src/templates/bootstrap5/panel/form.ejs
@@ -1,5 +1,5 @@
 <div class="mb-2 card border">
-  {% if (!ctx.component.hideLabel || ctx.builder || ctx.component.collapsible || ctx.component.tooltip) { %}
+  {% if (!ctx.label.hidden || ctx.builder || ctx.component.collapsible || ctx.component.tooltip) { %}
   <div class="card-header {{ctx.transform('class', 'bg-' + ctx.component.theme)}}"
     {% if (ctx.component.collapsible) { %}
     tabindex="0"
@@ -13,7 +13,7 @@
       {% if (ctx.component.collapsible) { %}
         <i class="formio-collapse-icon {{ctx.iconClass(ctx.collapsed ? 'plus-square-o' : 'minus-square-o')}} text-muted" data-title="Collapse Panel"></i>
       {% } %}
-      {% if (!ctx.component.hideLabel || ctx.builder) { %}
+      {% if (!ctx.label.hidden || ctx.builder) { %}
       {{ctx.t(ctx.component.title, { _userInput: true })}}
       {% } %}
       {% if (ctx.component.tooltip) { %}

From 5eca00767de3dbdfd5586efb10326ab14a5f6bcc Mon Sep 17 00:00:00 2001
From: TanyaGashtold <61136841+TanyaGashtold@users.noreply.github.com>
Date: Mon, 16 Dec 2024 19:23:46 +0300
Subject: [PATCH 7/7] FIO-8465: added templates for select all rows alert
 (#112)

---
 src/templates/bootstrap3/grid/html.ejs        |  3 +++
 src/templates/bootstrap3/index.ts             |  5 +++-
 .../bootstrap3/selectAllContent/html.ejs      | 23 +++++++++++++++++++
 .../bootstrap3/selectAllContent/index.ts      |  2 ++
 src/templates/bootstrap4/grid/html.ejs        |  3 +++
 src/templates/bootstrap4/index.ts             |  4 +++-
 .../bootstrap4/selectAllContent/html.ejs      | 23 +++++++++++++++++++
 .../bootstrap4/selectAllContent/index.ts      |  2 ++
 8 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 src/templates/bootstrap3/selectAllContent/html.ejs
 create mode 100644 src/templates/bootstrap3/selectAllContent/index.ts
 create mode 100644 src/templates/bootstrap4/selectAllContent/html.ejs
 create mode 100644 src/templates/bootstrap4/selectAllContent/index.ts

diff --git a/src/templates/bootstrap3/grid/html.ejs b/src/templates/bootstrap3/grid/html.ejs
index 0868e2f4..ef9b6b61 100644
--- a/src/templates/bootstrap3/grid/html.ejs
+++ b/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>
diff --git a/src/templates/bootstrap3/index.ts b/src/templates/bootstrap3/index.ts
index eb043700..2562a7c6 100644
--- a/src/templates/bootstrap3/index.ts
+++ b/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
 };
diff --git a/src/templates/bootstrap3/selectAllContent/html.ejs b/src/templates/bootstrap3/selectAllContent/html.ejs
new file mode 100644
index 00000000..6efae62d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/templates/bootstrap3/selectAllContent/index.ts b/src/templates/bootstrap3/selectAllContent/index.ts
new file mode 100644
index 00000000..6cc911a1
--- /dev/null
+++ b/src/templates/bootstrap3/selectAllContent/index.ts
@@ -0,0 +1,2 @@
+import html from './html.ejs';
+export default { html };
\ No newline at end of file
diff --git a/src/templates/bootstrap4/grid/html.ejs b/src/templates/bootstrap4/grid/html.ejs
index ce5536a8..c12e0f8a 100644
--- a/src/templates/bootstrap4/grid/html.ejs
+++ b/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>
diff --git a/src/templates/bootstrap4/index.ts b/src/templates/bootstrap4/index.ts
index 184b1d01..abf8916b 100644
--- a/src/templates/bootstrap4/index.ts
+++ b/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
 };
diff --git a/src/templates/bootstrap4/selectAllContent/html.ejs b/src/templates/bootstrap4/selectAllContent/html.ejs
new file mode 100644
index 00000000..6efae62d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/templates/bootstrap4/selectAllContent/index.ts b/src/templates/bootstrap4/selectAllContent/index.ts
new file mode 100644
index 00000000..6cc911a1
--- /dev/null
+++ b/src/templates/bootstrap4/selectAllContent/index.ts
@@ -0,0 +1,2 @@
+import html from './html.ejs';
+export default { html };
\ No newline at end of file