@tsed/tailwind-formio 1.11.0 → 1.12.0

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

@@ -0,0 +1,69 @@
+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 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      ';
+ if (ctx.header) { ;
+__p += '\n      <thead class="editgrid-table-head">\n        ' +
+((__t = (ctx.header)) == null ? '' : __t) +
+'\n      </thead>\n      ';
+ } ;
+__p += '\n      <tbody class="editgrid-table-body">\n        ';
+ ctx.rows.forEach(function(row, rowIndex) { ;
+__p += '\n        <tr ref="' +
+((__t = (ctx.ref.row)) == null ? '' : __t) +
+'">\n          ' +
+((__t = (row)) == null ? '' : __t) +
+'\n          ';
+ if (ctx.openRows[rowIndex] && !ctx.readOnly) { ;
+__p += '\n            <td class="editgrid-table-column">\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', { _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', { _userInput: true }))) == null ? '' : __t) +
+'</button>\n                ';
+ } ;
+__p += '\n              </div>\n            </td>\n          ';
+ } ;
+__p += '\n          ';
+ if (ctx.errors[rowIndex]) { ;
+__p += '\n          <td class="editgrid-table-column">\n            <div class="has-error">\n              <div class="editgrid-row-error help-block">\n                ' +
+((__t = (ctx.errors[rowIndex])) == null ? '' : __t) +
+'\n              </div>\n            </div>\n          </td>\n          ';
+ } ;
+__p += '\n        </tr>\n        ';
+ }) ;
+__p += '\n      </tbody>\n      ';
+ if (ctx.footer) { ;
+__p += '\n      <tfoot>\n        <tr>\n          ' +
+((__t = (ctx.footer)) == null ? '' : __t) +
+'\n        </tr>\n      <tfoot>\n      ';
+ } ;
+__p += '\n    </table>\n  </div>\n</div>\n';
+ if (!ctx.readOnly && ctx.hasAddButton) { ;
+__p += '\n<button class="btn btn-primary" ref="' +
+((__t = (ctx.ref.addRow)) == null ? '' : __t) +
+'">\n  <i class="' +
+((__t = (ctx.iconClass('plus'))) == null ? '' : __t) +
+'"></i>\n  ' +
+((__t = (ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true }))) == null ? '' : __t) +
+'\n</button>\n';
+ } ;
+__p += '\n';
+return __p
+}

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

@@ -0,0 +1,59 @@
+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 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      ';
+ if (ctx.header) { ;
+__p += '\n      <thead class="editgrid-table-head">\n        ' +
+((__t = (ctx.header)) == null ? '' : __t) +
+'\n      </thead>\n      ';
+ } ;
+__p += '\n      <tbody class="editgrid-table-body">\n        ';
+ ctx.rows.forEach(function(row, rowIndex) { ;
+__p += '\n        <tr ref="' +
+((__t = (ctx.ref.row)) == null ? '' : __t) +
+'">\n          ' +
+((__t = (row)) == null ? '' : __t) +
+'\n          ';
+ if (ctx.openRows[rowIndex] && !ctx.readOnly) { ;
+__p += '\n          <td class="editgrid-table-column">\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', { _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', { _userInput: true }))) == null ? '' : __t) +
+'</button>\n              ';
+ } ;
+__p += '\n            </div>\n          </td>\n          ';
+ } ;
+__p += '\n          ';
+ if (ctx.errors[rowIndex]) { ;
+__p += '\n          <td class="editgrid-table-column">\n            <div class="has-error">\n              <div class="editgrid-row-error help-block">\n                ' +
+((__t = (ctx.errors[rowIndex])) == null ? '' : __t) +
+'\n              </div>\n            </div>\n          </td>\n          ';
+ } ;
+__p += '\n        </tr>\n        ';
+ }) ;
+__p += '\n      </tbody>\n      ';
+ if (ctx.footer) { ;
+__p += '\n      <tfoot>\n        <tr>\n          ' +
+((__t = (ctx.footer)) == null ? '' : __t) +
+'\n         </tr>\n      <tfoot>\n      ';
+ } ;
+__p += '\n    </table>\n  </div>\n</div>\n';
+return __p
+}

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

@@ -0,0 +1,5 @@
+declare const _default: {
+    form: string;
+    html: string;
+};
+export default _default;

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

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

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

@@ -0,0 +1,25 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default=function(ctx) {
+var __t, __p = '', __j = Array.prototype.join;
+function print() { __p += __j.call(arguments, '') }
+__p += '<p>' +
+((__t = (ctx.t('error'))) == null ? '' : __t) +
+'\n  ';
+ if (ctx.options.vpat) { ;
+__p += '\n  <span ref="errorTooltip" class="' +
+((__t = (ctx.iconClass('question-sign'))) == null ? '' : __t) +
+'" tabindex="0"></span>\n  ';
+ } ;
+__p += '\n</p>\n<ul>\n  ';
+ ctx.errors.forEach(function(err) { ;
+__p += '\n  <li>\n    <span\n      data-component-key = "' +
+((__t = (err.keyOrPath)) == null ? '' : __t) +
+'"\n      ref = "errorRef"\n      tabIndex = "0"\n      role="link"\n    >\n      ' +
+((__t = (err.message)) == null ? '' : __t) +
+'\n    </span>\n  </li>\n  ';
+ }) ;
+__p += '\n</ul>\n';
+return __p
+}

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

@@ -0,0 +1,4 @@
+declare const _default: {
+    form: string;
+};
+export default _default;

package/lib/templates/tailwind/errorsList/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/field/align.ejs.js

@@ -33,7 +33,7 @@ __p += '\n\n  <div class="field-content" style="' +
 '\n  </div>\n</div>\n\n';
  if (ctx.component.description) { ;
 __p += '\n  <div class="form-text text-muted">' +
-((__t = (ctx.t(ctx.component.description))) == null ? '' : __t) +
+((__t = (ctx.t(ctx.component.description, { _userInput: true }))) == null ? '' : __t) +
 '</div>\n';
  } ;
 __p += '\n';

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

@@ -26,8 +26,12 @@ __p += '\n  ' +
  } ;
 __p += '\n';
  if (ctx.component.description) { ;
-__p += '\n  <div class="form-text text-muted">' +
-((__t = (ctx.t(ctx.component.description))) == null ? '' : __t) +
+__p += '\n  <div id="d-' +
+((__t = (ctx.instance.id)) == null ? '' : __t) +
+'-' +
+((__t = (ctx.component.key)) == null ? '' : __t) +
+'" class="form-text text-muted">' +
+((__t = (ctx.t(ctx.component.description, { _userInput: true }))) == null ? '' : __t) +
 '</div>\n';
  } ;
 __p += '\n';

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

@@ -4,17 +4,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default=function(ctx) {
 var __t, __p = '', __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__p += '<fieldset class="mb-5 mt-5">\n  ';
+__p += '<fieldset>\n  ';
  if (ctx.component.legend) { ;
-__p += '\n  <legend class="text-lg border-b-1 border-solid border-gray-300 w-full mb-3 pb-1" ref="header" class="' +
+__p += '\n  <legend ref="header" class="' +
 ((__t = (ctx.component.collapsible ? 'formio-clickable' : '')) == null ? '' : __t) +
 '">\n    ' +
-((__t = (ctx.t(ctx.component.legend))) == null ? '' : __t) +
+((__t = (ctx.t(ctx.component.legend, { _userInput: true }))) == null ? '' : __t) +
 '\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    ';
  } ;
@@ -28,6 +28,6 @@ __p += '\n  <div class="fieldset-body" ref="' +
 ((__t = (ctx.children)) == null ? '' : __t) +
 '\n  </div>\n  ';
  } ;
-__p += '\n</fieldset>\n';
+__p += '\n</fieldset>\n\n';
 return __p
 }

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

@@ -5,7 +5,21 @@ exports.default=function(ctx) {
 var __t, __p = '', __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
 
+ if (ctx.options.vpat) { ;
+__p += '\n  <span tabindex="-1" class="sr-only" id="invisible-' +
+((__t = (ctx.instance.id)) == null ? '' : __t) +
+'-' +
+((__t = (ctx.component.key)) == null ? '' : __t) +
+'"></span>\n';
+ } ;
+__p += '\n';
  if (!ctx.self.imageUpload) { ;
+__p += '\n  ';
+ if (ctx.options.vpat) { ;
+__p += '\n    <div>' +
+((__t = ((!ctx.component.filePattern || ctx.component.filePattern === '*') ? 'Any file types are allowed' : ctx.t('Allowed file types: ') + ctx.component.filePattern)) == null ? '' : __t) +
+'</div>\n  ';
+ } ;
 __p += '\n  <ul class="list-group list-group-striped">\n    <li class="list-group-item list-group-header hidden-xs hidden-sm">\n      <div class="grid grid-cols-12 gap-4">\n        ';
  if (!ctx.disabled) { ;
 __p += '\n          <div class="md:col-span-1"></div>\n        ';
@@ -30,7 +44,7 @@ __p += '\n      </div>\n    </li>\n    ';
  ctx.files.forEach(function(file) { ;
 __p += '\n      <li class="list-group-item">\n        <div class="grid grid-cols-12 gap-4">\n          ';
  if (!ctx.disabled) { ;
-__p += '\n            <div class="md:col-span-1"><i class="' +
+__p += '\n            <div class="md:col-span-1"><i tabindex="0" class="' +
 ((__t = (ctx.iconClass('remove'))) == null ? '' : __t) +
 '" ref="removeLink"></i></div>\n          ';
  } ;
@@ -48,9 +62,11 @@ __p += '\n              ' +
  } else { ;
 __p += '\n              <a href="' +
 ((__t = (file.url || '#')) == null ? '' : __t) +
-'" target="_blank" ref="fileLink">' +
+'" target="_blank" ref="fileLink">\n                <span class="sr-only">' +
+((__t = (ctx.t('Press to open '))) == null ? '' : __t) +
+'</span>' +
 ((__t = (file.originalName || file.name)) == null ? '' : __t) +
-'</a>\n            ';
+'\n              </a>\n            ';
  } ;
 __p += '\n          </div>\n          <div class="md:col-span-2">' +
 ((__t = (ctx.fileSize(file.size))) == null ? '' : __t) +
@@ -65,7 +81,7 @@ __p += '\n                  <option class="test" value="' +
 __p += 'selected="selected"';
  } ;
 __p += '>' +
-((__t = ( type.label )) == null ? '' : __t) +
+((__t = (ctx.t(type.label))) == null ? '' : __t) +
 '</option>\n                ';
  }); ;
 __p += '\n              </select>\n            </div>\n          ';
@@ -88,7 +104,7 @@ __p += '\n      <div>\n        <span>\n          <img ref="fileImage" src="" alt
 ((__t = (ctx.component.imageSize)) == null ? '' : __t) +
 'px">\n          ';
  if (!ctx.disabled) { ;
-__p += '\n            <i class="' +
+__p += '\n            <i tabindex="0" class="' +
 ((__t = (ctx.iconClass('remove'))) == null ? '' : __t) +
 '" ref="removeLink"></i>\n          ';
  } ;
@@ -107,26 +123,30 @@ __p += '\n    <div class="fileSelector">\n      <button class="btn btn-primary"
 '</button>\n    </div>\n  ';
  } else if (!ctx.self.cameraMode) { ;
 __p += '\n    <div class="fileSelector" ref="fileDrop" ' +
-((__t = (ctx.fileDropHidden ? 'hidden' : '')) == null ? '' : __t) +
+((__t = (ctx.fileDropHidden ?'hidden' : '')) == null ? '' : __t) +
 '>\n      <i class="' +
 ((__t = (ctx.iconClass('cloud-upload'))) == null ? '' : __t) +
 '"></i> ' +
 ((__t = (ctx.t('Drop files to attach,'))) == null ? '' : __t) +
 '\n        ';
- if (ctx.self.imageUpload) { ;
+ if (ctx.self.imageUpload && ctx.component.webcam) { ;
 __p += '\n          <a href="#" ref="toggleCameraMode"><i class="' +
 ((__t = (ctx.iconClass('camera'))) == null ? '' : __t) +
 '"></i> ' +
-((__t = (ctx.t('Use Camera,'))) == null ? '' : __t) +
+((__t = (ctx.t('use camera'))) == null ? '' : __t) +
 '</a>\n        ';
  } ;
 __p += '\n        ' +
 ((__t = (ctx.t('or'))) == null ? '' : __t) +
-' <a href="#" ref="fileBrowse" class="browse">' +
+'\n        <a href="#" ref="fileBrowse" class="browse">\n          ' +
 ((__t = (ctx.t('browse'))) == null ? '' : __t) +
-'</a>\n    </div>\n  ';
+'\n          <span class="sr-only">\n            ' +
+((__t = (ctx.t('Browse to attach file for ' + ctx.component.label + '. ' +
+            (ctx.component.description ? ctx.component.description + '. ' : '') +
+            ((!ctx.component.filePattern || ctx.component.filePattern === '*') ? 'Any file types are allowed' : ctx.t('Allowed file types: ') + ctx.component.filePattern)))) == null ? '' : __t) +
+'\n          </span>\n        </a>\n      <div ref="fileProcessingLoader" class="loader-wrapper">\n        <div class="loader text-center"></div>\n      </div>\n    </div>\n  ';
  } else { ;
-__p += '\n    <div>\n      <video class="video" autoplay="true" ref="videoPlayer"></video>\n    </div>\n    <button class="btn btn-primary" ref="takePictureButton"><i class="fa fa-camera"></i> ' +
+__p += '\n    <div class="video-container">\n      <video class="video" autoplay="true" ref="videoPlayer" tabindex="-1"></video>\n    </div>\n    <button class="btn btn-primary" ref="takePictureButton"><i class="fa fa-camera"></i> ' +
 ((__t = (ctx.t('Take Picture'))) == null ? '' : __t) +
 '</button>\n    <button class="btn btn-primary" ref="toggleCameraMode">' +
 ((__t = (ctx.t('Switch to file upload'))) == null ? '' : __t) +
@@ -140,9 +160,13 @@ __p += '\n  <div class="file ' +
 ((__t = (ctx.statuses.status === 'error' ? ' has-error' : '')) == null ? '' : __t) +
 '">\n    <div class="grid grid-cols-12 gap-4">\n      <div class="fileName col-form-label sm:col-span-10">' +
 ((__t = (status.originalName)) == null ? '' : __t) +
-' <i class="' +
+'\n        <i class="' +
 ((__t = (ctx.iconClass('remove'))) == null ? '' : __t) +
-'" ref="fileStatusRemove"></i></div>\n      <div class="fileSize col-form-label sm:col-span-2 text-right">' +
+'" ref="fileStatusRemove">\n          <span class="sr-only">' +
+((__t = (ctx.t('Remove button. Press to remove ' + status.originalName || status.name + '.'))) == null ? '' : __t) +
+'</span>\n          <span class="sr-only">' +
+((__t = (status.message ? status.message.replace(';', '.') : '')) == null ? '' : __t) +
+'</span>\n        </i>\n      </div>\n      <div class="fileSize col-form-label sm:col-span-2 text-right">' +
 ((__t = (ctx.fileSize(status.size))) == null ? '' : __t) +
 '</div>\n    </div>\n    <div class="grid grid-cols-12 gap-4">\n      <div class="sm:col-span-12">\n        ';
  if (status.status === 'progress') { ;

package/lib/templates/tailwind/iconClass.d.ts

@@ -48,6 +48,7 @@ export declare const ICONS: {
     stop: string;
     "check-square": string;
     "remove-circle": string;
+    bars: string;
 };
 declare const _default: (iconset: string | undefined, name: string, spinning?: boolean) => string;
 export default _default;

package/lib/templates/tailwind/iconClass.js

@@ -50,7 +50,8 @@ exports.ICONS = {
     cubes: "bxs-cube",
     stop: "bx-stop",
     "check-square": "bx-checkbox-checked",
-    "remove-circle": "bx-x-circle"
+    "remove-circle": "bx-x",
+    bars: "bx-menu"
 };
 exports.default = (function (iconset, name, spinning) {
     if (iconset === "bx") {

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

@@ -13,9 +13,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;
     };
@@ -78,6 +90,9 @@ declare const _default: {
     components: {
         form: string;
     };
+    tableComponents: {
+        form: string;
+    };
     container: {
         form: string;
     };
@@ -95,6 +110,10 @@ declare const _default: {
         form: string;
         html: string;
     };
+    editgridTable: {
+        form: string;
+        html: string;
+    };
     field: {
         form: string;
         align: string;

package/lib/templates/tailwind/index.js

@@ -26,11 +26,13 @@ var columns_1 = require("./columns");
 var component_1 = require("./component");
 var componentModal_1 = require("./componentModal");
 var components_1 = require("./components");
+var tableComponents_1 = require("./tableComponents");
 var container_1 = require("./container");
 var datagrid_1 = require("./datagrid");
 var day_1 = require("./day");
 var dialog_1 = require("./dialog");
 var editgrid_1 = require("./editgrid");
+var editgridTable_1 = require("./editgridTable");
 var field_1 = require("./field");
 var fieldset_1 = require("./fieldset");
 var file_1 = require("./file");
@@ -67,8 +69,12 @@ var webform_1 = require("./webform");
 var well_1 = require("./well");
 var wizard_1 = require("./wizard");
 var wizardHeader_1 = require("./wizardHeader");
+var wizardHeaderClassic_1 = require("./wizardHeaderClassic");
+var wizardHeaderVertical_1 = require("./wizardHeaderVertical");
 var wizardNav_1 = require("./wizardNav");
 var cssClasses_1 = require("./cssClasses");
+var errorsList_1 = require("./errorsList");
+var alert_1 = require("./alert");
 exports.default = __assign(__assign({ transform: function (type, text) {
         if (!text) {
             return text;
@@ -76,9 +82,7 @@ exports.default = __assign(__assign({ transform: function (type, text) {
         switch (type) {
             case "class":
                 // eslint-disable-next-line no-prototype-builtins
-                return this.cssClasses.hasOwnProperty(text.toString())
-                    ? this.cssClasses[text.toString()]
-                    : text;
+                return this.cssClasses.hasOwnProperty(text.toString()) ? this.cssClasses[text.toString()] : text;
         }
         return text;
     }, defaultIconset: "bx", iconClass: iconClass_1.default,
@@ -98,11 +102,13 @@ exports.default = __assign(__assign({ transform: function (type, text) {
     component: component_1.default,
     componentModal: componentModal_1.default,
     components: components_1.default,
+    tableComponents: tableComponents_1.default,
     container: container_1.default,
     datagrid: datagrid_1.default,
     day: day_1.default,
     dialog: dialog_1.default,
     editgrid: editgrid_1.default,
+    editgridTable: editgridTable_1.default,
     field: field_1.default,
     fieldset: fieldset_1.default,
     file: file_1.default,
@@ -136,4 +142,8 @@ exports.default = __assign(__assign({ transform: function (type, text) {
     well: well_1.default,
     wizard: wizard_1.default,
     wizardHeader: wizardHeader_1.default,
-    wizardNav: wizardNav_1.default });
+    wizardHeaderClassic: wizardHeaderClassic_1.default,
+    wizardHeaderVertical: wizardHeaderVertical_1.default,
+    wizardNav: wizardNav_1.default,
+    errorsList: errorsList_1.default,
+    alert: alert_1.default });

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

@@ -6,74 +6,104 @@ var __t, __p = '', __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
 
  if (ctx.prefix || ctx.suffix) { ;
-__p += '\n<div class="input-group">\n';
+__p += '\n<div class="input-group">\n  ';
  } ;
-__p += '\n';
+__p += '\n  ';
  if (ctx.prefix) { ;
-__p += '\n<div class="input-group-prepend" ref="prefix">\n  <span class="input-group-text">\n    ';
+__p += '\n    <div class="input-group-prepend" ref="prefix">\n    <span class="input-group-text">\n      ';
  if(ctx.prefix instanceof HTMLElement){ ;
-__p += '\n      ' +
-((__t = ( ctx.t(ctx.prefix.outerHTML) )) == null ? '' : __t) +
-'\n    ';
+__p += '\n        ' +
+((__t = ( ctx.t(ctx.prefix.outerHTML, { _userInput: true }) )) == null ? '' : __t) +
+'\n      ';
  } else{ ;
-__p += '\n      ' +
-((__t = ( ctx.t(ctx.prefix) )) == null ? '' : __t) +
-'\n    ';
+__p += '\n        ' +
+((__t = ( ctx.t(ctx.prefix, { _userInput: true }) )) == null ? '' : __t) +
+'\n      ';
  } ;
-__p += '\n  </span>\n</div>\n';
+__p += '\n    </span>\n    </div>\n  ';
  } ;
 __p += '\n  ';
  if (!ctx.component.editor && !ctx.component.wysiwyg) { ;
-__p += '\n<' +
+__p += '\n    <' +
 ((__t = (ctx.input.type)) == null ? '' : __t) +
-'\n  ref="' +
+'\n      ref="' +
 ((__t = (ctx.input.ref ? ctx.input.ref : 'input')) == null ? '' : __t) +
-'"\n  ';
+'"\n      ';
  for (var attr in ctx.input.attr) { ;
-__p += '\n  ' +
+__p += '\n        ' +
 ((__t = (attr)) == null ? '' : __t) +
 '="' +
 ((__t = (ctx.input.attr[attr])) == null ? '' : __t) +
-'"\n  ';
+'"\n      ';
  } ;
-__p += '\n  id="' +
+__p += '\n      id="' +
+((__t = (ctx.instance.id)) == null ? '' : __t) +
+'-' +
+((__t = (ctx.component.key)) == null ? '' : __t) +
+'"\n      aria-labelledby="l-' +
 ((__t = (ctx.instance.id)) == null ? '' : __t) +
 '-' +
 ((__t = (ctx.component.key)) == null ? '' : __t) +
-'"\n>' +
+' ';
+ if (ctx.component.description) { ;
+__p += 'd-' +
+((__t = (ctx.instance.id)) == null ? '' : __t) +
+'-' +
+((__t = (ctx.component.key)) == null ? '' : __t);
+ } ;
+__p += '"\n      aria-required="' +
+((__t = (ctx.input.ref === 'input' || !ctx.input.ref ? ctx.component.validate.required :
+        ctx.component.fields && ctx.component.fields[ctx.input.ref] && ctx.component.fields[ctx.input.ref].required || false)) == null ? '' : __t) +
+'"\n    >' +
 ((__t = (ctx.input.content)) == null ? '' : __t) +
 '</' +
 ((__t = (ctx.input.type)) == null ? '' : __t) +
-'>\n';
+'>\n    ';
+ if (ctx.hasValueMaskInput) { ;
+__p += '\n      <input ref="valueMaskInput" />\n    ';
  } ;
 __p += '\n';
- if (ctx.component.editor || ctx.component.wysiwyg) { ;
-__p += '\n<div ref="input"></div>\n';
  } ;
 __p += '\n';
- if (ctx.component.showCharCount) { ;
-__p += '\n<span class="text-muted pull-right" ref="charcount"></span>\n';
+ if (ctx.component.editor || ctx.component.wysiwyg) { ;
+__p += '\n  <div ref="input"></div>\n';
  } ;
 __p += '\n';
- if (ctx.component.showWordCount) { ;
-__p += '\n<span class="text-muted pull-right" ref="wordcount"></span>\n';
+ if (ctx.component.type === 'datetime') { ;
+__p += '\n<span aria-live="assertive" id="' +
+((__t = (ctx.instance.id)) == null ? '' : __t) +
+'-liveRegion" class="sr-only" ref="liveRegion"></span>\n';
  } ;
 __p += '\n';
  if (ctx.suffix) { ;
-__p += '\n<div class="input-group-append" ref="suffix">\n  <span class="input-group-text">\n    ';
+__p += '\n  <div class="input-group-append" ref="suffix">\n    <span class="input-group-text">\n      ';
  if(ctx.suffix instanceof HTMLElement){ ;
-__p += '\n      ' +
-((__t = ( ctx.t(ctx.suffix.outerHTML) )) == null ? '' : __t) +
-'\n    ';
+__p += '\n        ' +
+((__t = ( ctx.t(ctx.suffix.outerHTML, { _userInput: true }) )) == null ? '' : __t) +
+'\n      ';
  } else{ ;
-__p += '\n      ' +
-((__t = ( ctx.t(ctx.suffix) )) == null ? '' : __t) +
-'\n    ';
+__p += '\n        ' +
+((__t = ( ctx.t(ctx.suffix, { _userInput: true }) )) == null ? '' : __t) +
+'\n      ';
  } ;
-__p += '\n  </span>\n</div>\n';
+__p += '\n    </span>\n  </div>\n';
  } ;
 __p += '\n';
  if (ctx.prefix || ctx.suffix) { ;
+__p += '\n  </div>\n';
+ } ;
+__p += '\n';
+ if (ctx.component.showCharCount || ctx.component.showWordCount) { ;
+__p += '\n<div class="form-text ' +
+((__t = (ctx.component.description ? 'pull-right' : 'text-right')) == null ? '' : __t) +
+'">\n  ';
+ if (ctx.component.showCharCount) { ;
+__p += '\n  <span class="text-muted" ref="charcount" aria-live="polite"></span>\n  ';
+ } ;
+__p += '\n  ';
+ if (ctx.component.showWordCount) { ;
+__p += '\n  <span class="text-muted" ref="wordcount" aria-live="polite"></span>\n  ';
+ } ;
 __p += '\n</div>\n';
  } ;
 __p += '\n';

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

@@ -4,19 +4,29 @@ Object.defineProperty(exports, "__esModule", {
 exports.default=function(ctx) {
 var __t, __p = '', __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__p += '<label\n  class="col-form-label ' +
+__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) )) == null ? '' : __t) +
+((__t = ( ctx.t(ctx.component.label, { _userInput: true }) )) == null ? '' : __t) +
 '\n  ';
+ if (ctx.component.type === 'number' || ctx.component.type === 'phoneNumber' || ctx.component.type === 'currency') { ;
+__p += '\n    <span class=\'sr-only\'>, ' +
+((__t = (ctx.t('numeric only'))) == null ? '' : __t) +
+',</span>\n  ';
+ } ;
+__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  ';
  } ;