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

package/lib/components/select/GDSSelect.js

@@ -0,0 +1,340 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const js_1 = require("@formio/js");
+const lodash_1 = __importDefault(require("lodash"));
+const Select = js_1.Components.components.select;
+class GDSSelect extends Select {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    constructor(component, options, data) {
+        super(component, options, data);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    init() {
+        var _a, _b;
+        // Clear searchField so Form.io does not trigger server-side queries while
+        // the complete reference dataset is filtered locally.
+        if (this.component.searchField) {
+            this.component.searchField = '';
+        }
+        // Reference-data selects are filtered locally. Do not truncate the
+        // alphabetically sorted API response before local filtering.
+        const url = (_a = this.component.data) === null || _a === void 0 ? void 0 : _a.url;
+        if (typeof url === 'string' && url.includes('/v2/entities/') && ((_b = this.component.limit) !== null && _b !== void 0 ? _b : 100) < 1000) {
+            this.component.disableLimit = true;
+        }
+        return super.init();
+    }
+    /**
+     * Patch the choices.js instance attached to this component so that every
+     * search query uses a plain case-insensitive substring filter instead of
+     * fuse.js. The patch is applied lazily the first time items are set so
+     * that `this.choices` is guaranteed to exist.
+     */
+    _patchChoicesSearch() {
+        const choices = this.choices;
+        if (!choices || choices === this._gdsSearchPatchedChoices) {
+            return;
+        }
+        this._gdsSearchPatchedChoices = choices;
+        // Replace the internal search method with a substring implementation.
+        choices._searchChoices = (needle) => {
+            var _a;
+            if (!needle) {
+                choices._isSearching = false;
+                choices._currentValue = '';
+                choices._store.dispatch({ type: 'ACTIVATE_CHOICES', active: true });
+                return 0;
+            }
+            const normalizedNeedle = needle.trim().toLowerCase().replace(/\s{2,}/g, ' ');
+            if (!normalizedNeedle || normalizedNeedle === choices._currentValue) {
+                return null;
+            }
+            const words = normalizedNeedle.split(/\s+/).filter(Boolean);
+            const allChoices = choices._store.choices;
+            const matched = [];
+            const prefix = [];
+            const contains = [];
+            for (const choice of allChoices) {
+                const renderedLabel = ((_a = choice.choiceEl) === null || _a === void 0 ? void 0 : _a.textContent) || '';
+                const label = [choice.label, renderedLabel, choice.value]
+                    .map((value) => String(value !== null && value !== void 0 ? value : '').toLowerCase())
+                    .join(' ');
+                const allMatch = words.every((w) => label.includes(w));
+                if (!allMatch) {
+                    choice.active = false;
+                    choice.rank = 0;
+                    continue;
+                }
+                if (label.startsWith(normalizedNeedle)) {
+                    prefix.push(choice);
+                }
+                else {
+                    contains.push(choice);
+                }
+            }
+            // Prefix matches first, then other substring matches, both sorted
+            // alphabetically within their group.
+            prefix.sort((a, b) => a.label.localeCompare(b.label));
+            contains.sort((a, b) => a.label.localeCompare(b.label));
+            [...prefix, ...contains].forEach((choice, index) => {
+                matched.push({
+                    item: choice,
+                    score: 0,
+                    rank: index + 1,
+                });
+            });
+            choices._isSearching = true;
+            choices._currentValue = normalizedNeedle;
+            choices._store.dispatch({ type: 'FILTER_CHOICES', results: matched });
+            return matched.length;
+        };
+    }
+    /**
+     * True when this select's `filter` is interpolated from other form data
+     * (e.g. a port list filtered by the selected country).
+     */
+    get _gdsHasDynamicFilter() {
+        return typeof this.component.filter === 'string' && this.component.filter.includes('{{');
+    }
+    /** The interpolated filter, used to detect when the dependency changed. */
+    _gdsCurrentFilterKey() {
+        return this._gdsHasDynamicFilter ? this.interpolate(this.component.filter) : '';
+    }
+    // Preserve Form.io's item lifecycle, then patch the Choices instance that
+    // Form.io has populated.
+    setItems(items, fromSearch) {
+        super.setItems(items, fromSearch);
+        if (!fromSearch) {
+            this._gdsFilterKey = this._gdsCurrentFilterKey();
+        }
+        this._patchChoicesSearch();
+    }
+    // Also patch on attach in case setItems was already called.
+    attach(element) {
+        const result = super.attach(element);
+        this._patchChoicesSearch();
+        return Promise.resolve(result);
+    }
+    // Form.io only refreshes a URL select with an interpolated filter when the
+    // component is redrawn, or when it transitions hidden -> visible (see the
+    // `visible` setter in Select). A select that is already visible when its
+    // filter dependency changes is therefore never re-fetched, leaving stale
+    // options (e.g. changing country a second time keeps the first country's
+    // ports). checkComponentConditions runs for every component on every data
+    // change, so compare the interpolated filter here and reload when it moves.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    checkComponentConditions(data, flags, row) {
+        var _a;
+        const visible = super.checkComponentConditions(data, flags, row);
+        // `_gdsFilterKey` is only set once options have been loaded, so this
+        // cannot force a premature fetch for a lazyLoad select that the user has
+        // not opened yet. Note `active` is deliberately not checked: Form.io's
+        // `visible` setter calls triggerUpdate() without calling activate(), so
+        // a loaded lazyLoad select can still report active === false.
+        if (visible &&
+            this.component.dataSrc === 'url' &&
+            this._gdsHasDynamicFilter &&
+            this._gdsFilterKey !== undefined &&
+            !this.loading) {
+            const filterKey = this._gdsCurrentFilterKey();
+            if (filterKey !== this._gdsFilterKey) {
+                // Record before requesting so a change that arrives while the
+                // request is in flight does not queue a duplicate fetch.
+                this._gdsFilterKey = filterKey;
+                (_a = this.triggerUpdate) === null || _a === void 0 ? void 0 : _a.call(this, null, true);
+            }
+        }
+        return visible;
+    }
+    // formio's redraw() and activate() both call triggerUpdate() -> updateItems(null, false),
+    // which would cause a URL re-fetch even when items are already cached. We suppress
+    // the re-fetch when the cache is valid, but we must still re-populate choices.js
+    // with the cached items. This matters because activate() calls setLoadingItem()
+    // before triggerUpdate(), which replaces the choices list with a spinner. Without
+    // re-calling setItems the spinner stays even though data is already available.
+    //
+    // Filter-dependency changes (refreshOn) always arrive with forceUpdate=true via
+    // Select.refresh(), so they bypass this guard and fetch fresh data as expected.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    updateItems(searchInput, forceUpdate) {
+        if (!forceUpdate &&
+            !searchInput &&
+            this.component.dataSrc === 'url' &&
+            this._gdsFilterKey === this._gdsCurrentFilterKey() &&
+            Array.isArray(this.downloadedResources) &&
+            this.downloadedResources.length > 0 &&
+            !this.loading) {
+            // Re-populate choices from the cache so any spinner set by activate()
+            // is replaced with the actual items, then resolve the loaded promise.
+            this.setItems(this.downloadedResources, false);
+            return;
+        }
+        return super.updateItems(searchInput, forceUpdate);
+    }
+    /**
+     * Override getOptionTemplate to escape item data values with `_.escape()`
+     * before interpolating them into the template.
+     *
+     * ## Security model
+     *
+     * formio 5.x `getOptionTemplate` (ListComponent) passes the assembled template
+     * string through `DOMPurify.sanitize()` — which internally calls
+     * `DOMParser.parseFromString()`. With thousands of reference-data items this
+     * is the dominant performance cost (~300 ms).
+     *
+     * We replace that post-hoc sanitization with pre-interpolation escaping:
+     *
+     * 1. Every string value in the item object is passed through `_.escape()`
+     *    **before** it is substituted into the template. `_.escape` converts
+     *    `< > & " '` to their HTML-entity equivalents (`&lt;` etc.).
+     * 2. The assembled template string — now containing only safe entity-encoded
+     *    text where user/API data appears — is returned directly without any
+     *    further DOMPurify call.
+     *
+     * ### Why this is equivalent security to DOMPurify for text-content templates
+     *
+     * A template such as `<span>{{ item.name }}</span>` embeds the API value as
+     * the *text content* of an element. The only injection vector is:
+     *
+     * ```
+     * item.name = '</span><script>alert(1)</script>'
+     * ```
+     *
+     * After `_.escape()` this becomes:
+     *
+     * ```
+     * &lt;/span&gt;&lt;script&gt;alert(1)&lt;/script&gt;
+     * ```
+     *
+     * The browser renders this as literal text, never as markup or script.
+     * DOMPurify would produce the same effective result by stripping the tags.
+     *
+     * ### Limitation — attribute / URL contexts
+     *
+     * `_.escape()` is **not** sufficient if the template places a value inside
+     * an HTML attribute or a URL (e.g. `<a href="{{ item.url }}">`).
+     * HTML-entity encoding does not prevent `javascript:` injection in `href`.
+     * If any form schema introduces such a template, this override must be
+     * revisited and either DOMPurify reinstated or the attribute value
+     * sanitized separately.
+     *
+     * Current GDS templates are all text-content only (`<span>{{ item.name }}</span>`
+     * etc.) so this limitation does not apply today.
+     */
+    getOptionTemplate(data, value, index) {
+        var _a, _b;
+        if (!this.component.template) {
+            return String((_a = data.label) !== null && _a !== void 0 ? _a : '');
+        }
+        const options = { noeval: true, data: {} };
+        // Escape all top-level string values in the item before interpolation.
+        // Nested objects are left as-is; they would need to be accessed via
+        // item.nested.field in the template, which is not used by current schemas.
+        const escapedData = lodash_1.default.mapValues(data, (v) => (typeof v === 'string' ? lodash_1.default.escape(v) : v));
+        const template = this.component.template
+            ? this.interpolate(this.component.template, { item: escapedData }, options)
+            : String((_b = data.label) !== null && _b !== void 0 ? _b : '');
+        // Store template data for reference-field selected-value display.
+        // The `reference` flag is not in the generated CoreSelectComponent type
+        // but is a valid runtime formio property.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const isReference = Boolean(this.component.reference);
+        const rawId = value === null || value === void 0 ? void 0 : value._id;
+        const templateValue = isReference && rawId != null
+            ? String(rawId)
+            : value;
+        if (templateValue != null &&
+            !lodash_1.default.isObject(templateValue) &&
+            options.data.item) {
+            this.templateData[templateValue] = options.data.item;
+        }
+        if (lodash_1.default.isNumber(index)) {
+            this.templateData[index] = options.data.item;
+        }
+        return template;
+    }
+    /**
+     * Override itemTemplate to skip the redundant outer `sanitize()` call that
+     * formio 5.x `ListComponent.itemTemplate` wraps around `getOptionTemplate()`.
+     *
+     * ## Why the outer sanitize is now safe to skip
+     *
+     * Our `getOptionTemplate` override (above) pre-escapes all API data values
+     * with `_.escape()` before they are interpolated into the template. The
+     * assembled string therefore contains no unescaped HTML from variable sources.
+     * Running DOMPurify on that string a second time is idempotent — it produces
+     * the same output — but costs a full `DOMParser.parseFromString` call per item.
+     *
+     * This override handles only the common URL-datasource path (object data with
+     * a component template). All other branches — primitives, arrays, read-only,
+     * selectData, reference fields — fall through to `super.itemTemplate` which
+     * retains its full sanitize() call unchanged.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    itemTemplate(data, value, index) {
+        if (typeof data === 'object' &&
+            data !== null &&
+            !Array.isArray(data) &&
+            this.component.template) {
+            // getOptionTemplate pre-escapes data values — no further sanitize needed.
+            const template = this.getOptionTemplate(data, value, index);
+            if (!template) {
+                return this.sanitize(JSON.stringify(data), this.shouldSanitizeValue);
+            }
+            // Strip tags to extract the visible label text for i18n translation,
+            // then re-embed it. This mirrors ListComponent.itemTemplate exactly.
+            const label = template.replace(/<\/?[^>]+(>|$)/g, '');
+            if (!label)
+                return template;
+            return template.replace(label, this.t(label, { _userInput: true }));
+        }
+        // Fall back to the full Select → ListComponent chain for all other cases.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return super.itemTemplate(data, value, index);
+    }
+    // Disable Choices' fuzzy search and use the deterministic matcher above.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    choicesOptions() {
+        const options = super.choicesOptions();
+        // Force Choices.js client-side searching.
+        // The instance method is replaced in _patchChoicesSearch with the GDS matcher.
+        options.searchChoices = true;
+        options.searchFloor = 0;
+        options.searchFields = ['label', 'value'];
+        // If searchResultLimit is configured too low, raise it to at least limit or 100.
+        const itemLimit = this.component.limit || 100;
+        if (typeof options.searchResultLimit === 'number' && options.searchResultLimit < itemLimit) {
+            options.searchResultLimit = itemLimit;
+        }
+        if (typeof options.renderChoiceLimit === 'number' && options.renderChoiceLimit < itemLimit) {
+            options.renderChoiceLimit = itemLimit;
+        }
+        // formio's default valueComparer is lodash.isEqual — a deep recursive comparison.
+        // choices.js calls this for every choice in the store when resolving which item
+        // is selected (setChoices / _isSelectedByValue). With thousands of object values
+        // {id, name} this produces O(n × depth) recursive comparisons (~5 s).
+        //
+        // For reference-data objects we compare by `id` alone: each port/currency/etc.
+        // has a unique id, so two values are equal iff their ids match — O(1) per call.
+        // Primitives fall back to ===, matching choices.js's own default.
+        options.valueComparer = (a, b) => {
+            if (a === b)
+                return true;
+            if (a == null || b == null)
+                return false;
+            if (typeof a === 'object' && typeof b === 'object') {
+                const aId = a.id;
+                const bId = b.id;
+                if (aId !== undefined && bId !== undefined) {
+                    return aId === bId;
+                }
+            }
+            return false;
+        };
+        return options;
+    }
+}
+exports.default = GDSSelect;

package/lib/components/selectboxes/GDSCheckBoxes.d.ts

@@ -1,5 +1,8 @@
-declare const SelectBoxes: import("formiojs").ClassWithEditForm<typeof import("formiojs/types/components/_classes/field/field").Field>;
+import { SelectBoxesComponent } from '../../types';
+declare const SelectBoxes: any;
 export default class GDSCheckBoxes extends SelectBoxes {
-    render(): any;
+    component: SelectBoxesComponent;
+    render(): string;
 }
 export {};
+//# sourceMappingURL=GDSCheckBoxes.d.ts.map

package/lib/components/selectboxes/GDSCheckBoxes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GDSCheckBoxes.d.ts","sourceRoot":"","sources":["../../../src/components/selectboxes/GDSCheckBoxes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAGnD,QAAA,MAAM,WAAW,KAAoC,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,WAAW;IAE1C,SAAS,EAAE,oBAAoB,CAAC;IAEjC,MAAM,IAAI,MAAM;CAS1B"}

package/lib/components/selectboxes/GDSCheckBoxes.js

@@ -1,43 +1,17 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
-var formiojs_1 = require("formiojs");
-var Field = formiojs_1.Components.components.field;
-var SelectBoxes = formiojs_1.Components.components.selectboxes;
-var GDSCheckBoxes = /** @class */ (function (_super) {
-    __extends(GDSCheckBoxes, _super);
-    function GDSCheckBoxes() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    GDSCheckBoxes.prototype.render = function () {
-        // @ts-ignore
+const js_1 = require("@formio/js");
+const Field = js_1.Components.components.field;
+const SelectBoxes = js_1.Components.components.selectboxes;
+class GDSCheckBoxes extends SelectBoxes {
+    render() {
         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,
         }));
-    };
-    return GDSCheckBoxes;
-}(SelectBoxes));
+    }
+}
 exports.default = GDSCheckBoxes;

package/lib/components/time/GDSTimeComponent.d.ts

@@ -1,18 +1,21 @@
-declare const Time: import("formiojs").ClassWithEditForm<typeof import("formiojs/types/components/_classes/widgetcomponent/widgetComponent").WidgetComponent>;
+import { CoreTimeComponent } from '../../types';
+declare const Time: any;
 export default class GDSTimeComponent extends Time {
     static MAX_LENGTH: number;
-    private refs;
-    private component;
-    private loadRefs;
-    private checkComponentValidity;
-    private updateValue;
+    component: CoreTimeComponent;
+    refs: {
+        hour: HTMLInputElement;
+        minute: HTMLInputElement;
+    };
+    data: Record<string, unknown>;
     private timeHelper;
-    attach(element: any): any;
+    attach(element: any): Promise<void>;
     setErrorClasses(elements: any, dirty: any, hasError: any): void;
-    addInputError(message: any, dirty: boolean, element: any): void;
+    addInputError(message: any, dirty: any, element: any): void;
     removeInputError(elements: any): void;
     getValue(): string;
-    setValue(value: any, flags: any): boolean;
-    render(): any;
+    setValue(value: any, _flags: any): boolean;
+    render(): string;
 }
 export {};
+//# sourceMappingURL=GDSTimeComponent.d.ts.map

package/lib/components/time/GDSTimeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GDSTimeComponent.d.ts","sourceRoot":"","sources":["../../../src/components/time/GDSTimeComponent.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGhD,QAAA,MAAM,IAAI,KAA6B,CAAC;AAExC,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,IAAI;IAC9C,OAAc,UAAU,SAAK;IAGrB,SAAS,EAAE,iBAAiB,CAAC;IAG7B,IAAI,EAAE;QACV,IAAI,EAAE,gBAAgB,CAAC;QACvB,MAAM,EAAE,gBAAgB,CAAC;KAC5B,CAAC;IAGM,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEtC,OAAO,CAAC,UAAU,CAAgC;IAI3C,MAAM,CAAC,OAAO,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC;IAiCnC,eAAe,CAAC,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,GAAG,IAAI;IAM/D,aAAa,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,GAAG,IAAI;IAO3D,gBAAgB,CAAC,QAAQ,EAAE,GAAG,GAAG,IAAI;IAKrC,QAAQ,IAAI,MAAM;IAUlB,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAG,OAAO;IAU1C,MAAM,IAAI,MAAM;CAM1B"}

package/lib/components/time/GDSTimeComponent.js

@@ -1,111 +1,86 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var formiojs_1 = require("formiojs");
-var moment_1 = __importDefault(require("moment"));
-var TimeHelper_1 = __importDefault(require("../util/TimeHelper"));
-var Field = formiojs_1.Components.components.field;
-var Time = formiojs_1.Components.components.time;
-// @ts-ignore
-var GDSTimeComponent = /** @class */ (function (_super) {
-    __extends(GDSTimeComponent, _super);
-    function GDSTimeComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.timeHelper = new TimeHelper_1.default();
-        return _this;
+const js_1 = require("@formio/js");
+const moment_1 = __importDefault(require("moment"));
+const TimeHelper_1 = __importDefault(require("../util/TimeHelper"));
+const Field = js_1.Components.components.field;
+const Time = js_1.Components.components.time;
+class GDSTimeComponent extends Time {
+    constructor() {
+        super(...arguments);
+        this.timeHelper = new TimeHelper_1.default();
     }
-    GDSTimeComponent.prototype.attach = function (element) {
-        var _this = this;
+    // element typed as `any` to match the base component attach(element: any) override signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    attach(element) {
         this.loadRefs(element, {
             hour: 'single',
             minute: 'single',
         });
-        this.addEventListener(this.refs.hour, 'input', function () {
-            _this.timeHelper.checkAndValidateHour(_this.refs.hour);
-            _this.setPristine(false);
-            _this.checkComponentValidity(_this.data, true);
-            _this.updateValue(null, { modified: true });
+        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.addEventListener(this.refs.minute, 'input', function () {
-            _this.timeHelper.checkAndValidateMinutes(_this.refs.minute);
-            _this.setPristine(false);
-            _this.checkComponentValidity(_this.data, 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.addEventListener(this.refs.hour, 'keypress', function (evt) {
-            _this.timeHelper.preventNonNumericKeyPress(evt);
+        this.addEventListener(this.refs.hour, 'keypress', (evt) => {
+            this.timeHelper.preventNonNumericKeyPress(evt);
         });
-        this.addEventListener(this.refs.minute, 'keypress', function (evt) {
-            _this.timeHelper.preventNonNumericKeyPress(evt);
+        this.addEventListener(this.refs.minute, 'keypress', (evt) => {
+            this.timeHelper.preventNonNumericKeyPress(evt);
         });
-        return _super.prototype.attach.call(this, element);
-    };
-    GDSTimeComponent.prototype.setErrorClasses = function (elements, dirty, hasError) {
-        // @ts-ignore
-        _super.prototype.setErrorClasses.call(this, __spreadArray([this.refs.hour, this.refs.minute], elements, true), dirty, hasError);
-    };
-    // @ts-ignore
-    GDSTimeComponent.prototype.addInputError = function (message, dirty, element) {
-        // @ts-ignore
-        _super.prototype.addInputError.call(this, message, dirty, [this.refs.hour, this.refs.minute]);
-        // @ts-ignore
-        _super.prototype.addInputError.call(this, message, dirty, element);
-    };
-    GDSTimeComponent.prototype.removeInputError = function (elements) {
-        // @ts-ignore
-        _super.prototype.removeInputError.call(this, [this.refs.hour, this.refs.minute]);
-        // @ts-ignore
-        _super.prototype.removeInputError.call(this, elements);
-    };
-    GDSTimeComponent.prototype.getValue = function () {
+        return super.attach(element);
+    }
+    // elements typed as `any` to match the base Day.setErrorClasses(elements: any, ...) override signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    setErrorClasses(elements, dirty, hasError) {
+        super.setErrorClasses([this.refs.hour, this.refs.minute, ...elements], dirty, hasError);
+    }
+    // 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, @typescript-eslint/explicit-module-boundary-types
+    addInputError(message, dirty, element) {
+        super.addInputError(message, dirty, [this.refs.hour, this.refs.minute]);
+        super.addInputError(message, dirty, element);
+    }
+    // elements typed as `any` to match the base Component.removeInputError(elements: any) signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    removeInputError(elements) {
+        super.removeInputError([this.refs.hour, this.refs.minute]);
+        super.removeInputError(elements);
+    }
+    getValue() {
         if (!this.refs.hour.value || !this.refs.minute.value) {
             return '';
         }
-        var value = "".concat(this.refs.hour.value, ":").concat(this.refs.minute.value);
+        const value = `${this.refs.hour.value}:${this.refs.minute.value}`;
         return (0, moment_1.default)(value, this.component.format).format(this.component.dataFormat);
-    };
-    GDSTimeComponent.prototype.setValue = function (value, flags) {
+    }
+    // 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, @typescript-eslint/explicit-module-boundary-types
+    setValue(value, _flags) {
         if (this.refs.hour && this.refs.minute && value) {
-            var parts = value.split(':');
+            const parts = value.split(':');
             this.refs.hour.value = parts[0];
             this.refs.minute.value = parts[1];
             return true;
         }
         return false;
-    };
-    GDSTimeComponent.prototype.render = function () {
+    }
+    render() {
         return Field.prototype.render.call(this, this.renderTemplate('time', {
-            hour: _super.prototype.getValue.call(this).split(':')[0],
-            minute: _super.prototype.getValue.call(this).split(':')[1],
+            hour: super.getValue().split(':')[0],
+            minute: super.getValue().split(':')[1],
         }));
-    };
-    GDSTimeComponent.MAX_LENGTH = 2;
-    return GDSTimeComponent;
-}(Time));
+    }
+}
+GDSTimeComponent.MAX_LENGTH = 2;
 exports.default = GDSTimeComponent;

package/lib/components/util/TimeHelper.d.ts

@@ -1,7 +1,9 @@
+import { InputElementLike } from '../../types';
 export default class TimeHelper {
     static MAX_LENGTH: number;
-    checkAndValidateMinutes(element: any): void;
-    checkAndValidateHour(element: any): void;
-    preventNonNumericKeyPress(evt: any): void;
-    validateDateInput(element: any, length: number): void;
+    checkAndValidateMinutes(element: InputElementLike): void;
+    checkAndValidateHour(element: InputElementLike): void;
+    preventNonNumericKeyPress(evt: KeyboardEvent): void;
+    validateDateInput(element: InputElementLike, length: number): void;
 }
+//# sourceMappingURL=TimeHelper.d.ts.map

package/lib/components/util/TimeHelper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeHelper.d.ts","sourceRoot":"","sources":["../../../src/components/util/TimeHelper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,OAAO,OAAO,UAAU;IAE3B,OAAc,UAAU,SAAK;IAEtB,uBAAuB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAexD,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAgBrD,yBAAyB,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI;IAMnD,iBAAiB,CAAC,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;CAK5E"}