@gov-cy/govcy-frontend-renderer 1.6.0 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -434,6 +434,100 @@ All content in design elements are defined with an object defining the available
|
|
|
434
434
|
|
|
435
435
|
If the `params.lang` is defined in the design element, the package will also render element with a `lang` attribute.
|
|
436
436
|
|
|
437
|
+
## Browser usage (client-side)
|
|
438
|
+
> [!WARNING]
|
|
439
|
+
> Browser classes are not thoroughly tested, so use with care.
|
|
440
|
+
|
|
441
|
+
The package offers compiled templates in `govcyCompiledTemplates.browser.js` and a helper class `govcyFrontendRenderer.browser.js` to render the same components on the browser. Unlike the note.js methods, you will need to provide the HTML shell.
|
|
442
|
+
|
|
443
|
+
The easiest way to use these is to include the libraries via CDN in your HTML and use the `renderFromJSON` and `updateDOMAndInitialize` functions.
|
|
444
|
+
|
|
445
|
+
Here's an example:
|
|
446
|
+
|
|
447
|
+
```html
|
|
448
|
+
|
|
449
|
+
<!DOCTYPE html>
|
|
450
|
+
<html lang="en">
|
|
451
|
+
|
|
452
|
+
<head>
|
|
453
|
+
<!-- Required meta tags -->
|
|
454
|
+
<meta charset="utf-8">
|
|
455
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
456
|
+
<!-- CSS -->
|
|
457
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gov-cy/govcy-design-system@v3/dist/css/govcy.uds.min.css">
|
|
458
|
+
<title>Page title - Service Name - gov.cy</title>
|
|
459
|
+
<meta name="description" content="Description of what the service does">
|
|
460
|
+
|
|
461
|
+
</head>
|
|
462
|
+
|
|
463
|
+
<body>
|
|
464
|
+
<!--bodyStart-->
|
|
465
|
+
<section class="govcy-container-fluid" id="bodyStartContainer">
|
|
466
|
+
<a href="#mainContainer" class="govcy-skip-link">Skip to main content</a>
|
|
467
|
+
</section>
|
|
468
|
+
<!--main-->
|
|
469
|
+
<main class="govcy-container" id="mainContainer">
|
|
470
|
+
<div class="govcy-row">
|
|
471
|
+
<article class="govcy-col-8">
|
|
472
|
+
<div id="output" class="govcy-form"></div>
|
|
473
|
+
</article>
|
|
474
|
+
</div>
|
|
475
|
+
</main>
|
|
476
|
+
<script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-design-system@v3/dist/js/govcy.uds.min.js"></script>
|
|
477
|
+
<script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyCompiledTemplates.browser.js"></script>
|
|
478
|
+
<script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyFrontendRenderer.browser.js"></script>
|
|
479
|
+
<script>
|
|
480
|
+
|
|
481
|
+
document.addEventListener("DOMContentLoaded", async function () {
|
|
482
|
+
|
|
483
|
+
// Create an instance of GovcyFrontendRendererBrowser
|
|
484
|
+
const renderer = new GovcyFrontendRendererBrowser();
|
|
485
|
+
|
|
486
|
+
// Define the input data
|
|
487
|
+
const inputData =
|
|
488
|
+
{
|
|
489
|
+
"site": {
|
|
490
|
+
"lang": "en"
|
|
491
|
+
}
|
|
492
|
+
};
|
|
493
|
+
|
|
494
|
+
// Construct the JSONTemplate
|
|
495
|
+
const JSONTemplate = {
|
|
496
|
+
"elements": [
|
|
497
|
+
{
|
|
498
|
+
"element": "backLink",
|
|
499
|
+
"params": {}
|
|
500
|
+
},
|
|
501
|
+
{
|
|
502
|
+
"element": "tag",
|
|
503
|
+
"params": {
|
|
504
|
+
"text": {
|
|
505
|
+
"en": "SIMPLE TAG",
|
|
506
|
+
"el": "ΑΠΛΟ TAG"
|
|
507
|
+
}
|
|
508
|
+
}
|
|
509
|
+
}
|
|
510
|
+
]
|
|
511
|
+
};
|
|
512
|
+
|
|
513
|
+
//render HTML into string
|
|
514
|
+
let renderedHtml = renderer.renderFromJSON(JSONTemplate,inputData);
|
|
515
|
+
//update DOM and initialize the JS components
|
|
516
|
+
renderer.updateDOMAndInitialize('output', renderedHtml);
|
|
517
|
+
});
|
|
518
|
+
</script>
|
|
519
|
+
</body>
|
|
520
|
+
|
|
521
|
+
</html>
|
|
522
|
+
```
|
|
523
|
+
|
|
524
|
+
### Things you should know about browser usage
|
|
525
|
+
Using the example above as reference:
|
|
526
|
+
1. `renderer.renderFromJSON(JSONTemplate,inputData);` generates the HTML based on the JSON input template.
|
|
527
|
+
2. `renderer.updateDOMAndInitialize('output', renderedHtml);` updates the DOM and initializes the JS components. It finds the element with id `output` and :
|
|
528
|
+
- used the `innerHTML` to update it's contents
|
|
529
|
+
- initializes all GOVCY design system's JS components within that elements (so it will not re-initialize other elements such as `header` in different sections of the page)
|
|
530
|
+
|
|
437
531
|
## Change the package
|
|
438
532
|
|
|
439
533
|
Details on how to build, test and update the project can be found in the [project notes](NOTES.md) document.
|
|
@@ -770,7 +770,7 @@ context.addExport("ariaDescribedBy", t_53);
|
|
|
770
770
|
}
|
|
771
771
|
;
|
|
772
772
|
}
|
|
773
|
-
t_26 += runtime.suppressValue((lineno =
|
|
773
|
+
t_26 += runtime.suppressValue((lineno = 132, colno = 20, runtime.callWrap(t_31, "fieldset", context, [{"ariaDescribedby": runtime.contextOrFrameLookup(context, frame, "ariaDescribedBy"),"classes": runtime.memberLookup((l_params),"classes"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_54 = runtime.makeMacro(
|
|
774
774
|
[],
|
|
775
775
|
[],
|
|
776
776
|
function (kwargs) {
|
|
@@ -780,7 +780,7 @@ kwargs = kwargs || {};
|
|
|
780
780
|
if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
|
|
781
781
|
frame.set("caller", kwargs.caller); }
|
|
782
782
|
var t_55 = "";t_55 += "\n ";
|
|
783
|
-
t_55 += runtime.suppressValue((lineno =
|
|
783
|
+
t_55 += runtime.suppressValue((lineno = 133, colno = 22, runtime.callWrap(t_39, "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_56 = runtime.makeMacro(
|
|
784
784
|
[],
|
|
785
785
|
[],
|
|
786
786
|
function (kwargs) {
|
|
@@ -804,9 +804,9 @@ var t_61 = t_58.govcyElementsFromArray;
|
|
|
804
804
|
cb(new Error("cannot import 'govcyElementsFromArray'")); return;
|
|
805
805
|
}
|
|
806
806
|
frame.set("govcyElementsFromArray", t_61);
|
|
807
|
-
t_55 += runtime.suppressValue((lineno =
|
|
807
|
+
t_55 += runtime.suppressValue((lineno = 137, colno = 33, runtime.callWrap(t_61, "govcyElementsFromArray", context, [runtime.memberLookup((l_params),"elements"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
|
|
808
808
|
t_55 += "\n ";
|
|
809
|
-
t_55 += runtime.suppressValue((lineno =
|
|
809
|
+
t_55 += runtime.suppressValue((lineno = 138, colno = 27, runtime.callWrap(t_47, "formControl", context, [{"isError": (runtime.memberLookup((l_params),"hideFormControlError")?false:runtime.memberLookup((l_params),"error"))},runtime.makeKeywordArgs({"caller": (function (){var macro_t_62 = runtime.makeMacro(
|
|
810
810
|
[],
|
|
811
811
|
[],
|
|
812
812
|
function (kwargs) {
|
|
@@ -816,7 +816,7 @@ kwargs = kwargs || {};
|
|
|
816
816
|
if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
|
|
817
817
|
frame.set("caller", kwargs.caller); }
|
|
818
818
|
var t_63 = "";t_63 += "\n ";
|
|
819
|
-
t_63 += runtime.suppressValue((lineno =
|
|
819
|
+
t_63 += runtime.suppressValue((lineno = 139, colno = 24, runtime.callWrap(t_35, "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_64 = runtime.makeMacro(
|
|
820
820
|
[],
|
|
821
821
|
[],
|
|
822
822
|
function (kwargs) {
|
|
@@ -830,7 +830,7 @@ frame = frame.pop();
|
|
|
830
830
|
return new runtime.SafeString(t_65);
|
|
831
831
|
});
|
|
832
832
|
return macro_t_64;})()})])), env.opts.autoescape);
|
|
833
|
-
t_63 += runtime.suppressValue((lineno =
|
|
833
|
+
t_63 += runtime.suppressValue((lineno = 141, colno = 32, runtime.callWrap(t_43, "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_66 = runtime.makeMacro(
|
|
834
834
|
[],
|
|
835
835
|
[],
|
|
836
836
|
function (kwargs) {
|
|
@@ -860,7 +860,7 @@ frame.set("loop.first", t_68 === 0);
|
|
|
860
860
|
frame.set("loop.last", t_68 === t_69 - 1);
|
|
861
861
|
frame.set("loop.length", t_69);
|
|
862
862
|
if(t_71) {
|
|
863
|
-
t_63 += runtime.suppressValue((lineno =
|
|
863
|
+
t_63 += runtime.suppressValue((lineno = 145, colno = 37, runtime.callWrap(runtime.contextOrFrameLookup(context, frame, "_checkboxItem"), "_checkboxItem", context, [l_params,t_71,runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "loop")),"index"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
|
|
864
864
|
;
|
|
865
865
|
}
|
|
866
866
|
;
|
|
@@ -1844,6 +1844,150 @@ root: root
|
|
|
1844
1844
|
})();
|
|
1845
1845
|
})();
|
|
1846
1846
|
|
|
1847
|
+
(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["elements/errorSummary.njk"] = (function() {
|
|
1848
|
+
function root(env, context, frame, runtime, cb) {
|
|
1849
|
+
var lineno = 0;
|
|
1850
|
+
var colno = 0;
|
|
1851
|
+
var output = "";
|
|
1852
|
+
try {
|
|
1853
|
+
var parentTemplate = null;
|
|
1854
|
+
output += "\r\n";
|
|
1855
|
+
var macro_t_1 = runtime.makeMacro(
|
|
1856
|
+
["params"],
|
|
1857
|
+
[],
|
|
1858
|
+
function (l_params, kwargs) {
|
|
1859
|
+
var callerFrame = frame;
|
|
1860
|
+
frame = new runtime.Frame();
|
|
1861
|
+
kwargs = kwargs || {};
|
|
1862
|
+
if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
|
|
1863
|
+
frame.set("caller", kwargs.caller); }
|
|
1864
|
+
frame.set("params", l_params);
|
|
1865
|
+
var t_2 = "";env.getTemplate("utilities/govcyUtilities.njk", false, "elements/errorSummary.njk", false, function(t_4,t_3) {
|
|
1866
|
+
if(t_4) { cb(t_4); return; }
|
|
1867
|
+
t_3.getExported(function(t_5,t_3) {
|
|
1868
|
+
if(t_5) { cb(t_5); return; }
|
|
1869
|
+
if(Object.prototype.hasOwnProperty.call(t_3, "govcyLocalizeContent")) {
|
|
1870
|
+
var t_6 = t_3.govcyLocalizeContent;
|
|
1871
|
+
} else {
|
|
1872
|
+
cb(new Error("cannot import 'govcyLocalizeContent'")); return;
|
|
1873
|
+
}
|
|
1874
|
+
context.setVariable("govcyLocalizeContent", t_6);
|
|
1875
|
+
if(Object.prototype.hasOwnProperty.call(t_3, "govcyLangAttribute")) {
|
|
1876
|
+
var t_7 = t_3.govcyLangAttribute;
|
|
1877
|
+
} else {
|
|
1878
|
+
cb(new Error("cannot import 'govcyLangAttribute'")); return;
|
|
1879
|
+
}
|
|
1880
|
+
context.setVariable("govcyLangAttribute", t_7);
|
|
1881
|
+
if(runtime.memberLookup((l_params),"header")) {
|
|
1882
|
+
var t_8;
|
|
1883
|
+
t_8 = (function() {
|
|
1884
|
+
var output = "";
|
|
1885
|
+
output += runtime.suppressValue((lineno = 29, colno = 47, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((l_params),"header"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
|
|
1886
|
+
;
|
|
1887
|
+
return output;
|
|
1888
|
+
})()
|
|
1889
|
+
;
|
|
1890
|
+
frame.set("header", t_8, true);
|
|
1891
|
+
if(frame.topLevel) {
|
|
1892
|
+
context.setVariable("header", t_8);
|
|
1893
|
+
}
|
|
1894
|
+
if(frame.topLevel) {
|
|
1895
|
+
context.addExport("header", t_8);
|
|
1896
|
+
}
|
|
1897
|
+
;
|
|
1898
|
+
}
|
|
1899
|
+
else {
|
|
1900
|
+
var t_9;
|
|
1901
|
+
t_9 = (function() {
|
|
1902
|
+
var output = "";
|
|
1903
|
+
output += runtime.suppressValue((lineno = 31, colno = 47, runtime.callWrap(t_6, "govcyLocalizeContent", context, [{"en": "There is a problem","el": "Υπάρχει πρόβλημα"},runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
|
|
1904
|
+
;
|
|
1905
|
+
return output;
|
|
1906
|
+
})()
|
|
1907
|
+
;
|
|
1908
|
+
frame.set("header", t_9, true);
|
|
1909
|
+
if(frame.topLevel) {
|
|
1910
|
+
context.setVariable("header", t_9);
|
|
1911
|
+
}
|
|
1912
|
+
if(frame.topLevel) {
|
|
1913
|
+
context.addExport("header", t_9);
|
|
1914
|
+
}
|
|
1915
|
+
;
|
|
1916
|
+
}
|
|
1917
|
+
if(runtime.memberLookup((l_params),"id") && runtime.memberLookup((l_params),"errors")) {
|
|
1918
|
+
t_2 += "\r\n<div id=\"";
|
|
1919
|
+
t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"id"), env.opts.autoescape);
|
|
1920
|
+
t_2 += "\" class=\"govcy-alert-error govcy-br-5 govcy-br-danger govcy-p-3\"";
|
|
1921
|
+
t_2 += runtime.suppressValue((lineno = 35, colno = 109, runtime.callWrap(t_7, "govcyLangAttribute", context, [runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
|
|
1922
|
+
t_2 += ">\r\n <h2 role=\"alert\" id=\"";
|
|
1923
|
+
t_2 += runtime.suppressValue(runtime.memberLookup((l_params),"id"), env.opts.autoescape);
|
|
1924
|
+
t_2 += "-title\">";
|
|
1925
|
+
t_2 += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "header"), env.opts.autoescape);
|
|
1926
|
+
t_2 += "</h2>\r\n <p>";
|
|
1927
|
+
frame = frame.push();
|
|
1928
|
+
var t_12 = runtime.memberLookup((l_params),"errors");
|
|
1929
|
+
if(t_12) {t_12 = runtime.fromIterator(t_12);
|
|
1930
|
+
var t_11 = t_12.length;
|
|
1931
|
+
for(var t_10=0; t_10 < t_12.length; t_10++) {
|
|
1932
|
+
var t_13 = t_12[t_10];
|
|
1933
|
+
frame.set("error", t_13);
|
|
1934
|
+
frame.set("loop.index", t_10 + 1);
|
|
1935
|
+
frame.set("loop.index0", t_10);
|
|
1936
|
+
frame.set("loop.revindex", t_11 - t_10);
|
|
1937
|
+
frame.set("loop.revindex0", t_11 - t_10 - 1);
|
|
1938
|
+
frame.set("loop.first", t_10 === 0);
|
|
1939
|
+
frame.set("loop.last", t_10 === t_11 - 1);
|
|
1940
|
+
frame.set("loop.length", t_11);
|
|
1941
|
+
t_2 += "\r\n <a href=\"";
|
|
1942
|
+
t_2 += runtime.suppressValue(runtime.memberLookup((t_13),"link"), env.opts.autoescape);
|
|
1943
|
+
t_2 += "\">";
|
|
1944
|
+
t_2 += runtime.suppressValue((lineno = 39, colno = 62, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((t_13),"text"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
|
|
1945
|
+
t_2 += "</a>";
|
|
1946
|
+
;
|
|
1947
|
+
}
|
|
1948
|
+
}
|
|
1949
|
+
frame = frame.pop();
|
|
1950
|
+
t_2 += "\r\n </p>";
|
|
1951
|
+
if(runtime.memberLookup((l_params),"body")) {
|
|
1952
|
+
t_2 += "\r\n <p>";
|
|
1953
|
+
t_2 += runtime.suppressValue((lineno = 43, colno = 30, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((l_params),"body"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
|
|
1954
|
+
t_2 += "</p>";
|
|
1955
|
+
;
|
|
1956
|
+
}
|
|
1957
|
+
if(runtime.memberLookup((l_params),"linkToContinue")) {
|
|
1958
|
+
t_2 += "\r\n <a href=\"";
|
|
1959
|
+
t_2 += runtime.suppressValue(runtime.memberLookup((runtime.memberLookup((l_params),"linkToContinue")),"link"), env.opts.autoescape);
|
|
1960
|
+
t_2 += "\">";
|
|
1961
|
+
t_2 += runtime.suppressValue((lineno = 46, colno = 70, runtime.callWrap(t_6, "govcyLocalizeContent", context, [runtime.memberLookup((runtime.memberLookup((l_params),"linkToContinue")),"text"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
|
|
1962
|
+
t_2 += "</a>";
|
|
1963
|
+
;
|
|
1964
|
+
}
|
|
1965
|
+
t_2 += "\r\n</div>";
|
|
1966
|
+
;
|
|
1967
|
+
}
|
|
1968
|
+
})});
|
|
1969
|
+
frame = callerFrame;
|
|
1970
|
+
return new runtime.SafeString(t_2);
|
|
1971
|
+
});
|
|
1972
|
+
context.addExport("errorSummary");
|
|
1973
|
+
context.setVariable("errorSummary", macro_t_1);
|
|
1974
|
+
if(parentTemplate) {
|
|
1975
|
+
parentTemplate.rootRenderFunc(env, context, frame, runtime, cb);
|
|
1976
|
+
} else {
|
|
1977
|
+
cb(null, output);
|
|
1978
|
+
}
|
|
1979
|
+
;
|
|
1980
|
+
} catch (e) {
|
|
1981
|
+
cb(runtime.handleError(e, lineno, colno));
|
|
1982
|
+
}
|
|
1983
|
+
}
|
|
1984
|
+
return {
|
|
1985
|
+
root: root
|
|
1986
|
+
};
|
|
1987
|
+
|
|
1988
|
+
})();
|
|
1989
|
+
})();
|
|
1990
|
+
|
|
1847
1991
|
(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["elements/fieldset.njk"] = (function() {
|
|
1848
1992
|
function root(env, context, frame, runtime, cb) {
|
|
1849
1993
|
var lineno = 0;
|
|
@@ -3753,7 +3897,7 @@ context.addExport("ariaDescribedBy", t_66);
|
|
|
3753
3897
|
}
|
|
3754
3898
|
;
|
|
3755
3899
|
}
|
|
3756
|
-
t_38 += runtime.suppressValue((lineno =
|
|
3900
|
+
t_38 += runtime.suppressValue((lineno = 165, colno = 20, runtime.callWrap(t_44, "fieldset", context, [{"ariaDescribedby": runtime.contextOrFrameLookup(context, frame, "ariaDescribedBy"),"classes": runtime.memberLookup((l_params),"classes"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_67 = runtime.makeMacro(
|
|
3757
3901
|
[],
|
|
3758
3902
|
[],
|
|
3759
3903
|
function (kwargs) {
|
|
@@ -3763,7 +3907,7 @@ kwargs = kwargs || {};
|
|
|
3763
3907
|
if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
|
|
3764
3908
|
frame.set("caller", kwargs.caller); }
|
|
3765
3909
|
var t_68 = "";t_68 += "\n ";
|
|
3766
|
-
t_68 += runtime.suppressValue((lineno =
|
|
3910
|
+
t_68 += runtime.suppressValue((lineno = 166, colno = 22, runtime.callWrap(t_52, "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_69 = runtime.makeMacro(
|
|
3767
3911
|
[],
|
|
3768
3912
|
[],
|
|
3769
3913
|
function (kwargs) {
|
|
@@ -3787,9 +3931,9 @@ var t_74 = t_71.govcyElementsFromArray;
|
|
|
3787
3931
|
cb(new Error("cannot import 'govcyElementsFromArray'")); return;
|
|
3788
3932
|
}
|
|
3789
3933
|
frame.set("govcyElementsFromArray", t_74);
|
|
3790
|
-
t_68 += runtime.suppressValue((lineno =
|
|
3934
|
+
t_68 += runtime.suppressValue((lineno = 170, colno = 33, runtime.callWrap(t_74, "govcyElementsFromArray", context, [runtime.memberLookup((l_params),"elements"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
|
|
3791
3935
|
t_68 += "\n ";
|
|
3792
|
-
t_68 += runtime.suppressValue((lineno =
|
|
3936
|
+
t_68 += runtime.suppressValue((lineno = 171, colno = 27, runtime.callWrap(t_60, "formControl", context, [{"isError": (runtime.memberLookup((l_params),"hideFormControlError")?false:runtime.memberLookup((l_params),"error"))},runtime.makeKeywordArgs({"caller": (function (){var macro_t_75 = runtime.makeMacro(
|
|
3793
3937
|
[],
|
|
3794
3938
|
[],
|
|
3795
3939
|
function (kwargs) {
|
|
@@ -3798,7 +3942,7 @@ frame = frame.push(true);
|
|
|
3798
3942
|
kwargs = kwargs || {};
|
|
3799
3943
|
if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
|
|
3800
3944
|
frame.set("caller", kwargs.caller); }
|
|
3801
|
-
var t_76 = "";t_76 += runtime.suppressValue((lineno =
|
|
3945
|
+
var t_76 = "";t_76 += runtime.suppressValue((lineno = 173, colno = 24, runtime.callWrap(t_48, "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_77 = runtime.makeMacro(
|
|
3802
3946
|
[],
|
|
3803
3947
|
[],
|
|
3804
3948
|
function (kwargs) {
|
|
@@ -3812,7 +3956,7 @@ frame = frame.pop();
|
|
|
3812
3956
|
return new runtime.SafeString(t_78);
|
|
3813
3957
|
});
|
|
3814
3958
|
return macro_t_77;})()})])), env.opts.autoescape);
|
|
3815
|
-
t_76 += runtime.suppressValue((lineno =
|
|
3959
|
+
t_76 += runtime.suppressValue((lineno = 175, colno = 32, runtime.callWrap(t_56, "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_79 = runtime.makeMacro(
|
|
3816
3960
|
[],
|
|
3817
3961
|
[],
|
|
3818
3962
|
function (kwargs) {
|
|
@@ -3842,7 +3986,7 @@ frame.set("loop.first", t_81 === 0);
|
|
|
3842
3986
|
frame.set("loop.last", t_81 === t_82 - 1);
|
|
3843
3987
|
frame.set("loop.length", t_82);
|
|
3844
3988
|
if(t_84) {
|
|
3845
|
-
t_76 += runtime.suppressValue((lineno =
|
|
3989
|
+
t_76 += runtime.suppressValue((lineno = 179, colno = 34, runtime.callWrap(runtime.contextOrFrameLookup(context, frame, "_radioItem"), "_radioItem", context, [l_params,t_84,runtime.contextOrFrameLookup(context, frame, "isInline"),runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "loop")),"index"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
|
|
3846
3990
|
;
|
|
3847
3991
|
}
|
|
3848
3992
|
;
|
|
@@ -6138,7 +6282,7 @@ var output = "";
|
|
|
6138
6282
|
try {
|
|
6139
6283
|
var parentTemplate = null;
|
|
6140
6284
|
var t_1;
|
|
6141
|
-
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"];
|
|
6285
|
+
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"];
|
|
6142
6286
|
frame.set("macroSimpleBlocks", t_1, true);
|
|
6143
6287
|
if(frame.topLevel) {
|
|
6144
6288
|
context.setVariable("macroSimpleBlocks", t_1);
|
|
@@ -16494,6 +16494,64 @@ var GovcyFrontendRendererBrowser = (function () {
|
|
|
16494
16494
|
this.env.addGlobal('globalData', data);
|
|
16495
16495
|
return this.env.renderString(jsonTemplate, data);
|
|
16496
16496
|
}
|
|
16497
|
+
|
|
16498
|
+
/**
|
|
16499
|
+
* Updates the dom element with the rendered html and initializes the components
|
|
16500
|
+
* @param {*} elementId The id of the element to update it's inner html
|
|
16501
|
+
* @param {*} renderedHtml The HTML to render
|
|
16502
|
+
*/
|
|
16503
|
+
updateDOMAndInitialize(elementId, renderedHtml) {
|
|
16504
|
+
const parent = document.getElementById(elementId);
|
|
16505
|
+
// if the parent exists
|
|
16506
|
+
if (parent) {
|
|
16507
|
+
// Update the inner html
|
|
16508
|
+
parent.innerHTML = renderedHtml;
|
|
16509
|
+
// If the GOVCY object exists, initialize the components
|
|
16510
|
+
if (typeof GOVCY !== 'undefined') {
|
|
16511
|
+
// Initialize Accordion
|
|
16512
|
+
parent.querySelectorAll('.govcy-accordion-button').forEach((element) => {
|
|
16513
|
+
new GOVCY.Accordion(element);
|
|
16514
|
+
});
|
|
16515
|
+
|
|
16516
|
+
// Initialize CharacterCount
|
|
16517
|
+
parent.querySelectorAll('.govcy-character-count').forEach((element) => {
|
|
16518
|
+
new GOVCY.CharacterCount(element);
|
|
16519
|
+
});
|
|
16520
|
+
|
|
16521
|
+
// Initialize Collapsable
|
|
16522
|
+
parent.querySelectorAll('.govcy-collapsable').forEach((element) => {
|
|
16523
|
+
new GOVCY.Collapsable(element);
|
|
16524
|
+
});
|
|
16525
|
+
|
|
16526
|
+
// Initialize DatePicker
|
|
16527
|
+
parent.querySelectorAll('.govcy-date-picker').forEach((element) => {
|
|
16528
|
+
new GOVCY.DatePicker(element);
|
|
16529
|
+
});
|
|
16530
|
+
|
|
16531
|
+
// Initialize HeaderMenu
|
|
16532
|
+
parent.querySelectorAll('.govcy-header').forEach((element) => {
|
|
16533
|
+
new GOVCY.HeaderMenu(element);
|
|
16534
|
+
});
|
|
16535
|
+
|
|
16536
|
+
// Initialize MobileOTP
|
|
16537
|
+
if ('OTPCredential' in window) {
|
|
16538
|
+
parent.querySelectorAll('input[autocomplete="one-time-code"]').forEach((element) => {
|
|
16539
|
+
new GOVCY.MobileOTP(element);
|
|
16540
|
+
});
|
|
16541
|
+
}
|
|
16542
|
+
|
|
16543
|
+
// Initialize Tab
|
|
16544
|
+
parent.querySelectorAll('.govcy-tab-link').forEach((element) => {
|
|
16545
|
+
new GOVCY.Tab(element);
|
|
16546
|
+
});
|
|
16547
|
+
|
|
16548
|
+
// Initialize ConditionalContactToggler
|
|
16549
|
+
parent.querySelectorAll('.govcy-radio-input').forEach((element) => {
|
|
16550
|
+
new GOVCY.ConditionalContactToggler(element);
|
|
16551
|
+
});
|
|
16552
|
+
}
|
|
16553
|
+
}
|
|
16554
|
+
}
|
|
16497
16555
|
}
|
|
16498
16556
|
|
|
16499
16557
|
return GovcyFrontendRendererBrowser;
|
package/package.json
CHANGED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{# errorSummary
|
|
2
|
+
@param {string} lang The language used. Can be 'en','el'. Optional.
|
|
3
|
+
@param {object} header if defined, will rendered the `<h2>` inside the Error Summary. Will escape text. Default value `{"en":"There is a problem","el":"Υπάρχει πρόβλημα"}`. Optional
|
|
4
|
+
@param {object} body if defined, will rendered the body in a `<p>` after the errors. Will escape text. Example `{"en":"Content","el":"Περιεχομένο"}`. Optional
|
|
5
|
+
@param {object} linkToContinue if defined, will rendered it after the errors and the body in a. Will escape text. Optional
|
|
6
|
+
i.e. ` {
|
|
7
|
+
"link":"#",
|
|
8
|
+
"text":{"en":"Back to home page","el":"Επιστροφή στην αρχική σελίδα"}
|
|
9
|
+
}`
|
|
10
|
+
@param {string} id The of the error summary. Will also be used in the as {{id}}-title in the header. Will escape text
|
|
11
|
+
@param {array} errors The errors array.
|
|
12
|
+
i.e. `[
|
|
13
|
+
{
|
|
14
|
+
"link":"#input1",
|
|
15
|
+
"text":{"en":"Enter your full name","el":"Εισαγάγετε το πλήρες όνομά σας"}
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"link":"#input2",
|
|
19
|
+
"text":{"en":"Enter your mobile number","el":"Εισαγάγετε τον αριθμο κινητού τηλεφωνου σας"}
|
|
20
|
+
}
|
|
21
|
+
]`
|
|
22
|
+
@param {string} classes Additional classes to add to the outer div. Optional
|
|
23
|
+
@returns govcy error Summary html
|
|
24
|
+
#}
|
|
25
|
+
{% macro errorSummary(params) -%}
|
|
26
|
+
{#- Import localizer from utilities -#}
|
|
27
|
+
{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
|
|
28
|
+
{#- set 'or' labels -#}
|
|
29
|
+
{%- if params.header -%}
|
|
30
|
+
{%- set header -%} {{- govcyLocalizeContent(params.header, params.lang) -}}{%- endset -%}
|
|
31
|
+
{%- else -%}
|
|
32
|
+
{%- set header -%} {{- govcyLocalizeContent({en:"There is a problem",el:"Υπάρχει πρόβλημα"}, params.lang) -}}{%- endset -%}
|
|
33
|
+
{%- endif -%}
|
|
34
|
+
{#- id and errors are mandatory -#}
|
|
35
|
+
{%- if params.id and params.errors %}
|
|
36
|
+
<div id="{{ params.id }}" class="govcy-alert-error govcy-br-5 govcy-br-danger govcy-p-3{% if params.classes %} {{ params.classes }}{% endif %}"{{ govcyLangAttribute(params.lang) }}>
|
|
37
|
+
<h2 role="alert" id="{{ params.id }}-title">{{ header }}</h2>
|
|
38
|
+
<p>
|
|
39
|
+
{%- for error in params.errors %}
|
|
40
|
+
<a href="{{ error.link }}">{{ govcyLocalizeContent(error.text, params.lang) }}</a>
|
|
41
|
+
{%- endfor %}
|
|
42
|
+
</p>
|
|
43
|
+
{%- if params.body %}
|
|
44
|
+
<p>{{ govcyLocalizeContent(params.body, params.lang) }}</p>
|
|
45
|
+
{%- endif %}
|
|
46
|
+
{%- if params.linkToContinue %}
|
|
47
|
+
<a href="{{ params.linkToContinue.link }}">{{ govcyLocalizeContent(params.linkToContinue.text, params.lang) }}</a>
|
|
48
|
+
{%- endif %}
|
|
49
|
+
</div>
|
|
50
|
+
{%- endif %}
|
|
51
|
+
{%- endmacro %}
|
package/src/njk/govcyElement.njk
CHANGED
|
@@ -25,7 +25,7 @@ To use:
|
|
|
25
25
|
{%- set macroSimpleBlocks = ['label', 'legend', 'hint', 'button',
|
|
26
26
|
'errorMessage','select','textElement','htmlElement','textInput','radios','checkboxes',
|
|
27
27
|
'fileInput','fileView','backLink','tag','table', 'summaryList', 'textArea','markdown',
|
|
28
|
-
'panel', 'datePicker','dateInput', 'taskList'] -%}
|
|
28
|
+
'panel', 'datePicker','dateInput', 'taskList', 'errorSummary'] -%}
|
|
29
29
|
{%- set macroCallerBlocks = ['formControl','form','fieldset'] -%}
|
|
30
30
|
{%- macro govcyElement(component, params) -%}
|
|
31
31
|
{#- Simple blocks -#}
|