@gov-cy/govcy-frontend-renderer 1.11.0 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gov-cy/govcy-frontend-renderer",
-  "version": "1.11.0",
+  "version": "1.13.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/checkboxes.njk

@@ -20,6 +20,8 @@
  @returns govcy checkbox item html 
 #}
 {%- macro _checkboxItem(params, item, index, lang) %}
+{#- Normalize value as array -#}
+{%- set checkboxValues = [] if params.value is not defined else (params.value if params.value is iterable else [params.value]) -%}
 {#- Import localizer from utilities -#}
 {%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
 {%- from "./hint.njk" import hint -%}
@@ -61,7 +63,7 @@
 {%- endif -%}
 {#- render checkbox -#}
 <div class="govcy-checkbox">
-    <input class="govcy-checkbox-input" name="{{ params.name }}" value="{{item.value}}" type="checkbox" id="{{ optionId }}" {% if item.hint%} aria-describedby="{{hintId}}"{% endif %}>
+    <input class="govcy-checkbox-input" name="{{ params.name }}"{% if item.value in checkboxValues %} checked{% endif %} value="{{item.value}}" type="checkbox" id="{{ optionId }}" {% if item.hint%} aria-describedby="{{hintId}}"{% endif %}>
     <label class="govcy-label" for="{{ optionId }}">{{ label | safe }}</label>
     {#- {% call govcyLabel({label:label, for:optionId, isPrimary:false, isHTML:true, lang:lang}) %}{% endcall %} -#}
     {% call hint({hint:item.hint, id:hintId, lang:lang}) %}{% endcall %}
@@ -70,7 +72,8 @@
 {# checkbox 
  @param {object} legend The legend text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`
  @param {string} id The id prefix for the options. Will escape text. 
- @param {string} name The name used in checkbox. Will escape text. 
+ @param {string} name The name used in checkbox. Will escape text.
+ @param {array|string} value The pre-selected values for checkboxes. If a string is passed, it means only one checkbox is selected, otherwise it needs to be an array of strings. Optional
  @param {string} hint The hint text. Optional. Will escape text 
  @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 fieldset. Optional 

package/src/njk/elements/dateInput.njk

@@ -3,6 +3,9 @@
  @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 {string} dayValue The pre-filled day value. Will escape text. Optional.
+ @param {string} monthValue The pre-filled month value. Must be one of 1,2,3,4,5,6,7,8,9,10,11,12. Optional.
+ @param {string} yearValue The pre-filled year value. Will escape text. Optional.
  @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 
@@ -73,29 +76,29 @@
             <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 %}>
+                    <input id="{{ params.id }}_day" name="{{ params.name }}_day"{% if params.dayValue is defined %} value="{{ params.dayValue | default('') }}"{% endif %} 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>
+                        <option value=""></option>
+                        <option value="1"{% if params.monthValue == "1" %} selected{% endif %}>{% if variant=="mobile" %}1{% else %}{{ monthValue1 }}{% endif %}</option>
+                        <option value="2"{% if params.monthValue == "2" %} selected{% endif %}>{% if variant=="mobile" %}2{% else %}{{ monthValue2 }}{% endif %}</option>
+                        <option value="3"{% if params.monthValue == "3" %} selected{% endif %}>{% if variant=="mobile" %}3{% else %}{{ monthValue3 }}{% endif %}</option>
+                        <option value="4"{% if params.monthValue == "4" %} selected{% endif %}>{% if variant=="mobile" %}4{% else %}{{ monthValue4 }}{% endif %}</option>
+                        <option value="5"{% if params.monthValue == "5" %} selected{% endif %}>{% if variant=="mobile" %}5{% else %}{{ monthValue5 }}{% endif %}</option>
+                        <option value="6"{% if params.monthValue == "6" %} selected{% endif %}>{% if variant=="mobile" %}6{% else %}{{ monthValue6 }}{% endif %}</option>
+                        <option value="7"{% if params.monthValue == "7" %} selected{% endif %}>{% if variant=="mobile" %}7{% else %}{{ monthValue7 }}{% endif %}</option>
+                        <option value="8"{% if params.monthValue == "8" %} selected{% endif %}>{% if variant=="mobile" %}8{% else %}{{ monthValue8 }}{% endif %}</option>
+                        <option value="9"{% if params.monthValue == "9" %} selected{% endif %}>{% if variant=="mobile" %}9{% else %}{{ monthValue9 }}{% endif %}</option>
+                        <option value="10"{% if params.monthValue == "10" %} selected{% endif %}>{% if variant=="mobile" %}10{% else %}{{ monthValue10 }}{% endif %}</option>
+                        <option value="11"{% if params.monthValue == "11" %} selected{% endif %}>{% if variant=="mobile" %}11{% else %}{{ monthValue11 }}{% endif %}</option>
+                        <option value="12"{% if params.monthValue == "12" %} selected{% endif %}>{% 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 %}>
+                    <input id="{{ params.id }}_year" name="{{ params.name }}_year"{% if params.yearValue is defined %} value="{{ params.yearValue | default('') }}"{% endif %} 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 %}

package/src/njk/elements/datePicker.njk

@@ -3,6 +3,7 @@
  @param {object} label The label text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`  
  @param {string} id The id of the datePicker. Will escape text. 
  @param {string} name The name of the datePicker. Will escape text. 
+ @param {string} value The value of the input. Will set this value if it is a valid date. The date should be in the format `YYYY-MM-DD`. Optional
  @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 
@@ -47,7 +48,7 @@
         {% 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 %}
-        <div class="govcy-date-picker"{% if params.dataMinDate %} data-min-date="{{ params.dataMinDate }}"{% endif %}{% if params.dataMaxDate %} data-max-date="{{ params.dataMaxDate }}"{% endif %}>
+        <div class="govcy-date-picker"{% if params.dataMinDate %} data-min-date="{{ params.dataMinDate }}"{% endif %}{% if params.dataMaxDate %} data-max-date="{{ params.dataMaxDate }}"{% endif %}{% if params.value %} data-default-value="{{ params.value | default('') }}"{% endif %}>
             <input type="text" class="govcy-text-input {% if params.error %} govcy-text-input-error{% endif %}" 
                     id="{{ params.id }}"
                     name="{{ params.name }}"

package/src/njk/elements/progressList.njk

@@ -0,0 +1,185 @@
+{# progressList 
+ @param {string} lang The language used. Can be 'en','el'. Optional. 
+ @param {int} current The current step number. 
+ @param {int} total The total number of steps. 
+ @param {array} labels if defined, will render the labels inside the progress list. Optional.
+    i.e. `[
+            {"text":{"en":"Step 1","el":"Βήμα 1"} },
+            {"text":{"en":"Step 2","el":"Βήμα 2"} },
+            {"text":{"en":"Step 3","el":"Βήμα 3"} },
+            {"text":{"en":"Step 4","el":"Βήμα 4"} },
+            {"text":{"en":"Step 5","el":"Βήμα 5"} }
+        ]`
+ @param {boolean} showSteps. Whether to show the steps or not. Optional, default is false. Can be true,false
+ @param {string} completedLabel The completed label text. Optional. Will escape text. Example `{en:"Completed",el:"Ολοκληρώθηκε"}`
+ @param {string} notCompletedLabel The not completed label text. Optional. Will escape text. Example `{en:"Not completed",el:"Δεν ολοκληρώθηκε"}`
+ @param {string} stepLabel The step label text. Optional. Will escape text. Example `{en:"Step",el:"Βήμα"}`
+ @param {string} ofLabel The of label text. Optional. Will escape text. Example `{en:"of",el:"από"}`
+ @param {string} id The label id. Will escape text  
+ @param {string} classes Additional classes to add to the outer div. Optional 
+ @returns govcy progressList html 
+#}
+{% macro progressList(params) -%}
+{#- Import localizer from utilities -#}
+{%- from "../utilities/govcyUtilities.njk" import govcyLocalizeContent, govcyLangAttribute -%}
+{#- set default values -#}
+{%- set showSteps = params.showSteps | default(false) -%}
+{%- set current = params.current | int -%}
+{%- set total = params.total | int -%}
+{#- set completed label -#}
+{%- if params.completedLabel -%}
+    {%- set completedLabel -%} {{- govcyLocalizeContent(params.completedLabel, params.lang) -}}{%- endset -%}
+{%- else -%}
+    {%- set completedLabel -%} {{- govcyLocalizeContent({en:"Completed",el:"Ολοκληρώθηκε"}, params.lang) -}}{%- endset -%}
+{%- endif -%}
+{#- set not completed label -#}
+{%- if params.notCompletedLabel -%}
+    {%- set notCompletedLabel -%} {{- govcyLocalizeContent(params.notCompletedLabel, params.lang) -}}{%- endset -%}
+{%- else -%}
+    {%- set notCompletedLabel -%} {{- govcyLocalizeContent({en:"Not completed",el:"Δεν ολοκληρώθηκε"}, params.lang) -}}{%- endset -%}
+{%- endif -%}
+{#- set step label -#}
+{%- if params.stepLabel -%}
+    {%- set stepLabel -%} {{- govcyLocalizeContent(params.stepLabel, params.lang) -}}{%- endset -%}
+{%- else -%}
+    {%- set stepLabel -%} {{- govcyLocalizeContent({en:"Step",el:"Βήμα"}, params.lang) -}}{%- endset -%}
+{%- endif -%}
+{#- set of label -#}
+{%- if params.ofLabel -%}
+    {%- set ofLabel -%} {{- govcyLocalizeContent(params.ofLabel, params.lang) -}}{%- endset -%}
+{%- else -%}
+    {%- set ofLabel -%} {{- govcyLocalizeContent({en:"of",el:"από"}, params.lang) -}}{%- endset -%}
+{%- endif -%}
+{#- current and total are mandatory -#}
+{%- if current and total %}
+{#- style to be removed after included in the UDS -#}
+<style>
+.govcy-step-indicator {
+    margin-left: 0px;
+    margin-right: 0px;
+    margin-bottom: .5rem !important;
+}
+.govcy-step-indicator__segments {
+    display: flex;
+    list-style: none;
+    margin: 0px;
+    padding: 0px;
+}
+
+.govcy-step-indicator__segment {
+    flex: 1 1 0%;
+    margin-left: 1px;
+    margin-right: 1px;
+    max-width: 15rem;
+    min-height: 0.5rem;
+    position: relative;
+}
+
+.govcy-step-indicator__segment::after {
+    background-color: #A6A8AA;
+    content: "";
+    display: block;
+    height: 0.5rem;
+    left: 0px;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+}
+.govcy-step-indicator__segment--complete::after {
+    background-color: #254355;
+}
+.govcy-step-indicator__segment--current::after {
+    background-color: #1D70B8;
+}
+
+/* Label */
+.govcy-step-indicator__label {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    text-align: center;
+    color: #6d6e70;
+    line-height:1.1rem;
+    margin-top: calc(0.75rem);
+}
+
+.govcy-step-indicator__segment--complete .govcy-step-indicator__label {
+    color: #254355;
+}
+
+.govcy-step-indicator__segment--current .govcy-step-indicator__label {
+    color: #1D70B8;
+    font-weight: 700;
+}
+
+@media (min-width: 0px) {
+    .govcy-step-indicator__counter {
+        margin-bottom: .5rem !important;
+    }
+    .govcy-step-indicator__current-counter {
+        width: 24px;
+        height: 24px;
+        border:1px solid #1D70B8;
+        background: #1D70B8;
+        color:#fff;
+        border-radius: 9999px;
+        font-weight: 600;
+        display:inline-block;
+        text-align:center;
+    }
+    /* Hide label on small screens */
+    .govcy-step-indicator__label {
+        display:none;
+    }
+}
+@media (min-width: 768px) {
+    .govcy-step-indicator__counter {
+        font-size:20px;
+        line-height:19px;
+        margin-bottom: .5rem !important;
+    }
+    .govcy-step-indicator__current-counter {
+        border-radius:9999px;
+        border:1px solid #1D70B8;
+        background: #1D70B8;
+        color:#fff;
+        padding:10px;
+        line-height:19px;
+        font-weight:600;
+        font-size:20px;
+        display:inline-block;
+        width:40px;
+        height:40px;
+        text-align:center;
+    }
+    /* Show label on big screens */
+    .govcy-step-indicator__label {
+        display:block;
+    }
+}
+</style>
+    {%- if showSteps %}
+        <div {% if params.id %}id="{{ params.id }}" {% endif %}class="govcy-step-indicator{% if params.classes %} {{ params.classes }}{% endif %}"{{ govcyLangAttribute(params.lang) }}>
+            <ol class="govcy-step-indicator__segments">
+        {%- for i in range(1, total + 1) %}
+                <li class="govcy-step-indicator__segment{% if i < current %} govcy-step-indicator__segment--complete{% endif %}{% if i == current %} govcy-step-indicator__segment--current{% endif %}"{% if i == current %} aria-current="step"{% endif %}>
+                    {%- if params.steps and params.steps[i - 1] and params.steps[i - 1].text -%}
+                    <span class="govcy-step-indicator__label">
+                        {{ govcyLocalizeContent(params.steps[i - 1].text, params.lang) }} 
+                            {%- if i < current %}
+                                <span class="govcy-visually-hidden">{{ completedLabel }}</span>
+                            {%- elif i > current %}
+                                <span class="govcy-visually-hidden">{{ notCompletedLabel }}</span>
+                            {%- endif %}
+                    </span>
+                    {%- endif %}
+                </li>
+        {%- endfor %}
+            </ol>
+        </div>
+    {%- endif %}
+    <div {% if params.id %}id="{{ params.id }}-counter" {% endif %}class="govcy-step-indicator__counter"{{ govcyLangAttribute(params.lang) }}>
+        <span class="govcy-visually-hidden">{{ stepLabel }} </span>
+        <span class="govcy-step-indicator__current-counter">{{ current }}</span> {{ ofLabel }} {{ total }}
+    </div>
+{%- endif %}
+{%- endmacro %}

package/src/njk/elements/radios.njk

@@ -78,7 +78,7 @@
 {%- endif -%}
 {#- render radio -#}
 <div class="govcy-radio{% if isInline %} govcy-d-sm-inline-block{% endif %}">
-    <input class="govcy-radio-input" name="{{ params.name }}" value="{{item.value}}" type="radio" id="{{ optionId }}" {% if item.hint%} aria-describedby="{{hintId}}"{% endif %}{% if item.conditionalElements %} data-aria-controls="{{conditionalElementsId}}"{% endif %}>
+    <input class="govcy-radio-input" name="{{ params.name }}"{% if params.value == item.value %} checked{% endif %} value="{{item.value}}" type="radio" id="{{ optionId }}" {% if item.hint%} aria-describedby="{{hintId}}"{% endif %}{% if item.conditionalElements %} data-aria-controls="{{conditionalElementsId}}"{% endif %}>
     <label class="govcy-label" for="{{ optionId }}">{% if item.conditionalElements %} <span class="govcy-visually-hidden">{{conditionalLabel}}</span>{% endif %}{{ label | safe }}</label>
     {#- {% call govcyLabel({label:label, for:optionId, isPrimary:false, isHTML:true, lang:lang}) %}{% endcall %} -#}
     {% call hint({hint:item.hint, id:hintId, lang:lang}) %}{% endcall %}
@@ -98,10 +98,11 @@
         </div>
 {%- endif -%}
 {%- endmacro %}
-{# radio 
+{# radios
  @param {object} legend The legend text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`
  @param {string} id The id prefix for the options. Will escape text. 
  @param {string} name The name used in radio. Will escape text. 
+ @param {string} value The selected radio option. Optional.
  @param {string} hint The hint text. Optional. Will escape text 
  @param {boolean} isPageHeading Is the label also the page heading? Optional, default is false. Can be true,false 
  @param {boolean} isInline Are the radios inline type? Optional, default is false. Can be true,false 

package/src/njk/elements/select.njk

@@ -3,6 +3,7 @@
  @param {object} label The label text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`  
  @param {string} id The id of the select. Will escape text. 
  @param {string} name The name of the select. Will escape text. 
+ @param {string} value The value of the input. The matching value in the `items` array will be selected. Optional
  @param {array} items The array of items to turn onto select options. Array contains object with `text` and `value`. i.e. `{"text":{en:"Cyprus",el:"Κύπρος"},"value":"cy"}` 
  @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 
@@ -50,7 +51,7 @@
             {# for each item render checkbox item #}
             {%- for item in params.items -%}
                 {%- if item.text -%}
-                    <option value="{{ item.value }}">{{ govcyLocalizeContent(item.text, params.lang) }}</option>
+                    <option value="{{ item.value }}"{% if params.value == item.value %} selected{% endif %}>{{ govcyLocalizeContent(item.text, params.lang) }}</option>
                 {%- endif -%}
             {%- endfor -%}
         </select>

package/src/njk/elements/textArea.njk

@@ -2,6 +2,8 @@
  @param {object} label The label text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`  
  @param {string} id The input id. Will escape text 
  @param {string} name The input name. Will escape text. Optional
+ @param {string} value The value of the input. Whether to escape the value depends on `params.isValueEscaped`. Optional
+ @param {string} isValueEscaped Whether the value will be escaped. Optional, default is true.
  @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 {boolean} isSpellcheck true renders nothing, false renders spellcheck="false"? Optional, default is true. Can be true,false 
@@ -24,6 +26,7 @@
 {%- from "./label.njk" import label -%}
 {%- from "./errorMessage.njk" import errorMessage -%}
 {#- set default values -#}
+{%- set isValueEscaped = params.isValueEscaped | default(true) -%}
 {%- set isPageHeading = params.isPageHeading | default(false) -%}
 {%- set isSpellcheck = params.isSpellcheck | default(false) -%}
 {%- set autocomplete = params.autocomplete | default(false) -%}
@@ -55,7 +58,7 @@
         {#- render error message -#}
         {% call errorMessage({message:params.error,id:errorId, lang:params.lang}) %}{% endcall %}
         {#- render input -#}
-        <textarea id="{{params.id}}"{% if params.name %} name="{{ params.name }}"{% endif %} rows="{{rows}}" {{ inputSpellcheck | safe }} {{ inputAutocomplete | safe }} class="govcy-text-area{% if params.error %} govcy-text-area-error{% endif %}"{% if params.hint or params.error or params.characterCount%} aria-describedby="{%- if params.characterCount -%}{{charactercountId}}{% endif %}{% if params.hint %} {{hintId}}{% endif %}{% if params.error %} {{errorId}}{% endif %}"{% endif %}></textarea>
+        <textarea id="{{params.id}}"{% if params.name %} name="{{ params.name }}"{% endif %} rows="{{rows}}" {{ inputSpellcheck | safe }} {{ inputAutocomplete | safe }} class="govcy-text-area{% if params.error %} govcy-text-area-error{% endif %}"{% if params.hint or params.error or params.characterCount%} aria-describedby="{%- if params.characterCount -%}{{charactercountId}}{% endif %}{% if params.hint %} {{hintId}}{% endif %}{% if params.error %} {{errorId}}{% endif %}"{% endif %}>{% if params.value is defined %}{{ params.value | default('') if isValueEscaped else params.value | safe }}{% endif %}</textarea>
         {# character count #}
         {%- if params.characterCount -%}
             {%- set charactercountType = params.characterCount.type | default('char') -%}

package/src/njk/elements/textInput.njk

@@ -2,6 +2,8 @@
  @param {object} label The label text. Will escape text. Example `{en:"Content",el:"Περιεχομένο"}`  
  @param {string} id The input id. Will escape text 
  @param {string} name The input name. Will escape text. Optional
+ @param {string} value The value of the input. Whether to escape the value depends on `params.isValueEscaped`. Optional
+ @param {string} isValueEscaped Whether the value will be escaped. Optional, default is true.
  @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 {boolean} isSpellcheck true renders nothing, false renders spellcheck="false"? Optional, default is true. Can be true,false 
@@ -22,6 +24,7 @@
 {%- from "./label.njk" import label -%}
 {%- from "./errorMessage.njk" import errorMessage -%}
 {#- set default values -#}
+{%- set isValueEscaped = params.isValueEscaped | default(true) -%}
 {%- set isPageHeading = params.isPageHeading | default(false) -%}
 {%- set isSpellcheck = params.isSpellcheck | default(false) -%}
 {%- set type = params.type | default("text") -%}
@@ -66,7 +69,7 @@
         {#- render error message -#}
         {% call errorMessage({message:params.error,id:errorId, lang:params.lang}) %}{% endcall %}
         {#- render input -#}
-        <input id="{{params.id}}"{% if params.name %} name="{{ params.name }}"{% endif %} {{ inputType | safe }} {{ inputSpellcheck | safe }} {{ inputAutocomplete | safe }} class="govcy-text-input{% if params.fixedWidth %} {{ fixedWidthClass }}{% endif %}{% if params.error %} govcy-text-input-error{% endif %}"{% if params.hint or params.error%} aria-describedby="{% if params.hint %}{{hintId}} {% endif %}{% if params.error %}{{errorId}} {% endif %}"{% endif %}>
+        <input id="{{params.id}}"{% if params.value is defined %} value="{{ params.value | default('') if isValueEscaped else params.value | safe }}"{% endif %} {% if params.name %} name="{{ params.name }}"{% endif %} {{ inputType | safe }} {{ inputSpellcheck | safe }} {{ inputAutocomplete | safe }} class="govcy-text-input{% if params.fixedWidth %} {{ fixedWidthClass }}{% endif %}{% if params.error %} govcy-text-input-error{% endif %}"{% if params.hint or params.error%} aria-describedby="{% if params.hint %}{{hintId}} {% endif %}{% if params.error %}{{errorId}} {% endif %}"{% endif %}>
     {% endcall %}
 {%- endif -%}
 {%- endmacro %}

package/src/njk/govcyElement.njk

@@ -25,7 +25,8 @@ 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', 'details', 'stepByStepStatic'] -%}
+    'panel', 'datePicker','dateInput', 'taskList', 'errorSummary', 'details', 'stepByStepStatic',
+    'progressList'] -%}
 {%- set macroCallerBlocks = ['formControl','form','fieldset'] -%}
 {%- macro govcyElement(component, params) -%}
     {#- Simple blocks -#}