@ukhomeoffice/formio-gds-template 2.0.1 → 3.0.0-alpha

package/src/components/datetime/GDSDatetimeComponent.ts

@@ -1,34 +1,54 @@
-import {Components} from 'formiojs';
-import FormioUtils from 'formiojs/utils';
+import { Components } from '@formio/js';
+import { Utils as FormioUtils } from '@formio/js';
 import * as _ from 'lodash';
-import * as moment from 'moment';
+import moment from 'moment';
 import TimeHelper from '../util/TimeHelper';
+import { GDSDatetimeComponentSchema } from '../../types';
 
 const Field = Components.components.field;
 const Day = Components.components.day;
 
-// @ts-ignore
 export default class GDSDatetimeComponent extends Day {
 
-    get format() {
+    // Narrow the inherited `component: any` to the GDS datetime schema type.
+    // @formio/core provides the DayComponent + DateTimeComponent shapes;
+    // GDSDatetimeComponentSchema extends them with hour/minute fields.
+    declare component: GDSDatetimeComponentSchema;
+
+    // Narrow inherited base-class properties from `any` / `{}` to precise types.
+    // `declare` emits no runtime code — it only refines the type in this subclass.
+    declare refs: {
+        hour: HTMLInputElement;
+        minute: HTMLInputElement;
+        day: HTMLInputElement;
+        month: HTMLInputElement;
+        year: HTMLInputElement;
+        input: HTMLInputElement[];
+    };
+    declare dataValue: string;
+    declare data: Record<string, unknown>;
+    declare validators: string[];
+    declare shouldDisabled: boolean;
+    declare triggerChange: () => void;
+
+    get format(): string {
         return 'DD-MM-YYYY';
     }
-    // @ts-ignore
-    get defaultValue() {
+
+    get defaultValue(): string {
         let defaultValue = this.component.defaultValue;
         if (!defaultValue && this.component.defaultDate) {
             defaultValue = FormioUtils.getDateSetting(this.component.defaultDate);
             defaultValue = defaultValue ? moment(defaultValue).format() : '';
         }
-        return defaultValue;
+        return defaultValue ?? '';
     }
 
-    // @ts-ignore
-    get emptyValue() {
+    get emptyValue(): null {
         return null;
     }
 
-    get parts() {
+    get parts(): { day: string | null; month: string | null; year: string | null; hour: string | null; minute: string | null } {
         return {
             day: this.getFieldValue('day'),
             month: this.getFieldValue('month'),
@@ -38,25 +58,18 @@ export default class GDSDatetimeComponent extends Day {
         };
     }
 
-    private refs: any;
-    private component: any;
-    private updateValue: any;
-    private renderField: any;
-    private inputDefinition: any;
-    private checkComponentValidity: any;
-    private triggerChange: any;
-
     private timeHelper: TimeHelper = new TimeHelper();
 
-    public attach(element: any) {
-        this.loadRefs(element, {hour: 'single', minute: 'single'});
+    // element typed as `any` to match the base Day.attach(element: any) override signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public attach(element: any): Promise<void> {
+        this.loadRefs(element, { hour: 'single', minute: 'single' });
+
         this.addEventListener(this.refs.hour, 'input', () => {
             this.timeHelper.checkAndValidateHour(this.refs.hour);
             this.setPristine(false);
             this.checkComponentValidity(this.data, true);
-            this.updateValue(null, {
-                modified: true,
-            });
+            this.updateValue(null, { modified: true });
             this.triggerChange();
         });
 
@@ -64,9 +77,7 @@ export default class GDSDatetimeComponent extends Day {
             this.timeHelper.checkAndValidateMinutes(this.refs.minute);
             this.setPristine(false);
             this.checkComponentValidity(this.data, true);
-            this.updateValue(null, {
-                modified: true,
-            });
+            this.updateValue(null, { modified: true });
             this.triggerChange();
         });
 
@@ -94,42 +105,46 @@ export default class GDSDatetimeComponent extends Day {
             this.timeHelper.validateDateInput(this.refs.month, 2);
         });
 
-
         return superAttach;
     }
 
-    public init() {
+    public init(): void {
         super.init();
-        this.validators = this.validators.filter((v) => v !== 'day').concat(['date']);
+        // @formio/js@5.x: this.validators is not pre-populated by the base class; guard before filtering
+        this.validators = (this.validators || []).filter((v) => v !== 'day').concat(['date']);
 
-        this.component.maxDate = this.component.datePicker.maxDate;
-        this.component.minDate = this.component.datePicker.minDate;
+        this.component.maxDate = this.component.datePicker?.maxDate ?? undefined;
+        this.component.minDate = this.component.datePicker?.minDate ?? undefined;
         this.component.suffix = null;
 
-        this.component.fields.day.required = this.component.validate.required;
-        this.component.fields.month.required = this.component.validate.required;
-        this.component.fields.year.required = this.component.validate.required;
+        this.component.fields.day.required = this.component.validate?.required;
+        this.component.fields.month.required = this.component.validate?.required;
+        this.component.fields.year.required = this.component.validate?.required;
         this.component.fields.hour = {
-            type: 'number', placeholder: 'HH',
-            required: this.component.validate.required,
+            type: 'number',
+            placeholder: 'HH',
+            required: this.component.validate?.required,
         };
         this.component.fields.minute = {
-            type: 'number', placeholder: 'MM',
-            required: this.component.validate.required,
+            type: 'number',
+            placeholder: 'MM',
+            required: this.component.validate?.required,
         };
     }
 
-    public setErrorClasses(elements, dirty, hasError) {
-        // @ts-ignore
-        super.setErrorClasses( [this.refs.hour, this.refs.minute, ...elements], dirty, hasError);
+    // elements typed as `any` to match the base Day.setErrorClasses(elements: any, ...) override signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public setErrorClasses(elements: any, dirty: any, hasError: any): void {
+        super.setErrorClasses([this.refs.hour, this.refs.minute, ...elements], dirty, hasError);
     }
 
-    public removeInputError(elements) {
-        // @ts-ignore
+    // elements typed as `any` to match the base Component.removeInputError(elements: any) signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public removeInputError(elements: any): void {
         super.removeInputError([this.refs.hour, this.refs.minute, ...elements]);
     }
 
-    public render() {
+    public render(): string {
         return Field.prototype.render.call(this, this.renderTemplate('datetime', {
             component: this.component,
             dataValue: this.dataValue,
@@ -143,8 +158,10 @@ export default class GDSDatetimeComponent extends Day {
         }));
     }
 
-    public getDate(value) {
-        const defaults = [];
+    // value typed as `any` to match the base Day.getDate(value: any): null | string signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public getDate(value: any): string | null {
+        const defaults: Array<string | number | undefined> = [];
         const [DAY, MONTH, YEAR, HOUR, MINUTE] = [0, 1, 2, 3, 4];
         const defaultValue = value || this.component.defaultValue;
 
@@ -156,35 +173,37 @@ export default class GDSDatetimeComponent extends Day {
                 defaults[YEAR] = defaultDate.format('YYYY');
                 defaults[HOUR] = defaultDate.format('HH');
                 defaults[MINUTE] = defaultDate.format('mm');
-            } catch (e) {
+            } catch {
                 // ignored
             }
         }
 
-        let day: any = this.processField('day', defaults, DAY);
-        let month: any = this.processField('month', defaults, MONTH);
-        let year: any = this.processField('year', defaults, YEAR);
-        let hour: any = this.processField('hour', defaults, HOUR);
-        let minute: any = this.processField('minute', defaults, MINUTE);
+        const day: number = this.processField('day', defaults, DAY);
+        const month: number = this.processField('month', defaults, MONTH);
+        const year: number = this.processField('year', defaults, YEAR);
+        const hour: number = this.processField('hour', defaults, HOUR);
+        const minute: number = this.processField('minute', defaults, MINUTE);
 
         if (!day && !month && !year && (!hour && !minute)) {
             return null;
         }
 
-        day = day.toString().padStart(2, 0);
-        month = month.toString().padStart(2, 0);
-        year = year.toString().padStart(4, 0);
-        hour = hour.toString().padStart(2, 0);
-        minute = minute.toString().padStart(2, 0);
+        const dayStr = day.toString().padStart(2, '0');
+        const monthStr = month.toString().padStart(2, '0');
+        const yearStr = year.toString().padStart(4, '0');
+        const hourStr = hour.toString().padStart(2, '0');
+        const minuteStr = minute.toString().padStart(2, '0');
 
-        const toMoment = moment(`${year}-${month}-${day} ${hour}:${minute}`, 'YYYY-MM-DD HH:mm');
+        const toMoment = moment(`${yearStr}-${monthStr}-${dayStr} ${hourStr}:${minuteStr}`, 'YYYY-MM-DD HH:mm');
         return toMoment.format();
     }
 
-    public getFieldValue(name) {
+    // name typed as `any` to match the base Day.getFieldValue(name: any): number signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public getFieldValue(name: any): string | null {
         if (this.dataValue && this.dataValue !== 'Invalid date') {
             try {
-                let val = null;
+                let val: string | null = null;
                 const date = moment(this.dataValue, 'YYYY-MM-DD HH:mm');
 
                 switch (name) {
@@ -205,27 +224,27 @@ export default class GDSDatetimeComponent extends Day {
                         break;
                 }
                 return val;
-            } catch (e) {
+            } catch {
                 return null;
             }
         }
         return null;
     }
 
-    public boolValue(value) {
+    public boolValue(value: unknown): boolean {
         if (_.isBoolean(value)) {
             return value;
-        }
-        else if (_.isString(value)) {
+        } else if (_.isString(value)) {
             return (value.toLowerCase() === 'true');
-        }
-        else {
+        } else {
             return !!value;
         }
     }
-    public setValueAt(index, value) {
-        // temporary solution to avoid input reset
-        // on invalid date.
+
+    // value typed as `any` to match the base Day.setValueAt(index: number, value: any) signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public setValueAt(index: number, value: any): void {
+        // temporary solution to avoid input reset on invalid date.
         if (!value || value === 'Invalid date') {
             return;
         }
@@ -243,51 +262,48 @@ export default class GDSDatetimeComponent extends Day {
             if (this.refs.hour) {
                 this.refs.hour.value = date.format('HH');
             }
-
             if (this.refs.minute) {
                 this.refs.minute.value = date.format('mm');
             }
         }
-
     }
 
-    public getValueAt(index) {
-        // @ts-ignore
+    public getValueAt(index: number): string | null {
+        // `date` is a public getter declared on DayComponent: get date(): string | null
         const date = this.date;
         if (date) {
             this.refs.input[index].value = date;
             return this.refs.input[index].value;
-        }
-        else {
+        } else {
             this.refs.input[index].value = '';
             return null;
         }
     }
 
-    public normalizeValue(value) {
+    // value typed as `any` to match the base Component.normalizeValue(value: any): any signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public normalizeValue(value: any): any {
         return value;
     }
 
-    public validateRequired(setting, value) {
-        const {day, month, year, minute, hour} = this.parts;
+    // setting/value typed as `any` to match the base Day.validateRequired(setting: any, value: any) signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public validateRequired(setting: any, value: any): boolean {
+        const { day, month, year, minute, hour } = this.parts;
 
-        if (this.component.validate.required && (!day || parseInt(day, 10) === 0)) {
+        if (this.component.validate?.required && (!day || parseInt(day, 10) === 0)) {
             return false;
         }
-
-        if (this.component.validate.required && (!month || parseInt(month, 10) === 0)) {
+        if (this.component.validate?.required && (!month || parseInt(month, 10) === 0)) {
             return false;
         }
-
-        if (this.component.validate.required && (!year || parseInt(year, 10) === 0)) {
+        if (this.component.validate?.required && (!year || parseInt(year, 10) === 0)) {
             return false;
         }
-
-        if (this.component.validate.required && ((this.refs.minute && this.refs.minute.value === '') || !minute)) {
+        if (this.component.validate?.required && (this.refs.minute.value === '' || !minute)) {
             return false;
         }
-
-        if (this.component.validate.required && ((this.refs.hour && this.refs.hour.value === '') || !hour)) {
+        if (this.component.validate?.required && (this.refs.hour.value === '' || !hour)) {
             return false;
         }
 
@@ -297,13 +313,15 @@ export default class GDSDatetimeComponent extends Day {
         return !this.isEmpty(value);
     }
 
-    private processField(field: string, defaults: any[], fieldIndex: number) {
-        let fieldValue = this.refs[`${field}`] ? parseInt(this.refs[`${field}`].value, 10) : undefined;
+    private processField(field: string, defaults: Array<string | number | undefined>, fieldIndex: number): number {
+        const refKey = field as keyof typeof this.refs;
+        const ref = this.refs[refKey];
+        const inputRef = ref instanceof HTMLInputElement ? ref : undefined;
+        let fieldValue: number | undefined = inputRef ? parseInt(inputRef.value, 10) : undefined;
         if (fieldValue === undefined || _.isNaN(fieldValue)) {
-            fieldValue = defaults[fieldIndex] && !_.isNaN(defaults[fieldIndex]) ? defaults[fieldIndex] : 0;
+            fieldValue = defaults[fieldIndex] && !_.isNaN(defaults[fieldIndex]) ? Number(defaults[fieldIndex]) : 0;
         }
         return fieldValue;
-
     }
 
 }

package/src/components/selectboxes/GDSCheckBoxes.ts

@@ -1,20 +1,19 @@
-import {Components} from 'formiojs';
+import { Components } from '@formio/js';
+import { SelectBoxesComponent } from '../../types';
+
 const Field = Components.components.field;
 const SelectBoxes = Components.components.selectboxes;
 
 export default class GDSCheckBoxes extends SelectBoxes {
-    public render() {
-         // @ts-ignore
+    // Narrow the inherited `component: any` using the @formio/core SelectBoxesComponent schema.
+    declare component: SelectBoxesComponent;
+
+    public render(): string {
         return Field.prototype.render.call(this, this.renderTemplate('selectboxes', {
-            // @ts-ignore
             input: this.inputInfo,
-            // @ts-ignore
             inline: this.component.inline,
-            // @ts-ignore
             values: this.component.values,
-            // @ts-ignore
             value: this.dataValue,
-            // @ts-ignore
             row: this.row,
         }));
     }

package/src/components/time/GDSTimeComponent.ts

@@ -1,23 +1,31 @@
-import {Components} from 'formiojs';
-import * as moment from 'moment';
+import { Components } from '@formio/js';
+import moment from 'moment';
 import TimeHelper from '../util/TimeHelper';
+import { CoreTimeComponent } from '../../types';
 
 const Field = Components.components.field;
 const Time = Components.components.time;
 
-// @ts-ignore
 export default class GDSTimeComponent extends Time {
     public static MAX_LENGTH = 2;
 
-    private refs: any;
-    private component: any;
-    private loadRefs: any;
-    private checkComponentValidity: any;
-    private updateValue: any;
+    // Narrow the inherited `component: any` using the @formio/core TimeComponent schema.
+    declare component: CoreTimeComponent;
+
+    // Narrow `refs: {}` to the specific refs loaded by this component.
+    declare refs: {
+        hour: HTMLInputElement;
+        minute: HTMLInputElement;
+    };
+
+    // Narrow `data: any` to a typed record.
+    declare data: Record<string, unknown>;
 
     private timeHelper: TimeHelper = new TimeHelper();
 
-    public attach(element) {
+    // element typed as `any` to match the base component attach(element: any) override signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public attach(element: any): Promise<void> {
         this.loadRefs(element, {
             hour: 'single',
             minute: 'single',
@@ -27,47 +35,48 @@ export default class GDSTimeComponent extends Time {
             this.timeHelper.checkAndValidateHour(this.refs.hour);
             this.setPristine(false);
             this.checkComponentValidity(this.data, true);
-            this.updateValue(null, {modified: true});
+            this.updateValue(null, { modified: true });
         });
 
         this.addEventListener(this.refs.minute, 'input', () => {
             this.timeHelper.checkAndValidateMinutes(this.refs.minute);
             this.setPristine(false);
             this.checkComponentValidity(this.data, true);
-            this.updateValue(null, {modified: true});
+            this.updateValue(null, { modified: true });
         });
 
-        this.addEventListener(this.refs.hour, 'keypress', (evt) => {
+        this.addEventListener(this.refs.hour, 'keypress', (evt: KeyboardEvent) => {
             this.timeHelper.preventNonNumericKeyPress(evt);
         });
 
-        this.addEventListener(this.refs.minute, 'keypress', (evt) => {
+        this.addEventListener(this.refs.minute, 'keypress', (evt: KeyboardEvent) => {
             this.timeHelper.preventNonNumericKeyPress(evt);
         });
+
         return super.attach(element);
     }
 
-    public setErrorClasses(elements, dirty, hasError) {
-        // @ts-ignore
-        super.setErrorClasses( [this.refs.hour, this.refs.minute, ...elements], dirty, hasError);
+    // elements typed as `any` to match the base Day.setErrorClasses(elements: any, ...) override signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public setErrorClasses(elements: any, dirty: any, hasError: any): void {
+        super.setErrorClasses([this.refs.hour, this.refs.minute, ...elements], dirty, hasError);
     }
 
-    // @ts-ignore
-    public addInputError(message: any, dirty: boolean, element: any): void {
-        // @ts-ignore
+    // message/dirty/element typed as `any` to match the base Component.addInputError(message: any, dirty: any, elements: any) signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public addInputError(message: any, dirty: any, element: any): void {
         super.addInputError(message, dirty, [this.refs.hour, this.refs.minute]);
-        // @ts-ignore
         super.addInputError(message, dirty, element);
     }
 
-    public removeInputError(elements) {
-        // @ts-ignore
+    // elements typed as `any` to match the base Component.removeInputError(elements: any) signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public removeInputError(elements: any): void {
         super.removeInputError([this.refs.hour, this.refs.minute]);
-        // @ts-ignore
         super.removeInputError(elements);
     }
 
-    public getValue() {
+    public getValue(): string {
         if (!this.refs.hour.value || !this.refs.minute.value) {
             return '';
         }
@@ -75,10 +84,11 @@ export default class GDSTimeComponent extends Time {
         return moment(value, this.component.format).format(this.component.dataFormat);
     }
 
-    public setValue(value: any, flags: any) {
-
+    // value/flags typed as `any` to match the base Component.setValue(value: any, flags: any) override signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public setValue(value: any, _flags: any): boolean {
         if (this.refs.hour && this.refs.minute && value) {
-            const parts = value.split(':');
+            const parts = (value as string).split(':');
             this.refs.hour.value = parts[0];
             this.refs.minute.value = parts[1];
             return true;
@@ -86,7 +96,7 @@ export default class GDSTimeComponent extends Time {
         return false;
     }
 
-    public render() {
+    public render(): string {
         return Field.prototype.render.call(this, this.renderTemplate('time', {
             hour: super.getValue().split(':')[0],
             minute: super.getValue().split(':')[1],

package/src/components/util/TimeHelper.ts

@@ -1,8 +1,10 @@
+import { InputElementLike } from '../../types';
+
 export default class TimeHelper {
 
     public static MAX_LENGTH = 2;
 
-    public checkAndValidateMinutes(element: any): void {
+    public checkAndValidateMinutes(element: InputElementLike): void {
         if (element.value) {
             if (element.value.length > TimeHelper.MAX_LENGTH) {
                 element.value = element.value.slice(0, 2);
@@ -17,8 +19,7 @@ export default class TimeHelper {
         }
     }
 
-    public checkAndValidateHour(element: any): void {
-
+    public checkAndValidateHour(element: InputElementLike): void {
         if (element.value) {
             if (element.value.length > TimeHelper.MAX_LENGTH) {
                 element.value = element.value.slice(0, 2);
@@ -34,13 +35,13 @@ export default class TimeHelper {
         }
     }
 
-    public preventNonNumericKeyPress(evt: any) {
+    public preventNonNumericKeyPress(evt: KeyboardEvent): void {
         if (evt.which !== 8 && evt.which !== 0 && evt.which < 48 || evt.which > 57) {
             evt.preventDefault();
         }
     }
 
-    validateDateInput(element: any, length: number) {
+    public validateDateInput(element: InputElementLike, length: number): void {
         if (element.value && element.value.length > length) {
             element.value = element.value.slice(0, length);
         }

package/src/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+    const content: string;
+    export default content;
+}

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

@@ -1,5 +1,5 @@
 {%
-let columnWidth;
+var columnWidth;
 var columnLength = ctx.columns.length;
 switch(columnLength) {
 case 1:

package/src/templates/gds/iconClass.ts

@@ -1,4 +1,4 @@
-export default (iconset, name, spinning) => {
+export default (iconset: string, name: string, spinning: boolean): string => {
     if (iconset === 'fa') {
         switch (name) {
             case 'save':