@ukhomeoffice/formio-gds-template 3.0.0-bravo → 3.0.0-delta

package/lib/components/select/GDSSelect.d.ts

@@ -49,6 +49,7 @@ export default class GDSSelect extends Select {
     protected _gdsSearchPatchedChoices?: ChoicesInstance;
     protected _gdsFilterKey?: string;
     constructor(component?: any, options?: any, data?: any);
+    normalizeSingleValue(value: any): any;
     init(): any;
     /**
      * Patch the choices.js instance attached to this component so that every

package/lib/components/select/GDSSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GDSSelect.d.ts","sourceRoot":"","sources":["../../../src/components/select/GDSSelect.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"GDSSelect.d.ts","sourceRoot":"","sources":["../../../src/components/select/GDSSelect.ts"],"names":[],"mappings":"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"}

package/lib/components/select/GDSSelect.js

@@ -11,6 +11,13 @@ class GDSSelect extends Select {
     constructor(component, options, data) {
         super(component, options, data);
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    normalizeSingleValue(value) {
+        if (this.component.dataType === 'object' && value === '[object Object]') {
+            return this.emptyValue;
+        }
+        return super.normalizeSingleValue(value);
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     init() {
         var _a, _b;

package/lib/index.d.ts

@@ -60,6 +60,9 @@ declare const _default: {
             fieldset: {
                 form: string;
             };
+            html: {
+                form: string;
+            };
             label: {
                 form: string;
             };

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBAIE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBAIE"}

package/lib/templates/gds/file/form.ejs.js

@@ -126,33 +126,31 @@ __p += '\n<div>\n    <video class="video" autoplay="true" ref="videoPlayer"></vi
  } ;
 __p += '\n';
  } ;
-__p += '\n<div class="govuk-!-margin-top-2">\n    ';
- ctx.statuses.forEach(function(status) { ;
-__p += '\n    <div class="file ' +
-((__t = (ctx.statuses.status === 'error' ? ' has-error' : '')) == null ? '' : __t) +
-'">\n        <div class="govuk-grid-row">\n            <div class="govuk-grid-column-one-quarter"><button class="govuk-button govuk-button--warning govuk-!-margin-bottom-2" ref="fileStatusRemove">Remove</button></div>\n            <div class="fileName govuk-label govuk-grid-column-one-quarter">' +
-((__t = (status.originalName)) == null ? '' : __t) +
-'</div>\n            <div class="fileSize govuk-label govuk-grid-column-one-quarter">' +
+__p += '\n<div class="govuk-!-margin-top-2">\n';
+ (ctx.filesToUpload || []).forEach(function(status) { ;
+__p += '\n  <div class="file ' +
+((__t = (status.status === 'error' ? 'has-error' : '')) == null ? '' : __t) +
+'">\n    <div class="govuk-grid-row">\n      <div class="govuk-grid-column-one-quarter">\n        <button\n          type="button"\n          class="govuk-button govuk-button--warning govuk-!-margin-bottom-2"\n          ref="fileToSyncRemove">\n          Remove\n        </button>\n      </div>\n      <div class="fileName govuk-label govuk-grid-column-one-quarter">\n        ' +
+((__t = (status.originalName || status.name)) == null ? '' : __t) +
+'\n      </div>\n      <div class="fileSize govuk-label govuk-grid-column-one-quarter">\n        ' +
 ((__t = (ctx.fileSize(status.size))) == null ? '' : __t) +
-'</div>\n            <div class="govuk-grid-column-one-quarter">\n            ';
+'\n      </div>\n      <div class="govuk-grid-column-one-quarter">\n        ';
  if (status.status === 'progress') { ;
-__p += '\n                <div class="govuk-label">' +
-((__t = (status.progress)) == null ? '' : __t) +
+__p += '\n          <div class="govuk-label">\n            ' +
+((__t = (status.progress || 0)) == null ? '' : __t) +
 '% ' +
 ((__t = (ctx.t('Complete'))) == null ? '' : __t) +
-'</div>\n            ';
- } else if (status.status === 'error'){ ;
-__p += '\n                <div class="govuk-error-message"> ' +
-((__t = (ctx.t(status.message))) == null ? '' : __t) +
-'</div>\n            ';
+'\n          </div>\n        ';
+ } else if (status.status === 'error') { ;
+__p += '\n          <div class="govuk-error-message">\n            ' +
+((__t = (ctx.t(status.message || 'Upload failed'))) == null ? '' : __t) +
+'\n          </div>\n        ';
  } else { ;
-__p += '\n                 <div class="bg-' +
-((__t = (status.status)) == null ? '' : __t) +
-'">' +
-((__t = (ctx.t(status.message))) == null ? '' : __t) +
-'</div>\n            ';
+__p += '\n          <div class="govuk-label">\n            ' +
+((__t = (ctx.t(status.message || 'Pending upload'))) == null ? '' : __t) +
+'\n          </div>\n        ';
  } ;
-__p += '\n            </div>\n        </div>\n    </div>\n    ';
+__p += '\n      </div>\n\n    </div>\n  </div>\n';
  }) ;
 __p += '\n</div>\n';
  if (!ctx.component.storage || ctx.support.hasWarning) { ;

package/lib/templates/gds/html/form.ejs.js

@@ -0,0 +1,33 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default=function(ctx) {
+var __t, __p = '', __j = Array.prototype.join;
+function print() { __p += __j.call(arguments, '') }
+__p += '<' +
+((__t = (ctx.tag)) == null ? '' : __t) +
+'\n  class="formio-component-htmlelement ' +
+((__t = (ctx.component.className)) == null ? '' : __t) +
+'"\n  ref="html"\n  ';
+ ctx.attrs.forEach(function(attr) { ;
+__p += '\n    ' +
+((__t = (attr.attr)) == null ? '' : __t) +
+'="' +
+((__t = (attr.value)) == null ? '' : __t) +
+'"\n  ';
+ }); ;
+__p += '\n>\n';
+ if (ctx.builder) { ;
+__p += '\n  ' +
+((__t = (ctx.content)) == null ? '' : __t) +
+'\n';
+ } ;
+__p += '\n';
+ if (!ctx.singleTags || ctx.singleTags.indexOf(ctx.tag) === -1) { ;
+__p += '\n</' +
+((__t = (ctx.tag)) == null ? '' : __t) +
+'>\n';
+ } ;
+
+return __p
+}

package/lib/templates/gds/html/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    form: string;
+};
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/lib/templates/gds/html/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/templates/gds/html/index.ts"],"names":[],"mappings":";;;AAEA,wBAAwB"}

package/lib/templates/gds/html/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const form_ejs_1 = __importDefault(require("./form.ejs"));
+exports.default = { form: form_ejs_1.default };

package/lib/templates/gds/index.d.ts

@@ -58,6 +58,9 @@ declare const _default: {
     fieldset: {
         form: string;
     };
+    html: {
+        form: string;
+    };
     label: {
         form: string;
     };

package/lib/templates/gds/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/gds/index.ts"],"names":[],"mappings":"AA0BA,OAAO,gBAAgB,CAAC;;oBAeJ,MAAM,QAAQ,MAAM,GAAG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AADjD,wBA6CE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/gds/index.ts"],"names":[],"mappings":"AA2BA,OAAO,gBAAgB,CAAC;;oBAeJ,MAAM,QAAQ,MAAM,GAAG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AADjD,wBA8CE"}

package/lib/templates/gds/index.js

@@ -19,6 +19,7 @@ const file_1 = __importDefault(require("./file"));
 const fieldset_1 = __importDefault(require("./fieldset"));
 const iconClass_1 = __importDefault(require("./iconClass"));
 const input_1 = __importDefault(require("./input"));
+const html_1 = __importDefault(require("./html"));
 const label_1 = __importDefault(require("./label"));
 const message_1 = __importDefault(require("./message"));
 const panel_1 = __importDefault(require("./panel"));
@@ -70,6 +71,7 @@ exports.default = {
     field: unwrap(field_1.default),
     file: unwrap(file_1.default),
     fieldset: unwrap(fieldset_1.default),
+    html: unwrap(html_1.default),
     label: unwrap(label_1.default),
     message: unwrap(message_1.default),
     panel: unwrap(panel_1.default),

package/lib/templates/gds/input/form.ejs.js

@@ -20,22 +20,26 @@ __p += '\n<' +
 ((__t = (ctx.input.ref ? ctx.input.ref : 'input')) == null ? '' : __t) +
 '"\nstyle="margin-bottom: 10px"\n';
  for (var attr in ctx.input.attr) { ;
-__p += '\n' +
-((__t = (attr)) == null ? '' : __t) +
-'="' +
+__p += '\n  ';
+ if (attr === 'class') { ;
+__p += '\n    class="' +
 ((__t = (ctx.input.attr[attr])) == null ? '' : __t);
- if (attr==='class') { if (ctx.input.type === 'textarea'){ ;
-__p += ' govuk-textarea ';
+ if (ctx.input.type === 'textarea') { ;
+__p += ' govuk-textarea';
  } else { ;
-__p += ' govuk-input ';
-} } ;
-__p += '"\n';
- } ;
-__p += '\nid="' +
-((__t = (ctx.instance.id)) == null ? '' : __t) +
-'-' +
-((__t = (ctx.component.key)) == null ? '' : __t) +
-'"\n>' +
+__p += ' govuk-input';
+ } ;
+__p += '"\n  ';
+ } else if (attr !== 'id') { ;
+__p += '\n    ' +
+((__t = (attr)) == null ? '' : __t) +
+'="' +
+((__t = (ctx.input.attr[attr])) == null ? '' : __t) +
+'"\n  ';
+ } ;
+__p += '\n';
+ } ;
+__p += '\n>' +
 ((__t = (ctx.input.content)) == null ? '' : __t) +
 '\n</' +
 ((__t = (ctx.input.type)) == null ? '' : __t) +

package/lib/templates/index.d.ts

@@ -58,6 +58,9 @@ declare const _default: {
         fieldset: {
             form: string;
         };
+        html: {
+            form: string;
+        };
         label: {
             form: string;
         };

package/lib/templates/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAEE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAEE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/formio-gds-template",
-  "version": "3.0.0-bravo",
+  "version": "3.0.0-delta",
   "description": "Gov UK design system formio templates — upgraded to @formio/js@5.x",
   "publishConfig": {
     "access": "public"

package/src/components/select/GDSSelect.spec.ts

@@ -460,6 +460,31 @@ describe('GDSSelect', () => {
         /* eslint-enable @typescript-eslint/no-explicit-any */
     });
 
+    it('normalizes legacy stringified object values to an unselected object value', () => {
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        const selectComponent = new GDSSelect({
+            type: 'select',
+            key: 'agency',
+            dataSrc: 'url',
+            dataType: 'object',
+            valueProperty: '',
+            template: '<span>{{ item.name }}</span>',
+            data: { url: '/v2/entities/partneragency' },
+        }, {});
+
+        assert.deepStrictEqual(
+            (selectComponent as any).normalizeSingleValue('[object Object]'),
+            {}
+        );
+        const agency = { id: 1, name: 'Care Quality Commission' };
+        assert.strictEqual(
+            (selectComponent as any).normalizeSingleValue(agency),
+            agency,
+            'real object values must remain unchanged'
+        );
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+    });
+
     it('valueComparer uses id equality for objects instead of deep comparison', () => {
         const selectComponent = new GDSSelect({
             type: 'select',

package/src/components/select/GDSSelect.ts

@@ -63,6 +63,14 @@ export default class GDSSelect extends Select {
         super(component, options, data);
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    normalizeSingleValue(value: any): any {
+        if (this.component.dataType === 'object' && value === '[object Object]') {
+            return this.emptyValue;
+        }
+        return super.normalizeSingleValue(value);
+    }
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     init(): any {
         // Clear searchField so Form.io does not trigger server-side queries while

package/src/templates/gds/file/form.ejs

@@ -92,24 +92,42 @@
 {% } %}
 {% } %}
 <div class="govuk-!-margin-top-2">
-    {% ctx.statuses.forEach(function(status) { %}
-    <div class="file {{ctx.statuses.status === 'error' ? ' has-error' : ''}}">
-        <div class="govuk-grid-row">
-            <div class="govuk-grid-column-one-quarter"><button class="govuk-button govuk-button--warning govuk-!-margin-bottom-2" ref="fileStatusRemove">Remove</button></div>
-            <div class="fileName govuk-label govuk-grid-column-one-quarter">{{status.originalName}}</div>
-            <div class="fileSize govuk-label govuk-grid-column-one-quarter">{{ctx.fileSize(status.size)}}</div>
-            <div class="govuk-grid-column-one-quarter">
-            {% if (status.status === 'progress') { %}
-                <div class="govuk-label">{{status.progress}}% {{ctx.t('Complete')}}</div>
-            {% } else if (status.status === 'error'){ %}
-                <div class="govuk-error-message"> {{ctx.t(status.message)}}</div>
-            {% } else { %}
-                 <div class="bg-{{status.status}}">{{ctx.t(status.message)}}</div>
-            {% } %}
-            </div>
-        </div>
+{% (ctx.filesToUpload || []).forEach(function(status) { %}
+  <div class="file {{status.status === 'error' ? 'has-error' : ''}}">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-one-quarter">
+        <button
+          type="button"
+          class="govuk-button govuk-button--warning govuk-!-margin-bottom-2"
+          ref="fileToSyncRemove">
+          Remove
+        </button>
+      </div>
+      <div class="fileName govuk-label govuk-grid-column-one-quarter">
+        {{status.originalName || status.name}}
+      </div>
+      <div class="fileSize govuk-label govuk-grid-column-one-quarter">
+        {{ctx.fileSize(status.size)}}
+      </div>
+      <div class="govuk-grid-column-one-quarter">
+        {% if (status.status === 'progress') { %}
+          <div class="govuk-label">
+            {{status.progress || 0}}% {{ctx.t('Complete')}}
+          </div>
+        {% } else if (status.status === 'error') { %}
+          <div class="govuk-error-message">
+            {{ctx.t(status.message || 'Upload failed')}}
+          </div>
+        {% } else { %}
+          <div class="govuk-label">
+            {{ctx.t(status.message || 'Pending upload')}}
+          </div>
+        {% } %}
+      </div>
+
     </div>
-    {% }) %}
+  </div>
+{% }) %}
 </div>
 {% if (!ctx.component.storage || ctx.support.hasWarning) { %}
 <div class="govuk-grid-row">

package/src/templates/gds/html/form.ejs

@@ -0,0 +1,13 @@
+<{{ctx.tag}}
+  class="formio-component-htmlelement {{ctx.component.className}}"
+  ref="html"
+  {% ctx.attrs.forEach(function(attr) { %}
+    {{attr.attr}}="{{attr.value}}"
+  {% }); %}
+>
+{% if (ctx.builder) { %}
+  {{ctx.content}}
+{% } %}
+{% if (!ctx.singleTags || ctx.singleTags.indexOf(ctx.tag) === -1) { %}
+</{{ctx.tag}}>
+{% } %}

package/src/templates/gds/html/index.ts

@@ -0,0 +1,3 @@
+import form from './form.ejs';
+
+export default { form };

package/src/templates/gds/index.ts

@@ -14,6 +14,7 @@ import file from './file';
 import fieldset from './fieldset';
 import iconClass from './iconClass';
 import input from './input';
+import html from './html';
 import label from './label';
 import message from './message';
 import panel from './panel';
@@ -68,6 +69,7 @@ export default {
     field: unwrap(field),
     file: unwrap(file),
     fieldset: unwrap(fieldset),
+    html: unwrap(html),
     label: unwrap(label),
     message: unwrap(message),
     panel: unwrap(panel),

package/src/templates/gds/input/form.ejs

@@ -10,9 +10,12 @@
 ref="{{ctx.input.ref ? ctx.input.ref : 'input'}}"
 style="margin-bottom: 10px"
 {% for (var attr in ctx.input.attr) { %}
-{{attr}}="{{ctx.input.attr[attr]}}{% if (attr==='class') { if (ctx.input.type === 'textarea'){ %} govuk-textarea {% } else { %} govuk-input {%} } %}"
+  {% if (attr === 'class') { %}
+    class="{{ctx.input.attr[attr]}}{% if (ctx.input.type === 'textarea') { %} govuk-textarea{% } else { %} govuk-input{% } %}"
+  {% } else if (attr !== 'id') { %}
+    {{attr}}="{{ctx.input.attr[attr]}}"
+  {% } %}
 {% } %}
-id="{{ctx.instance.id}}-{{ctx.component.key}}"
 >{{ctx.input.content}}
 </{{ctx.input.type}}>
 {% if (ctx.component.showCharCount) { %}