@formio/vpat 2.6.1

package/lib/displays/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Webform_1 = __importDefault(require("../Webform"));
+const Wizard_1 = __importDefault(require("../Wizard"));
+exports.default = {
+    webform: Webform_1.default,
+    wizard: Wizard_1.default,
+};

package/lib/index.d.ts

@@ -0,0 +1,65 @@
+declare const _default: {
+    builders: {
+        webform: any;
+    };
+    components: {
+        address: typeof import("./components/address/Address").default;
+        component: any;
+        button: typeof import("./components/button/Button").default;
+        checkbox: typeof import("./components/checkbox/Checkbox").default;
+        columns: typeof import("./components/columns/Columns").default;
+        container: typeof import("./components/container/Container").default;
+        content: typeof import("./components/content/Content").default;
+        currency: typeof import("./components/currency/Currency").default;
+        day: typeof import("./components/day/Day").default;
+        dynamicWizard: typeof import("./components/dynamicwizard/DynamicWizard").default;
+        datagrid: typeof import("./components/datagrid/DataGrid").default;
+        datamap: typeof import("./components/datamap/DataMap").default;
+        datatable: typeof import("./components/datatable/DataTable").default;
+        datetime: typeof import("./components/datetime/DateTime").default;
+        editgrid: typeof import("./components/editgrid/EditGrid").default;
+        email: typeof import("./components/email/Email").default;
+        fieldset: typeof import("./components/fieldset/Fieldset").default;
+        file: typeof import("./components/file/File").default;
+        form: typeof import("./components/form/Form").default;
+        hidden: typeof import("./components/hidden/Hidden").default;
+        htmlelement: typeof import("./components/html/HTML").default;
+        input: any;
+        nested: any;
+        number: typeof import("./components/number/Number").default;
+        panel: typeof import("./components/panel/Panel").default;
+        password: typeof import("./components/password/Password").default;
+        phoneNumber: typeof import("./components/phonenumber/PhoneNumber").default;
+        radio: any;
+        recaptcha: typeof import("./components/recaptcha/ReCaptcha").default;
+        select: typeof import("./components/select/Select").default;
+        selectboxes: typeof import("./components/selectboxes/SelectBoxes").default;
+        signature: typeof import("./components/signature/Signature").default;
+        sketchpad: typeof import("./components/sketchpad/Sketchpad").default;
+        survey: typeof import("./components/survey/Survey").default;
+        table: typeof import("./components/table/Table").default;
+        tabs: typeof import("./components/tabs/Tabs").default;
+        tagpad: typeof import("./components/tagpad/Tagpad").default;
+        tags: typeof import("./components/tags/Tags").default;
+        textarea: typeof import("./components/textarea/TextArea").default;
+        textfield: typeof import("./components/textfield/TextField").default;
+        time: typeof import("./components/time/Time").default;
+        unknown: typeof import("./components/unknown/Unknown").default;
+        url: typeof import("./components/url/Url").default;
+        well: typeof import("./components/well/Well").default;
+    };
+    displays: {
+        webform: any;
+        wizard: any;
+    };
+    plugins: {};
+    providers: {
+        auth: {};
+        storage: {};
+    };
+    templates: {};
+    widgets: {
+        calendar: typeof import("@formio/js/lib/cjs/widgets/CalendarWidget").default;
+    };
+};
+export default _default;

package/lib/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const builders_1 = __importDefault(require("./builders"));
+const components_1 = __importDefault(require("./components"));
+const displays_1 = __importDefault(require("./displays"));
+const plugins_1 = __importDefault(require("./plugins"));
+const providers_1 = __importDefault(require("./providers"));
+const templates_1 = __importDefault(require("./templates"));
+const widgets_1 = __importDefault(require("./widgets"));
+exports.default = {
+    builders: builders_1.default,
+    components: components_1.default,
+    displays: displays_1.default,
+    plugins: plugins_1.default,
+    providers: providers_1.default,
+    templates: templates_1.default,
+    widgets: widgets_1.default,
+};

package/lib/plugins/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/lib/plugins/index.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {};

package/lib/providers/auth/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/lib/providers/auth/index.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {};

package/lib/providers/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    auth: {};
+    storage: {};
+};
+export default _default;

package/lib/providers/index.js

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

package/lib/providers/storage/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/lib/providers/storage/index.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {};

package/lib/templates/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/lib/templates/index.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {};

package/lib/util/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    override(classObj: any, extenders: any): void;
+};
+export default _default;

package/lib/util/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    override(classObj, extenders) {
+        for (const key in extenders) {
+            if (extenders.hasOwnProperty(key)) {
+                const extender = extenders[key];
+                if (typeof extender === 'function') {
+                    classObj.prototype[key] = extender;
+                }
+                else {
+                    const prop = Object.getOwnPropertyDescriptor(classObj.prototype, key);
+                    for (const attr in extender) {
+                        if (extender.hasOwnProperty(attr)) {
+                            prop[attr] = extender[attr](prop[attr]);
+                        }
+                    }
+                    Object.defineProperty(classObj.prototype, key, prop);
+                }
+            }
+        }
+    }
+};

package/lib/util/modalUtils.d.ts

@@ -0,0 +1,3 @@
+export declare const toggleHideBackgroundElements: (element: any, flag: any) => void;
+export declare const focusTrap: (focusableElements: any, event: any) => void;
+export declare const getFocusableElements: (container: any) => any[];

package/lib/util/modalUtils.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFocusableElements = exports.focusTrap = exports.toggleHideBackgroundElements = void 0;
+const FOCUSABLE_SELECTOR = `button:not([disabled]), [href], [role="link"], input:not([disabled]),
+  select:not([disabled]), textarea:not([disabled]), [tabindex]:not([disabled]), iframe`;
+const HEADER_SELECTOR = 'h1, h2, h3, h4, h5, h6';
+const TAB_KEYCODE = 9;
+const toggleHideBackgroundElements = (element, flag) => {
+    const documentFocusableElements = Array.prototype.slice.call(document.querySelectorAll(FOCUSABLE_SELECTOR));
+    const modalFocusableElements = Array.prototype.slice.call(element.querySelectorAll(FOCUSABLE_SELECTOR));
+    const elementsToHide = documentFocusableElements.filter(element => modalFocusableElements.indexOf(element) < 0);
+    const documentHeaders = Array.prototype.slice.call(document.querySelectorAll(HEADER_SELECTOR));
+    const modalHeaders = Array.prototype.slice.call(element.querySelectorAll(HEADER_SELECTOR));
+    const headersToHide = documentHeaders.filter(element => modalHeaders.indexOf(element) < 0);
+    elementsToHide.forEach(element => {
+        const tabIndex = element.getAttribute('tabindex');
+        if (flag) {
+            if (tabIndex !== null) {
+                element.dataset.tabindex = tabIndex;
+            }
+            element.tabIndex = -1;
+            element.setAttribute('aria-hidden', true);
+        }
+        else {
+            const dataTabIndex = element.dataset.tabindex;
+            if (dataTabIndex !== undefined) {
+                element.tabIndex = dataTabIndex;
+                element.removeAttribute('data-tabindex');
+            }
+            else if (tabIndex === '-1') {
+                element.removeAttribute('tabindex');
+            }
+            element.removeAttribute('aria-hidden');
+        }
+    });
+    headersToHide.forEach(element => {
+        if (flag) {
+            element.setAttribute('aria-hidden', true);
+        }
+        else {
+            element.removeAttribute('aria-hidden');
+        }
+    });
+};
+exports.toggleHideBackgroundElements = toggleHideBackgroundElements;
+const focusTrap = (focusableElements, event) => {
+    const firstFocusableElement = focusableElements[0];
+    const lastFocusableElement = focusableElements[focusableElements.length - 1];
+    if (event.keyCode === TAB_KEYCODE) {
+        if (event.target === firstFocusableElement && event.shiftKey) {
+            event.preventDefault();
+            lastFocusableElement.focus();
+        }
+        if (event.target === lastFocusableElement && !event.shiftKey) {
+            event.preventDefault();
+            firstFocusableElement.focus();
+        }
+    }
+};
+exports.focusTrap = focusTrap;
+const getFocusableElements = (container) => [...container.querySelectorAll(FOCUSABLE_SELECTOR)];
+exports.getFocusableElements = getFocusableElements;

package/lib/widgets/CalendarWidget.d.ts

@@ -0,0 +1,3 @@
+import { Widgets } from '@formio/js';
+declare const Calendar: typeof Widgets.calendar;
+export default Calendar;

package/lib/widgets/CalendarWidget.js

@@ -0,0 +1,116 @@
+"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 Calendar = js_1.Widgets.calendar;
+const util_1 = __importDefault(require("../util"));
+const transform = (type, value) => {
+    return js_1.Templates.current.hasOwnProperty('transform') ? js_1.Templates.current.transform(type, value) : value;
+};
+util_1.default.override(Calendar, {
+    attach: {
+        value: (_super) => {
+            return function attach(input) {
+                const widgetTitle = !this.settings.noCalendar
+                    ? this.settings.enableTime
+                        ? 'Date/Time widget'
+                        : 'Calendar widget'
+                    : 'Time widget';
+                const handleLiveRegion = (element, text) => {
+                    if (element) {
+                        element.innerHTML = text;
+                    }
+                };
+                const liveRegion = document.getElementById(`${this.component.id}-liveRegion`);
+                this.settings.altInputClass = '';
+                this.settings.onDayCreate = (dObj, dStr, fp, dayElem) => {
+                    const label = dayElem.getAttribute('aria-label');
+                    const elementText = dayElem.innerHTML;
+                    dayElem.innerHTML = `<span aria-hidden="true">${elementText}</span><span class="${transform('class', 'sr-only')}">${label}</span>`;
+                };
+                const labelledbyIds = input.getAttribute('aria-labelledby');
+                this.options.hooks = this.options.hooks || {};
+                this.options.hooks.onCalendarOpen = () => {
+                    handleLiveRegion(liveRegion, '');
+                    setTimeout(() => {
+                        handleLiveRegion(liveRegion, `${widgetTitle} has been opened`);
+                    }, 50);
+                };
+                this.options.hooks.onCalendarClose = () => {
+                    handleLiveRegion(liveRegion, `${widgetTitle} has been closed`);
+                };
+                const superAttach = _super.call(this, input);
+                return superAttach.then(() => {
+                    if (this._input && this.calendar.calendarContainer) {
+                        const calendar = this.calendar;
+                        calendar.calendarContainer.setAttribute('role', 'application');
+                        calendar.altInput.id = this._input.id;
+                        calendar.altInput.setAttribute('aria-labelledby', labelledbyIds);
+                        this._input.removeAttribute('id');
+                        this._input.removeAttribute('aria-labelledby');
+                        const isRequired = this._input.getAttribute('aria-required');
+                        if (isRequired) {
+                            calendar.altInput.setAttribute('aria-required', isRequired);
+                        }
+                        const monthToStr = (monthNumber, locale) => locale.months.longhand[monthNumber];
+                        const switchMonth = (e) => {
+                            const prevMonthNav = calendar.prevMonthNav;
+                            const nextMonthNav = calendar.nextMonthNav;
+                            const isPrevMonth = prevMonthNav.contains(e.target);
+                            const isNextMonth = nextMonthNav.contains(e.target);
+                            const changeMonth = (value) => {
+                                calendar.changeMonth.call(this, value);
+                                handleLiveRegion(liveRegion, `Switched to ${monthToStr(calendar.currentMonth, calendar.l10n)}, ${calendar.currentYear}`);
+                            };
+                            if (e.type === 'keydown') {
+                                if (e.keyCode === 32 || e.keyCode === 13) {
+                                    if (isPrevMonth || isNextMonth) {
+                                        e.preventDefault();
+                                        changeMonth(isPrevMonth ? -1 : 1);
+                                    }
+                                }
+                            }
+                            if (e.type === 'click') {
+                                if (isPrevMonth || isNextMonth) {
+                                    e.preventDefault();
+                                    handleLiveRegion(liveRegion, `Switched to ${monthToStr(calendar.currentMonth, calendar.l10n)}, ${calendar.currentYear}`);
+                                }
+                            }
+                        };
+                        const switchPeriod = (e) => {
+                            const periodContainer = calendar.amPM;
+                            const oppositePeriod = periodContainer.innerHTML === 'AM' ? 'PM' : 'AM';
+                            if (e.type === 'click' || e.keyCode === 38 || e.keyCode === 40) {
+                                periodContainer.setAttribute('aria-label', `${oppositePeriod}. Use arrow keys to switch period`);
+                                handleLiveRegion(liveRegion, `Switched to ${oppositePeriod}`);
+                            }
+                        };
+                        const monthNav = calendar.monthNav;
+                        this.addEventListener(monthNav, 'keydown', switchMonth);
+                        this.addEventListener(monthNav, 'click', switchMonth);
+                        this.addEventListener(calendar.amPM, 'keydown', switchPeriod);
+                        this.addEventListener(calendar.amPM, 'click', switchPeriod);
+                        const setTabindexAndLabel = (element, label) => {
+                            if (element) {
+                                element.setAttribute('tabindex', '0');
+                                element.setAttribute('aria-label', label);
+                                element.removeAttribute('title');
+                            }
+                        };
+                        setTabindexAndLabel(calendar.prevMonthNav, 'Previous month button. Click to select previous month');
+                        setTabindexAndLabel(calendar.nextMonthNav, 'Next month button. Click to select next month');
+                        setTabindexAndLabel(calendar.monthsDropdownContainer, 'Months dropdown');
+                        setTabindexAndLabel(calendar.currentYearElement, 'Year spin button');
+                        setTabindexAndLabel(calendar.daysContainer, 'Calendar grid. Use arrow keys to navigate dates.');
+                        if (this.settings.enableTime && calendar.amPM) {
+                            setTabindexAndLabel(calendar.amPM, `${calendar.amPM.innerHTML}. Use arrow keys to switch period`);
+                        }
+                    }
+                });
+            };
+        }
+    }
+});
+exports.default = Calendar;

package/lib/widgets/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    calendar: typeof import("@formio/js/lib/cjs/widgets/CalendarWidget").default;
+};
+export default _default;

package/lib/widgets/index.js

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

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@formio/vpat",
+  "version": "2.6.1",
+  "description": "VPAT module for form.io",
+  "main": "lib/index.js",
+  "pre-commit": [
+    "lint"
+  ],
+  "files": [
+    "lib",
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/formio/vpat.git"
+  },
+  "keywords": [
+    "Form.io",
+    "components"
+  ],
+  "license": "UNLICENSED",
+  "bugs": {
+    "url": "https://github.com/formio/vpat/issues"
+  },
+  "homepage": "https://github.com/formio/vpat#readme",
+  "dependencies": {},
+  "peerDependencies": {
+    "@formio/js": "^5.2.3"
+  },
+  "devDependencies": {
+    "@types/chai": "^4.2.21",
+    "@types/ejs": "^3.1.0",
+    "@types/mocha": "^9.0.0",
+    "@types/node": "^16.7.10",
+    "@types/sinon": "^10.0.2",
+    "copy-webpack-plugin": "^13.0.0",
+    "chai": "^4.3.4",
+    "gulp": "^4.0.2",
+    "gulp-insert": "^0.5.0",
+    "gulp-rename": "^2.0.0",
+    "gulp-template": "^5.0.0",
+    "mocha": "^9.2.0",
+    "nyc": "^15.1.0",
+    "pre-commit": "^1.2.2",
+    "sinon": "^11.1.2",
+    "ts-node": "^10.2.1",
+    "ts-sinon": "^2.0.1",
+    "tslint": "^6.1.3",
+    "typescript": "^4.4.2",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^5.1.4",
+    "@formio/js": "^5.2.3"
+  },
+  "scripts": {
+    "test:coverage": "nyc --reporter=text mocha --reporter spec './{,!(node_modules)/**/}*.spec.ts'",
+    "test": "mocha --require ts-node/register --reporter spec \"./{,!(node_modules)/**/}*.spec.ts\"",
+    "watch": "tsc -w",
+    "build": "tsc && gulp templates && webpack && webpack --config webpack.prod.js",
+    "lint": "tslint -p . --fix"
+  }
+}