@gov-cy/govcy-frontend-renderer 1.5.0 → 1.7.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.
Files changed (6) hide show
  1. package/README.md +94 -0
  2. package/dist/govcyCompiledTemplates.browser.js +83 -62
  3. package/dist/govcyFrontendRenderer.browser.js +58 -0
  4. package/package.json +1 -1
  5. package/src/njk/elements/checkboxes.njk +9 -0
  6. package/src/njk/elements/radios.njk +10 -0
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.
package/dist/govcyCompiledTemplates.browser.js CHANGED
@@ -770,7 +770,7 @@ context.addExport("ariaDescribedBy", t_53);
770
770
  }
771
771
  ;
772
772
  }
773
- t_26 += runtime.suppressValue((lineno = 127, 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(
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 = 128, 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(
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) {
@@ -794,8 +794,19 @@ frame = frame.pop();
794
794
  return new runtime.SafeString(t_57);
795
795
  });
796
796
  return macro_t_56;})()})])), env.opts.autoescape);
797
+ env.getTemplate("utilities/govcyUtilities.njk", false, "elements/checkboxes.njk", false, function(t_59,t_58) {
798
+ if(t_59) { cb(t_59); return; }
799
+ t_58.getExported(function(t_60,t_58) {
800
+ if(t_60) { cb(t_60); return; }
801
+ if(Object.prototype.hasOwnProperty.call(t_58, "govcyElementsFromArray")) {
802
+ var t_61 = t_58.govcyElementsFromArray;
803
+ } else {
804
+ cb(new Error("cannot import 'govcyElementsFromArray'")); return;
805
+ }
806
+ frame.set("govcyElementsFromArray", t_61);
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);
797
808
  t_55 += "\n ";
798
- t_55 += runtime.suppressValue((lineno = 129, 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_58 = runtime.makeMacro(
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(
799
810
  [],
800
811
  [],
801
812
  function (kwargs) {
@@ -804,8 +815,8 @@ frame = frame.push(true);
804
815
  kwargs = kwargs || {};
805
816
  if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
806
817
  frame.set("caller", kwargs.caller); }
807
- var t_59 = "";t_59 += "\n ";
808
- t_59 += runtime.suppressValue((lineno = 130, 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_60 = runtime.makeMacro(
818
+ var t_63 = "";t_63 += "\n ";
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(
809
820
  [],
810
821
  [],
811
822
  function (kwargs) {
@@ -814,12 +825,12 @@ frame = frame.push(true);
814
825
  kwargs = kwargs || {};
815
826
  if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
816
827
  frame.set("caller", kwargs.caller); }
817
- var t_61 = "";;
828
+ var t_65 = "";;
818
829
  frame = frame.pop();
819
- return new runtime.SafeString(t_61);
830
+ return new runtime.SafeString(t_65);
820
831
  });
821
- return macro_t_60;})()})])), env.opts.autoescape);
822
- t_59 += runtime.suppressValue((lineno = 132, 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_62 = runtime.makeMacro(
832
+ return macro_t_64;})()})])), env.opts.autoescape);
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(
823
834
  [],
824
835
  [],
825
836
  function (kwargs) {
@@ -828,28 +839,28 @@ frame = frame.push(true);
828
839
  kwargs = kwargs || {};
829
840
  if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
830
841
  frame.set("caller", kwargs.caller); }
831
- var t_63 = "";;
842
+ var t_67 = "";;
832
843
  frame = frame.pop();
833
- return new runtime.SafeString(t_63);
844
+ return new runtime.SafeString(t_67);
834
845
  });
835
- return macro_t_62;})()})])), env.opts.autoescape);
836
- t_59 += "\n ";
846
+ return macro_t_66;})()})])), env.opts.autoescape);
847
+ t_63 += "\n ";
837
848
  frame = frame.push();
838
- var t_66 = runtime.memberLookup((l_params),"items");
839
- if(t_66) {t_66 = runtime.fromIterator(t_66);
840
- var t_65 = t_66.length;
841
- for(var t_64=0; t_64 < t_66.length; t_64++) {
842
- var t_67 = t_66[t_64];
843
- frame.set("item", t_67);
844
- frame.set("loop.index", t_64 + 1);
845
- frame.set("loop.index0", t_64);
846
- frame.set("loop.revindex", t_65 - t_64);
847
- frame.set("loop.revindex0", t_65 - t_64 - 1);
848
- frame.set("loop.first", t_64 === 0);
849
- frame.set("loop.last", t_64 === t_65 - 1);
850
- frame.set("loop.length", t_65);
851
- if(t_67) {
852
- t_59 += runtime.suppressValue((lineno = 136, colno = 37, runtime.callWrap(runtime.contextOrFrameLookup(context, frame, "_checkboxItem"), "_checkboxItem", context, [l_params,t_67,runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "loop")),"index"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
849
+ var t_70 = runtime.memberLookup((l_params),"items");
850
+ if(t_70) {t_70 = runtime.fromIterator(t_70);
851
+ var t_69 = t_70.length;
852
+ for(var t_68=0; t_68 < t_70.length; t_68++) {
853
+ var t_71 = t_70[t_68];
854
+ frame.set("item", t_71);
855
+ frame.set("loop.index", t_68 + 1);
856
+ frame.set("loop.index0", t_68);
857
+ frame.set("loop.revindex", t_69 - t_68);
858
+ frame.set("loop.revindex0", t_69 - t_68 - 1);
859
+ frame.set("loop.first", t_68 === 0);
860
+ frame.set("loop.last", t_68 === t_69 - 1);
861
+ frame.set("loop.length", t_69);
862
+ if(t_71) {
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);
853
864
  ;
854
865
  }
855
866
  ;
@@ -858,11 +869,11 @@ t_59 += runtime.suppressValue((lineno = 136, colno = 37, runtime.callWrap(runtim
858
869
  frame = frame.pop();
859
870
  ;
860
871
  frame = frame.pop();
861
- return new runtime.SafeString(t_59);
872
+ return new runtime.SafeString(t_63);
862
873
  });
863
- return macro_t_58;})()})])), env.opts.autoescape);
874
+ return macro_t_62;})()})])), env.opts.autoescape);
864
875
  t_55 += "\n ";
865
- ;
876
+ })});
866
877
  frame = frame.pop();
867
878
  return new runtime.SafeString(t_55);
868
879
  });
@@ -3742,7 +3753,7 @@ context.addExport("ariaDescribedBy", t_66);
3742
3753
  }
3743
3754
  ;
3744
3755
  }
3745
- t_38 += runtime.suppressValue((lineno = 160, 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(
3756
+ 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(
3746
3757
  [],
3747
3758
  [],
3748
3759
  function (kwargs) {
@@ -3752,7 +3763,7 @@ kwargs = kwargs || {};
3752
3763
  if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
3753
3764
  frame.set("caller", kwargs.caller); }
3754
3765
  var t_68 = "";t_68 += "\n ";
3755
- t_68 += runtime.suppressValue((lineno = 161, 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(
3766
+ 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(
3756
3767
  [],
3757
3768
  [],
3758
3769
  function (kwargs) {
@@ -3766,8 +3777,19 @@ frame = frame.pop();
3766
3777
  return new runtime.SafeString(t_70);
3767
3778
  });
3768
3779
  return macro_t_69;})()})])), env.opts.autoescape);
3780
+ env.getTemplate("utilities/govcyUtilities.njk", false, "elements/radios.njk", false, function(t_72,t_71) {
3781
+ if(t_72) { cb(t_72); return; }
3782
+ t_71.getExported(function(t_73,t_71) {
3783
+ if(t_73) { cb(t_73); return; }
3784
+ if(Object.prototype.hasOwnProperty.call(t_71, "govcyElementsFromArray")) {
3785
+ var t_74 = t_71.govcyElementsFromArray;
3786
+ } else {
3787
+ cb(new Error("cannot import 'govcyElementsFromArray'")); return;
3788
+ }
3789
+ frame.set("govcyElementsFromArray", t_74);
3790
+ 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);
3769
3791
  t_68 += "\n ";
3770
- t_68 += runtime.suppressValue((lineno = 162, 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_71 = runtime.makeMacro(
3792
+ 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(
3771
3793
  [],
3772
3794
  [],
3773
3795
  function (kwargs) {
@@ -3776,8 +3798,7 @@ frame = frame.push(true);
3776
3798
  kwargs = kwargs || {};
3777
3799
  if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
3778
3800
  frame.set("caller", kwargs.caller); }
3779
- var t_72 = "";t_72 += "\n ";
3780
- t_72 += runtime.suppressValue((lineno = 163, 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_73 = runtime.makeMacro(
3801
+ 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(
3781
3802
  [],
3782
3803
  [],
3783
3804
  function (kwargs) {
@@ -3786,12 +3807,12 @@ frame = frame.push(true);
3786
3807
  kwargs = kwargs || {};
3787
3808
  if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
3788
3809
  frame.set("caller", kwargs.caller); }
3789
- var t_74 = "";;
3810
+ var t_78 = "";;
3790
3811
  frame = frame.pop();
3791
- return new runtime.SafeString(t_74);
3812
+ return new runtime.SafeString(t_78);
3792
3813
  });
3793
- return macro_t_73;})()})])), env.opts.autoescape);
3794
- t_72 += runtime.suppressValue((lineno = 165, 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_75 = runtime.makeMacro(
3814
+ return macro_t_77;})()})])), env.opts.autoescape);
3815
+ 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(
3795
3816
  [],
3796
3817
  [],
3797
3818
  function (kwargs) {
@@ -3800,28 +3821,28 @@ frame = frame.push(true);
3800
3821
  kwargs = kwargs || {};
3801
3822
  if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
3802
3823
  frame.set("caller", kwargs.caller); }
3803
- var t_76 = "";;
3824
+ var t_80 = "";;
3804
3825
  frame = frame.pop();
3805
- return new runtime.SafeString(t_76);
3826
+ return new runtime.SafeString(t_80);
3806
3827
  });
3807
- return macro_t_75;})()})])), env.opts.autoescape);
3808
- t_72 += "\n ";
3828
+ return macro_t_79;})()})])), env.opts.autoescape);
3829
+ t_76 += "\n ";
3809
3830
  frame = frame.push();
3810
- var t_79 = runtime.memberLookup((l_params),"items");
3811
- if(t_79) {t_79 = runtime.fromIterator(t_79);
3812
- var t_78 = t_79.length;
3813
- for(var t_77=0; t_77 < t_79.length; t_77++) {
3814
- var t_80 = t_79[t_77];
3815
- frame.set("item", t_80);
3816
- frame.set("loop.index", t_77 + 1);
3817
- frame.set("loop.index0", t_77);
3818
- frame.set("loop.revindex", t_78 - t_77);
3819
- frame.set("loop.revindex0", t_78 - t_77 - 1);
3820
- frame.set("loop.first", t_77 === 0);
3821
- frame.set("loop.last", t_77 === t_78 - 1);
3822
- frame.set("loop.length", t_78);
3823
- if(t_80) {
3824
- t_72 += runtime.suppressValue((lineno = 169, colno = 34, runtime.callWrap(runtime.contextOrFrameLookup(context, frame, "_radioItem"), "_radioItem", context, [l_params,t_80,runtime.contextOrFrameLookup(context, frame, "isInline"),runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "loop")),"index"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
3831
+ var t_83 = runtime.memberLookup((l_params),"items");
3832
+ if(t_83) {t_83 = runtime.fromIterator(t_83);
3833
+ var t_82 = t_83.length;
3834
+ for(var t_81=0; t_81 < t_83.length; t_81++) {
3835
+ var t_84 = t_83[t_81];
3836
+ frame.set("item", t_84);
3837
+ frame.set("loop.index", t_81 + 1);
3838
+ frame.set("loop.index0", t_81);
3839
+ frame.set("loop.revindex", t_82 - t_81);
3840
+ frame.set("loop.revindex0", t_82 - t_81 - 1);
3841
+ frame.set("loop.first", t_81 === 0);
3842
+ frame.set("loop.last", t_81 === t_82 - 1);
3843
+ frame.set("loop.length", t_82);
3844
+ if(t_84) {
3845
+ 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);
3825
3846
  ;
3826
3847
  }
3827
3848
  ;
@@ -3830,11 +3851,11 @@ t_72 += runtime.suppressValue((lineno = 169, colno = 34, runtime.callWrap(runtim
3830
3851
  frame = frame.pop();
3831
3852
  ;
3832
3853
  frame = frame.pop();
3833
- return new runtime.SafeString(t_72);
3854
+ return new runtime.SafeString(t_76);
3834
3855
  });
3835
- return macro_t_71;})()})])), env.opts.autoescape);
3856
+ return macro_t_75;})()})])), env.opts.autoescape);
3836
3857
  t_68 += "\n ";
3837
- ;
3858
+ })});
3838
3859
  frame = frame.pop();
3839
3860
  return new runtime.SafeString(t_68);
3840
3861
  });
package/dist/govcyFrontendRenderer.browser.js CHANGED
@@ -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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gov-cy/govcy-frontend-renderer",
3
- "version": "1.5.0",
3
+ "version": "1.7.0",
4
4
  "description": "Render html for design elements of the Unified design system using njk or json template.",
5
5
  "author": "DMRID - DSF Team",
6
6
  "license": "MIT",
package/src/njk/elements/checkboxes.njk CHANGED
@@ -77,6 +77,11 @@
77
77
  @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:"Περιεχομένο"}`
78
78
  @param {boolean} hideFormControlError If true, hides the form control error (red line on the left). Mostly used in conditional radio elements. Optional
79
79
  @param {string} lang The language used. Can be 'en','el'. Optional.
80
+ @param {array} elements if defined, govcy-elements to be rendered after the legend.
81
+ i.e. `[
82
+ {element:"button",params:{text:{en:"Button 1",el:"Κουμπί 1"},lang:"en",id:"govcy-test-23b"} },
83
+ {element:"button",params:{text:{en:"Button 2",el:"Κουμπί 2"},variant:'secondary',lang:"en",id:"govcy-test-23c"} },
84
+ ]`
80
85
  @param {array} items The array of items to turn onto checkbox
81
86
  i.e. `[
82
87
  {
@@ -127,6 +132,10 @@
127
132
  {%- endif -%}
128
133
  {% call fieldset({ariaDescribedby:ariaDescribedBy,classes:params.classes, lang:params.lang}) %}
129
134
  {% call legend({legend:params.legend, isPageHeading:isPageHeading,lang:params.lang}) %}{% endcall %}
135
+ {#- Import localizer from utilities -#}
136
+ {%- from "../utilities/govcyUtilities.njk" import govcyElementsFromArray -%}
137
+ {#- render elements -#}
138
+ {{ govcyElementsFromArray(params.elements, params.lang) }}
130
139
  {% call formControl({isError: false if params.hideFormControlError else params.error}) %}
131
140
  {% call hint({hint:params.hint, id:hintId,lang:params.lang}) %}{% endcall %}
132
141
  {#- render error message -#}
package/src/njk/elements/radios.njk CHANGED
@@ -109,6 +109,11 @@
109
109
  @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:"Περιεχομένο"}`
110
110
  @param {boolean} hideFormControlError If true, hides the form control error (red line on the left). Mostly used in conditional radio elements. Optional
111
111
  @param {string} lang The language used. Can be 'en','el'. Optional.
112
+ @param {array} elements if defined, govcy-elements to be rendered after the legend.
113
+ i.e. `[
114
+ {element:"button",params:{text:{en:"Button 1",el:"Κουμπί 1"},lang:"en",id:"govcy-test-23b"} },
115
+ {element:"button",params:{text:{en:"Button 2",el:"Κουμπί 2"},variant:'secondary',lang:"en",id:"govcy-test-23c"} },
116
+ ]`
112
117
  @param {array} items The array of items to turn onto radio
113
118
  i.e. `[
114
119
  {
@@ -160,7 +165,12 @@
160
165
  {%- endif -%}
161
166
  {% call fieldset({ariaDescribedby:ariaDescribedBy,classes:params.classes, lang:params.lang}) %}
162
167
  {% call legend({legend:params.legend, isPageHeading:isPageHeading,lang:params.lang}) %}{% endcall %}
168
+ {#- Import localizer from utilities -#}
169
+ {%- from "../utilities/govcyUtilities.njk" import govcyElementsFromArray -%}
170
+ {#- render elements -#}
171
+ {{ govcyElementsFromArray(params.elements, params.lang) }}
163
172
  {% call formControl({isError: false if params.hideFormControlError else params.error}) %}
173
+ {#- render hint -#}
164
174
  {% call hint({hint:params.hint, id:hintId,lang:params.lang}) %}{% endcall %}
165
175
  {#- render error message -#}
166
176
  {% call errorMessage({message:params.error,id:errorId,lang:params.lang}) %}{% endcall %}