@numbers-framework/frontend-react/dist/HTML.js

React Frontend for Numbers Framework

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.HTML = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Base = require("./NumbersSelect/Base.js");
var _server = require("react-dom/server");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
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); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var HTML = exports.HTML = function HTML(props) {
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props.children);
};
HTML.Div = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('div', props, props.children);
};
HTML.Span = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('span', props, props.children);
};
HTML.P = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('p', props, props.children);
};
HTML.Br = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('br', props, props.children);
};
HTML.Hr = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('hr', props, props.children);
};
HTML.Address = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('address', props, props.children);
};
HTML.Article = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('article', props, props.children);
};
HTML.Aside = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('aside', props, props.children);
};
HTML.Footer = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('footer', props, props.children);
};
HTML.Header = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('header', props, props.children);
};
HTML.HGroup = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('hgroup', props, props.children);
};
HTML.Main = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('main', props, props.children);
};
HTML.Nav = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('nav', props, props.children);
};
HTML.Section = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('section', props, props.children);
};
HTML.Search = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('search', props, props.children);
};
HTML.H1 = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('h1', props, props.children);
};
HTML.H2 = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('h2', props, props.children);
};
HTML.H3 = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('h3', props, props.children);
};
HTML.H4 = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('h4', props, props.children);
};
HTML.H5 = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('h5', props, props.children);
};
HTML.H6 = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('h6', props, props.children);
};
HTML.BlockQuote = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('blockquote', props, props.children);
};
HTML.Dd = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('dd', props, props.children);
};
HTML.Dl = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('dl', props, props.children);
};
HTML.Dt = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('dt', props, props.children);
};
HTML.Figure = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('figure', props, props.children);
};
HTML.FigCaption = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('figcaption', props, props.children);
};
HTML.Ol = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('ol', props, props.children);
};
HTML.Ul = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('ul', props, props.children);
};
HTML.Menu = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('menu', props, props.children);
};
HTML.Li = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('li', props, props.children);
};
HTML.Pre = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('pre', props, props.children);
};
HTML.A = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('a', props, props.children);
};
HTML.Abbr = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('abbr', props, props.children);
};
HTML.B = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('b', props, props.children);
};
HTML.Bdi = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('bdi', props, props.children);
};
HTML.Bdo = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('bdo', props, props.children);
};
HTML.Cite = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('cite', props, props.children);
};
HTML.Code = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('code', props, props.children);
};
HTML.Data = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('data', props, props.children);
};
HTML.Dfn = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('dfn', props, props.children);
};
HTML.Em = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('em', props, props.children);
};
HTML.I = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('i', props, props.children);
};
HTML.Kbd = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('kbd', props, props.children);
};
HTML.Mark = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('mark', props, props.children);
};
HTML.Q = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('q', props, props.children);
};
HTML.Ruby = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('ruby', props, props.children);
};
HTML.Rt = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('rt', props, props.children);
};
HTML.Rp = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('rp', props, props.children);
};
HTML.S = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('s', props, props.children);
};
HTML.Small = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('small', props, props.children);
};
HTML.Strong = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('strong', props, props.children);
};
HTML.Sub = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('sub', props, props.children);
};
HTML.Sup = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('sup', props, props.children);
};
HTML.Time = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('time', props, props.children);
};
HTML.U = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('u', props, props.children);
};
HTML.Var = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('var', props, props.children);
};
HTML.Wbr = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('wbr', props, props.children);
};
HTML.Area = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('area', props, props.children);
};
HTML.Audio = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('audio', props, props.children);
};
HTML.Img = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('img', props, props.children);
};
HTML.Map = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('map', props, props.children);
};
HTML.Track = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('track', props, props.children);
};
HTML.Video = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('video', props, props.children);
};
HTML.Embed = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('embed', props, props.children);
};
HTML.FencedFrame = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('fencedframe', props, props.children);
};
HTML.IFrame = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('iframe', props, props.children);
};
HTML.Object = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('object', props, props.children);
};
HTML.Picture = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('picture', props, props.children);
};
HTML.Portal = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('portal', props, props.children);
};
HTML.Source = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('source', props, props.children);
};
HTML.Svg = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('svg', props, props.children);
};
HTML.Math = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('math', props, props.children);
};
HTML.Canvas = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('canvas', props, props.children);
};
HTML.NoScript = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('noscript', props, props.children);
};
HTML.Script = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('script', props, props.children);
};
HTML.Del = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('del', props, props.children);
};
HTML.Ins = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('ins', props, props.children);
};
HTML.Table = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('table', props, props.children);
};
HTML.Caption = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('caption', props, props.children);
};
HTML.Col = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('col', props, props.children);
};
HTML.ColGroup = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('colgroup', props, props.children);
};
HTML.TBody = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('tbody', props, props.children);
};
HTML.Td = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('td', props, props.children);
};
HTML.TFoot = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('tfoot', props, props.children);
};
HTML.Th = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('th', props, props.children);
};
HTML.THead = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('thead', props, props.children);
};
HTML.Tr = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('tr', props, props.children);
};
HTML.Button = function (props) {
  var _options$type, _ref, _options$input_type, _options$value;
  var options = _objectSpread({}, props);
  var type = (_options$type = options['type']) !== null && _options$type !== void 0 ? _options$type : 'secondary';
  if (type === 'default') {
    type = 'secondary';
  }
  options['type'] = (_ref = (_options$input_type = options['input_type']) !== null && _options$input_type !== void 0 ? _options$input_type : options['type']) !== null && _ref !== void 0 ? _ref : 'button';
  options['value'] = (_options$value = options['value']) !== null && _options$value !== void 0 ? _options$value : 'Submit';
  options['class'] = (options['class'] || '') + ' btn btn-' + type;
  return HTML.Input(_objectSpread({
    tag: 'input'
  }, options));
};
HTML.Button2 = function (props) {
  var _options$type2, _ref2, _options$input_type2, _options$value2;
  var options = _objectSpread({}, props);
  var type = (_options$type2 = options['type']) !== null && _options$type2 !== void 0 ? _options$type2 : 'secondary';
  if (type === 'default') {
    type = 'secondary';
  }
  options['type'] = (_ref2 = (_options$input_type2 = options['input_type']) !== null && _options$input_type2 !== void 0 ? _options$input_type2 : options['type']) !== null && _ref2 !== void 0 ? _ref2 : 'submit';
  var value = (_options$value2 = options['value']) !== null && _options$value2 !== void 0 ? _options$value2 : 'Submit';
  options['value'] = 1;
  if (!options.children) {
    options.children = [];
  }
  options.children.push(value);
  options['class'] = (options['class'] || '') + ' btn btn-' + type;
  return HTML.Tag(_objectSpread({
    tag: 'button'
  }, options));
};
HTML.DataList = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('datalist', props, props.children);
};
HTML.FieldSet = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('fieldset', props, props.children);
};
HTML.Form = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('form', props, props.children);
};
HTML.Input = function (props) {
  return HTML.Tag(_objectSpread(_objectSpread({
    tag: "input"
  }, props), {}, {
    self_closing: true
  }));
};
HTML.Label = function (props) {
  return HTML.Tag(_objectSpread({
    tag: "label"
  }, props));
};
HTML.Legend = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('legend', props, props.children);
};
HTML.Meter = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('meter', props, props.children);
};
HTML.Output = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('output', props, props.children);
};
HTML.Progress = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('progress', props, props.children);
};
HTML.TextArea = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('textarea', props, props.children);
};
HTML.Details = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('details', props, props.children);
};
HTML.Dialog = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('dialog', props, props.children);
};
HTML.Summary = function (props) {
  return /*#__PURE__*/(0, _react.createElement)('summary', props, props.children);
};
var HTMLSelect = function HTMLSelect(props) {
  var children = props.children;
  var settings = _objectSpread({}, props);
  // determine ID
  if (!settings.id && settings.name) {
    settings.id = settings.name;
  }
  if (!settings.id) {
    settings.id = 'numbers_select_random_generated_id_' + Math.round(Math.random() * 1000) + '_' + Math.round(Math.random() * 1000) + '_' + Math.round(Math.random() * 1000);
  }
  // mounting
  (0, _react.useEffect)(function () {
    if (settings.numbers) {
      (0, _Base.NumbersSelect)(settings);
    }
  }, []);
  if (settings.options) {
    children = [];
    var options = settings.options;
    for (var k in settings.options) {
      options[k]['value'] = k;
      // if its object we expect to have name in there
      if (_typeof(options[k]) === 'object') {
        options[k]['children'] = options[k]['name'];
      } else {
        options[k]['children'] = options[k];
      }
      options[k]['key'] = k;
      // todo: add loc
      children.push(HTML.Option(options[k]));
    }
  }
  return /*#__PURE__*/(0, _react.createElement)('select', settings, children);
};
var HTMLOption = function HTMLOption(props) {
  return /*#__PURE__*/(0, _react.createElement)('option', props, props.children);
};
var HTMLOptGroup = function HTMLOptGroup(props) {
  return /*#__PURE__*/(0, _react.createElement)('optgroup', props, props.children);
};
HTML.Select = HTMLSelect;
HTML.Option = HTMLOption;
HTML.OptGroup = HTMLOptGroup;
var arrayReverseObj = function arrayReverseObj(obj) {
  return Object.keys(obj).reverse().map(function (key) {
    return _objectSpread({}, obj[key]);
  });
};
var percentageToGridColumns = function percentageToGridColumns(field_sizes, options) {
  options = options || {};
  options['grid_columns'] = options['grid_columns'] || 12;
  var step = 100 / options['grid_columns'];
  var total = 0;
  var empty = 0;
  var arr = {
    percent: {},
    "final": {},
    temp: {},
    grouped: {}
  };
  for (var k in field_sizes) {
    arr['percent'][k] = field_sizes[k] ? field_sizes[k] : 0;
    if (field_sizes[k]) {
      total += field_sizes[k];
    } else {
      empty += 1;
    }
  }
  // if we have empty columns and percent is less than 100 we prepopulate
  if (total < 100 && empty !== 0) {
    var temp = (100 - total) / empty;
    for (var _k in arr['percent']) {
      if (arr['percent'][_k] == 0) {
        arr['percent'][_k] = temp;
        total += temp;
      }
    }
  }
  // we need to rescale if percent is more than 100
  if (total > 100) {
    var scale = 100 / total;
    for (var _k2 in arr['percent']) {
      arr['percent'][_k2] = arr['percent'][_k2] * scale;
    }
  }
  // sort in ascending order
  arr['percent'] = Object.entries(arr['percent']).sort(function (_ref3, _ref4) {
    var _ref5 = _slicedToArray(_ref3, 2),
      a = _ref5[1];
    var _ref6 = _slicedToArray(_ref4, 2),
      b = _ref6[1];
    return a - b;
  }).reduce(function (r, _ref7) {
    var _ref8 = _slicedToArray(_ref7, 2),
      k = _ref8[0],
      v = _ref8[1];
    return _objectSpread(_objectSpread({}, r), {}, _defineProperty({}, k, v));
  }, {});
  var cells_left = options['grid_columns'];
  for (var _k3 in arr['percent']) {
    if (arr['percent'][_k3] <= step) {
      arr['percent'][_k3] = 1;
      cells_left--;
    } else {
      var rounded = Math.floor(arr['percent'][_k3] / step);
      var leftover = arr['percent'][_k3] - rounded * step;
      arr['final'][_k3] = rounded;
      cells_left -= rounded;
      if (leftover > 0) {
        arr['temp'][_k3] = leftover;
      }
    }
  }
  // if we have cells left we distribute
  if (cells_left > 0) {
    // if we got here we distribute on by one
    if (cells_left > 0) {
      arr['temp'] = Object.entries(arr['temp']).sort(function (_ref9, _ref10) {
        var _ref11 = _slicedToArray(_ref9, 2),
          a = _ref11[1];
        var _ref12 = _slicedToArray(_ref10, 2),
          b = _ref12[1];
        return a - b;
      }).reduce(function (r, _ref13) {
        var _ref14 = _slicedToArray(_ref13, 2),
          k = _ref14[0],
          v = _ref14[1];
        return _objectSpread(_objectSpread({}, r), {}, _defineProperty({}, k, v));
      }, {});
      for (var _k4 in arr['temp']) {
        arr['final'][_k4]++;
        cells_left--;
        delete arr['temp'][_k4];
        if (cells_left == 0) {
          break;
        }
      }
    }
  }
  return {
    success: true,
    error: [],
    data: arr['final'],
    percent: arr['percent']
  };
};
HTML.PercentageToGridColumns = percentageToGridColumns;
var Grid = function Grid(options) {
  var rtl = options['rtl'] || false;
  var grid_columns = 12;
  var rows = options['options'] || {};
  delete options['options'];
  options['cell_class'] = options['cell_class'] || 'col-sm-';
  if (!options['cell_class'].endsWith('-')) {
    options['cell_class'] += '-';
  }
  var result = '';
  for (var k in rows) {
    // we need to determine field sizes
    var field_sizes = [];
    var row_class = '';
    var flag_have_label = false;
    for (var k2 in rows[k]) {
      for (var k3 in rows[k][k2]) {
        var _rows$k$k2$k3$label;
        if (rows[k][k2][k3]['options']['percent']) {
          field_sizes.push(parseInt(rows[k][k2][k3]['options']['percent']));
        } else {
          field_sizes.push(null);
        }
        if (rows[k][k2][k3]['row_class']) {
          row_class += ' ' + rows[k][k2][k3]['row_class'];
        }
        if (((_rows$k$k2$k3$label = rows[k][k2][k3]['label']) !== null && _rows$k$k2$k3$label !== void 0 ? _rows$k$k2$k3$label : '') !== '') {
          flag_have_label = true;
        }
      }
    }
    var field_new_sizes = HTML.PercentageToGridColumns(field_sizes);
    // count number of fields
    var count_fields = Object.values(rows[k]).length;
    result += '<div class="row' + row_class + '">';
    // we need to fill up empty columns if rtl
    if (rtl) {
      var _index = 0;
      var current_grid_columns = 0;
      for (var _k5 in rows[k]) {
        for (var _k6 in rows[k][_k5]) {
          // if we are mannually set field sizes we skip
          if (rows[k][_k5][_k6]['options']['field_size']) {
            current_grid_columns = 12;
            break;
          }
          current_grid_columns += field_new_sizes['data'][_index];
          rows[k][_k5][_k6]['options']['field_size'] = options['cell_class'] + field_new_sizes['data'][_index]; // a must
          _index++;
        }
      }
      if (current_grid_columns != grid_columns) {
        rows[k]['__empty_column_fill__']['__empty_column_fill__'] = {
          value: ' ',
          options: {
            field_size: options['cell_class'] + (grid_columns - current_grid_columns) // a must
          }
        };
        field_new_sizes['data'][_index] = grid_columns - current_grid_columns;
      }
      rows[k] = arrayReverseObj(rows[k]);
    }
    // loop though each field and render it
    var index = 0;
    for (var _k7 in rows[k]) {
      var flag_first_field = true;
      if (rtl) {
        rows[k][_k7] = arrayReverseObj(rows[k][_k7]);
      }
      for (var _k8 in rows[k][_k7]) {
        var _rows$k$_k7$_k8$optio, _rows$k$_k7$_k8$class, _rows$k$_k7$_k8$value;
        var error_class = '';
        if (rows[k][_k7][_k8]['error'] && rows[k][_k7][_k8]['error']['type']) {
          if (rows[k][_k7][_k8]['error']['type'] == 'danger') {
            rows[k][_k7][_k8]['error']['type'] = 'error';
          }
          error_class = 'has-' + rows[k][_k7][_k8]['error']['type'];
        }
        // style
        var style = '';
        if (rows[k][_k7][_k8]['options']['style']) {
          style = ' style="' + rows[k][_k7][_k8]['options']['style'] + '"';
        }
        var field_size = (_rows$k$_k7$_k8$optio = rows[k][_k7][_k8]['options']['field_size']) !== null && _rows$k$_k7$_k8$optio !== void 0 ? _rows$k$_k7$_k8$optio : options['cell_class'] + field_new_sizes['data'][index];
        var element_class = (_rows$k$_k7$_k8$class = rows[k][_k7][_k8]['class']) !== null && _rows$k$_k7$_k8$class !== void 0 ? _rows$k$_k7$_k8$class : '';
        result += '<div class="' + field_size + ' form-group ' + error_class + ' ' + element_class + '"' + style + '>';
        // label
        if (flag_first_field) {
          var _rows$k$_k7$_k8$label;
          if (((_rows$k$_k7$_k8$label = rows[k][_k7][_k8]['label']) !== null && _rows$k$_k7$_k8$label !== void 0 ? _rows$k$_k7$_k8$label : '') !== '') {
            // if label is not wrapped into label we autowrap
            var label = new String(rows[k][_k7][_k8]['label']);
            if (label.search('<label') == -1) {
              rows[k][_k7][_k8]['label'] = HTML.Label({
                value: rows[k][_k7][_k8]['label'],
                return_html: true
              });
            }
            result += rows[k][_k7][_k8]['label'];
          } else if (flag_have_label) {
            result += '<label>&nbsp;</label>';
          }
          flag_first_field = false;
        } else {
          if (flag_have_label) {
            result += '<label>&nbsp;</label>';
          }
        }
        result += (_rows$k$_k7$_k8$value = rows[k][_k7][_k8]['value']) !== null && _rows$k$_k7$_k8$value !== void 0 ? _rows$k$_k7$_k8$value : '';
        // error messages
        if (rows[k][_k7][_k8]['error'] && rows[k][_k7][_k8]['error']['message']) {
          result += rows[k][_k7][_k8]['error']['message'];
        }
        // description after error message
        if (rows[k][_k7][_k8]['description']) {
          result += HTML.Text({
            type: 'muted',
            value: rows[k][_k7][_k8]['description'],
            return_html: true
          });
        }
        result += '</div>';
        index++;
      }
    }
    result += '</div>';
  }
  var outer_class = ['container-fluid'];
  if (options['class']) {
    outer_class.push(options['class']);
  }
  return '<div class="' + outer_class.join(' ') + '">' + result + '</div>';
};
HTML.Grid = Grid;
var Text = function Text(props) {
  var _options$tag, _options$type3, _options$class;
  var options = props;
  if (!props.children) {
    props.children = [];
  }
  options['tag'] = (_options$tag = options['tag']) !== null && _options$tag !== void 0 ? _options$tag : 'p';
  options['type'] = 'text-' + ((_options$type3 = options['type']) !== null && _options$type3 !== void 0 ? _options$type3 : 'primary');
  options['class'] = ((_options$class = options['class']) !== null && _options$class !== void 0 ? _options$class : '') + ' ' + options['type'];
  if (options['value']) {
    props.children.push(/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options['value']));
  }
  return /*#__PURE__*/(0, _react.createElement)(options['tag'], options, props.children);
};
HTML.Text = Text;
var Separator = function Separator(props) {
  var _props$value, _props$icon;
  var value = (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : null;
  var icon = (_props$icon = props.icon) !== null && _props$icon !== void 0 ? _props$icon : null;
  var result = '';
  result += '<table width="100%">';
  result += '<tr><td width="50%"><hr/></td>';
  if (value || icon) {
    // todo add Name method
    result += '<td width="1%" nowrap><b>' + HTML.Name(value, icon) + '</b></td>';
  }
  result += '<td width="50%"><hr/></td></tr>';
  result += '</table>';
  return result;
};
HTML.Separator = Separator;
var Mandatory = function Mandatory(props) {
  var _options$type4;
  var options = _objectSpread({}, props);
  var asterisk = '';
  switch ((_options$type4 = options['type']) !== null && _options$type4 !== void 0 ? _options$type4 : '') {
    case 'mandatory':
      asterisk = '<b style="color: red;" title="' + 'Mandatory' + '">*</b>';
      options['tag'] = 'b';
      break;
    case 'conditional':
      asterisk = '<b style="color: green;" title="' + 'Conditional' + '">*</b>';
      options['tag'] = 'b';
      break;
    default:
      options['tag'] = 'span';
  }
  // if we are formatting value
  if (options['value']) {
    if (options['value']['value']) {
      var _options$prepend;
      options['value']['value'] = options['value']['value'] + ' ' + asterisk + ((_options$prepend = options['prepend']) !== null && _options$prepend !== void 0 ? _options$prepend : '');
    } else {
      var _options$prepend2;
      options['value'] = {
        value: options['value'] + ' ' + asterisk + ((_options$prepend2 = options['prepend']) !== null && _options$prepend2 !== void 0 ? _options$prepend2 : '')
      };
    }
    options['value']['tag'] = options['tag'];
    return HTML.Tag(options['value']);
  } else {
    return asterisk;
  }
};
HTML.Mandatory = Mandatory;
var Tag = function Tag(props) {
  var options = _objectSpread({}, props);
  var tag = options['tag'] || 'div';
  delete options['tag'];
  if (options['class']) {
    options['className'] = options['class'];
  }
  delete options['class'];
  var as_html = false;
  if (options['return_html']) {
    as_html = true;
  }
  if (options['self_closing']) {
    delete options['self_closing'];
  } else {
    if (options['have_html']) {
      delete options['have_html'];
      options['dangerouslySetInnerHTML'] = {};
      options['dangerouslySetInnerHTML']['__html'] = options['value'];
    } else if (options['value'] && !options.children) {
      if (!options.children) {
        options.children = [];
      }
      options.children.push(/*#__PURE__*/_react["default"].createElement(_react.Fragment, null, options['value']));
      delete options['value'];
    }
  }
  delete options['return_html'];
  var result = /*#__PURE__*/(0, _react.createElement)(tag, options, options.children);
  if (as_html) {
    return (0, _server.renderToStaticMarkup)(result);
  } else {
    return result;
  }
};
HTML.Tag = Tag;
HTML.Component = function (options) {
  var TagComponent = options['component'];
  delete options['component'];
  return /*#__PURE__*/_react["default"].createElement(TagComponent, options);
};
var Icon = function Icon(options) {
  var _options$class2, _options$tag2;
  options['class'] = (_options$class2 = options['class']) !== null && _options$class2 !== void 0 ? _options$class2 : '';
  options['tag'] = (_options$tag2 = options['tag']) !== null && _options$tag2 !== void 0 ? _options$tag2 : 'i';
  if (options['type'].indexOf('material-symbols-outlined') != -1) {
    var value = options['type'].replaceAll(/(material-symbols-outlined)|(light)|(regular)|(bold)|(fill)|(animated)|(dark)|(inactive)/gi, '').trim();
    options['value'] = value;
    options['class'] += ' ' + options['type'].replace(value, '');
  } else {
    options['class'] += ' ' + options['type'];
  }
  delete options['type'];
  return HTML.Tag(options);
};
HTML.Icon = Icon;
var _default = exports["default"] = HTML;