@gov-cy/govcy-frontend-renderer 1.8.1 → 1.10.0

package/dist/govcyCompiledTemplates.browser.js

@@ -1749,6 +1749,92 @@ root: root
 })();
 })();
 
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["elements/details.njk"] = (function() {
+function root(env, context, frame, runtime, cb) {
+var lineno = 0;
+var colno = 0;
+var output = "";
+try {
+var parentTemplate = null;
+output += "\r\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 = "";env.getTemplate("utilities/govcyUtilities.njk", false, "elements/details.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(Object.prototype.hasOwnProperty.call(t_3, "govcyElementsFromArray")) {
+var t_8 = t_3.govcyElementsFromArray;
+} else {
+cb(new Error("cannot import 'govcyElementsFromArray'")); return;
+}
+context.setVariable("govcyElementsFromArray", t_8);
+if(runtime.memberLookup((l_params),"summary") && runtime.memberLookup((l_params),"elements")) {
+t_2 += "\r\n<details ";
+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 += "class=\"govcy-details";
+if(runtime.memberLookup((l_params),"classes")) {
+t_2 += " ";
+t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"classes"), env.opts.autoescape);
+;
+}
+t_2 += "\"";
+t_2 += runtime.suppressValue((lineno = 17, colno = 156, runtime.callWrap(t_7, "govcyLangAttribute", context, [runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += ">\r\n    <summary class=\"govcy-details__summary\">\r\n        <span class=\"govcy-details__summary-text\">";
+t_2 += runtime.suppressValue((lineno = 19, colno = 73, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((l_params),"summary"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += "</span>\r\n    </summary>\r\n    <div class=\"govcy-details__text\">\r\n        ";
+t_2 += runtime.suppressValue((lineno = 22, colno = 33, runtime.callWrap(t_8, "govcyElementsFromArray", context, [runtime.memberLookup((l_params),"elements"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += "\r\n    </div>\r\n</details>";
+;
+}
+})});
+frame = callerFrame;
+return new runtime.SafeString(t_2);
+});
+context.addExport("details");
+context.setVariable("details", 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/errorMessage.njk"] = (function() {
 function root(env, context, frame, runtime, cb) {
 var lineno = 0;
@@ -4320,6 +4406,290 @@ root: root
 })();
 })();
 
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["elements/stepByStepStatic.njk"] = (function() {
+function root(env, context, frame, runtime, cb) {
+var lineno = 0;
+var colno = 0;
+var output = "";
+try {
+var parentTemplate = null;
+output += "\r\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 = "";env.getTemplate("utilities/govcyUtilities.njk", false, "elements/stepByStepStatic.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(Object.prototype.hasOwnProperty.call(t_3, "govcyElementsFromArray")) {
+var t_8 = t_3.govcyElementsFromArray;
+} else {
+cb(new Error("cannot import 'govcyElementsFromArray'")); return;
+}
+context.setVariable("govcyElementsFromArray", t_8);
+var t_9;
+t_9 = (function() {
+var output = "";
+output += runtime.suppressValue((lineno = 40, colno = 43, runtime.callWrap(t_6, "govcyLocalizeContent", context, [{"en": "Or","el": "Ή"},runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+;
+return output;
+})()
+;
+frame.set("orText", t_9, true);
+if(frame.topLevel) {
+context.setVariable("orText", t_9);
+}
+if(frame.topLevel) {
+context.addExport("orText", t_9);
+}
+var t_10;
+t_10 = (function() {
+var output = "";
+output += runtime.suppressValue((lineno = 41, colno = 44, runtime.callWrap(t_6, "govcyLocalizeContent", context, [{"en": "And","el": "Και"},runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+;
+return output;
+})()
+;
+frame.set("andText", t_10, true);
+if(frame.topLevel) {
+context.setVariable("andText", t_10);
+}
+if(frame.topLevel) {
+context.addExport("andText", t_10);
+}
+var t_11;
+t_11 = (function() {
+var output = "";
+output += runtime.suppressValue((lineno = 42, colno = 46, runtime.callWrap(t_6, "govcyLocalizeContent", context, [{"en": "Step","el": "Βήμα"},runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+;
+return output;
+})()
+;
+frame.set("stepText", t_11, true);
+if(frame.topLevel) {
+context.setVariable("stepText", t_11);
+}
+if(frame.topLevel) {
+context.addExport("stepText", t_11);
+}
+if(runtime.memberLookup((l_params),"items")) {
+t_2 += "\r\n<div class=\"govcy-accordion govcy-accordion-steps govcy-mb-0";
+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 = 45, colno = 187, runtime.callWrap(t_7, "govcyLangAttribute", context, [runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += ">";
+frame = frame.push();
+var t_14 = runtime.memberLookup((l_params),"items");
+if(t_14) {t_14 = runtime.fromIterator(t_14);
+var t_13 = t_14.length;
+for(var t_12=0; t_12 < t_14.length; t_12++) {
+var t_15 = t_14[t_12];
+frame.set("item", t_15);
+frame.set("loop.index", t_12 + 1);
+frame.set("loop.index0", t_12);
+frame.set("loop.revindex", t_13 - t_12);
+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);
+if(runtime.memberLookup((t_15),"type") == "or") {
+var t_16;
+t_16 = (function() {
+var output = "";
+output += "<div class=\"govcy-accordion-step govcy-accordion-step-conditional\">";
+output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "orText"), env.opts.autoescape);
+output += "</div>";
+;
+return output;
+})()
+;
+frame.set("itemStep", t_16, true);
+if(frame.topLevel) {
+context.setVariable("itemStep", t_16);
+}
+if(frame.topLevel) {
+context.addExport("itemStep", t_16);
+}
+var t_17;
+t_17 = (function() {
+var output = "";
+output += "<span class=\"govcy-visually-hidden\">";
+output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "orText"), env.opts.autoescape);
+output += ", </span>";
+;
+return output;
+})()
+;
+frame.set("itemStepVisallyHidden", t_17, true);
+if(frame.topLevel) {
+context.setVariable("itemStepVisallyHidden", t_17);
+}
+if(frame.topLevel) {
+context.addExport("itemStepVisallyHidden", t_17);
+}
+;
+}
+else {
+if(runtime.memberLookup((t_15),"type") == "and") {
+var t_18;
+t_18 = (function() {
+var output = "";
+output += "<div class=\"govcy-accordion-step govcy-accordion-step-conditional\">";
+output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "andText"), env.opts.autoescape);
+output += "</div>";
+;
+return output;
+})()
+;
+frame.set("itemStep", t_18, true);
+if(frame.topLevel) {
+context.setVariable("itemStep", t_18);
+}
+if(frame.topLevel) {
+context.addExport("itemStep", t_18);
+}
+var t_19;
+t_19 = (function() {
+var output = "";
+output += "<span class=\"govcy-visually-hidden\">";
+output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "andText"), env.opts.autoescape);
+output += ", </span>";
+;
+return output;
+})()
+;
+frame.set("itemStepVisallyHidden", t_19, true);
+if(frame.topLevel) {
+context.setVariable("itemStepVisallyHidden", t_19);
+}
+if(frame.topLevel) {
+context.addExport("itemStepVisallyHidden", t_19);
+}
+;
+}
+else {
+var t_20;
+t_20 = (function() {
+var output = "";
+output += "<div class=\"govcy-accordion-step\">";
+output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "loop")),"index"), env.opts.autoescape);
+output += "</div>";
+;
+return output;
+})()
+;
+frame.set("itemStep", t_20, true);
+if(frame.topLevel) {
+context.setVariable("itemStep", t_20);
+}
+if(frame.topLevel) {
+context.addExport("itemStep", t_20);
+}
+var t_21;
+t_21 = (function() {
+var output = "";
+output += "<span class=\"govcy-visually-hidden\">";
+output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "stepText"), env.opts.autoescape);
+output += " ";
+output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "loop")),"index"), env.opts.autoescape);
+output += ", </span>";
+;
+return output;
+})()
+;
+frame.set("itemStepVisallyHidden", t_21, true);
+if(frame.topLevel) {
+context.setVariable("itemStepVisallyHidden", t_21);
+}
+if(frame.topLevel) {
+context.addExport("itemStepVisallyHidden", t_21);
+}
+;
+}
+;
+}
+t_2 += "\r\n        <div class=\"govcy-accordion-item";
+if(runtime.memberLookup((t_15),"classes")) {
+t_2 += " ";
+t_2 += runtime.suppressValue(runtime.memberLookup((t_15),"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 += "-item-";
+t_2 += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "loop")),"index"), env.opts.autoescape);
+t_2 += "\"";
+;
+}
+t_2 += ">\r\n            ";
+t_2 += runtime.suppressValue(env.getFilter("safe").call(context, runtime.contextOrFrameLookup(context, frame, "itemStep")), env.opts.autoescape);
+t_2 += "\r\n            <h3 class=\"govcy-pt-4\">\r\n                ";
+t_2 += runtime.suppressValue(env.getFilter("safe").call(context, runtime.contextOrFrameLookup(context, frame, "itemStepVisallyHidden")), env.opts.autoescape);
+t_2 += runtime.suppressValue((lineno = 61, colno = 75, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((t_15),"heading"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += "</h3> \r\n            <div>\r\n                ";
+t_2 += runtime.suppressValue((lineno = 64, colno = 41, runtime.callWrap(t_8, "govcyElementsFromArray", context, [runtime.memberLookup((t_15),"elements"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
+t_2 += "\r\n            </div>\r\n        </div>";
+;
+}
+}
+frame = frame.pop();
+t_2 += "\r\n</div>";
+;
+}
+})});
+frame = callerFrame;
+return new runtime.SafeString(t_2);
+});
+context.addExport("stepByStepStatic");
+context.setVariable("stepByStepStatic", 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/summaryList.njk"] = (function() {
 function root(env, context, frame, runtime, cb) {
 var lineno = 0;
@@ -6288,7 +6658,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","dateInput","taskList","errorSummary"];
+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","errorSummary","details","stepByStepStatic"];
 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.8.1",
+  "version": "1.10.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/details.njk

@@ -0,0 +1,27 @@
+{# details 
+ @param {string} lang The language used. Can be 'en','el'. Optional. 
+ @param {string} id The id of the summary. Will escape text. Optional 
+ @param {object} summary The text displayed inside the `<summary>`. Will escape text. Example `{"en":"Content","el":"Περιεχομένο"}`.
+ @param {array} elements if defined, govcy-elements to be rendered inside the panel. 
+    i.e. `[
+            {element:"textElement",params:{text:{en:"Content",el:"Περιεχομένο"}},
+            {element:"button",params:{text:{en:"Button 1",el:"Κουμπί 1"},lang:"en",id:"govcy-test-23b"} }
+        ]`
+ @param {string} classes Additional classes to add to the outer `<details>`. Optional 
+ @returns govcy details html 
+#}
+{% macro details(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute, govcyElementsFromArray -%}
+{#- summary and elements are mandatory -#}
+{%- if params.summary and params.elements %}
+<details {% if params.id %}id="{{ params.id }}" {% endif %}class="govcy-details{% if params.classes %} {{ params.classes }}{% endif %}"{{ govcyLangAttribute(params.lang) }}>
+    <summary class="govcy-details__summary">
+        <span class="govcy-details__summary-text">{{ govcyLocalizeContent(params.summary, params.lang) }}</span>
+    </summary>
+    <div class="govcy-details__text">
+        {{ govcyElementsFromArray(params.elements, params.lang) }}
+    </div>
+</details>
+{%- endif %}
+{%- endmacro %}

package/src/njk/elements/stepByStepStatic.njk

@@ -0,0 +1,71 @@
+{# stepByStepStatic
+ @param {string} lang The language used. Can be 'en','el'. Optional. 
+ @param {string} id The id of the step by step. Will escape text. Optional 
+ @param {array} items The array of items to turn into steps 
+    @param {string} item.heading The heading of the item.  Will escape text. Example `{"en":"Content","el":"Περιεχομένο"}`.
+    @param {array} item.elements, govcy-elements to be rendered inside the item's body. 
+    @param {string} item.type The item type. Can be ''(which is incremental steps) ,'or','and'. Optional, default is ''  
+    @param {string} item.classes Additional classes to add to the item. Optional 
+    i.e. ` [
+            {
+                "heading":{"en":"Step 1","el":"Βήμα 1"},
+                "elements":[
+                    {"element":"textElement",
+                        "params":{
+                            "text":{"en":"Content","el":"Περιεχομένο"} 
+                        } 
+                    },
+                    {"element":"markdown",
+                        "params":{
+                            "text":{"en":"- item1\n- item2","el":"- item1 el\n- item2 el"}
+                        } 
+                    }
+                ]
+            },
+            {
+                "heading":{"en":"Step 2","el":"Βήμα 2"},
+                "elements":[
+                    {"element":"textElement","params":{"text":{"en":"Content 2","el":"Περιεχομένο 2"} } }
+                ],
+                "type":"or",
+                "classes":"govcy-test-class"
+            }
+        ]`
+ @param {string} classes Additional classes to add to the outer `<details>`. Optional 
+ @returns govcy stepByStepStatic html 
+#}
+{% macro stepByStepStatic(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute, govcyElementsFromArray -%}
+{#- set default values -#}
+{%- set orText -%} {{- govcyLocalizeContent({en:'Or',el:'Ή'}, params.lang) -}}{%- endset -%}
+{%- set andText -%} {{- govcyLocalizeContent({en:'And',el:'Και'}, params.lang) -}}{%- endset -%}
+{%- set stepText  -%} {{- govcyLocalizeContent({en:'Step',el:'Βήμα'}, params.lang) -}}{%- endset -%}
+{#- items are mandatory -#}
+{%- if params.items %}
+<div class="govcy-accordion govcy-accordion-steps govcy-mb-0{% if params.classes %} {{ params.classes }}{% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %}{{ govcyLangAttribute(params.lang) }}>
+{#- for each item render checkbox item -#}
+    {%- for item in params.items %}
+        {%- if item.type == 'or' -%}
+            {%- set itemStep -%}<div class="govcy-accordion-step govcy-accordion-step-conditional">{{ orText }}</div>{%- endset -%}
+            {%- set itemStepVisallyHidden -%}<span class="govcy-visually-hidden">{{ orText }}, </span>{%- endset -%}
+        {%- elif item.type == 'and' -%}
+            {%- set itemStep -%}<div class="govcy-accordion-step govcy-accordion-step-conditional">{{ andText }}</div>{%- endset -%}
+            {%- set itemStepVisallyHidden -%}<span class="govcy-visually-hidden">{{ andText }}, </span>{%- endset -%}
+        {%- else -%}
+            {%- set itemStep -%}<div class="govcy-accordion-step">{{ loop.index }}</div>{%- endset -%}
+            {%- set itemStepVisallyHidden -%}<span class="govcy-visually-hidden">{{ stepText }} {{ loop.index}}, </span>{%- endset -%}
+        {%- endif %}
+        <div class="govcy-accordion-item{% if item.classes %} {{ item.classes }}{% endif %}"{% if params.id %} id="{{ params.id }}-item-{{ loop.index }}"{% endif %}>
+            {{ itemStep | safe }}
+            <h3 class="govcy-pt-4">
+                {{ itemStepVisallyHidden | safe }} {{- govcyLocalizeContent(item.heading, params.lang) -}}
+            </h3> 
+            <div>
+                {{ govcyElementsFromArray(item.elements, params.lang) }}
+            </div>
+        </div>
+    {%- endfor %}
+</div>
+{%- 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','dateInput', 'taskList', 'errorSummary'] -%}
+    'panel', 'datePicker','dateInput', 'taskList', 'errorSummary', 'details', 'stepByStepStatic'] -%}
 {%- set macroCallerBlocks = ['formControl','form','fieldset'] -%}
 {%- macro govcyElement(component, params) -%}
     {#- Simple blocks -#}