@gov-cy/govcy-frontend-renderer 1.3.0 → 1.5.0

package/dist/govcyCompiledTemplates.browser.js

@@ -892,6 +892,581 @@ root: root
 })();
 })();
 
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["elements/dateInput.njk"] = (function() {
+function root(env, context, frame, runtime, cb) {
+var lineno = 0;
+var colno = 0;
+var output = "";
+try {
+var parentTemplate = null;
+output += "\n";
+output += "\n";
+var macro_t_1 = runtime.makeMacro(
+["params"], 
+[], 
+function (l_params, kwargs) {
+var callerFrame = frame;
+frame = new runtime.Frame();
+kwargs = kwargs || {};
+if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
+frame.set("caller", kwargs.caller); }
+frame.set("params", l_params);
+var t_2 = "";var t_3;
+t_3 = env.getFilter("default").call(context, runtime.memberLookup((l_params),"isPageHeading"),false);
+frame.set("isPageHeading", t_3, true);
+if(frame.topLevel) {
+context.setVariable("isPageHeading", t_3);
+}
+if(frame.topLevel) {
+context.addExport("isPageHeading", t_3);
+}
+var t_4;
+t_4 = env.getFilter("default").call(context, runtime.memberLookup((l_params),"variant"),"mobile");
+frame.set("variant", t_4, true);
+if(frame.topLevel) {
+context.setVariable("variant", t_4);
+}
+if(frame.topLevel) {
+context.addExport("variant", t_4);
+}
+if(runtime.memberLookup((l_params),"legend") && runtime.memberLookup((l_params),"id") && runtime.memberLookup((l_params),"name")) {
+env.getTemplate("utilities/govcyUtilities.njk", false, "elements/dateInput.njk", false, function(t_6,t_5) {
+if(t_6) { cb(t_6); return; }
+t_5.getExported(function(t_7,t_5) {
+if(t_7) { cb(t_7); return; }
+if(Object.prototype.hasOwnProperty.call(t_5, "govcyLocalizeContent")) {
+var t_8 = t_5.govcyLocalizeContent;
+} else {
+cb(new Error("cannot import 'govcyLocalizeContent'")); return;
+}
+context.setVariable("govcyLocalizeContent", t_8);
+if(Object.prototype.hasOwnProperty.call(t_5, "govcyLangAttribute")) {
+var t_9 = t_5.govcyLangAttribute;
+} else {
+cb(new Error("cannot import 'govcyLangAttribute'")); return;
+}
+context.setVariable("govcyLangAttribute", t_9);
+env.getTemplate("elements/fieldset.njk", false, "elements/dateInput.njk", false, function(t_11,t_10) {
+if(t_11) { cb(t_11); return; }
+t_10.getExported(function(t_12,t_10) {
+if(t_12) { cb(t_12); return; }
+if(Object.prototype.hasOwnProperty.call(t_10, "fieldset")) {
+var t_13 = t_10.fieldset;
+} else {
+cb(new Error("cannot import 'fieldset'")); return;
+}
+context.setVariable("fieldset", t_13);
+env.getTemplate("elements/hint.njk", false, "elements/dateInput.njk", false, function(t_15,t_14) {
+if(t_15) { cb(t_15); return; }
+t_14.getExported(function(t_16,t_14) {
+if(t_16) { cb(t_16); return; }
+if(Object.prototype.hasOwnProperty.call(t_14, "hint")) {
+var t_17 = t_14.hint;
+} else {
+cb(new Error("cannot import 'hint'")); return;
+}
+context.setVariable("hint", t_17);
+env.getTemplate("elements/legend.njk", false, "elements/dateInput.njk", false, function(t_19,t_18) {
+if(t_19) { cb(t_19); return; }
+t_18.getExported(function(t_20,t_18) {
+if(t_20) { cb(t_20); return; }
+if(Object.prototype.hasOwnProperty.call(t_18, "legend")) {
+var t_21 = t_18.legend;
+} else {
+cb(new Error("cannot import 'legend'")); return;
+}
+context.setVariable("legend", t_21);
+env.getTemplate("elements/errorMessage.njk", false, "elements/dateInput.njk", false, function(t_23,t_22) {
+if(t_23) { cb(t_23); return; }
+t_22.getExported(function(t_24,t_22) {
+if(t_24) { cb(t_24); return; }
+if(Object.prototype.hasOwnProperty.call(t_22, "errorMessage")) {
+var t_25 = t_22.errorMessage;
+} else {
+cb(new Error("cannot import 'errorMessage'")); return;
+}
+context.setVariable("errorMessage", t_25);
+env.getTemplate("elements/formControl.njk", false, "elements/dateInput.njk", false, function(t_27,t_26) {
+if(t_27) { cb(t_27); return; }
+t_26.getExported(function(t_28,t_26) {
+if(t_28) { cb(t_28); return; }
+if(Object.prototype.hasOwnProperty.call(t_26, "formControl")) {
+var t_29 = t_26.formControl;
+} else {
+cb(new Error("cannot import 'formControl'")); return;
+}
+context.setVariable("formControl", t_29);
+var t_30;
+t_30 = (lineno = 32, colno = 43, runtime.callWrap(t_8, "govcyLocalizeContent", context, [{"en": "Day","el": "Μέρα"},runtime.memberLookup((l_params),"lang")]));
+frame.set("dayLabel", t_30, true);
+if(frame.topLevel) {
+context.setVariable("dayLabel", t_30);
+}
+if(frame.topLevel) {
+context.addExport("dayLabel", t_30);
+}
+var t_31;
+t_31 = (lineno = 33, colno = 45, runtime.callWrap(t_8, "govcyLocalizeContent", context, [{"en": "Month","el": "Μήνας"},runtime.memberLookup((l_params),"lang")]));
+frame.set("monthLabel", t_31, true);
+if(frame.topLevel) {
+context.setVariable("monthLabel", t_31);
+}
+if(frame.topLevel) {
+context.addExport("monthLabel", t_31);
+}
+var t_32;
+t_32 = (lineno = 34, colno = 44, runtime.callWrap(t_8, "govcyLocalizeContent", context, [{"en": "Year","el": "Χρόνος"},runtime.memberLookup((l_params),"lang")]));
+frame.set("yearLabel", t_32, true);
+if(frame.topLevel) {
+context.setVariable("yearLabel", t_32);
+}
+if(frame.topLevel) {
+context.addExport("yearLabel", t_32);
+}
+var t_33;
+t_33 = (lineno = 35, colno = 46, runtime.callWrap(t_8, "govcyLocalizeContent", context, [{"en": "January","el": "Ιανουάριος"},runtime.memberLookup((l_params),"lang")]));
+frame.set("monthValue1", t_33, true);
+if(frame.topLevel) {
+context.setVariable("monthValue1", t_33);
+}
+if(frame.topLevel) {
+context.addExport("monthValue1", t_33);
+}
+var t_34;
+t_34 = (lineno = 36, colno = 46, runtime.callWrap(t_8, "govcyLocalizeContent", context, [{"en": "February","el": "Φεβρουάριος"},runtime.memberLookup((l_params),"lang")]));
+frame.set("monthValue2", t_34, true);
+if(frame.topLevel) {
+context.setVariable("monthValue2", t_34);
+}
+if(frame.topLevel) {
+context.addExport("monthValue2", t_34);
+}
+var t_35;
+t_35 = (lineno = 37, colno = 46, runtime.callWrap(t_8, "govcyLocalizeContent", context, [{"en": "March","el": "Μάρτιος"},runtime.memberLookup((l_params),"lang")]));
+frame.set("monthValue3", t_35, true);
+if(frame.topLevel) {
+context.setVariable("monthValue3", t_35);
+}
+if(frame.topLevel) {
+context.addExport("monthValue3", t_35);
+}
+var t_36;
+t_36 = (lineno = 38, colno = 46, runtime.callWrap(t_8, "govcyLocalizeContent", context, [{"en": "April","el": "Απρίλιος"},runtime.memberLookup((l_params),"lang")]));
+frame.set("monthValue4", t_36, true);
+if(frame.topLevel) {
+context.setVariable("monthValue4", t_36);
+}
+if(frame.topLevel) {
+context.addExport("monthValue4", t_36);
+}
+var t_37;
+t_37 = (lineno = 39, colno = 46, runtime.callWrap(t_8, "govcyLocalizeContent", context, [{"en": "May","el": "Μάϊος"},runtime.memberLookup((l_params),"lang")]));
+frame.set("monthValue5", t_37, true);
+if(frame.topLevel) {
+context.setVariable("monthValue5", t_37);
+}
+if(frame.topLevel) {
+context.addExport("monthValue5", t_37);
+}
+var t_38;
+t_38 = (lineno = 40, colno = 46, runtime.callWrap(t_8, "govcyLocalizeContent", context, [{"en": "June","el": "Ιούνιος"},runtime.memberLookup((l_params),"lang")]));
+frame.set("monthValue6", t_38, true);
+if(frame.topLevel) {
+context.setVariable("monthValue6", t_38);
+}
+if(frame.topLevel) {
+context.addExport("monthValue6", t_38);
+}
+var t_39;
+t_39 = (lineno = 41, colno = 46, runtime.callWrap(t_8, "govcyLocalizeContent", context, [{"en": "July","el": "Ιούλιος"},runtime.memberLookup((l_params),"lang")]));
+frame.set("monthValue7", t_39, true);
+if(frame.topLevel) {
+context.setVariable("monthValue7", t_39);
+}
+if(frame.topLevel) {
+context.addExport("monthValue7", t_39);
+}
+var t_40;
+t_40 = (lineno = 42, colno = 46, runtime.callWrap(t_8, "govcyLocalizeContent", context, [{"en": "August","el": "Αύγουστος"},runtime.memberLookup((l_params),"lang")]));
+frame.set("monthValue8", t_40, true);
+if(frame.topLevel) {
+context.setVariable("monthValue8", t_40);
+}
+if(frame.topLevel) {
+context.addExport("monthValue8", t_40);
+}
+var t_41;
+t_41 = (lineno = 43, colno = 46, runtime.callWrap(t_8, "govcyLocalizeContent", context, [{"en": "September","el": "Σεπτέμβριος"},runtime.memberLookup((l_params),"lang")]));
+frame.set("monthValue9", t_41, true);
+if(frame.topLevel) {
+context.setVariable("monthValue9", t_41);
+}
+if(frame.topLevel) {
+context.addExport("monthValue9", t_41);
+}
+var t_42;
+t_42 = (lineno = 44, colno = 47, runtime.callWrap(t_8, "govcyLocalizeContent", context, [{"en": "October","el": "Οκτώβριος"},runtime.memberLookup((l_params),"lang")]));
+frame.set("monthValue10", t_42, true);
+if(frame.topLevel) {
+context.setVariable("monthValue10", t_42);
+}
+if(frame.topLevel) {
+context.addExport("monthValue10", t_42);
+}
+var t_43;
+t_43 = (lineno = 45, colno = 47, runtime.callWrap(t_8, "govcyLocalizeContent", context, [{"en": "November","el": "Νοέμβριος"},runtime.memberLookup((l_params),"lang")]));
+frame.set("monthValue11", t_43, true);
+if(frame.topLevel) {
+context.setVariable("monthValue11", t_43);
+}
+if(frame.topLevel) {
+context.addExport("monthValue11", t_43);
+}
+var t_44;
+t_44 = (lineno = 46, colno = 47, runtime.callWrap(t_8, "govcyLocalizeContent", context, [{"en": "December","el": "Δεκέμβριος"},runtime.memberLookup((l_params),"lang")]));
+frame.set("monthValue12", t_44, true);
+if(frame.topLevel) {
+context.setVariable("monthValue12", t_44);
+}
+if(frame.topLevel) {
+context.addExport("monthValue12", t_44);
+}
+if(runtime.memberLookup((l_params),"hint")) {
+var t_45;
+t_45 = env.getFilter("join").call(context, [runtime.memberLookup((l_params),"id"),"-hint"]);
+frame.set("hintId", t_45, true);
+if(frame.topLevel) {
+context.setVariable("hintId", t_45);
+}
+if(frame.topLevel) {
+context.addExport("hintId", t_45);
+}
+;
+}
+else {
+var t_46;
+t_46 = "";
+frame.set("hintId", t_46, true);
+if(frame.topLevel) {
+context.setVariable("hintId", t_46);
+}
+if(frame.topLevel) {
+context.addExport("hintId", t_46);
+}
+;
+}
+if(runtime.memberLookup((l_params),"error")) {
+var t_47;
+t_47 = env.getFilter("join").call(context, [runtime.memberLookup((l_params),"id"),"-error"]);
+frame.set("errorId", t_47, true);
+if(frame.topLevel) {
+context.setVariable("errorId", t_47);
+}
+if(frame.topLevel) {
+context.addExport("errorId", t_47);
+}
+;
+}
+else {
+var t_48;
+t_48 = "";
+frame.set("errorId", t_48, true);
+if(frame.topLevel) {
+context.setVariable("errorId", t_48);
+}
+if(frame.topLevel) {
+context.addExport("errorId", t_48);
+}
+;
+}
+if(runtime.memberLookup((l_params),"error") || runtime.memberLookup((l_params),"hint")) {
+var t_49;
+t_49 = runtime.contextOrFrameLookup(context, frame, "hintId") + "" + " " + "" + runtime.contextOrFrameLookup(context, frame, "errorId");
+frame.set("ariaDescribedBy", t_49, true);
+if(frame.topLevel) {
+context.setVariable("ariaDescribedBy", t_49);
+}
+if(frame.topLevel) {
+context.addExport("ariaDescribedBy", t_49);
+}
+;
+}
+else {
+var t_50;
+t_50 = "";
+frame.set("ariaDescribedBy", t_50, true);
+if(frame.topLevel) {
+context.setVariable("ariaDescribedBy", t_50);
+}
+if(frame.topLevel) {
+context.addExport("ariaDescribedBy", t_50);
+}
+;
+}
+t_2 += runtime.suppressValue((lineno = 65, colno = 20, runtime.callWrap(t_13, "fieldset", context, [{"ariaDescribedby": runtime.contextOrFrameLookup(context, frame, "ariaDescribedBy"),"classes": runtime.memberLookup((l_params),"classes"),"ariaRole": "group","lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_51 = runtime.makeMacro(
+[], 
+[], 
+function (kwargs) {
+var callerFrame = frame;
+frame = frame.push(true);
+kwargs = kwargs || {};
+if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
+frame.set("caller", kwargs.caller); }
+var t_52 = "";t_52 += "\n        ";
+t_52 += runtime.suppressValue((lineno = 66, colno = 22, runtime.callWrap(t_21, "legend", context, [{"legend": runtime.memberLookup((l_params),"legend"),"isPageHeading": runtime.contextOrFrameLookup(context, frame, "isPageHeading"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_53 = runtime.makeMacro(
+[], 
+[], 
+function (kwargs) {
+var callerFrame = frame;
+frame = frame.push(true);
+kwargs = kwargs || {};
+if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
+frame.set("caller", kwargs.caller); }
+var t_54 = "";;
+frame = frame.pop();
+return new runtime.SafeString(t_54);
+});
+return macro_t_53;})()})])), env.opts.autoescape);
+t_52 += "\n        ";
+t_52 += runtime.suppressValue((lineno = 67, colno = 27, runtime.callWrap(t_29, "formControl", context, [{"isError": (runtime.memberLookup((l_params),"hideFormControlError")?false:runtime.memberLookup((l_params),"error"))},runtime.makeKeywordArgs({"caller": (function (){var macro_t_55 = runtime.makeMacro(
+[], 
+[], 
+function (kwargs) {
+var callerFrame = frame;
+frame = frame.push(true);
+kwargs = kwargs || {};
+if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
+frame.set("caller", kwargs.caller); }
+var t_56 = "";t_56 += "\n            ";
+t_56 += runtime.suppressValue((lineno = 68, colno = 24, runtime.callWrap(t_17, "hint", context, [{"hint": runtime.memberLookup((l_params),"hint"),"id": runtime.contextOrFrameLookup(context, frame, "hintId"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_57 = runtime.makeMacro(
+[], 
+[], 
+function (kwargs) {
+var callerFrame = frame;
+frame = frame.push(true);
+kwargs = kwargs || {};
+if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
+frame.set("caller", kwargs.caller); }
+var t_58 = "";;
+frame = frame.pop();
+return new runtime.SafeString(t_58);
+});
+return macro_t_57;})()})])), env.opts.autoescape);
+t_56 += runtime.suppressValue((lineno = 70, colno = 32, runtime.callWrap(t_25, "errorMessage", context, [{"message": runtime.memberLookup((l_params),"error"),"id": runtime.contextOrFrameLookup(context, frame, "errorId"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_59 = runtime.makeMacro(
+[], 
+[], 
+function (kwargs) {
+var callerFrame = frame;
+frame = frame.push(true);
+kwargs = kwargs || {};
+if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
+frame.set("caller", kwargs.caller); }
+var t_60 = "";;
+frame = frame.pop();
+return new runtime.SafeString(t_60);
+});
+return macro_t_59;})()})])), env.opts.autoescape);
+t_56 += "<div class=\"govcy-d-flex govcy-flex-wrap\"";
+t_56 += runtime.suppressValue((lineno = 72, colno = 74, runtime.callWrap(t_9, "govcyLangAttribute", context, [runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_56 += ">    \n                <div class=\"govcy-d-block govcy-mr-3\">\n                    <label class=\"govcy-label govcy-mb-1 govcy-fw-normal govcy-mb-2\" for=\"";
+t_56 += runtime.suppressValue(runtime.memberLookup((l_params),"id"), env.opts.autoescape);
+t_56 += "_day\">";
+t_56 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "dayLabel"), env.opts.autoescape);
+t_56 += "</label>\n                    <input id=\"";
+t_56 += runtime.suppressValue(runtime.memberLookup((l_params),"id"), env.opts.autoescape);
+t_56 += "_day\" name=\"";
+t_56 += runtime.suppressValue(runtime.memberLookup((l_params),"name"), env.opts.autoescape);
+t_56 += "_day\" class=\"govcy-text-input govcy-text-input-char_3";
+if(runtime.memberLookup((l_params),"hasDayError")) {
+t_56 += " govcy-text-input-error";
+;
+}
+t_56 += "\" maxlength=\"2\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\"";
+if(runtime.memberLookup((l_params),"isBirthday")) {
+t_56 += " autocomplete=\"bday-day\"";
+;
+}
+t_56 += ">\n                </div>\n                <div class=\"govcy-d-block govcy-mr-3\">\n                    <label class=\"govcy-label govcy-mb-1 govcy-fw-normal govcy-mb-2\" for=\"";
+t_56 += runtime.suppressValue(runtime.memberLookup((l_params),"id"), env.opts.autoescape);
+t_56 += "_month\">";
+t_56 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "monthLabel"), env.opts.autoescape);
+t_56 += "</label>\n                    <select id=\"";
+t_56 += runtime.suppressValue(runtime.memberLookup((l_params),"id"), env.opts.autoescape);
+t_56 += "_month\" name=\"";
+t_56 += runtime.suppressValue(runtime.memberLookup((l_params),"name"), env.opts.autoescape);
+t_56 += "_month\" class=\"govcy-select";
+if(runtime.memberLookup((l_params),"hasMonthError")) {
+t_56 += " govcy-select-error";
+;
+}
+t_56 += "\"";
+if(runtime.memberLookup((l_params),"isBirthday")) {
+t_56 += " autocomplete=\"bday-month\"";
+;
+}
+t_56 += ">\n                        <option value=\"\" selected=\"\"></option>\n                        <option value=\"1\">";
+if(runtime.contextOrFrameLookup(context, frame, "variant") == "mobile") {
+t_56 += "1";
+;
+}
+else {
+t_56 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "monthValue1"), env.opts.autoescape);
+;
+}
+t_56 += "</option>\n                        <option value=\"2\">";
+if(runtime.contextOrFrameLookup(context, frame, "variant") == "mobile") {
+t_56 += "2";
+;
+}
+else {
+t_56 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "monthValue2"), env.opts.autoescape);
+;
+}
+t_56 += "</option>\n                        <option value=\"3\">";
+if(runtime.contextOrFrameLookup(context, frame, "variant") == "mobile") {
+t_56 += "3";
+;
+}
+else {
+t_56 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "monthValue3"), env.opts.autoescape);
+;
+}
+t_56 += "</option>\n                        <option value=\"4\">";
+if(runtime.contextOrFrameLookup(context, frame, "variant") == "mobile") {
+t_56 += "4";
+;
+}
+else {
+t_56 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "monthValue4"), env.opts.autoescape);
+;
+}
+t_56 += "</option>\n                        <option value=\"5\">";
+if(runtime.contextOrFrameLookup(context, frame, "variant") == "mobile") {
+t_56 += "5";
+;
+}
+else {
+t_56 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "monthValue5"), env.opts.autoescape);
+;
+}
+t_56 += "</option>\n                        <option value=\"6\">";
+if(runtime.contextOrFrameLookup(context, frame, "variant") == "mobile") {
+t_56 += "6";
+;
+}
+else {
+t_56 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "monthValue6"), env.opts.autoescape);
+;
+}
+t_56 += "</option>\n                        <option value=\"7\">";
+if(runtime.contextOrFrameLookup(context, frame, "variant") == "mobile") {
+t_56 += "7";
+;
+}
+else {
+t_56 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "monthValue7"), env.opts.autoescape);
+;
+}
+t_56 += "</option>\n                        <option value=\"8\">";
+if(runtime.contextOrFrameLookup(context, frame, "variant") == "mobile") {
+t_56 += "8";
+;
+}
+else {
+t_56 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "monthValue8"), env.opts.autoescape);
+;
+}
+t_56 += "</option>\n                        <option value=\"9\">";
+if(runtime.contextOrFrameLookup(context, frame, "variant") == "mobile") {
+t_56 += "9";
+;
+}
+else {
+t_56 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "monthValue9"), env.opts.autoescape);
+;
+}
+t_56 += "</option>\n                        <option value=\"10\">";
+if(runtime.contextOrFrameLookup(context, frame, "variant") == "mobile") {
+t_56 += "10";
+;
+}
+else {
+t_56 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "monthValue10"), env.opts.autoescape);
+;
+}
+t_56 += "</option>\n                        <option value=\"11\">";
+if(runtime.contextOrFrameLookup(context, frame, "variant") == "mobile") {
+t_56 += "11";
+;
+}
+else {
+t_56 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "monthValue11"), env.opts.autoescape);
+;
+}
+t_56 += "</option>\n                        <option value=\"12\">";
+if(runtime.contextOrFrameLookup(context, frame, "variant") == "mobile") {
+t_56 += "12";
+;
+}
+else {
+t_56 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "monthValue12"), env.opts.autoescape);
+;
+}
+t_56 += "</option>\n                    </select>\n                </div>\n                <div class=\"govcy-d-block govcy-mr-3\">\n                    <label class=\"govcy-label govcy-mb-1 govcy-fw-normal govcy-mb-2\" for=\"";
+t_56 += runtime.suppressValue(runtime.memberLookup((l_params),"id"), env.opts.autoescape);
+t_56 += "_year\">";
+t_56 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "yearLabel"), env.opts.autoescape);
+t_56 += "</label>\n                    <input id=\"";
+t_56 += runtime.suppressValue(runtime.memberLookup((l_params),"id"), env.opts.autoescape);
+t_56 += "_year\" name=\"";
+t_56 += runtime.suppressValue(runtime.memberLookup((l_params),"name"), env.opts.autoescape);
+t_56 += "_year\" class=\"govcy-text-input govcy-text-input-char_6";
+if(runtime.memberLookup((l_params),"hasYearError")) {
+t_56 += " govcy-text-input-error";
+;
+}
+t_56 += "\" maxlength=\"4\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\"";
+if(runtime.memberLookup((l_params),"isBirthday")) {
+t_56 += " autocomplete=\"bday-year\"";
+;
+}
+t_56 += ">\n                </div>\n            </div>\n        ";
+;
+frame = frame.pop();
+return new runtime.SafeString(t_56);
+});
+return macro_t_55;})()})])), env.opts.autoescape);
+t_52 += "\n    ";
+;
+frame = frame.pop();
+return new runtime.SafeString(t_52);
+});
+return macro_t_51;})()})])), env.opts.autoescape);
+})})})})})})})})})})})});
+}
+;
+frame = callerFrame;
+return new runtime.SafeString(t_2);
+});
+context.addExport("dateInput");
+context.setVariable("dateInput", macro_t_1);
+if(parentTemplate) {
+parentTemplate.rootRenderFunc(env, context, frame, runtime, cb);
+} else {
+cb(null, output);
+}
+;
+} catch (e) {
+  cb(runtime.handleError(e, lineno, colno));
+}
+}
+return {
+root: root
+};
+
+})();
+})();
+
 (function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["elements/datePicker.njk"] = (function() {
 function root(env, context, frame, runtime, cb) {
 var lineno = 0;
@@ -1306,15 +1881,21 @@ t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"classes"), env.opt
 ;
 }
 t_2 += "\"";
+if(runtime.memberLookup((l_params),"ariaRole")) {
+t_2 += " role=\"";
+t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"ariaRole"), env.opts.autoescape);
+t_2 += "\"";
+;
+}
 if(runtime.memberLookup((l_params),"ariaDescribedby")) {
 t_2 += " aria-describedby=\"";
 t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"ariaDescribedby"), env.opts.autoescape);
 t_2 += "\"";
 ;
 }
-t_2 += runtime.suppressValue((lineno = 15, colno = 248, runtime.callWrap(t_7, "govcyLangAttribute", context, [runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += runtime.suppressValue((lineno = 16, colno = 312, runtime.callWrap(t_7, "govcyLangAttribute", context, [runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
 t_2 += ">\n";
-t_2 += runtime.suppressValue((lineno = 16, colno = 9, runtime.callWrap(runtime.contextOrFrameLookup(context, frame, "caller"), "caller", context, [])), env.opts.autoescape);
+t_2 += runtime.suppressValue((lineno = 17, colno = 9, runtime.callWrap(runtime.contextOrFrameLookup(context, frame, "caller"), "caller", context, [])), env.opts.autoescape);
 if(runtime.memberLookup((l_params),"elements")) {
 env.getTemplate("govcyElement.njk", false, "elements/fieldset.njk", false, function(t_9,t_8) {
 if(t_9) { cb(t_9); return; }
@@ -1340,7 +1921,7 @@ frame.set("loop.revindex0", t_13 - t_12 - 1);
 frame.set("loop.first", t_12 === 0);
 frame.set("loop.last", t_12 === t_13 - 1);
 frame.set("loop.length", t_13);
-t_2 += runtime.suppressValue((lineno = 22, colno = 33, runtime.callWrap(t_11, "govcyElement", context, [runtime.memberLookup((t_15),"element"),runtime.memberLookup((t_15),"params"),runtime.makeKeywordArgs({"caller": (function (){var macro_t_16 = runtime.makeMacro(
+t_2 += runtime.suppressValue((lineno = 23, colno = 33, runtime.callWrap(t_11, "govcyElement", context, [runtime.memberLookup((t_15),"element"),runtime.memberLookup((t_15),"params"),runtime.makeKeywordArgs({"caller": (function (){var macro_t_16 = runtime.makeMacro(
 [], 
 [], 
 function (kwargs) {
@@ -4374,6 +4955,184 @@ root: root
 })();
 })();
 
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["elements/taskList.njk"] = (function() {
+function root(env, context, frame, runtime, cb) {
+var lineno = 0;
+var colno = 0;
+var output = "";
+try {
+var parentTemplate = null;
+output += "\n";
+var macro_t_1 = runtime.makeMacro(
+["params"], 
+[], 
+function (l_params, kwargs) {
+var callerFrame = frame;
+frame = new runtime.Frame();
+kwargs = kwargs || {};
+if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
+frame.set("caller", kwargs.caller); }
+frame.set("params", l_params);
+var t_2 = "";if(runtime.memberLookup((l_params),"items")) {
+env.getTemplate("utilities/govcyUtilities.njk", false, "elements/taskList.njk", false, function(t_4,t_3) {
+if(t_4) { cb(t_4); return; }
+t_3.getExported(function(t_5,t_3) {
+if(t_5) { cb(t_5); return; }
+if(Object.prototype.hasOwnProperty.call(t_3, "govcyLocalizeContent")) {
+var t_6 = t_3.govcyLocalizeContent;
+} else {
+cb(new Error("cannot import 'govcyLocalizeContent'")); return;
+}
+context.setVariable("govcyLocalizeContent", t_6);
+if(Object.prototype.hasOwnProperty.call(t_3, "govcyLangAttribute")) {
+var t_7 = t_3.govcyLangAttribute;
+} else {
+cb(new Error("cannot import 'govcyLangAttribute'")); return;
+}
+context.setVariable("govcyLangAttribute", t_7);
+if(runtime.memberLookup((l_params),"visuallyHiddenStatus")) {
+var t_8;
+t_8 = (function() {
+var output = "";
+output += runtime.suppressValue((lineno = 39, colno = 65, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((l_params),"visuallyHiddenStatus"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+;
+return output;
+})()
+;
+frame.set("visuallyHiddenStatus", t_8, true);
+if(frame.topLevel) {
+context.setVariable("visuallyHiddenStatus", t_8);
+}
+if(frame.topLevel) {
+context.addExport("visuallyHiddenStatus", t_8);
+}
+;
+}
+else {
+var t_9;
+t_9 = (function() {
+var output = "";
+output += runtime.suppressValue((lineno = 41, colno = 65, runtime.callWrap(t_6, "govcyLocalizeContent", context, [{"en": "with status ","el": "με κατάσταση "},runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+;
+return output;
+})()
+;
+frame.set("visuallyHiddenStatus", t_9, true);
+if(frame.topLevel) {
+context.setVariable("visuallyHiddenStatus", t_9);
+}
+if(frame.topLevel) {
+context.addExport("visuallyHiddenStatus", t_9);
+}
+;
+}
+t_2 += "\n    <table class=\"govcy-table";
+if(runtime.memberLookup((l_params),"classes")) {
+t_2 += " ";
+t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"classes"), env.opts.autoescape);
+;
+}
+t_2 += "\"";
+if(runtime.memberLookup((l_params),"id")) {
+t_2 += " id=\"";
+t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"id"), env.opts.autoescape);
+t_2 += "\"";
+;
+}
+t_2 += runtime.suppressValue((lineno = 43, colno = 156, runtime.callWrap(t_7, "govcyLangAttribute", context, [runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += ">\n        <tbody>";
+frame = frame.push();
+var t_12 = runtime.memberLookup((l_params),"items");
+if(t_12) {t_12 = runtime.fromIterator(t_12);
+var t_11 = t_12.length;
+for(var t_10=0; t_10 < t_12.length; t_10++) {
+var t_13 = t_12[t_10];
+frame.set("item", t_13);
+frame.set("loop.index", t_10 + 1);
+frame.set("loop.index0", t_10);
+frame.set("loop.revindex", t_11 - t_10);
+frame.set("loop.revindex0", t_11 - t_10 - 1);
+frame.set("loop.first", t_10 === 0);
+frame.set("loop.last", t_10 === t_11 - 1);
+frame.set("loop.length", t_11);
+if(t_13) {
+if(runtime.memberLookup((t_13),"task") && runtime.memberLookup((t_13),"status")) {
+t_2 += "\n                        <tr";
+if(runtime.memberLookup((l_params),"id")) {
+t_2 += " id=\"";
+t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"id"), env.opts.autoescape);
+t_2 += "-row-";
+t_2 += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "loop")),"index"), env.opts.autoescape);
+t_2 += "\"";
+;
+}
+t_2 += ">\n                            <td classes=\"govcy-valign-top\">\n                                ";
+if(runtime.memberLookup((runtime.memberLookup((t_13),"task")),"link")) {
+t_2 += "<a href=\"";
+t_2 += runtime.suppressValue(runtime.memberLookup((runtime.memberLookup((t_13),"task")),"link"), env.opts.autoescape);
+t_2 += "\">";
+;
+}
+t_2 += runtime.suppressValue((lineno = 50, colno = 119, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((runtime.memberLookup((t_13),"task")),"text"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += "<span class=\"govcy-visually-hidden\"> ";
+t_2 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "visuallyHiddenStatus"), env.opts.autoescape);
+t_2 += " ";
+t_2 += runtime.suppressValue((lineno = 50, colno = 238, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((runtime.memberLookup((t_13),"status")),"text"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += "</span>";
+if(runtime.memberLookup((runtime.memberLookup((t_13),"task")),"link")) {
+t_2 += "</a>";
+;
+}
+if(runtime.memberLookup((t_13),"description")) {
+t_2 += "<p>";
+t_2 += runtime.suppressValue((lineno = 51, colno = 85, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((t_13),"description"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += "</p>";
+;
+}
+t_2 += "\n                            </td>";
+if(runtime.memberLookup((t_13),"status")) {
+t_2 += "\n                            <td class=\"govcy-valign-top govcy-text-end\">\n                                <span class=\"govcy-tag ";
+t_2 += runtime.suppressValue(runtime.memberLookup((runtime.memberLookup((t_13),"status")),"classes"), env.opts.autoescape);
+t_2 += "\">";
+t_2 += runtime.suppressValue((lineno = 55, colno = 105, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((runtime.memberLookup((t_13),"status")),"text"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += "</span>\n                            </td>";
+;
+}
+t_2 += "\n                        </tr>";
+;
+}
+;
+}
+;
+}
+}
+frame = frame.pop();
+t_2 += "\n        </tbody>\n    </table>\n";
+})});
+}
+;
+frame = callerFrame;
+return new runtime.SafeString(t_2);
+});
+context.addExport("taskList");
+context.setVariable("taskList", macro_t_1);
+if(parentTemplate) {
+parentTemplate.rootRenderFunc(env, context, frame, runtime, cb);
+} else {
+cb(null, output);
+}
+;
+} catch (e) {
+  cb(runtime.handleError(e, lineno, colno));
+}
+}
+return {
+root: root
+};
+
+})();
+})();
+
 (function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["elements/textArea.njk"] = (function() {
 function root(env, context, frame, runtime, cb) {
 var lineno = 0;
@@ -5358,7 +6117,7 @@ var output = "";
 try {
 var parentTemplate = null;
 var t_1;
-t_1 = ["label","legend","hint","button","errorMessage","select","textElement","htmlElement","textInput","radios","checkboxes","fileInput","fileView","backLink","tag","table","summaryList","textArea","markdown","panel","datePicker"];
+t_1 = ["label","legend","hint","button","errorMessage","select","textElement","htmlElement","textInput","radios","checkboxes","fileInput","fileView","backLink","tag","table","summaryList","textArea","markdown","panel","datePicker","dateInput","taskList"];
 frame.set("macroSimpleBlocks", t_1, true);
 if(frame.topLevel) {
 context.setVariable("macroSimpleBlocks", t_1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gov-cy/govcy-frontend-renderer",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Render html for design elements of the Unified design system using njk or json template.",
   "author": "DMRID - DSF Team",
   "license": "MIT",

package/src/njk/elements/dateInput.njk

@@ -0,0 +1,104 @@
+
+{# dateInput 
+ @param {object} legend The label text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`  
+ @param {string} id The id of the dateInput parts. For example `id_day`, `id_month` and `id_year`. Will escape text. 
+ @param {string} name The name of the dateInput parts. For example `name_day`, `name_month` and `name_year` . Will escape text. 
+ @param {object} hint The hint text. Optional. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`  
+ @param {boolean} isPageHeading Is the label also the page heading? Optional, default is false. Can be true,false 
+ @param {string} classes Additional classes to add to the outer `govcy-form-control` container. Optional 
+ @param {object} error If not empty there is an error message and displays the error variant. Optional, default is ''. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`
+ @param {boolean} hideFormControlError If true, hides the form control error (red line on the left). Mostly used in conditional radio elements. Optional    
+ @param {string} variant The variant. Can be 'desktop','mobile', default is mobile. Optional.
+ @param {boolean} isBirthday Is it a birthday?. Optional.
+ @param {boolean} hasDayError Does the day have an error?. Optional.
+ @param {boolean} hasMonthError Does the month have an error?. Optional.
+ @param {boolean} hasYearError Does the year have an error?. Optional.
+ @param {string} lang The language used. Can be 'en','el'. Optional.
+ @returns govcy dateInput html 
+#}
+{% macro dateInput(params) -%}
+{#- set default values -#}
+{%- set isPageHeading = params.isPageHeading | default(false) -%}
+{%- set variant = params.variant | default("mobile") -%}
+{#- legend, id and name are mandatory -#}
+{%- if params.legend and params.id and params.name -%}
+    {#- Import localizer from utilities -#}
+    {%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+    {%- from "./fieldset.njk" import fieldset -%}
+    {%- from "./hint.njk" import hint -%}
+    {%- from "./legend.njk" import legend -%}
+    {%- from "./errorMessage.njk" import errorMessage -%}
+    {%- from "./formControl.njk" import formControl -%}
+    {#- set localizations -#}
+    {%- set dayLabel = govcyLocalizeContent({en:'Day',el:'Μέρα'} , params.lang) -%}
+    {%- set monthLabel = govcyLocalizeContent({en:'Month',el:'Μήνας'} , params.lang) -%}
+    {%- set yearLabel = govcyLocalizeContent({en:'Year',el:'Χρόνος'} , params.lang) -%}
+    {%- set monthValue1 = govcyLocalizeContent({en:'January',el:'Ιανουάριος'} , params.lang) -%}
+    {%- set monthValue2 = govcyLocalizeContent({en:'February',el:'Φεβρουάριος'} , params.lang) -%}
+    {%- set monthValue3 = govcyLocalizeContent({en:'March',el:'Μάρτιος'} , params.lang) -%}
+    {%- set monthValue4 = govcyLocalizeContent({en:'April',el:'Απρίλιος'} , params.lang) -%}
+    {%- set monthValue5 = govcyLocalizeContent({en:'May',el:'Μάϊος'} , params.lang) -%}
+    {%- set monthValue6 = govcyLocalizeContent({en:'June',el:'Ιούνιος'} , params.lang) -%}
+    {%- set monthValue7 = govcyLocalizeContent({en:'July',el:'Ιούλιος'} , params.lang) -%}
+    {%- set monthValue8 = govcyLocalizeContent({en:'August',el:'Αύγουστος'} , params.lang) -%}
+    {%- set monthValue9 = govcyLocalizeContent({en:'September',el:'Σεπτέμβριος'} , params.lang) -%}
+    {%- set monthValue10 = govcyLocalizeContent({en:'October',el:'Οκτώβριος'} , params.lang) -%}
+    {%- set monthValue11 = govcyLocalizeContent({en:'November',el:'Νοέμβριος'} , params.lang) -%}
+    {%- set monthValue12 = govcyLocalizeContent({en:'December',el:'Δεκέμβριος'} , params.lang) -%}
+    {#- set hint id -#}
+    {%- if params.hint -%}
+        {%- set hintId = [params.id, "-hint"] | join -%}
+    {%- else -%}
+        {%- set hintId = '' -%}
+    {%- endif -%}
+    {#- set error id -#}
+    {%- if params.error -%}
+        {%- set errorId = [params.id, "-error"] | join -%}
+    {%- else -%}
+        {%- set errorId = '' -%}
+    {%- endif -%}
+    {# set aria described by #}
+    {%- if params.error or params.hint -%}
+        {% set ariaDescribedBy = hintId ~ ' ' ~ errorId %}
+    {%- else -%}
+        {% set ariaDescribedBy = '' %}
+    {%- endif -%}
+    {% call fieldset({ariaDescribedby:ariaDescribedBy,classes:params.classes, ariaRole:"group",lang:params.lang}) %}
+        {% call legend({legend:params.legend, isPageHeading:isPageHeading,lang:params.lang}) %}{% endcall %}
+        {% call formControl({isError: false if params.hideFormControlError else params.error}) %}
+            {% call hint({hint:params.hint, id:hintId,lang:params.lang}) %}{% endcall %}
+            {#- render error message -#}
+            {% call errorMessage({message:params.error,id:errorId,lang:params.lang}) %}{% endcall %}
+            {#- render date inputs -#}
+            <div class="govcy-d-flex govcy-flex-wrap"{{ govcyLangAttribute(params.lang) }}>    
+                <div class="govcy-d-block govcy-mr-3">
+                    <label class="govcy-label govcy-mb-1 govcy-fw-normal govcy-mb-2" for="{{ params.id }}_day">{{ dayLabel }}</label>
+                    <input id="{{ params.id }}_day" name="{{ params.name }}_day" class="govcy-text-input govcy-text-input-char_3{% if params.hasDayError %} govcy-text-input-error{% endif %}" maxlength="2" type="text" pattern="[0-9]*" inputmode="numeric"{% if params.isBirthday %} autocomplete="bday-day"{% endif %}>
+                </div>
+                <div class="govcy-d-block govcy-mr-3">
+                    <label class="govcy-label govcy-mb-1 govcy-fw-normal govcy-mb-2" for="{{ params.id }}_month">{{ monthLabel }}</label>
+                    <select id="{{ params.id }}_month" name="{{ params.name }}_month" class="govcy-select{% if params.hasMonthError %} govcy-select-error{% endif %}"{% if params.isBirthday %} autocomplete="bday-month"{% endif %}>
+                        <option value="" selected=""></option>
+                        <option value="1">{% if variant=="mobile" %}1{% else %}{{ monthValue1 }}{% endif %}</option>
+                        <option value="2">{% if variant=="mobile" %}2{% else %}{{ monthValue2 }}{% endif %}</option>
+                        <option value="3">{% if variant=="mobile" %}3{% else %}{{ monthValue3 }}{% endif %}</option>
+                        <option value="4">{% if variant=="mobile" %}4{% else %}{{ monthValue4 }}{% endif %}</option>
+                        <option value="5">{% if variant=="mobile" %}5{% else %}{{ monthValue5 }}{% endif %}</option>
+                        <option value="6">{% if variant=="mobile" %}6{% else %}{{ monthValue6 }}{% endif %}</option>
+                        <option value="7">{% if variant=="mobile" %}7{% else %}{{ monthValue7 }}{% endif %}</option>
+                        <option value="8">{% if variant=="mobile" %}8{% else %}{{ monthValue8 }}{% endif %}</option>
+                        <option value="9">{% if variant=="mobile" %}9{% else %}{{ monthValue9 }}{% endif %}</option>
+                        <option value="10">{% if variant=="mobile" %}10{% else %}{{ monthValue10 }}{% endif %}</option>
+                        <option value="11">{% if variant=="mobile" %}11{% else %}{{ monthValue11 }}{% endif %}</option>
+                        <option value="12">{% if variant=="mobile" %}12{% else %}{{ monthValue12 }}{% endif %}</option>
+                    </select>
+                </div>
+                <div class="govcy-d-block govcy-mr-3">
+                    <label class="govcy-label govcy-mb-1 govcy-fw-normal govcy-mb-2" for="{{ params.id }}_year">{{ yearLabel }}</label>
+                    <input id="{{ params.id }}_year" name="{{ params.name }}_year" class="govcy-text-input govcy-text-input-char_6{% if params.hasYearError %} govcy-text-input-error{% endif %}" maxlength="4" type="text" pattern="[0-9]*" inputmode="numeric"{% if params.isBirthday %} autocomplete="bday-year"{% endif %}>
+                </div>
+            </div>
+        {% endcall %}
+    {% endcall %}
+{%- endif -%}
+{%- endmacro %}

package/src/njk/elements/fieldset.njk

@@ -2,6 +2,7 @@
  @param {string} id The hint id. Will escape text. Optional
  @param {string} classes Additional classes to add to the outer div. Optional 
  @param {string} ariaDescribedby Ids of aria-describedby. To be used for hints and errors. Optional 
+ @param {string} ariaRole The ARIA role attribute. Optional.
  @param {string} lang The language used. Can be 'en','el'. Optional.
  @param {array} elements If defined will be rendered elements inside the form. 
     i.e. `[
@@ -13,7 +14,7 @@
 {% macro fieldset(params) -%}
 {#- Import localizer from utilities -#}
 {%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
-<fieldset {% if params.id %}id="{{ params.id }}" {% endif %}class="govcy-fieldset{% if params.classes %} {{ params.classes }}{% endif %}"{% if params.ariaDescribedby %} aria-describedby="{{ params.ariaDescribedby }}"{% endif %}{{ govcyLangAttribute(params.lang) }}>
+<fieldset {% if params.id %}id="{{ params.id }}" {% endif %}class="govcy-fieldset{% if params.classes %} {{ params.classes }}{% endif %}"{% if params.ariaRole %} role="{{ params.ariaRole }}"{% endif %}{% if params.ariaDescribedby %} aria-describedby="{{ params.ariaDescribedby }}"{% endif %}{{ govcyLangAttribute(params.lang) }}>
 {{ caller() }}
     {#- if it has elements to be called -#}
     {%- if params.elements -%}

package/src/njk/elements/taskList.njk

@@ -0,0 +1,66 @@
+{# taskList 
+ @param {string} id The id on the task list table. Will escape text. 
+ @param {string} classes Additional classes to add to the table. Optional 
+ @param {object} visuallyHiddenStatus The visuallyHiddenText text indicating status . Optional. Will escape text.  Default value is `{en:"with status ",el:"με κατάσταση "}`  
+ @param {string} lang The language used. Can be 'en','el'. Optional.
+ @param {array} items The array of items to turn onto taskList 
+    i.e. `[
+            {
+                "id": "task1",
+                "task": {
+                    "text": {
+                        "el": "Εργασία ένα",
+                        "en": "Task one"
+                    },
+                    "link": "#task1"
+                }, 
+                "description": {
+                    "el": "Επεξήγηση",
+                    "en": "Some explanation text"
+                }
+                ,
+                "status": {
+                    "text": {
+                        "el": "ΟΛΟΚΛΗΡΩΘΗΚΕ",
+                        "en": "COMPLETED"
+                    },
+                    "classes": ""
+                }
+            }
+        ]`
+ @returns govcy taskList html 
+#}
+{% macro taskList(params) -%}
+{#- legend, id and name are mandatory -#}
+{%- if params.items -%}
+    {#- Import localizer from utilities -#}
+    {%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+    {#- set localizations -#}
+    {%- if params.visuallyHiddenStatus -%}
+        {%- set visuallyHiddenStatus -%} {{- govcyLocalizeContent(params.visuallyHiddenStatus, params.lang) -}}{%- endset -%}
+    {%- else -%}
+        {%- set visuallyHiddenStatus -%} {{- govcyLocalizeContent({en:"with status ",el:"με κατάσταση "} , params.lang) -}}{%- endset -%}
+    {%- endif %}
+    <table class="govcy-table{% if params.classes %} {{ params.classes }}{% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %}{{ govcyLangAttribute(params.lang) }}>
+        <tbody>
+            {%- for item in params.items -%}
+                {%- if item -%}
+                    {%- if item.task and item.status %}
+                        <tr{% if params.id %} id="{{ params.id }}-row-{{ loop.index }}"{% endif %}>
+                            <td classes="govcy-valign-top">
+                                {%if item.task.link %}<a href="{{ item.task.link }}">{% endif %}{{ govcyLocalizeContent(item.task.text, params.lang) }}<span class="govcy-visually-hidden"> {{ visuallyHiddenStatus }} {{ govcyLocalizeContent(item.status.text, params.lang) }}</span>{%if item.task.link %}</a>{% endif %}
+                                {%- if item.description -%}<p>{{ govcyLocalizeContent(item.description, params.lang) }}</p>{%- endif %}
+                            </td>
+                            {%- if item.status %}
+                            <td class="govcy-valign-top govcy-text-end">
+                                <span class="govcy-tag {{ item.status.classes }}">{{ govcyLocalizeContent(item.status.text, params.lang) }}</span>
+                            </td>
+                            {%- endif %}
+                        </tr>
+                    {%- endif -%}
+                {%- endif -%}
+            {%- endfor %}
+        </tbody>
+    </table>
+{% endif -%}
+{%- endmacro %}

package/src/njk/govcyElement.njk

@@ -25,7 +25,7 @@ To use:
 {%- set macroSimpleBlocks = ['label', 'legend', 'hint', 'button', 
     'errorMessage','select','textElement','htmlElement','textInput','radios','checkboxes',
     'fileInput','fileView','backLink','tag','table', 'summaryList', 'textArea','markdown', 
-    'panel', 'datePicker'] -%}
+    'panel', 'datePicker','dateInput', 'taskList'] -%}
 {%- set macroCallerBlocks = ['formControl','form','fieldset'] -%}
 {%- macro govcyElement(component, params) -%}
     {#- Simple blocks -#}