Adding component modal content

Changelog.md

@@ -4,8 +4,32 @@ All notable changes to this project will be documented in this file
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 3.0.0-rc.41
+### Changed
+ - FIO-9239:  Added missing sketchpad icons mapping
+
+## 3.0.0-rc.40
+### Changed
+ - FIO-9226 Fixed tooltips when fontawesome fallback is used
+ - FIO-9227 Fixed fontawesome fallback for help link
+
+## 3.0.0-rc.39
+### Changed
+ - FIO-9169 Changed fontawesome name of move icon
+ - FIO-8808: Bootstrap 5 class scan
+
+## 3.0.0-rc.38
+### Changed
+ - FIO-8234/FIO-7195: Fixes an issue where value properties are shown instead of labels for Select component with Resource/URL data sources in DataTable
+ - FIO-9169 Fixed missing icon in formbuilder
+
+## 3.0.0-rc.37
+### Changed
+ - FIO-8752: fix tabindex for keyboard actions
+
+## 3.0.0-rc.36
 
-## [Unreleased: 3.0.0-rc.5]
+## 3.0.0-rc.26
 ### Fixed
  - FIO-5748: changed templates to support collapsible preview in component settings
  - FIO-7224: Changed alignment for PDF condensed mode

lib/cjs/templates/bootstrap3/iconClass.js

@@ -24,6 +24,12 @@ exports.default = (iconset, name, spinning) => {
             case 'move':
                 name = 'arrows';
                 break;
+            case 'ok-sign':
+                name = 'check-circle';
+                break;
+            case 'remove-sign':
+                name = 'times-circle';
+                break;
         }
     }
     return spinning ? `${iconset} ${iconset}-${name} ${iconset}-spin` : `${iconset} ${iconset}-${name}`;

lib/cjs/templates/bootstrap4/builderSidebarGroup/form.ejs.js

@@ -41,7 +41,7 @@ __p += '\n          <span\n            ref="sidebar-component"\n            data
 '"\n            data-type="' +
 ((__t = (ctx.group.components[componentKey].schema.type)) == null ? '' : __t) +
 '"\n            class="btn btn-primary btn-sm btn-block formcomponent drag-copy"\n            tabindex="' +
-((__t = (ctx.keyboardActionsEnabled ? -1 : 0)) == null ? '' : __t) +
+((__t = (ctx.keyboardActionsEnabled ? 0 : -1)) == null ? '' : __t) +
 '"\n          >\n            ';
  if (ctx.group.components[componentKey].icon) { ;
 __p += '\n              <i class="' +

lib/cjs/templates/bootstrap4/datagrid/form.ejs.js

@@ -82,7 +82,7 @@ __p += '\n    <tr ref="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
 '-row">\n      ';
  if (ctx.component.reorder) { ;
-__p += '\n        <td class="col-md-1">\n          <button type="button" class="formio-drag-button btn btn-default fa fa-bars" data-key="' +
+__p += '\n        <td class="col-1">\n          <button type="button" class="formio-drag-button btn btn-default fa fa-bars" data-key="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
 '"></button>\n        </td>\n      ';
  } ;
@@ -104,7 +104,7 @@ __p += '\n      ';
  if (ctx.hasExtraColumn) { ;
 __p += '\n        ';
  if (ctx.hasRemoveButtons) { ;
-__p += '\n        <td class="col-md-1">\n          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="' +
+__p += '\n        <td class="col-1">\n          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
 '-removeRow" tabindex="' +
 ((__t = (ctx.tabIndex)) == null ? '' : __t) +

lib/cjs/templates/bootstrap4/iconClass.js

@@ -27,6 +27,12 @@ exports.default = (iconset, name, spinning) => {
             case 'time':
                 name = 'clock-o';
                 break;
+            case 'ok-sign':
+                name = 'check-circle';
+                break;
+            case 'remove-sign':
+                name = 'times-circle';
+                break;
         }
     }
     return spinning ? `${iconset} ${iconset}-${name} ${iconset}-spin` : `${iconset} ${iconset}-${name}`;

lib/cjs/templates/bootstrap4/tbody/html.ejs.js

@@ -14,12 +14,12 @@ __p += '\n    ';
  row.forEach(function(rowComp) { ;
 __p += '\n      ';
  if (rowComp.component.show) { ;
-__p += '\n      <td \n        ' +
+__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) +
+((__t = ( ctx.instance.hook('format', rowComp.component.key, rowComp.dataValue, rowComp.rowIndex) )) == null ? '' : __t) +
 '\n      </td>\n      ';
  } ;
 __p += '\n    ';
@@ -40,6 +40,6 @@ __p += '\n          </ul>\n        </div>\n        ⋮\n      </div>\n    </th>\
  } ;
 __p += '\n  </tr>\n  ';
  }); ;
-__p += '\n</tbody>\n</table>';
+__p += '\n</tbody>\n</table>\n';
 return __p
 }

lib/cjs/templates/bootstrap5/address/form.ejs.js

@@ -22,7 +22,7 @@ __p += '\n      value="' +
 ((__t = (ctx.t('autocomplete'))) == null ? '' : __t) +
 '"\n    >\n    ';
  if (!ctx.component.disableClearIcon) { ;
-__p += '\n      <i\n        class="address-autocomplete-remove-value-icon fa fa-times"\n        tabindex="' +
+__p += '\n      <i\n        class="address-autocomplete-remove-value-icon fa fa-times bi bi-x"\n        tabindex="' +
 ((__t = ( ctx.inputAttributes.tabindex )) == null ? '' : __t) +
 '"\n        ref="' +
 ((__t = ( ctx.ref.removeValueIcon )) == null ? '' : __t) +

lib/cjs/templates/bootstrap5/builderEditForm/form.ejs.js

@@ -56,7 +56,7 @@ __p += '\n    <div style="margin-top: 10px;">\n      <button class="btn btn-succ
 ((__t = (ctx.t('Cancel'))) == null ? '' : __t) +
 '</button>\n      <button class="btn btn-danger" ref="removeButton">' +
 ((__t = (ctx.t('Remove'))) == null ? '' : __t) +
-'</button>\n      <button class="btn btn-primary float-right" ref="previewButton">' +
+'</button>\n      <button class="btn btn-primary float-end" ref="previewButton">' +
 ((__t = (ctx.t('Hide preview'))) == null ? '' : __t) +
 '</button>\n    </div>\n  </div>\n  ';
  } ;

lib/cjs/templates/bootstrap5/builderSidebarGroup/form.ejs.js

@@ -41,7 +41,7 @@ __p += '\n          <span\n            ref="sidebar-component"\n            data
 '"\n            data-type="' +
 ((__t = (ctx.group.components[componentKey].schema.type)) == null ? '' : __t) +
 '"\n            class="btn btn-outline-primary btn-sm formcomponent drag-copy m-0"\n            tabindex="' +
-((__t = (ctx.keyboardActionsEnabled ? -1 : 0)) == null ? '' : __t) +
+((__t = (ctx.keyboardActionsEnabled ? 0 : -1)) == null ? '' : __t) +
 '"\n          >\n            ';
  if (ctx.group.components[componentKey].icon) { ;
 __p += '\n              <i class="' +

lib/cjs/templates/bootstrap5/datagrid/form.ejs.js

@@ -82,7 +82,7 @@ __p += '\n    <tr ref="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
 '-row">\n      ';
  if (ctx.component.reorder) { ;
-__p += '\n        <td>\n          <button type="button" class="formio-drag-button btn btn-default bi bi-list" data-key="' +
+__p += '\n        <td class="col-1">\n          <button type="button" class="formio-drag-button btn btn-default bi bi-list" data-key="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
 '"></button>\n        </td>\n      ';
  } ;
@@ -104,7 +104,7 @@ __p += '\n      ';
  if (ctx.hasExtraColumn) { ;
 __p += '\n        ';
  if (ctx.hasRemoveButtons) { ;
-__p += '\n        <td>\n          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="' +
+__p += '\n        <td class="col-1">\n          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
 '-removeRow" tabindex="' +
 ((__t = (ctx.tabIndex)) == null ? '' : __t) +

lib/cjs/templates/bootstrap5/iconClass.js

@@ -106,15 +106,18 @@ exports.default = (iconset, name, spinning) => {
             biName = 'plus-lg';
             break;
         case 'question-sign':
+            name = 'question-circle';
             biName = 'question-circle';
             break;
         case 'remove-circle':
             biName = 'x-circle';
             break;
         case 'new-window':
+            name = 'window-restore';
             biName = 'window-plus';
             break;
         case 'move':
+            name = 'arrows';
             biName = 'arrows-move';
             break;
         case 'edit':
@@ -132,6 +135,36 @@ exports.default = (iconset, name, spinning) => {
         case 'folder-open':
             biName = 'folder2-open';
             break;
+        case 'check-circle':
+            biName = 'check-circle-fill';
+            break;
+        case 'times-circle':
+            biName = 'x-circle-fill';
+            break;
+        case 'pencil':
+            biName = 'pencil-fill';
+            break;
+        case 'minus':
+            biName = 'dash';
+            break;
+        case 'circle':
+            biName = 'circle-fill';
+            break;
+        case 'search-plus':
+            biName = 'zoom-in';
+            break;
+        case 'search-minus':
+            biName = 'zoom-out';
+            break;
+        case 'hand-paper-o':
+            biName = 'hand-index';
+            break;
+        case 'undo':
+            biName = 'arrow-counterclockwise';
+            break;
+        case 'repeat':
+            biName = 'arrow-clockwise';
+            break;
     }
     return spinning ? 'spinner-border spinner-border-sm' : `fa fa-${name} bi bi-${biName}`;
 };

lib/mjs/templates/bootstrap3/iconClass.js

@@ -22,6 +22,12 @@ export default (iconset, name, spinning) => {
             case 'move':
                 name = 'arrows';
                 break;
+            case 'ok-sign':
+                name = 'check-circle';
+                break;
+            case 'remove-sign':
+                name = 'times-circle';
+                break;
         }
     }
     return spinning ? `${iconset} ${iconset}-${name} ${iconset}-spin` : `${iconset} ${iconset}-${name}`;

lib/mjs/templates/bootstrap4/builderSidebarGroup/form.ejs.js

@@ -38,7 +38,7 @@ __p += '\n          <span\n            ref="sidebar-component"\n            data
 '"\n            data-type="' +
 ((__t = (ctx.group.components[componentKey].schema.type)) == null ? '' : __t) +
 '"\n            class="btn btn-primary btn-sm btn-block formcomponent drag-copy"\n            tabindex="' +
-((__t = (ctx.keyboardActionsEnabled ? -1 : 0)) == null ? '' : __t) +
+((__t = (ctx.keyboardActionsEnabled ? 0 : -1)) == null ? '' : __t) +
 '"\n          >\n            ';
  if (ctx.group.components[componentKey].icon) { ;
 __p += '\n              <i class="' +

lib/mjs/templates/bootstrap4/datagrid/form.ejs.js

@@ -79,7 +79,7 @@ __p += '\n    <tr ref="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
 '-row">\n      ';
  if (ctx.component.reorder) { ;
-__p += '\n        <td class="col-md-1">\n          <button type="button" class="formio-drag-button btn btn-default fa fa-bars" data-key="' +
+__p += '\n        <td class="col-1">\n          <button type="button" class="formio-drag-button btn btn-default fa fa-bars" data-key="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
 '"></button>\n        </td>\n      ';
  } ;
@@ -101,7 +101,7 @@ __p += '\n      ';
  if (ctx.hasExtraColumn) { ;
 __p += '\n        ';
  if (ctx.hasRemoveButtons) { ;
-__p += '\n        <td class="col-md-1">\n          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="' +
+__p += '\n        <td class="col-1">\n          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
 '-removeRow" tabindex="' +
 ((__t = (ctx.tabIndex)) == null ? '' : __t) +

lib/mjs/templates/bootstrap4/iconClass.js

@@ -25,6 +25,12 @@ export default (iconset, name, spinning) => {
             case 'time':
                 name = 'clock-o';
                 break;
+            case 'ok-sign':
+                name = 'check-circle';
+                break;
+            case 'remove-sign':
+                name = 'times-circle';
+                break;
         }
     }
     return spinning ? `${iconset} ${iconset}-${name} ${iconset}-spin` : `${iconset} ${iconset}-${name}`;

lib/mjs/templates/bootstrap4/tbody/html.ejs.js

@@ -11,12 +11,12 @@ __p += '\n    ';
  row.forEach(function(rowComp) { ;
 __p += '\n      ';
  if (rowComp.component.show) { ;
-__p += '\n      <td \n        ' +
+__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) +
+((__t = ( ctx.instance.hook('format', rowComp.component.key, rowComp.dataValue, rowComp.rowIndex) )) == null ? '' : __t) +
 '\n      </td>\n      ';
  } ;
 __p += '\n    ';
@@ -37,6 +37,6 @@ __p += '\n          </ul>\n        </div>\n        ⋮\n      </div>\n    </th>\
  } ;
 __p += '\n  </tr>\n  ';
  }); ;
-__p += '\n</tbody>\n</table>';
+__p += '\n</tbody>\n</table>\n';
 return __p
 }

lib/mjs/templates/bootstrap5/address/form.ejs.js

@@ -19,7 +19,7 @@ __p += '\n      value="' +
 ((__t = (ctx.t('autocomplete'))) == null ? '' : __t) +
 '"\n    >\n    ';
  if (!ctx.component.disableClearIcon) { ;
-__p += '\n      <i\n        class="address-autocomplete-remove-value-icon fa fa-times"\n        tabindex="' +
+__p += '\n      <i\n        class="address-autocomplete-remove-value-icon fa fa-times bi bi-x"\n        tabindex="' +
 ((__t = ( ctx.inputAttributes.tabindex )) == null ? '' : __t) +
 '"\n        ref="' +
 ((__t = ( ctx.ref.removeValueIcon )) == null ? '' : __t) +

lib/mjs/templates/bootstrap5/builderEditForm/form.ejs.js

@@ -53,7 +53,7 @@ __p += '\n    <div style="margin-top: 10px;">\n      <button class="btn btn-succ
 ((__t = (ctx.t('Cancel'))) == null ? '' : __t) +
 '</button>\n      <button class="btn btn-danger" ref="removeButton">' +
 ((__t = (ctx.t('Remove'))) == null ? '' : __t) +
-'</button>\n      <button class="btn btn-primary float-right" ref="previewButton">' +
+'</button>\n      <button class="btn btn-primary float-end" ref="previewButton">' +
 ((__t = (ctx.t('Hide preview'))) == null ? '' : __t) +
 '</button>\n    </div>\n  </div>\n  ';
  } ;

lib/mjs/templates/bootstrap5/builderSidebarGroup/form.ejs.js

@@ -38,7 +38,7 @@ __p += '\n          <span\n            ref="sidebar-component"\n            data
 '"\n            data-type="' +
 ((__t = (ctx.group.components[componentKey].schema.type)) == null ? '' : __t) +
 '"\n            class="btn btn-outline-primary btn-sm formcomponent drag-copy m-0"\n            tabindex="' +
-((__t = (ctx.keyboardActionsEnabled ? -1 : 0)) == null ? '' : __t) +
+((__t = (ctx.keyboardActionsEnabled ? 0 : -1)) == null ? '' : __t) +
 '"\n          >\n            ';
  if (ctx.group.components[componentKey].icon) { ;
 __p += '\n              <i class="' +

lib/mjs/templates/bootstrap5/datagrid/form.ejs.js

@@ -79,7 +79,7 @@ __p += '\n    <tr ref="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
 '-row">\n      ';
  if (ctx.component.reorder) { ;
-__p += '\n        <td>\n          <button type="button" class="formio-drag-button btn btn-default bi bi-list" data-key="' +
+__p += '\n        <td class="col-1">\n          <button type="button" class="formio-drag-button btn btn-default bi bi-list" data-key="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
 '"></button>\n        </td>\n      ';
  } ;
@@ -101,7 +101,7 @@ __p += '\n      ';
  if (ctx.hasExtraColumn) { ;
 __p += '\n        ';
  if (ctx.hasRemoveButtons) { ;
-__p += '\n        <td>\n          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="' +
+__p += '\n        <td class="col-1">\n          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
 '-removeRow" tabindex="' +
 ((__t = (ctx.tabIndex)) == null ? '' : __t) +

lib/mjs/templates/bootstrap5/iconClass.js

@@ -104,15 +104,18 @@ export default (iconset, name, spinning) => {
             biName = 'plus-lg';
             break;
         case 'question-sign':
+            name = 'question-circle';
             biName = 'question-circle';
             break;
         case 'remove-circle':
             biName = 'x-circle';
             break;
         case 'new-window':
+            name = 'window-restore';
             biName = 'window-plus';
             break;
         case 'move':
+            name = 'arrows';
             biName = 'arrows-move';
             break;
         case 'edit':
@@ -130,6 +133,36 @@ export default (iconset, name, spinning) => {
         case 'folder-open':
             biName = 'folder2-open';
             break;
+        case 'check-circle':
+            biName = 'check-circle-fill';
+            break;
+        case 'times-circle':
+            biName = 'x-circle-fill';
+            break;
+        case 'pencil':
+            biName = 'pencil-fill';
+            break;
+        case 'minus':
+            biName = 'dash';
+            break;
+        case 'circle':
+            biName = 'circle-fill';
+            break;
+        case 'search-plus':
+            biName = 'zoom-in';
+            break;
+        case 'search-minus':
+            biName = 'zoom-out';
+            break;
+        case 'hand-paper-o':
+            biName = 'hand-index';
+            break;
+        case 'undo':
+            biName = 'arrow-counterclockwise';
+            break;
+        case 'repeat':
+            biName = 'arrow-clockwise';
+            break;
     }
     return spinning ? 'spinner-border spinner-border-sm' : `fa fa-${name} bi bi-${biName}`;
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/bootstrap",
-  "version": "3.0.0-rc.25",
+  "version": "3.0.0-rc.41",
   "description": "Bootstrap templates for Form.io forms",
   "main": "lib/cjs/bootstrap5.js",
   "module": "lib/mjs/bootstrap5.js",