@tsed/tailwind-formio 2.1.2 → 2.2.0

package/dist/index.js

@@ -13,7 +13,7 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function form (ctx) {
+function form$Y (ctx) {
   var __t,
     __p = '';
   if (ctx.mode.autocomplete) {
@@ -48,10 +48,10 @@ function form (ctx) {
 }
 
 var address = {
-  form: form
+  form: form$Y
 };
 
-function form$1 (ctx) {
+function form$X (ctx) {
   var __t,
     __p = '';
   __p += '<div\n  ';
@@ -67,21 +67,21 @@ function form$1 (ctx) {
 }
 
 var alert = {
-  form: form$1
+  form: form$X
 };
 
-function form$2 (ctx) {
+function form$W (ctx) {
   var __t,
     __p = '';
   __p += '<div class="formio builder grid grid-cols-12 gap-4 formbuilder">\n  <div class="col-span-12 xs:col-span-4 sm:col-span-3 md:col-span-2 formcomponents">\n    ' + ((__t = ctx.sidebar) == null ? '' : __t) + '\n  </div>\n  <div class="col-span-12 xs:col-span-8 sm:col-span-9 md:col-span-10 formarea" ref="form">\n    ' + ((__t = ctx.form) == null ? '' : __t) + '\n  </div>\n</div>\n';
   return __p;
 }
 
-var builder = {
-  form: form$2
+var builder$2 = {
+  form: form$W
 };
 
-function form$3 (ctx) {
+function form$V (ctx) {
   var __t,
     __p = '';
   __p += '<div class="builder-component" ref="dragComponent">\n  ';
@@ -93,10 +93,10 @@ function form$3 (ctx) {
 }
 
 var builderComponent = {
-  form: form$3
+  form: form$V
 };
 
-function form$4 (ctx) {
+function form$U (ctx) {
   var __t,
     __p = '';
   __p += '<div class="builder-components drag-container formio-builder-' + ((__t = ctx.type) == null ? '' : __t) + '" ref="' + ((__t = ctx.key) == null ? '' : __t) + '-container">\n  ' + ((__t = ctx.html) == null ? '' : __t) + '\n</div>\n';
@@ -104,10 +104,10 @@ function form$4 (ctx) {
 }
 
 var builderComponents = {
-  form: form$4
+  form: form$U
 };
 
-function form$5 (ctx) {
+function form$T (ctx) {
   var __t,
     __p = '';
   __p += '<div class="flex flex-col w-full h-full">\n  <div>\n    <div class="grid grid-cols-12 gap-4">\n      <div class="col-span-6">\n        <div class="text-md px-3 py-3">\n          ' + ((__t = ctx.t(ctx.componentInfo.title, {
@@ -135,10 +135,10 @@ function form$5 (ctx) {
 }
 
 var builderEditForm = {
-  form: form$5
+  form: form$T
 };
 
-function form$6 (ctx) {
+function form$S (ctx) {
   var __t,
     __p = '';
   __p += '<div\n  class="drag-and-drop-alert alert alert-info no-drag"\n  style="text-align:center;"\n  role="alert"\n  data-noattach="true"\n  data-position="' + ((__t = ctx.position) == null ? '' : __t) + '"\n>\n  ' + ((__t = ctx.t('Drag and Drop a form component')) == null ? '' : __t) + '\n</div>\n';
@@ -146,10 +146,10 @@ function form$6 (ctx) {
 }
 
 var builderPlaceholder = {
-  form: form$6
+  form: form$S
 };
 
-function form$7 (ctx) {
+function form$R (ctx) {
   var __t,
     __p = '';
   __p += '<div id="' + ((__t = ctx.groupId) == null ? '' : __t) + '" class="accordion 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 ref="sidebar-groups">\n    ';
@@ -161,10 +161,10 @@ function form$7 (ctx) {
 }
 
 var builderSidebar = {
-  form: form$7
+  form: form$R
 };
 
-function form$8 (ctx) {
+function form$Q (ctx) {
   var __t,
     __p = '';
   __p += '<div class="card form-builder-panel" ref="group-panel-' + ((__t = ctx.groupKey) == null ? '' : __t) + '">\n  <div class="card-header form-builder-group-header" id="heading-' + ((__t = ctx.groupKey) == null ? '' : __t) + '">\n    <h5 class="mb-0 mt-0">\n      <button\n        class="btn btn-block builder-group-button"\n        type="button"\n        data-toggle="collapse"\n        data-target="#group-' + ((__t = ctx.groupKey) == null ? '' : __t) + '"\n        data-parent="#' + ((__t = ctx.groupId) == null ? '' : __t) + '"\n        aria-expanded="' + ((__t = ctx.group.default) == null ? '' : __t) + '"\n        aria-controls="group-' + ((__t = ctx.groupKey) == null ? '' : __t) + '"\n        ref="sidebar-anchor"\n      >\n        ' + ((__t = ctx.t(ctx.group.title)) == null ? '' : __t) + '\n      </button>\n    </h5>\n  </div>\n  <div\n    id="group-' + ((__t = ctx.groupKey) == null ? '' : __t) + '"\n    class="collapse ' + ((__t = ctx.group.default ? ' show' : '') == null ? '' : __t) + '"\n    data-parent="#' + ((__t = ctx.groupId) == null ? '' : __t) + '"\n    data-default="' + ((__t = ctx.group.default) == null ? '' : __t) + '"\n    aria-labelledby="heading-' + ((__t = ctx.groupKey) == null ? '' : __t) + '"\n    ref="sidebar-group"\n  >\n    <div id="group-container-' + ((__t = ctx.groupKey) == null ? '' : __t) + '" class="card-body no-drop p-2" ref="sidebar-container">\n      ';
@@ -188,10 +188,10 @@ function form$8 (ctx) {
 }
 
 var builderSidebarGroup = {
-  form: form$8
+  form: form$Q
 };
 
-function form$9 (ctx) {
+function form$P (ctx) {
   var __t,
     __p = '';
   __p += '<div class="formio builder grid grid-cols-12 gap-4 formbuilder">\n  <div class="col-span-12 xs:col-span-4 sm:col-span-3 md:col-span-2 formcomponents">\n    ' + ((__t = ctx.sidebar) == null ? '' : __t) + '\n  </div>\n  <div class="col-span-12 xs:col-span-8 sm:col-span-9 md:col-span-10 formarea">\n    <ol class="breadcrumb bg-gray-200">\n      ';
@@ -209,10 +209,10 @@ function form$9 (ctx) {
 }
 
 var builderWizard = {
-  form: form$9
+  form: form$P
 };
 
-function form$a (ctx) {
+function form$O (ctx) {
   var __t,
     __p = '';
   __p += '<' + ((__t = ctx.input.type) == null ? '' : __t) + '\n  ref="button"\n  ';
@@ -243,18 +243,18 @@ function form$a (ctx) {
   return __p;
 }
 
-function html (ctx) {
+function html$b (ctx) {
   var __p = '';
   __p += '\n';
   return __p;
 }
 
 var button = {
-  form: form$a,
-  html: html
+  form: form$O,
+  html: html$b
 };
 
-function form$b (ctx) {
+function form$N (ctx) {
   var __t,
     __p = '';
   __p += '<div class="form-check checkbox">\n  <label class="' + ((__t = ctx.input.labelClass) == null ? '' : __t) + ' form-check-label">\n    <' + ((__t = ctx.input.type) == null ? '' : __t) + '\n      ref="input"\n      ';
@@ -281,7 +281,7 @@ function form$b (ctx) {
   return __p;
 }
 
-function html$1 (ctx) {
+function html$a (ctx) {
   var __t,
     __p = '';
   __p += '<label class="' + ((__t = ctx.input.labelClass) == null ? '' : __t) + '">\n    ' + ((__t = ctx.input.content) == null ? '' : __t) + '\n    ';
@@ -299,11 +299,11 @@ function html$1 (ctx) {
 }
 
 var checkbox = {
-  form: form$b,
-  html: html$1
+  form: form$N,
+  html: html$a
 };
 
-function form$c (ctx) {
+function form$M (ctx) {
   var __t,
     __p = '';
   ctx.component.columns.forEach(function (column, index) {
@@ -314,10 +314,10 @@ function form$c (ctx) {
 }
 
 var columns = {
-  form: form$c
+  form: form$M
 };
 
-function form$d (ctx) {
+function form$L (ctx) {
   var __t,
     __p = '';
   __p += '<div id="' + ((__t = ctx.id) == null ? '' : __t) + '" class="' + ((__t = ctx.classes) == null ? '' : __t) + '"';
@@ -333,10 +333,10 @@ function form$d (ctx) {
 }
 
 var component = {
-  form: form$d
+  form: form$L
 };
 
-function form$e (ctx) {
+function form$K (ctx) {
   var __t,
     __p = '';
   __p += '<div class="formio-component-modal-wrapper formio-component-modal-wrapper-' + ((__t = ctx.component.type) == null ? '' : __t) + '" ref="componentModalWrapper">\n  <div ref="openModalWrapper"></div>\n  <div class="formio-dialog formio-dialog-theme-default component-rendering-hidden" ref="modalWrapper">\n    <div class="formio-dialog-overlay" ref="modalOverlay"></div>\n    <div class="formio-dialog-content" aria-labelledby="ml-' + ((__t = ctx.instance.id) == null ? '' : __t) + '-' + ((__t = ctx.component.key) == null ? '' : __t) + '" ';
@@ -362,10 +362,10 @@ function form$e (ctx) {
 }
 
 var componentModal = {
-  form: form$e
+  form: form$K
 };
 
-function form$f (ctx) {
+function form$J (ctx) {
   var __t,
     __p = '';
   __p += ((__t = ctx.children.join('')) == null ? '' : __t) + '\n';
@@ -373,10 +373,10 @@ function form$f (ctx) {
 }
 
 var components = {
-  form: form$f
+  form: form$J
 };
 
-function form$g (ctx) {
+function form$I (ctx) {
   var __t,
     __p = '';
   __p += '<div ref="' + ((__t = ctx.nestedKey) == null ? '' : __t) + '">\n  ' + ((__t = ctx.children) == null ? '' : __t) + '\n</div>\n';
@@ -384,7 +384,7 @@ function form$g (ctx) {
 }
 
 var container = {
-  form: form$g
+  form: form$I
 };
 
 var cssClasses = {
@@ -394,7 +394,7 @@ var cssClasses = {
   "formio-tab-link-container-active": "active"
 };
 
-function form$h (ctx) {
+function form$H (ctx) {
   var __t,
     __p = '';
   __p += '<table class="table datagrid-table table-bordered\n    ' + ((__t = ctx.component.striped ? 'table-striped' : '') == null ? '' : __t) + '\n    ' + ((__t = ctx.component.hover ? 'table-hover' : '') == null ? '' : __t) + '\n    ' + ((__t = ctx.component.condensed ? 'table-sm' : '') == null ? '' : __t) + '\n    " ';
@@ -471,7 +471,7 @@ function form$h (ctx) {
   return __p;
 }
 
-function html$2 (ctx) {
+function html$9 (ctx) {
   var __t,
     __p = '';
   __p += '<table class="table datagrid-table table-bordered\n    ' + ((__t = ctx.component.striped ? 'table-striped' : '') == null ? '' : __t) + '\n    ' + ((__t = ctx.component.hover ? 'table-hover' : '') == null ? '' : __t) + '\n    ' + ((__t = ctx.component.condensed ? 'table-sm' : '') == null ? '' : __t) + '\n    ">\n  ';
@@ -501,11 +501,11 @@ function html$2 (ctx) {
 }
 
 var datagrid = {
-  form: form$h,
-  html: html$2
+  form: form$H,
+  html: html$9
 };
 
-function form$i (ctx) {
+function form$G (ctx) {
   var __t,
     __p = '';
   __p += '<div class="grid grid-cols-12 gap-4"\n  ';
@@ -571,20 +571,20 @@ function form$i (ctx) {
 }
 
 var day = {
-  form: form$i
+  form: form$G
 };
 
-function form$j (ctx) {
+function form$F (ctx) {
   var __p = '';
   __p += '<div class="formio-dialog formio-dialog-theme-default component-settings">\n  <div class="formio-dialog-overlay" ref="dialogOverlay"></div>\n  <div class="formio-dialog-content" ref="dialogContents" role="dialog">\n    <div ref="dialogContents"></div>\n    <button class="formio-dialog-close float-right btn btn-secondary btn-sm" aria-label="Close modal window." ref="dialogClose"></button>\n  </div>\n</div>\n';
   return __p;
 }
 
 var dialog = {
-  form: form$j
+  form: form$F
 };
 
-function form$k (ctx) {
+function form$E (ctx) {
   var __t,
     __p = '';
   __p += '<ul class="editgrid-listgroup list-group\n    ' + ((__t = ctx.component.striped ? 'table-striped' : '') == null ? '' : __t) + '\n    ' + ((__t = ctx.component.bordered ? 'table-bordered' : '') == null ? '' : __t) + '\n    ' + ((__t = ctx.component.hover ? 'table-hover' : '') == null ? '' : __t) + '\n    ' + ((__t = ctx.component.condensed ? 'table-sm' : '') == null ? '' : __t) + '\n    ">\n  ';
@@ -621,7 +621,7 @@ function form$k (ctx) {
   return __p;
 }
 
-function html$3 (ctx) {
+function html$8 (ctx) {
   var __t,
     __p = '';
   __p += '<ul class="editgrid-listgroup list-group\n    ' + ((__t = ctx.component.striped ? 'table-striped' : '') == null ? '' : __t) + '\n    ' + ((__t = ctx.component.bordered ? 'table-bordered' : '') == null ? '' : __t) + '\n    ' + ((__t = ctx.component.hover ? 'table-hover' : '') == null ? '' : __t) + '\n    ' + ((__t = ctx.component.condensed ? 'table-sm' : '') == null ? '' : __t) + '\n    ">\n  ';
@@ -653,11 +653,11 @@ function html$3 (ctx) {
 }
 
 var editgrid = {
-  form: form$k,
-  html: html$3
+  form: form$E,
+  html: html$8
 };
 
-function form$l (ctx) {
+function form$D (ctx) {
   var __t,
     __p = '';
   __p += '<div class="editgrid-table-container">\n  <div class="table-responsive">\n    <table class="table\n      ' + ((__t = ctx.component.striped ? 'table-striped' : '') == null ? '' : __t) + '\n      ' + ((__t = ctx.component.bordered ? 'table-bordered' : '') == null ? '' : __t) + '\n      ' + ((__t = ctx.component.hover ? 'table-hover' : '') == null ? '' : __t) + '\n      ' + ((__t = ctx.component.condensed ? 'table-sm' : '') == null ? '' : __t) + '\n    ">\n      ';
@@ -698,7 +698,7 @@ function form$l (ctx) {
   return __p;
 }
 
-function html$4 (ctx) {
+function html$7 (ctx) {
   var __t,
     __p = '';
   __p += '<div class="editgrid-table-container">\n  <div class="table-responsive">\n    <table class="table\n      ' + ((__t = ctx.component.striped ? 'table-striped' : '') == null ? '' : __t) + '\n      ' + ((__t = ctx.component.bordered ? 'table-bordered' : '') == null ? '' : __t) + '\n      ' + ((__t = ctx.component.hover ? 'table-hover' : '') == null ? '' : __t) + '\n      ' + ((__t = ctx.component.condensed ? 'table-sm' : '') == null ? '' : __t) + '\n    ">\n      ';
@@ -734,11 +734,11 @@ function html$4 (ctx) {
 }
 
 var editgridTable = {
-  form: form$l,
-  html: html$4
+  form: form$D,
+  html: html$7
 };
 
-function form$m (ctx) {
+function form$C (ctx) {
   var __t,
     __p = '';
   __p += '<p>' + ((__t = ctx.t('error')) == null ? '' : __t) + '\n  ';
@@ -754,7 +754,7 @@ function form$m (ctx) {
 }
 
 var errorsList = {
-  form: form$m
+  form: form$C
 };
 
 function align (ctx) {
@@ -778,7 +778,7 @@ function align (ctx) {
   return __p;
 }
 
-function form$n (ctx) {
+function form$B (ctx) {
   var __t,
     __p = '';
   if (!ctx.label.hidden && ctx.label.labelPosition !== 'bottom') {
@@ -803,11 +803,11 @@ function form$n (ctx) {
 }
 
 var field = {
-  form: form$n,
+  form: form$B,
   align: align
 };
 
-function form$o (ctx) {
+function form$A (ctx) {
   var __t,
     __p = '';
   __p += '<fieldset>\n  ';
@@ -829,10 +829,10 @@ function form$o (ctx) {
 }
 
 var fieldset = {
-  form: form$o
+  form: form$A
 };
 
-function form$p (ctx) {
+function form$z (ctx) {
   var __t,
     __p = '';
   if (ctx.options.vpat) {
@@ -959,10 +959,10 @@ function form$p (ctx) {
 }
 
 var file = {
-  form: form$p
+  form: form$z
 };
 
-function form$q (ctx) {
+function form$y (ctx) {
   var __t,
     __p = '';
   __p += '<' + ((__t = ctx.tag) == null ? '' : __t) + ' class="' + ((__t = ctx.component.className) == null ? '' : __t) + '" ref="html"\n  ';
@@ -977,11 +977,11 @@ function form$q (ctx) {
   return __p;
 }
 
-var html$5 = {
-  form: form$q
+var html$6 = {
+  form: form$y
 };
 
-function form$r (ctx) {
+function form$x (ctx) {
   var __t,
     __p = '';
   __p += '<i ref="' + ((__t = ctx.ref) == null ? '' : __t) + '" class="' + ((__t = ctx.className) == null ? '' : __t) + '" style="' + ((__t = ctx.styles) == null ? '' : __t) + '">' + ((__t = ctx.content) == null ? '' : __t) + '</i>\n';
@@ -989,7 +989,7 @@ function form$r (ctx) {
 }
 
 var icon = {
-  form: form$r
+  form: form$x
 };
 
 var ICONS = {
@@ -1061,7 +1061,7 @@ var iconClass = (function (iconset, name, spinning) {
   return iconset + " " + name;
 });
 
-function form$s (ctx) {
+function form$w (ctx) {
   var __t,
     __p = '';
   if (ctx.prefix || ctx.suffix) {
@@ -1139,7 +1139,7 @@ function form$s (ctx) {
   return __p;
 }
 
-function html$6 (ctx) {
+function html$5 (ctx) {
   var __t,
     __p = '';
   __p += '<div ref="value">';
@@ -1153,11 +1153,11 @@ function html$6 (ctx) {
 }
 
 var input = {
-  form: form$s,
-  html: html$6
+  form: form$w,
+  html: html$5
 };
 
-function form$t (ctx) {
+function form$v (ctx) {
   var __t,
     __p = '';
   __p += '<label\n  ref="label"\n  class="col-form-label ' + ((__t = ctx.label.className) == null ? '' : __t) + '"\n  for="' + ((__t = ctx.instance.id) == null ? '' : __t) + '-' + ((__t = ctx.component.key) == null ? '' : __t) + '"\n  id="l-' + ((__t = ctx.instance.id) == null ? '' : __t) + '-' + ((__t = ctx.component.key) == null ? '' : __t) + '"\n>\n  ' + ((__t = ctx.t(ctx.component.label, {
@@ -1175,7 +1175,7 @@ function form$t (ctx) {
 }
 
 var label = {
-  form: form$t
+  form: form$v
 };
 
 function form$u (ctx) {
@@ -1188,7 +1188,7 @@ var loader = {
   form: form$u
 };
 
-function form$v (ctx) {
+function form$t (ctx) {
   var __t,
     __p = '';
   __p += ((__t = ctx.t('Loading')) == null ? '' : __t) + '...\n';
@@ -1196,10 +1196,10 @@ function form$v (ctx) {
 }
 
 var loading = {
-  form: form$v
+  form: form$t
 };
 
-function form$w (ctx) {
+function form$s (ctx) {
   var __t,
     __p = '';
   __p += '<div id="' + ((__t = ctx.mapId) == null ? '' : __t) + '" style="min-height: 300px; height: calc(100vh - 600px);" ref="gmapElement"></div>\n';
@@ -1207,10 +1207,10 @@ function form$w (ctx) {
 }
 
 var map = {
-  form: form$w
+  form: form$s
 };
 
-function form$x (ctx) {
+function form$r (ctx) {
   var __t,
     __p = '';
   __p += '<div id="e-' + ((__t = ctx.instance.id) == null ? '' : __t) + '-' + ((__t = ctx.key) == null ? '' : __t) + '" class="form-text ' + ((__t = ctx.level || 'error') == null ? '' : __t) + '">' + ((__t = ctx.message) == null ? '' : __t) + '</div>\n';
@@ -1218,10 +1218,10 @@ function form$x (ctx) {
 }
 
 var message = {
-  form: form$x
+  form: form$r
 };
 
-function form$y (ctx) {
+function form$q (ctx) {
   var __t,
     __p = '';
   __p += '<div class="formio-dialog formio-dialog-theme-default formio-modaledit-dialog">\n  <div ref="overlay" class="formio-dialog-overlay"></div>\n  <div ref="content" class="formio-modaledit-content">\n    <button\n      ref="close"\n      type="button"\n      role="button"\n      class="btn btn-primary btn-xs formio-modaledit-close">\n      ' + ((__t = ctx.t('Close')) == null ? '' : __t) + '\n    </button>\n    <div ref="inner" class="reset-margins"></div>\n  </div>\n</div>\n';
@@ -1229,10 +1229,10 @@ function form$y (ctx) {
 }
 
 var modaldialog = {
-  form: form$y
+  form: form$q
 };
 
-function form$z (ctx) {
+function form$p (ctx) {
   var __t,
     __p = '';
   __p += '<div ref="container" class="formio-modaledit-view-container">\n  <button\n    ref="edit"\n    type="button"\n    role="button"\n    class="btn btn-xxs btn-warning formio-modaledit-edit">\n    <i class="' + ((__t = ctx.iconClass('edit')) == null ? '' : __t) + '"></i>\n  </button>\n  <div ref="input" class="modaledit-view-inner reset-margins">' + ((__t = ctx.content) == null ? '' : __t) + '</div>\n</div>\n';
@@ -1240,10 +1240,10 @@ function form$z (ctx) {
 }
 
 var modaledit = {
-  form: form$z
+  form: form$p
 };
 
-function form$A (ctx) {
+function form$o (ctx) {
   var __t,
     __p = '';
   __p += '<label id="l-' + ((__t = ctx.component.key) == null ? '' : __t) + '" class="control-label ' + ((__t = ctx.label.className) == null ? '' : __t) + '">\n  ' + ((__t = ctx.t(ctx.component.label, {
@@ -1253,10 +1253,10 @@ function form$A (ctx) {
 }
 
 var modalPreview = {
-  form: form$A
+  form: form$o
 };
 
-function form$B (ctx) {
+function form$n (ctx) {
   var __t,
     __p = '';
   __p += '<div\n  class="input-group formio-multiple-mask-container"\n  ref="' + ((__t = ctx.input.ref ? ctx.input.ref : 'input') == null ? '' : __t) + '"\n>\n  <select\n    class="form-control formio-multiple-mask-select"\n    id="' + ((__t = ctx.key) == null ? '' : __t) + '-mask"\n    ref="select"\n    ';
@@ -1276,10 +1276,10 @@ function form$B (ctx) {
 }
 
 var multipleMasksInput = {
-  form: form$B
+  form: form$n
 };
 
-function form$C (ctx) {
+function form$m (ctx) {
   var __t,
     __p = '';
   __p += '<tr ref="row">\n  <td>\n    ' + ((__t = ctx.element) == null ? '' : __t) + '\n  </td>\n  ';
@@ -1291,10 +1291,10 @@ function form$C (ctx) {
 }
 
 var multiValueRow = {
-  form: form$C
+  form: form$m
 };
 
-function form$D (ctx) {
+function form$l (ctx) {
   var __t,
     __p = '';
   __p += '<table class="table table-bordered">\n  <tbody>\n  ' + ((__t = ctx.rows) == null ? '' : __t) + '\n  ';
@@ -1308,10 +1308,10 @@ function form$D (ctx) {
 }
 
 var multiValueTable = {
-  form: form$D
+  form: form$l
 };
 
-function form$E (ctx) {
+function form$k (ctx) {
   var __t,
     __p = '';
   __p += '<div class="mb-2 card border">\n  ';
@@ -1349,10 +1349,10 @@ function form$E (ctx) {
 }
 
 var panel = {
-  form: form$E
+  form: form$k
 };
 
-function form$F (ctx) {
+function form$j (ctx) {
   var __t,
     __p = '';
   __p += '<div class="' + ((__t = ctx.classes) == null ? '' : __t) + '" ref="webform">\n	<button data-noattach="true" ref="zoomIn" style="position:absolute;right:10px;top:10px;cursor:pointer;" class="btn btn-default btn-secondary no-disable">\n		<i class="' + ((__t = ctx.iconClass('zoom-in')) == null ? '' : __t) + '"></i>\n	</button>\n	<button data-noattach="true" ref="zoomOut" style="position:absolute;right:10px;top:60px;cursor:pointer;" class="btn btn-default btn-secondary no-disable">\n		<i class="' + ((__t = ctx.iconClass('zoom-out')) == null ? '' : __t) + '"></i>\n	</button>\n  <div data-noattach="true" ref="iframeContainer"></div>\n  ' + ((__t = ctx.submitButton) == null ? '' : __t) + '\n</div>\n';
@@ -1360,10 +1360,10 @@ function form$F (ctx) {
 }
 
 var pdf = {
-  form: form$F
+  form: form$j
 };
 
-function form$G (ctx) {
+function form$i (ctx) {
   var __t,
     __p = '';
   __p += '<div class="formio builder grid grid-cols-12 gap-4 formbuilder">\n  <div class="col-span-12 xs:col-span-4 sm:col-span-3 md:col-span-2 formcomponents">\n    ' + ((__t = ctx.sidebar) == null ? '' : __t) + '\n  </div>\n  <div class="col-span-12 xs:col-span-8 sm:col-span-9 md:col-span-10 formarea" ref="form">\n	  <div class="formio-drop-zone" ref="iframeDropzone"></div>\n    ' + ((__t = ctx.form) == null ? '' : __t) + '\n  </div>\n</div>\n';
@@ -1371,10 +1371,10 @@ function form$G (ctx) {
 }
 
 var pdfBuilder = {
-  form: form$G
+  form: form$i
 };
 
-function form$H (ctx) {
+function form$h (ctx) {
   var __t,
     __p = '';
   __p += '<div class="pdf-upload formio-component-file">\n  <h3 class="label">' + ((__t = ctx.t('Upload a PDF File')) == null ? '' : __t) + '</h3>\n  <input type="file" style="opacity: 0; position: absolute;" tabindex="-1" accept=".pdf" ref="hiddenFileInputElement">\n  <div class="fileSelector" ref="fileDrop">\n    <span ref="dragDropText">\n      <i class="' + ((__t = ctx.iconClass('cloud-upload')) == null ? '' : __t) + '"></i>' + ((__t = ctx.t('Drop pdf to start, or')) == null ? '' : __t) + ' <a href="#" ref="fileBrowse" class="browse">' + ((__t = ctx.t('browse')) == null ? '' : __t) + '</a>\n    </span>\n    <div class="progress pdf-progress" ref="uploadProgressWrapper" style="display:none;">\n      <div class="progress-bar" ref="uploadProgress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>\n    </div>\n  </div>\n  <div class="alert alert-danger" ref="uploadError">\n\n  </div>\n</div>\n\n';
@@ -1382,10 +1382,10 @@ function form$H (ctx) {
 }
 
 var pdfBuilderUpload = {
-  form: form$H
+  form: form$h
 };
 
-function form$I (ctx) {
+function form$g (ctx) {
   var __t,
     __p = '';
   __p += '<div\n  class="form-radio radio"\n  ref="radioGroup"\n  role="' + ((__t = ctx.component.type === 'selectboxes' ? 'group' : 'radiogroup') == null ? '' : __t) + '"\n  aria-required="' + ((__t = ctx.input.component.validate.required) == null ? '' : __t) + '"\n  aria-labelledby="l-' + ((__t = ctx.instance.id) == null ? '' : __t) + '-' + ((__t = ctx.component.key) == null ? '' : __t) + '"\n  ';
@@ -1424,7 +1424,7 @@ function form$I (ctx) {
   return __p;
 }
 
-function html$7 (ctx) {
+function html$4 (ctx) {
   var __t,
     __p = '';
   __p += '<div ref="value">\n  ';
@@ -1440,11 +1440,11 @@ function html$7 (ctx) {
 }
 
 var radio = {
-  form: form$I,
-  html: html$7
+  form: form$g,
+  html: html$4
 };
 
-function form$J (ctx) {
+function form$f (ctx) {
   var __t,
     __p = '';
   __p += '<table class="table table-bordered">\n  <tbody>\n    <tr>\n      <td>\n        ' + ((__t = ctx.element) == null ? '' : __t) + '\n      </td>\n    </tr>\n    <tr>\n      <td colspan="2">\n        <button class="btn btn-primary formio-button-add-resource" ref="addResource">\n          <i class="' + ((__t = ctx.iconClass('plus')) == null ? '' : __t) + ' mr-1"></i>\n          ' + ((__t = ctx.t(ctx.component.addResourceLabel || 'Add Resource', {
@@ -1454,10 +1454,10 @@ function form$J (ctx) {
 }
 
 var resourceAdd = {
-  form: form$J
+  form: form$f
 };
 
-function form$K (ctx) {
+function form$e (ctx) {
   var __t,
     __p = '';
   __p += '<select\n  ref="' + ((__t = ctx.input.ref ? ctx.input.ref : 'selectContainer') == null ? '' : __t) + '"\n  ' + ((__t = ctx.input.multiple ? 'multiple' : '') == null ? '' : __t) + '\n  ';
@@ -1480,7 +1480,7 @@ function form$K (ctx) {
   return __p;
 }
 
-function html$8 (ctx) {
+function html$3 (ctx) {
   var __t,
     __p = '';
   __p += '<div ref="value">';
@@ -1494,11 +1494,11 @@ function html$8 (ctx) {
 }
 
 var select = {
-  form: form$K,
-  html: html$8
+  form: form$e,
+  html: html$3
 };
 
-function form$L (ctx) {
+function form$d (ctx) {
   var __t,
     __p = '';
   __p += '<option ' + ((__t = ctx.selected ? 'selected="selected"' : '') == null ? '' : __t) + '\n  value=\'' + ((__t = ctx.useId ? ctx.id : ctx.option.value) == null ? '' : __t) + '\'\n  ';
@@ -1511,7 +1511,7 @@ function form$L (ctx) {
   return __p;
 }
 
-function html$9 (ctx) {
+function html$2 (ctx) {
   var __t,
     __p = '';
   if (ctx.selected) {
@@ -1524,11 +1524,11 @@ function html$9 (ctx) {
 }
 
 var selectOption = {
-  form: form$L,
-  html: html$9
+  form: form$d,
+  html: html$2
 };
 
-function form$M (ctx) {
+function form$c (ctx) {
   var __t,
     __p = '';
   __p += ((__t = ctx.element) == null ? '' : __t) + '\n<div\n  class="signature-pad-body"\n  style="width: ' + ((__t = ctx.component.width) == null ? '' : __t) + ';height: ' + ((__t = ctx.component.height) == null ? '' : __t) + ';padding:0;margin:0;"\n  tabindex="' + ((__t = ctx.component.tabindex || 0) == null ? '' : __t) + '"\n  ref="padBody"\n>\n  <button class="btn btn-sm btn-light signature-pad-refresh" ref="refresh">\n    <i class="' + ((__t = ctx.iconClass('refresh')) == null ? '' : __t) + '"></i>\n  </button>\n  <canvas class="signature-pad-canvas" style="display: none;" height="' + ((__t = ctx.component.height) == null ? '' : __t) + '" ref="canvas"></canvas>\n  ';
@@ -1545,18 +1545,18 @@ function form$M (ctx) {
   return __p;
 }
 
-function html$a (ctx) {
+function html$1 (ctx) {
   var __p = '';
   __p += '<img style="width: 100%;" ref="signatureImage">\n';
   return __p;
 }
 
 var signature = {
-  form: form$M,
-  html: html$a
+  form: form$c,
+  html: html$1
 };
 
-function form$N (ctx) {
+function form$b (ctx) {
   var __t,
     __p = '';
   __p += '<table class="table table-striped table-bordered" aria-labelledby="l-' + ((__t = ctx.instance.id) == null ? '' : __t) + '-' + ((__t = ctx.component.key) == null ? '' : __t) + '">\n  <thead>\n    <tr>\n      <th></th>\n      ';
@@ -1585,7 +1585,7 @@ function form$N (ctx) {
   return __p;
 }
 
-function html$b (ctx) {
+function html (ctx) {
   var __t,
     __p = '';
   __p += '<table class="table table-striped table-bordered">\n  <tbody>\n    ';
@@ -1605,8 +1605,8 @@ function html$b (ctx) {
 }
 
 var survey = {
-  form: form$N,
-  html: html$b
+  form: form$b,
+  html: html
 };
 
 function flat (ctx) {
@@ -1621,7 +1621,7 @@ function flat (ctx) {
   return __p;
 }
 
-function form$O (ctx) {
+function form$a (ctx) {
   var __t,
     __p = '';
   __p += '<div class="card card-tabs { ctx.component.verticalLayout ? \' card-vertical\' : \'\'}}">\n  <div class="card-header card-header-tabs">\n    <ul class="nav nav-tabs ' + ((__t = ctx.component.verticalLayout ? ' nav-tabs-vertical' : '') == null ? '' : __t) + '" role="tablist">\n      ';
@@ -1640,10 +1640,10 @@ function form$O (ctx) {
 
 var tab = {
   flat: flat,
-  form: form$O
+  form: form$a
 };
 
-function form$P (ctx) {
+function form$9 (ctx) {
   var __t,
     __p = '';
   __p += '<table class="table\n    ' + ((__t = ctx.component.striped ? 'table-striped' : '') == null ? '' : __t) + '\n    ' + ((__t = ctx.component.bordered ? 'table-bordered' : '') == null ? '' : __t) + '\n    ' + ((__t = ctx.component.hover ? 'table-hover' : '') == null ? '' : __t) + '\n    ' + ((__t = ctx.component.condensed ? 'table-sm' : '') == null ? '' : __t) + '\n  ">\n  <caption class="sr-only">' + ((__t = ctx.t(ctx.component.label)) == null ? '' : __t) + '</caption>\n  ';
@@ -1671,10 +1671,10 @@ function form$P (ctx) {
 }
 
 var table = {
-  form: form$P
+  form: form$9
 };
 
-function form$Q (ctx) {
+function form$8 (ctx) {
   var __t,
     __p = '';
   ctx.children.forEach(function (component) {
@@ -1685,10 +1685,10 @@ function form$Q (ctx) {
 }
 
 var tableComponents = {
-  form: form$Q
+  form: form$8
 };
 
-function form$R (ctx) {
+function form$7 (ctx) {
   var __t,
     __p = '';
   if (ctx.node.isRoot) {
@@ -1715,7 +1715,7 @@ function form$R (ctx) {
 }
 
 var tree = {
-  form: form$R
+  form: form$7
 };
 
 function edit (ctx) {
@@ -1770,7 +1770,7 @@ function builder$1 (ctx) {
   return __p;
 }
 
-function form$S (ctx) {
+function form$6 (ctx) {
   var __t,
     __p = '';
   __p += '<div class="' + ((__t = ctx.classes) == null ? '' : __t) + '" ref="webform" novalidate>' + ((__t = ctx.children) == null ? '' : __t) + '</div>\n';
@@ -1778,11 +1778,11 @@ function form$S (ctx) {
 }
 
 var webform = {
-  form: form$S,
+  form: form$6,
   builder: builder$1
 };
 
-function form$T (ctx) {
+function form$5 (ctx) {
   var __t,
     __p = '';
   __p += '<div class="border-1 border-solid border-gray-300 bg-gray-200 shadow-inner p-5 rounded">\n  <div ref="' + ((__t = ctx.nestedKey) == null ? '' : __t) + '">\n    ' + ((__t = ctx.children) == null ? '' : __t) + '\n  </div>\n</div>\n';
@@ -1790,10 +1790,10 @@ function form$T (ctx) {
 }
 
 var well = {
-  form: form$T
+  form: form$5
 };
 
-function builder$2 (ctx) {
+function builder (ctx) {
   var __t,
     __p = '';
   __p += '<div class="text-muted text-center p-2">' + ((__t = ctx.t(ctx.component.title, {
@@ -1802,7 +1802,7 @@ function builder$2 (ctx) {
   return __p;
 }
 
-function form$U (ctx) {
+function form$4 (ctx) {
   var __t,
     __p = '';
   __p += '<div class="' + ((__t = ctx.className) == null ? '' : __t) + '">\n    <div style="position: relative;">\n        ';
@@ -1824,11 +1824,11 @@ function form$U (ctx) {
 }
 
 var wizard = {
-  form: form$U,
-  builder: builder$2
+  form: form$4,
+  builder: builder
 };
 
-function form$V (ctx) {
+function form$3 (ctx) {
   var __t,
     __p = '';
   __p += '<nav aria-label="Wizard navigation" id="' + ((__t = ctx.wizardKey) == null ? '' : __t) + '-header" ref="' + ((__t = ctx.wizardKey) == null ? '' : __t) + '-header">\n  <ul class="pagination" role="tablist">\n    ';
@@ -1846,10 +1846,10 @@ function form$V (ctx) {
 }
 
 var wizardHeader = {
-  form: form$V
+  form: form$3
 };
 
-function form$W (ctx) {
+function form$2 (ctx) {
   var __t,
     __p = '';
   __p += '<nav aria-label="navigation" id="' + ((__t = ctx.wizardKey) == null ? '' : __t) + '-header">\n  <div class="classic-pagination row justify-content-center" style="border-bottom:0;">\n    ';
@@ -1867,10 +1867,10 @@ function form$W (ctx) {
 }
 
 var wizardHeaderClassic = {
-  form: form$W
+  form: form$2
 };
 
-function form$X (ctx) {
+function form$1 (ctx) {
   var __t,
     __p = '';
   __p += '<nav aria-label="navigation" id="' + ((__t = ctx.wizardKey) == null ? '' : __t) + '-header">\n  <ul class="pagination flex-column">\n    ';
@@ -1888,10 +1888,10 @@ function form$X (ctx) {
 }
 
 var wizardHeaderVertical = {
-  form: form$X
+  form: form$1
 };
 
-function form$Y (ctx) {
+function form (ctx) {
   var __t,
     __p = '';
   __p += '<ul class="formio-wizard-nav-container list-inline" id="' + ((__t = ctx.wizardKey) == null ? '' : __t) + '-nav">\n  ';
@@ -1925,7 +1925,7 @@ function form$Y (ctx) {
 }
 
 var wizardNav = {
-  form: form$Y
+  form: form
 };
 
 var tailwind = _extends({
@@ -1945,7 +1945,7 @@ var tailwind = _extends({
   iconClass: iconClass,
   cssClasses: cssClasses,
   address: address,
-  builder: builder,
+  builder: builder$2,
   builderComponent: builderComponent,
   builderComponents: builderComponents,
   builderEditForm: builderEditForm,
@@ -1969,7 +1969,7 @@ var tailwind = _extends({
   field: field,
   fieldset: fieldset,
   file: file,
-  html: html$5,
+  html: html$6,
   icon: icon,
   input: input,
   label: label,