@tsed/tailwind-formio 1.11.1 → 1.13.0

package/lib/index.d.ts

@@ -16,9 +16,21 @@ declare const _default: {
             wizardHeader: {
                 form: string;
             };
+            wizardHeaderClassic: {
+                form: string;
+            };
+            wizardHeaderVertical: {
+                form: string;
+            };
             wizardNav: {
                 form: string;
             };
+            errorsList: {
+                form: string;
+            };
+            alert: {
+                form: string;
+            };
             treeView: {
                 form: string;
             };
@@ -81,6 +93,9 @@ declare const _default: {
             components: {
                 form: string;
             };
+            tableComponents: {
+                form: string;
+            };
             container: {
                 form: string;
             };
@@ -98,6 +113,10 @@ declare const _default: {
                 form: string;
                 html: string;
             };
+            editgridTable: {
+                form: string;
+                html: string;
+            };
             field: {
                 form: string;
                 align: string;

package/lib/templates/index.d.ts

@@ -14,9 +14,21 @@ declare const _default: {
         wizardHeader: {
             form: string;
         };
+        wizardHeaderClassic: {
+            form: string;
+        };
+        wizardHeaderVertical: {
+            form: string;
+        };
         wizardNav: {
             form: string;
         };
+        errorsList: {
+            form: string;
+        };
+        alert: {
+            form: string;
+        };
         treeView: {
             form: string;
         };
@@ -79,6 +91,9 @@ declare const _default: {
         components: {
             form: string;
         };
+        tableComponents: {
+            form: string;
+        };
         container: {
             form: string;
         };
@@ -96,6 +111,10 @@ declare const _default: {
             form: string;
             html: string;
         };
+        editgridTable: {
+            form: string;
+            html: string;
+        };
         field: {
             form: string;
             align: string;

package/lib/templates/tailwind/address/form.ejs.js

@@ -18,7 +18,9 @@ __p += '\n        ' +
  } ;
 __p += '\n      value="' +
 ((__t = ( ctx.displayValue )) == null ? '' : __t) +
-'"\n      autocomplete="off"\n    >\n    ';
+'"\n      autocomplete="off"\n      aria-label="' +
+((__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="' +
 ((__t = ( ctx.inputAttributes.tabindex )) == null ? '' : __t) +

package/lib/templates/tailwind/address/html.ejs.js

@@ -0,0 +1,16 @@
+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="value">';
+ if (ctx.displayValue) { ;
+__p +=
+((__t = (ctx.displayValue)) == null ? '' : __t);
+ } else { ;
+__p += '-';
+ } ;
+__p += '</div>\n';
+return __p
+}

package/lib/templates/tailwind/alert/form.ejs.js

@@ -0,0 +1,27 @@
+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\n  ';
+ for (var attr in ctx.attrs) { ;
+__p += '\n    ' +
+((__t = (attr)) == null ? '' : __t) +
+'="' +
+((__t = (ctx.attrs[attr])) == null ? '' : __t) +
+'"\n  ';
+ } ;
+__p += '\n>\n  ' +
+((__t = (ctx.message)) == null ? '' : __t) +
+'\n  ';
+ if (ctx.options.vpat) { ;
+__p += '\n    <span class="sr-only" id="hotkey-i-' +
+((__t = (ctx.form._id)) == null ? '' : __t) +
+'">' +
+((__t = (ctx.t('errorListHotkey'))) == null ? '' : __t) +
+'</span>\n  ';
+ } ;
+__p += '\n</div>\n';
+return __p
+}

package/lib/templates/tailwind/alert/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference path="../../../../src/ejs.d.ts" />
+declare namespace _default {
+    export { form };
+}
+export default _default;
+import form from "*.ejs";

package/lib/templates/tailwind/alert/index.js

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

package/lib/templates/tailwind/builderComponent/form.ejs.js

@@ -6,17 +6,17 @@ var __t, __p = '', __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
 __p += '<div class="builder-component" ref="dragComponent">\n  ';
  if (!ctx.disableBuilderActions) { ;
-__p += '\n    <div class="component-btn-group" data-noattach="true">\n      <button class="btn btn-xxs btn-danger component-settings-button component-settings-button-remove" ref="removeComponent">\n        <i class="' +
+__p += '\n    <div class="component-btn-group" data-noattach="true">\n      <button\n        role="button"\n        aria-label="Remove button. Click to remove component from the form"\n        tabindex="-1"\n        class="btn btn-xxs btn-danger component-settings-button component-settings-button-remove"\n        ref="removeComponent"\n      >\n        <i class="' +
 ((__t = (ctx.iconClass('remove'))) == null ? '' : __t) +
-'"></i>\n      </button>\n      <button class="btn btn-xxs btn-default component-settings-button component-settings-button-copy" ref="copyComponent">\n        <i class="' +
+'"></i>\n      </button>\n      <button\n        role="button"\n        aria-label="Copy button. Click to copy component"\n        tabindex="-1"\n        class="btn btn-xxs btn-default component-settings-button component-settings-button-copy"\n        ref="copyComponent"\n      >\n        <i class="' +
 ((__t = (ctx.iconClass('copy'))) == null ? '' : __t) +
-'"></i>\n      </button>\n      <button class="btn btn-xxs btn-default component-settings-button component-settings-button-paste" ref="pasteComponent">\n        <i class="' +
+'"></i>\n      </button>\n      <button\n        role="button"\n        aria-label="Paste below button. Click to paste component below the current component"\n        tabindex="-1"\n        class="btn btn-xxs btn-default component-settings-button component-settings-button-paste"\n        ref="pasteComponent"\n      >\n        <i class="' +
 ((__t = (ctx.iconClass('save'))) == null ? '' : __t) +
-'"></i>\n      </button>\n      <button class="btn btn-xxs btn-default component-settings-button component-settings-button-edit-json" ref="editJson">\n        <i class="' +
+'"></i>\n      </button>\n      <button\n        role="button"\n        aria-label="Edit json button. Click to edit json of the current component"\n        tabindex="-1"\n        class="btn btn-xxs btn-default component-settings-button component-settings-button-edit-json"\n        ref="editJson"\n      >\n        <i class="' +
 ((__t = (ctx.iconClass('wrench'))) == null ? '' : __t) +
-'"></i>\n      </button>\n      <button class="btn btn-xxs btn-default component-settings-button component-settings-button-move" ref="moveComponent">\n        <i class="' +
+'"></i>\n      </button>\n      <button\n        role="button"\n        aria-label="Move button"\n        tabindex="-1"\n        class="btn btn-xxs btn-default component-settings-button component-settings-button-move"\n        ref="moveComponent"\n      >\n        <i class="' +
 ((__t = (ctx.iconClass('move'))) == null ? '' : __t) +
-'"></i>\n      </button>\n      <button class="btn btn-xxs btn-secondary component-settings-button component-settings-button-edit", ref="editComponent">\n        <i class="' +
+'"></i>\n      </button>\n      <button\n        role="button"\n        aria-label="Edit button. Click to open component settings modal window"\n        tabindex="-1"\n        class="btn btn-xxs btn-secondary component-settings-button component-settings-button-edit"\n        ref="editComponent"\n      >\n        <i class="' +
 ((__t = (ctx.iconClass('cog'))) == null ? '' : __t) +
 '"></i>\n      </button>\n    </div>\n  ';
  } ;

package/lib/templates/tailwind/builderEditForm/form.ejs.js

@@ -4,50 +4,50 @@ Object.defineProperty(exports, "__esModule", {
 exports.default=function(ctx) {
 var __t, __p = '', __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__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">' +
+__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, { _userInput: true }))) == null ? '' : __t) +
-' ' +
+'\n          ' +
 ((__t = (ctx.t('Component'))) == null ? '' : __t) +
-'</div>\n            </div>\n            ';
+'\n        </div>\n      </div>\n      ';
  if (ctx.helplinks) { ;
-__p += '\n            <div class="col-span-6 flex justify-end items-center pr-15">\n                <a class="reset-link inline-flex items-center text-secondary text-decoration-none hover:text-primary" href="' +
+__p += '\n      <div class="col-span-6 flex justify-end items-center pr-15">\n        <a class="reset-link inline-flex items-center text-secondary text-decoration-none hover:text-primary"\n           href="' +
 ((__t = (ctx.t(ctx.helplinks + ctx.componentInfo.documentation))) == null ? '' : __t) +
-'" target="_blank">\n                    <i class="' +
+'" target="_blank">\n          <i class="' +
 ((__t = (ctx.iconClass('new-window'))) == null ? '' : __t) +
 ' mr-1"></i> ' +
 ((__t = (ctx.t('Help'))) == null ? '' : __t) +
-'\n                </a>\n            </div>\n            ';
+'\n        </a>\n      </div>\n      ';
  } ;
-__p += '\n        </div>\n    </div>\n    <div class="overflow-auto flex-1 p-3 pt-0" style="max-height: calc(90vh - 95px)">\n        <div class="grid grid-cols-12 gap-4">\n            <div class="';
+__p += '\n    </div>\n  </div>\n  <div class="overflow-auto flex-1 p-3 pt-0" style="max-height: calc(90vh - 95px)">\n    <div class="grid grid-cols-12 gap-4">\n      <div class="';
  if (ctx.preview) { ;
 __p += 'col-span-12 sm:col-span-6';
  } else { ;
 __p += 'col-span-12';
  } ;
-__p += '">\n                <div ref="editForm">\n                    ' +
+__p += '">\n        <div ref="editForm">\n          ' +
 ((__t = (ctx.editForm)) == null ? '' : __t) +
-'\n                </div>\n            </div>\n            ';
+'\n        </div>\n      </div>\n      ';
  if (ctx.preview) { ;
-__p += '\n            <div class="col-span-12 sm:col-span-6">\n                <div class="card panel preview-panel">\n                    <div class="card-header">\n                        <div class="text-sm">' +
+__p += '\n      <div class="col-span-12 sm:col-span-6">\n        <div class="card panel preview-panel">\n          <div class="card-header">\n            <div class="text-sm">' +
 ((__t = (ctx.t('Preview'))) == null ? '' : __t) +
-'</div>\n                    </div>\n                    <div class="card-body">\n                        <div class="component-preview" ref="preview">\n                            ' +
+'</div>\n          </div>\n          <div class="card-body">\n            <div class="component-preview" ref="preview">\n              ' +
 ((__t = (ctx.preview)) == null ? '' : __t) +
-'\n                        </div>\n                    </div>\n                </div>\n                ';
+'\n            </div>\n          </div>\n        </div>\n        ';
  if (ctx.componentInfo.help) { ;
-__p += '\n                <div class="card card-body bg-light formio-settings-help">\n                    ' +
+__p += '\n        <div class="card card-body bg-light formio-settings-help">\n          ' +
 ((__t = ( ctx.t(ctx.componentInfo.help) )) == null ? '' : __t) +
-'\n                </div>\n                ';
+'\n        </div>\n        ';
  } ;
-__p += '\n            </div>\n            ';
+__p += '\n      </div>\n      ';
  } ;
-__p += '\n        </div>\n    </div>\n    <div class="bg-white p-2 flex justify-center">\n        <button class="btn btn-primary mx-2" ref="saveButton">\n            ' +
+__p += '\n    </div>\n  </div>\n  <div class="bg-white p-2 flex justify-center">\n    <button class="btn btn-primary mx-2" ref="saveButton">\n      ' +
 ((__t = (ctx.t('Save'))) == null ? '' : __t) +
-'\n        </button>\n        <button class="btn btn-dark mx-2" ref="cancelButton">\n            ' +
+'\n    </button>\n    <button class="btn btn-dark mx-2" ref="cancelButton">\n      ' +
 ((__t = (ctx.t('Cancel'))) == null ? '' : __t) +
-'\n        </button>\n        <button class="btn btn-danger mx-2" ref="removeButton">\n            <i class="' +
+'\n    </button>\n    <button class="btn btn-danger mx-2" ref="removeButton">\n      <i class="' +
 ((__t = (ctx.iconClass('remove'))) == null ? '' : __t) +
-' sm:mr-2"></i>\n            <span class="hidden sm:inline">' +
+' sm:mr-2"></i>\n      <span class="hidden sm:inline">' +
 ((__t = (ctx.t('Remove'))) == null ? '' : __t) +
-'</span>\n        </button>\n    </div>\n</div>\n\n\n';
+'</span>\n    </button>\n  </div>\n</div>\n\n\n';
 return __p
 }

package/lib/templates/tailwind/builderSidebarGroup/form.ejs.js

@@ -34,7 +34,7 @@ __p += '<div class="card form-builder-panel" ref="group-panel-' +
  if (ctx.group.componentOrder.length || ctx.subgroups.length) { ;
 __p += '\n        ';
  !ctx.group.componentOrder || ctx.group.componentOrder.forEach(function(componentKey) { ;
-__p += '\n          <button\n            data-group="' +
+__p += '\n          <span\n            data-group="' +
 ((__t = (ctx.groupKey)) == null ? '' : __t) +
 '"\n            data-key="' +
 ((__t = (ctx.group.components[componentKey].key)) == null ? '' : __t) +
@@ -47,8 +47,8 @@ __p += '\n              <i class="' +
 '" style="margin-right: 5px;"></i>\n            ';
  } ;
 __p += '\n            ' +
-((__t = (ctx.t(ctx.group.components[componentKey].title))) == null ? '' : __t) +
-'\n          </button>\n        ';
+((__t = (ctx.t(ctx.group.components[componentKey].title, { _userInput: true }))) == null ? '' : __t) +
+'\n          </span>\n        ';
  }) ;
 __p += '\n        ' +
 ((__t = (ctx.subgroups.join(''))) == null ? '' : __t) +

package/lib/templates/tailwind/button/form.ejs.js

@@ -12,13 +12,21 @@ __p += '\n  ' +
 ((__t = (attr)) == null ? '' : __t) +
 '="' +
 ((__t = (ctx.input.attr[attr])) == null ? '' : __t) +
+'"\n  ';
+ } ;
+__p += '\n  ';
+ if (ctx.component.description) { ;
+__p += '\n    aria-describedby="d-' +
+((__t = (ctx.instance.id)) == null ? '' : __t) +
+'-' +
+((__t = (ctx.component.key)) == null ? '' : __t) +
 '"\n  ';
  } ;
 __p += '\n>\n';
  if (ctx.component.leftIcon) { ;
 __p += '<span class="' +
 ((__t = (ctx.component.leftIcon)) == null ? '' : __t) +
-'"></span>';
+'"></span>&nbsp;';
  } ;
 __p += '\n';
  if (ctx.input.content) { ;
@@ -30,11 +38,13 @@ __p += '\n';
  if (ctx.component.tooltip) { ;
 __p += '\n  <i ref="tooltip" class="' +
 ((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +
+' text-muted" data-tooltip="' +
+((__t = (ctx.component.tooltip)) == null ? '' : __t) +
 '"></i>\n';
  } ;
 __p += '\n';
  if (ctx.component.rightIcon) { ;
-__p += '<span class="' +
+__p += '&nbsp;<span class="' +
 ((__t = (ctx.component.rightIcon)) == null ? '' : __t) +
 '"></span>';
  } ;

package/lib/templates/tailwind/checkbox/form.ejs.js

@@ -20,6 +20,16 @@ __p += '\n      ';
  if (ctx.checked) { ;
 __p += 'checked=true';
  } ;
+__p += '\n      aria-required="' +
+((__t = (ctx.component.validate.required)) == null ? '' : __t) +
+'"\n      ';
+ if (ctx.component.description) { ;
+__p += '\n      aria-describedby="d-' +
+((__t = (ctx.instance.id)) == null ? '' : __t) +
+'-' +
+((__t = (ctx.component.key)) == null ? '' : __t) +
+'"\n      ';
+ } ;
 __p += '\n      >\n    ';
  if (!ctx.self.labelIsHidden()) { ;
 __p += '<span>' +
@@ -28,9 +38,9 @@ __p += '<span>' +
  } ;
 __p += '\n    ';
  if (ctx.component.tooltip) { ;
-__p += '\n      <i ref="tooltip" class="' +
+__p += '\n      <i ref="tooltip" tabindex="0" class="' +
 ((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +
-'" data-tooltip="' +
+' text-muted" data-tooltip="' +
 ((__t = (ctx.component.tooltip)) == null ? '' : __t) +
 '"></i>\n    ';
  } ;

package/lib/templates/tailwind/columns/form.ejs.js

@@ -9,7 +9,7 @@ function print() { __p += __j.call(arguments, '') }
 __p += '\n<div class="\n    col-' +
 ((__t = (column.size)) == null ? '' : __t) +
 '-' +
-((__t = (column.width)) == null ? '' : __t) +
+((__t = (column.currentWidth || column.width)) == null ? '' : __t) +
 '\n    col-' +
 ((__t = (column.size)) == null ? '' : __t) +
 '-offset-' +

package/lib/templates/tailwind/componentModal/form.ejs.js

@@ -6,14 +6,42 @@ var __t, __p = '', __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
 __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" ref="modalContents">\n      <div ref="modalContents">\n        ';
+'" 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) +
+'" ';
+ if (!ctx.self.isIE()) { ;
+__p += ' role="dialog" ';
+ } ;
+__p += ' ref="modalContents">\n      <label class="sr-only" id="ml-' +
+((__t = (ctx.instance.id)) == null ? '' : __t) +
+'-' +
+((__t = (ctx.component.key)) == null ? '' : __t) +
+'">' +
+((__t = ( ctx.t(ctx.component.label) )) == null ? '' : __t) +
+'' +
+((__t = (ctx.self.isIE() ? ', dialog' : '')) == null ? '' : __t) +
+'</label>\n      ';
+ if (ctx.options.vpat) { ;
+__p += '\n      <button class="formio-dialog-close float-right" title="Close" aria-label="Close button. Click to get back to the form" ref="modalCloseButton"></button>\n      ';
+ } else { ;
+__p += '\n      <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>\n      ';
+ } ;
+__p += '\n      <div ref="modalContents">\n        ';
  if (ctx.visible) { ;
 __p += '\n        ' +
 ((__t = (ctx.children)) == null ? '' : __t) +
 '\n        ';
  } ;
-__p += '\n        <div class="formio-dialog-buttons">\n          <button class="btn btn-success formio-dialog-button" ref="modalSave">' +
+__p += '\n        <div class="formio-dialog-buttons">\n          ';
+ if (ctx.options.vpat) { ;
+__p += '\n          <button class="btn btn-secondary formio-dialog-button" aria-label="Cancel button. Click to cancel the changes and get back to the form." ref="modalClose">' +
+((__t = (ctx.t('Cancel'))) == null ? '' : __t) +
+'</button>\n          ';
+ } ;
+__p += '\n          <button class="btn btn-success formio-dialog-button" ref="modalSave" aria-label="Save button. Click to save the changes and get back to the form.">' +
 ((__t = (ctx.t('Save'))) == null ? '' : __t) +
-'</button>\n        </div>\n      </div>\n      <button class="formio-dialog-close float-right btn btn-secondary btn-sm" aria-label="close" ref="modalClose"></button>\n    </div>\n  </div>\n</div>\n';
+'</button>\n        </div>\n      </div>\n    </div>\n    <span class="sr-only" ref="modalLiveRegion" aria-live="assertive"></span>\n  </div>\n</div>\n';
 return __p
 }

package/lib/templates/tailwind/datagrid/form.ejs.js

@@ -25,14 +25,14 @@ __p += '\n      ';
 __p += '\n        <th class="' +
 ((__t = (col.validate && col.validate.required ? 'field-required' : '')) == null ? '' : __t) +
 '">\n          ' +
-((__t = ( col.hideLabel ? '' : ctx.t(col.label || col.title) )) == null ? '' : __t) +
+((__t = ( col.hideLabel ? '' : ctx.t(col.label || col.title, { _userInput: true }) )) == null ? '' : __t) +
 '\n          ';
  if (col.tooltip) { ;
-__p += ' <i ref="tooltip" data-title="' +
+__p += ' <i ref="tooltip" tabindex="0" data-title="' +
 ((__t = (col.tooltip)) == null ? '' : __t) +
 '" class="' +
 ((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +
-'" data-tooltip="' +
+' text-muted" data-tooltip="' +
 ((__t = (col.tooltip)) == null ? '' : __t) +
 '"></i>';
  } ;
@@ -40,7 +40,9 @@ __p += '\n        </th>\n      ';
  }) ;
 __p += '\n      ';
  if (ctx.hasExtraColumn) { ;
-__p += '\n      <th>\n        ';
+__p += '\n      <th>\n        <span class="sr-only">' +
+((__t = ( ctx.t('Add/Remove') )) == null ? '' : __t) +
+'</span>\n        ';
  if (!ctx.builder && ctx.hasAddButton && ctx.hasTopSubmit) { ;
 __p += '\n        <button class="btn btn-primary formio-button-add-row" ref="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
@@ -48,8 +50,8 @@ __p += '\n        <button class="btn btn-primary formio-button-add-row" ref="' +
 ((__t = (ctx.tabIndex)) == null ? '' : __t) +
 '">\n          <i class="' +
 ((__t = (ctx.iconClass('plus'))) == null ? '' : __t) +
-' mr-1"></i>' +
-((__t = (ctx.t(ctx.component.addAnother || 'Add Another'))) == null ? '' : __t) +
+'"></i>' +
+((__t = (ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true }))) == null ? '' : __t) +
 '\n        </button>\n        ';
  } ;
 __p += '\n      </th>\n      ';
@@ -58,7 +60,9 @@ __p += '\n    </tr>\n  </thead>\n  ';
  } ;
 __p += '\n  <tbody ref="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
-'-tbody">\n    ';
+'-tbody" data-key="' +
+((__t = (ctx.datagridKey)) == null ? '' : __t) +
+'">\n    ';
  ctx.rows.forEach(function(row, index) { ;
 __p += '\n    ';
  if (ctx.hasGroups && ctx.groups[index]) { ;
@@ -78,24 +82,36 @@ __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 fa fa-bars"></button>\n        </td>\n      ';
+__p += '\n        <td class="align-middle">\n          <button type="button" class="formio-drag-button btn btn-sm btn-light ' +
+((__t = (ctx.iconClass('bars'))) == null ? '' : __t) +
+'" data-key="' +
+((__t = (ctx.datagridKey)) == null ? '' : __t) +
+'"></button>\n        </td>\n      ';
  } ;
 __p += '\n      ';
  ctx.columns.forEach(function(col) { ;
 __p += '\n        <td ref="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
-'">\n          ' +
+'" ';
+ if (col.key && col.overlay && col.overlay.width) { ;
+__p += ' style="width: ' +
+((__t = (col.overlay.width + 'px')) == null ? '' : __t) +
+'"';
+ } ;
+__p += ' >\n          ' +
 ((__t = (row[col.key])) == null ? '' : __t) +
 '\n        </td>\n      ';
  }) ;
 __p += '\n      ';
  if (ctx.hasExtraColumn) { ;
 __p += '\n        ';
- if (!ctx.builder && ctx.hasRemoveButtons) { ;
-__p += '\n        <td>\n          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="' +
+ if (ctx.hasRemoveButtons) { ;
+__p += '\n        <td class="align-middle">\n          <button type="button" class="btn btn-light btn-sm formio-button-remove-row" ref="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
 '-removeRow" tabindex="' +
 ((__t = (ctx.tabIndex)) == null ? '' : __t) +
+'" aria-label="' +
+((__t = (ctx.t('remove'))) == null ? '' : __t) +
 '">\n            <i class="' +
 ((__t = (ctx.iconClass('remove-circle'))) == null ? '' : __t) +
 '"></i>\n          </button>\n        </td>\n        ';
@@ -115,7 +131,7 @@ __p += '\n    </tr>\n    ';
 __p += '\n  </tbody>\n  ';
  if (!ctx.builder && ctx.hasAddButton && ctx.hasBottomSubmit) { ;
 __p += '\n  <tfoot>\n    <tr>\n      <td colspan="' +
-((__t = (ctx.numColumns + 1)) == null ? '' : __t) +
+((__t = (ctx.component.layoutFixed ? ctx.numColumns :  ctx.numColumns + 1)) == null ? '' : __t) +
 '">\n        <button class="btn btn-primary formio-button-add-row" ref="' +
 ((__t = (ctx.datagridKey)) == null ? '' : __t) +
 '-addRow" tabindex="' +
@@ -123,7 +139,7 @@ __p += '\n  <tfoot>\n    <tr>\n      <td colspan="' +
 '">\n          <i class="' +
 ((__t = (ctx.iconClass('plus'))) == null ? '' : __t) +
 ' mr-1"></i> ' +
-((__t = (ctx.t(ctx.component.addAnother || 'Add Another'))) == null ? '' : __t) +
+((__t = (ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true }))) == null ? '' : __t) +
 '\n        </button>\n      </td>\n    </tr>\n  </tfoot>\n  ';
  } ;
 __p += '\n</table>\n';

package/lib/templates/tailwind/datagrid/html.ejs.js

@@ -17,14 +17,14 @@ __p += '\n  <thead>\n    <tr>\n      ';
 __p += '\n        <th class="' +
 ((__t = (col.validate && col.validate.required ? 'field-required' : '')) == null ? '' : __t) +
 '">\n          ' +
-((__t = ( col.hideLabel ? '' : ctx.t(col.label || col.title) )) == null ? '' : __t) +
+((__t = ( col.hideLabel ? '' : ctx.t(col.label || col.title, { _userInput: true }) )) == null ? '' : __t) +
 '\n          ';
  if (col.tooltip) { ;
-__p += ' <i ref="tooltip" data-title="' +
+__p += ' <i ref="tooltip" tabindex="0" data-title="' +
 ((__t = (col.tooltip)) == null ? '' : __t) +
 '" class="' +
 ((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +
-'" data-tooltip="' +
+' text-muted" data-tooltip="' +
 ((__t = (col.tooltip)) == null ? '' : __t) +
 '"></i>';
  } ;

package/lib/templates/tailwind/day/form.ejs.js

@@ -4,7 +4,27 @@ Object.defineProperty(exports, "__esModule", {
 exports.default=function(ctx) {
 var __t, __p = '', __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__p += '<div class="grid grid-cols-12 gap-4">\n  ';
+__p += '<div class="grid grid-cols-12 gap-4"\n  ';
+ if (ctx.component.hideLabel) { ;
+__p += '\n  aria-label="' +
+((__t = (ctx.component.label)) == null ? '' : __t) +
+'"\n  ';
+ } else { ;
+__p += '\n  aria-labelledby="l-' +
+((__t = (ctx.instance.id)) == null ? '' : __t) +
+'-' +
+((__t = (ctx.component.key)) == null ? '' : __t) +
+'"\n  ';
+ } ;
+__p += '\n  ';
+ if (ctx.component.description) { ;
+__p += '\n  aria-describedby="d-' +
+((__t = (ctx.instance.id)) == null ? '' : __t) +
+'-' +
+((__t = (ctx.component.key)) == null ? '' : __t) +
+'"\n  ';
+ } ;
+__p += '\n  >\n  ';
  if (ctx.dayFirst && ctx.showDay) { ;
 __p += '\n  <div class="col-span-3">\n    ';
  if (!ctx.component.hideInputLabels) { ;

package/lib/templates/tailwind/dialog/form.ejs.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default=function(ctx) {
 var __t, __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">\n    <div ref="dialogContents"></div>\n    <button class="formio-dialog-close float-right btn btn-secondary btn-sm" aria-label="close" ref="dialogClose"></button>\n  </div>\n</div>\n';
+__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
 }

package/lib/templates/tailwind/editgrid/form.ejs.js

@@ -29,13 +29,13 @@ __p += '\n  <li class="list-group-item" ref="' +
 __p += '\n    <div class="editgrid-actions">\n      <button class="btn btn-primary" ref="' +
 ((__t = (ctx.ref.saveRow)) == null ? '' : __t) +
 '">' +
-((__t = (ctx.t(ctx.component.saveRow || 'Save'))) == null ? '' : __t) +
+((__t = (ctx.t(ctx.component.saveRow || 'Save', { _userInput: true }))) == null ? '' : __t) +
 '</button>\n      ';
  if (ctx.component.removeRow) { ;
 __p += '\n      <button class="btn btn-danger" ref="' +
 ((__t = (ctx.ref.cancelRow)) == null ? '' : __t) +
 '">' +
-((__t = (ctx.t(ctx.component.removeRow || 'Cancel'))) == null ? '' : __t) +
+((__t = (ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true }))) == null ? '' : __t) +
 '</button>\n      ';
  } ;
 __p += '\n    </div>\n    ';
@@ -56,8 +56,8 @@ __p += '\n<button class="btn btn-primary" ref="' +
 ((__t = (ctx.ref.addRow)) == null ? '' : __t) +
 '">\n  <i class="' +
 ((__t = (ctx.iconClass('plus'))) == null ? '' : __t) +
-' mr-1"></i> ' +
-((__t = (ctx.t(ctx.component.addAnother || 'Add Another'))) == null ? '' : __t) +
+'"></i> ' +
+((__t = (ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true }))) == null ? '' : __t) +
 '\n</button>\n';
  } ;
 __p += '\n';

package/lib/templates/tailwind/editgrid/html.ejs.js

@@ -29,13 +29,13 @@ __p += '\n  <li class="list-group-item" ref="' +
 __p += '\n    <div class="editgrid-actions">\n      <button class="btn btn-primary" ref="' +
 ((__t = (ctx.ref.saveRow)) == null ? '' : __t) +
 '">' +
-((__t = (ctx.t(ctx.component.saveRow || 'Save'))) == null ? '' : __t) +
+((__t = (ctx.t(ctx.component.saveRow || 'Save', { _userInput: true }))) == null ? '' : __t) +
 '</button>\n      ';
  if (ctx.component.removeRow) { ;
 __p += '\n      <button class="btn btn-danger" ref="' +
 ((__t = (ctx.ref.cancelRow)) == null ? '' : __t) +
 '">' +
-((__t = (ctx.t(ctx.component.removeRow || 'Cancel'))) == null ? '' : __t) +
+((__t = (ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true }))) == null ? '' : __t) +
 '</button>\n      ';
  } ;
 __p += '\n    </div>\n    ';