bc-formio-template-extend/dist/cjs/index.js

Extension of Formio JS's template for formio components following web accessibility

'use strict';

function _typeof(o) {
  "@babel/helpers - typeof";

  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
    return typeof o;
  } : function (o) {
    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
  }, _typeof(o);
}

var Radio = function () {
  function Radio() {
    this.Templates = window.Formio.Templates || {};
  }
  Radio.prototype.radioStyle = function () {
    return "\n      .bc-radios, .bc-radios__item {\n        position: relative;\n      }\n      .bc-radios {\n        border: none !important;\n        padding: 0 !important;\n      }\n      .bc-radios__item {\n        display: flex;\n        flex-wrap: wrap;\n        margin-bottom: 10px;\n      }\n      .bc-radios__input {\n        z-index: 1;\n        width: 44px;\n        height: 44px;\n        margin: 0 !important;\n        opacity: 0;\n        left: 0;\n        top: 0;\n        cursor: pointer;\n      }\n      .bc-radio__label {\n        align-self: center;\n        max-width: calc(100% - 74px);\n        margin-bottom: 0;\n        margin-left: 40px;\n        padding: 7px 15px;\n        cursor: pointer;\n        touch-action: manipulation;\n      }\n      .bc-radio__label > .bc_checkedItem:before {\n        content: \"\";\n        box-sizing: border-box;\n        position: absolute;\n        top: 2px;\n        left: 2px;\n        width: 40px;\n        height: 40px;\n        border: 2px solid;\n        border-radius: 50%;\n        background: transparent;\n      }\n      .bc-radio__label > .bc_checkedItem:after {\n        content: \"\";\n        position: absolute;\n        top: 12px;\n        left: 12px;\n        width: 0;\n        height: 0;\n        border: 10px solid;\n        border-radius: 50%;\n        opacity: 0;\n        background: #000;\n      }\n      .bc-radios__input:checked + .bc_checkedItem:after {\n        opacity: 1;\n      }\n      .bc-radios__input:checked + .bc_checkedItem:before,\n      .bc-radios__input[type=radio]:focus + .bc_checkedItem:before {\n        outline: 3px solid rgba(0, 0, 0, 0) !important;\n        outline-offset: 1px;\n        box-shadow: 0 0 0 3px #fd0 !important;\n        border-width: 4px;\n      }";
  };
  Radio.prototype.radio = function () {
    return {
      form: function form(ctx) {
        var _a;
        return "\n        <fieldset\n          class=\"govuk-radios bc-radios ".concat(ctx.inline ? 'govuk-radios--inline' : '', "\"\n          ref=\"radioGroup\"\n          role=\"").concat(ctx.component.type === 'selectboxes' ? 'group' : 'radiogroup', "\"\n          aria-required=\"").concat((_a = ctx.component.validate) === null || _a === void 0 ? void 0 : _a.required, "\"\n          aria-labelledby=\"").concat(ctx.instance.id, "-").concat(ctx.component.key, "--legend\"\n          ").concat(ctx.component.description ? "aria-describedby=\"d-".concat(ctx.instance.id, "-").concat(ctx.component.key, "\"") : '', "\n        >\n          <legend hidden id=\"").concat(ctx.instance.id, "-").concat(ctx.component.key, "--legend\">").concat(ctx.component.label, "</legend>\n          ").concat(ctx.values.map(function (item, index) {
          var _a, _b;
          var inputId = "".concat((_b = (_a = ctx.instance) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.id, "-").concat(ctx.id, "-").concat(ctx.row, "-").concat(_typeof(item.value) === 'object' ? item.value + '-' + index : item.value);
          var isChecked = ctx.value && (ctx.value === item.value || _typeof(ctx.value) === 'object' && Object.prototype.hasOwnProperty.call(ctx.value, item.value) && ctx.value[item.value]);
          return "\n            <div class=\"bc-radios__item ".concat(ctx.input.attr.type, " form-check").concat(ctx.inline ? '-inline' : '', "\" ref=\"wrapper\">\n              <label class=\"bc-radio__label label-position-").concat(ctx.component.optionsLabelPosition, "\" for=\"").concat(inputId, "\">\n                ").concat(['left', 'top'].includes(ctx.component.optionsLabelPosition) ? "<span>".concat(ctx.t(item.label, {
            _userInput: true
          }), "</span>") : '', "\n                <input\n                  ref=\"input\"\n                  class=\"bc-radios__input").concat(ctx.input.attr["class"] ? ' ' + ctx.input.attr["class"] : '', "\"\n                  ").concat(Object.entries(ctx.input.attr).filter(function (_a) {
            var key = _a[0];
            return key !== 'class';
          }).map(function (_a) {
            var key = _a[0],
              val = _a[1];
            return "".concat(key, "=\"").concat(val, "\"");
          }).join(' '), "\n                  value=\"").concat(item.value, "\"\n                  ").concat(isChecked ? 'checked' : '', "\n                  ").concat(item.disabled ? 'disabled' : '', "\n                  id=\"").concat(inputId, "\"\n                  role=\"").concat(ctx.component.type === 'selectboxes' ? 'checkbox' : 'radio', "\"\n                />\n                <span class=\"bc_checkedItem\"></span>\n                ").concat(!ctx.component.optionsLabelPosition || ['right', 'bottom'].includes(ctx.component.optionsLabelPosition) ? "<span>".concat(ctx.t(item.label, {
            _userInput: true
          }), "</span>") : '', "\n              </label>\n            </div>");
        }).join(''), "\n        </fieldset>");
      }
    };
  };
  Radio.prototype.componentStyles = function () {
    return [this.radioStyle()];
  };
  Radio.prototype.styleTagContent = function () {
    return this.componentStyles().join('\n');
  };
  Radio.prototype.injectStyleToHead = function () {
    if (!document.getElementById('custom-bc-template__style')) {
      var styleTag = document.createElement('style');
      styleTag.id = 'custom-bc-template__style';
      styleTag.textContent = this.styleTagContent();
      document.head.appendChild(styleTag);
    }
  };
  Radio.prototype.init = function () {
    this.Templates.current = {
      radio: this.radio()
    };
    this.injectStyleToHead();
  };
  return Radio;
}();

var render = function () {
  function render() {
    this.radio = new Radio();
  }
  render.prototype.initAll = function () {
    this.radio.init();
  };
  return render;
}();

exports.render = render;