adp-web-components 0.3.12 → 0.3.14

package/dist/collection/components/form-elements/form-dialog.js

@@ -52,7 +52,7 @@ export class FormInput {
         const dialogContentIdentifier = cn('dialog-content');
         const closeButtonIdentifier = 'dialog-close-icon-button';
         const closeButtonIdentifierIcon = 'dialog-close-icon-button-icon';
-        return (h(Host, { key: '8a3cdbf65c563bcbb6c4c05879d3bb047dcdf578', translate: "no" }, h("div", { key: 'ce49a5bffd6a5c7cca6aae6ab3ac4901eb45271d', part: dialogContainerIdentifier, dir: locale.sharedFormLocales.direction, class: dialogContainerIdentifier }, h("div", { key: '22ca629ea0e8525bf633aefd01cb3c4b3b3493c9', part: dialogWrapperIdentifier, class: dialogWrapperIdentifier }, h("button", { key: '57be63c19a44c643a64e4a9fea7b4826db9f8f3a', "aria-label": "Close the dialog", part: closeButtonIdentifier, onClick: this.closeDialog, type: "button", class: closeButtonIdentifier }, h(AddIcon, { key: 'a1706eb1cad4c33589a0f560598be8efeba7cdd1', class: closeButtonIdentifierIcon, part: closeButtonIdentifierIcon })), h("div", { key: 'ce32d616e07f879041d98a678c64a882016f9795', part: dialogContentIdentifier, class: dialogContentIdentifier }, this.isError && this.internalMessage, h("div", { key: 'ae21e822ba03984f2f2e7af997d33fdcbec7d6fb', style: { display: this.isError ? 'none' : 'block' } }, h("div", { key: 'ce69ae6cd0a209f7363f6770df41de04b5571fd9', class: successContainerIdentifier, part: successContainerIdentifier }, h("svg", { key: '90464c21230bdc993b3353cf0c527bc78dcf62ce', fill: "none", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", xmlns: "http://www.w3.org/2000/svg", part: successContainerIdentifierIcon, class: successContainerIdentifierIcon }, h("path", { key: '44d0319a4d66dd19f68d4eb08b7e259673f79161', d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { key: '9cdfb71a1258cb78f7b3e23af71a90d69427f72a', d: "m9 12 2 2 4-4" })), this.successMessage))), h("button", { key: '46ff97b11b57f6c7f91f2523a39b9537816887ae', part: buttonIdentifiers, type: "button", onClick: this.closeDialog, class: buttonIdentifiers }, this.closeText)))));
+        return (h(Host, { key: '46608d87b037b983200063012c4576c791ef799d', translate: "no" }, h("div", { key: 'c708eed600cf4f64dcc061d286cedbf90d14f4af', part: dialogContainerIdentifier, dir: locale.sharedFormLocales.direction, class: dialogContainerIdentifier }, h("div", { key: '5247dfe8906e5e4c348f4e9d47e81d2735ef35e4', part: dialogWrapperIdentifier, class: dialogWrapperIdentifier }, h("button", { key: '86e61e0f555e769c0082339a6e668d341e2fd68b', "aria-label": "Close the dialog", part: closeButtonIdentifier, onClick: this.closeDialog, type: "button", class: closeButtonIdentifier }, h(AddIcon, { key: '1a3d3edd3fb33504092a2d19f3fca1e9b4cf9a5d', class: closeButtonIdentifierIcon, part: closeButtonIdentifierIcon })), h("div", { key: 'bf547d341706d7eaa5a3a4eb1af0af2fdbac0d58', part: dialogContentIdentifier, class: dialogContentIdentifier }, this.isError && this.internalMessage, h("div", { key: '8583adf8fb3994026dfec93171c34091637ac746', style: { display: this.isError ? 'none' : 'block' } }, h("div", { key: '82b4975bde067cd97a349c40ec6022858d02e0db', class: successContainerIdentifier, part: successContainerIdentifier }, h("svg", { key: '988560e56a762e204e2324d26c09db92856fb5c4', fill: "none", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", xmlns: "http://www.w3.org/2000/svg", part: successContainerIdentifierIcon, class: successContainerIdentifierIcon }, h("path", { key: '0e191fba217387fe35b5b1600f441c5cdad30962', d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { key: '0b534f0886a7f4895df7648f72af4248173bf871', d: "m9 12 2 2 4-4" })), this.successMessage))), h("button", { key: 'fe8d0f49ab9934c19e9b2b3b077e4a76063b6462', part: buttonIdentifiers, type: "button", onClick: this.closeDialog, class: buttonIdentifiers }, this.closeText)))));
     }
     static get is() { return "form-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -70,7 +70,6 @@ export class FormInput {
         return {
             "message": {
                 "type": "string",
-                "attribute": "message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -86,11 +85,11 @@ export class FormInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "message",
                 "defaultValue": "''"
             },
             "form": {
                 "type": "unknown",
-                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "FormHook<any>",
@@ -99,7 +98,8 @@ export class FormInput {
                         "FormHook": {
                             "location": "import",
                             "path": "~features/form-hook",
-                            "id": "src/features/form-hook/index.ts::FormHook"
+                            "id": "src/features/form-hook/index.ts::FormHook",
+                            "referenceLocation": "FormHook"
                         }
                     }
                 },
@@ -114,7 +114,6 @@ export class FormInput {
             },
             "closeText": {
                 "type": "string",
-                "attribute": "close-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -130,11 +129,11 @@ export class FormInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "close-text",
                 "defaultValue": "''"
             },
             "isError": {
                 "type": "boolean",
-                "attribute": "is-error",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -150,11 +149,11 @@ export class FormInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-error",
                 "defaultValue": "false"
             },
             "successMessage": {
                 "type": "string",
-                "attribute": "success-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -170,11 +169,11 @@ export class FormInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "success-message",
                 "defaultValue": "''"
             },
             "dialogClosed": {
                 "type": "unknown",
-                "attribute": "dialog-closed",
                 "mutable": false,
                 "complexType": {
                     "original": "() => void",

package/dist/collection/components/form-elements/form-file.js

@@ -10,7 +10,7 @@ import { FormErrorMessage } from "./components/form-error-message";
 import { LoaderIcon } from "../../global/assets/loader-icon";
 import { TickIcon } from "../../global/assets/tick-icon";
 import { mixed } from "yup";
-import { meta, format, size, require, max } from "../forms/defaults/validation";
+import { meta, format, size, require, max, upload } from "../forms/defaults/validation";
 const partKeyPrefix = 'form-file-';
 export class FormFile {
     constructor() {
@@ -26,7 +26,11 @@ export class FormFile {
         this.openFilePicker = () => {
             if (!this.fileInput)
                 return;
-            this.reset(); // clears old file + state
+            // Only clear the input value, so re-picking the same file still fires a change event.
+            // Visible state is left alone until a file actually arrives — clearing it here would
+            // swap the upload failure for a "required" error while the picker is still open, and
+            // would wipe a valid selection if the user cancels.
+            this.fileInput.value = '';
             this.fileInput.click();
         };
         this.handleFileChange = async (event) => {
@@ -43,7 +47,17 @@ export class FormFile {
             try {
                 if (this.signUrl) {
                     const signedFiles = await this.requestSignedUpload(limited);
-                    this.form.pendingRequests[this.name] = async () => await this.uploadToSignedUrl(limited, signedFiles);
+                    this.form.pendingRequests[this.name] = async () => {
+                        try {
+                            await this.uploadWithRetry(limited, signedFiles);
+                        }
+                        catch (error) {
+                            console.error(error);
+                            this.setUploadError(error);
+                            this.form.rerender({ inputName: this.name, rerenderForm: true });
+                            throw error;
+                        }
+                    };
                 }
                 this.uploadState = 'success';
                 this.syncValue([...limited]);
@@ -51,16 +65,9 @@ export class FormFile {
                 target.files = dataTransfer.files;
             }
             catch (error) {
-                this.sasFiles = [];
                 console.error(error);
                 target.files = dataTransfer.files;
-                const [locale, language] = this.form.getFormLocale();
-                this.uploadState = 'error';
-                this.failedText = this.getFailureText(locale, language);
-                this.syncValue();
-                // @ts-ignore
-                if (this.fileInput)
-                    this.fileInput.value = [];
+                this.setUploadError(error);
             }
             finally {
                 this.stopGlobalLoading();
@@ -68,6 +75,9 @@ export class FormFile {
         };
         this.validate = () => {
             let validation = mixed().meta(meta(this.name));
+            // The record must never be created without its file, so an in-flight or failed upload blocks
+            // the whole form — including when this field is optional, where nothing else would stop it.
+            validation = validation.test(upload(this.name), upload(this.name), () => this.uploadState !== 'uploading' && this.uploadState !== 'error');
             if (this.required) {
                 validation = validation.test(require(this.name), require(this.name), (value) => {
                     if (!Array.isArray(value))
@@ -120,10 +130,13 @@ export class FormFile {
         this.form.unsubscribe(this.name);
     }
     reset() {
+        var _a, _b;
         this.stopGlobalLoading();
         if (this.fileInput)
             this.fileInput.value = '';
+        (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.pendingRequests) === null || _b === void 0 ? true : delete _b[this.name];
         this.fileName = '';
+        this.failedText = '';
         this.uploadState = 'idle';
     }
     startGlobalLoading() {
@@ -153,6 +166,51 @@ export class FormFile {
         var _a, _b, _c, _d;
         return ((_b = (_a = this.localization) === null || _a === void 0 ? void 0 : _a[language]) === null || _b === void 0 ? void 0 : _b.failure) || ((_d = (_c = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d.wildCard) || 'Upload failed. Please try again.';
     }
+    // Tagged so setUploadError knows the text came from the server and is safe to show,
+    // unlike a network-level "Failed to fetch".
+    async responseError(response) {
+        const error = new Error(await this.getResponseError(response));
+        error.fromServer = true;
+        return error;
+    }
+    async getResponseError(response) {
+        var _a, _b, _c, _d, _e;
+        const [locale, language] = this.form.getFormLocale();
+        const fallback = this.getFailureText(locale, language);
+        const raw = await response.text().catch(() => '');
+        if (!raw.trim())
+            return fallback;
+        const contentType = response.headers.get('content-type') || '';
+        if (contentType.includes('json') || raw.trimStart().startsWith('{')) {
+            try {
+                const parsed = JSON.parse(raw);
+                const message = (_a = parsed === null || parsed === void 0 ? void 0 : parsed.message) !== null && _a !== void 0 ? _a : parsed === null || parsed === void 0 ? void 0 : parsed.Message;
+                const text = (_d = (_c = (_b = message === null || message === void 0 ? void 0 : message.body) !== null && _b !== void 0 ? _b : message === null || message === void 0 ? void 0 : message.Body) !== null && _c !== void 0 ? _c : message === null || message === void 0 ? void 0 : message.title) !== null && _d !== void 0 ? _d : message === null || message === void 0 ? void 0 : message.Title;
+                if (typeof text === 'string' && text.trim())
+                    return text.trim();
+            }
+            catch (_f) {
+                // fall through to the localized fallback
+            }
+            return fallback;
+        }
+        // Blob storage answers with XML: <Error><Code>..</Code><Message>..</Message></Error>
+        const xmlMessage = (_e = raw.match(/<Message>([\s\S]*?)<\/Message>/)) === null || _e === void 0 ? void 0 : _e[1];
+        const text = (xmlMessage || raw).trim().split('\n')[0].trim();
+        return text && text.length <= 300 ? text : fallback;
+    }
+    setUploadError(error) {
+        var _a, _b;
+        const [locale, language] = this.form.getFormLocale();
+        const message = typeof error === 'string' ? error : (error === null || error === void 0 ? void 0 : error.fromServer) ? error === null || error === void 0 ? void 0 : error.message : '';
+        (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.pendingRequests) === null || _b === void 0 ? true : delete _b[this.name];
+        this.sasFiles = [];
+        this.uploadState = 'error';
+        this.failedText = (message === null || message === void 0 ? void 0 : message.trim()) || this.getFailureText(locale, language);
+        this.syncValue();
+        if (this.fileInput)
+            this.fileInput.value = '';
+    }
     matchesAccept(value) {
         var _a;
         if (!this.accept)
@@ -189,7 +247,11 @@ export class FormFile {
     }
     async requestSignedUpload(files) {
         var _a, _b, _c;
-        const formHeaders = { 'Content-Type': 'application/json' };
+        const [, language] = this.form.getFormLocale();
+        // Send an explicit single-value Accept-Language, matching every other backend call.
+        // Left unset, the browser sends its own weighted header (`en-US,en;q=0.9`) whenever more
+        // than one language is configured, which the backend cannot parse.
+        const formHeaders = { 'Content-Type': 'application/json', 'Accept-Language': language || 'en' };
         const recaptchaKey = (_c = (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.context.structure) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.recaptchaKey;
         if (grecaptcha && recaptchaKey) {
             const token = await grecaptcha.execute(recaptchaKey, { action: 'submit' });
@@ -211,7 +273,7 @@ export class FormFile {
             method: this.signMethod || 'POST',
         });
         if (!response.ok)
-            throw new Error('Failed to get signed upload URL');
+            throw await this.responseError(response);
         const json = await response.json();
         const list = (json === null || json === void 0 ? void 0 : json.entity) || (json === null || json === void 0 ? void 0 : json.Entity) || json;
         const arr = Array.isArray(list) ? list : Array.isArray(json) ? json : [];
@@ -233,21 +295,31 @@ export class FormFile {
         return signedFiles;
     }
     async uploadToSignedUrl(files, signedFiles) {
-        files === null || files === void 0 ? void 0 : files.forEach(async (file, idx) => {
+        await Promise.all((files || []).map(async (file, idx) => {
             var _a, _b;
-            try {
-                const response = await fetch((_a = signedFiles === null || signedFiles === void 0 ? void 0 : signedFiles[idx]) === null || _a === void 0 ? void 0 : _a.uploadUrl, {
-                    method: 'PUT',
-                    headers: Object.assign({ 'Content-Type': file.type || 'application/octet-stream', 'x-ms-blob-type': 'BlockBlob' }, (_b = signedFiles === null || signedFiles === void 0 ? void 0 : signedFiles[idx]) === null || _b === void 0 ? void 0 : _b.headers),
-                    body: file,
-                });
-                if (!response.ok)
-                    console.error(response);
-            }
-            catch (error) {
-                console.error(error);
-            }
-        });
+            const response = await fetch((_a = signedFiles === null || signedFiles === void 0 ? void 0 : signedFiles[idx]) === null || _a === void 0 ? void 0 : _a.uploadUrl, {
+                method: 'PUT',
+                headers: Object.assign({ 'Content-Type': file.type || 'application/octet-stream', 'x-ms-blob-type': 'BlockBlob' }, (_b = signedFiles === null || signedFiles === void 0 ? void 0 : signedFiles[idx]) === null || _b === void 0 ? void 0 : _b.headers),
+                body: file,
+            });
+            if (!response.ok)
+                throw await this.responseError(response);
+        }));
+    }
+    // The signature is minted when the file is picked, but only spent when the form is submitted,
+    // and an applicant can sit on a long form for longer than the SAS lives. A stale signature is
+    // by far the likeliest failure here, so mint a fresh one and try once more before giving up.
+    // Re-signing also refreshes the blob/url written onto the File objects, and the payload is
+    // serialised after this runs, so the record always points at what was actually uploaded.
+    async uploadWithRetry(files, signedFiles) {
+        try {
+            await this.uploadToSignedUrl(files, signedFiles);
+        }
+        catch (error) {
+            console.error(error);
+            const refreshed = await this.requestSignedUpload(files);
+            await this.uploadToSignedUrl(files, refreshed);
+        }
     }
     render() {
         const { disabled, isRequired, meta, isError, errorMessage } = this.form.getInputState(this.name);
@@ -259,11 +331,11 @@ export class FormFile {
         const isErrorState = this.uploadState !== 'uploading' && (!!this.failedText || isError);
         // @ts-ignore
         window === null || window === void 0 ? void 0 : window.s = this.form;
-        return (h(Host, { key: '033ef0477c8517cbf1d413f4e7875ba55b34b9fe', translate: "no" }, h("label", { key: 'af39816aff5fe948b1f1e155728838827c20f928', part: `form-file ${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: disableInput }) }, h(FormInputLabel, { key: '99fec51d840cf6cb49cb1fe44d341fa8a90d26a1', name: this.name, isRequired: isRequired, label: label }), h("div", { key: '158cbec554ec2309fdae08a7aac2001510ce9713', part: `${this.name}-container form-input-container`, class: cn('form-input-container') }, h("input", { key: '971b5ada3aa44b76f027da692716cf9b625a0c01', type: "file", name: this.name, accept: this.accept, disabled: disableInput, multiple: this.maxUpload > 1, onChange: this.handleFileChange, part: `${this.name}-file-input form-file-input`, class: cn('form-file-input', `${partKeyPrefix}${this.name}-input`) }), h("button", { key: 'e76c83d66084c06007d24e674ec89bb6d25b1724', type: "button", disabled: disableInput, onClick: this.openFilePicker, part: `${this.name}-file-trigger form-file-trigger form-input`, title: showSpinner ? this.getLoadingText(locale, language) : displayText, class: cn('form-file-trigger form-input-style', {
+        return (h(Host, { key: '60c4d7e4c3c67addbd65d89ed5f601afba702847', translate: "no" }, h("label", { key: '1e2cd264583b15579ae1d3b1d76901a59ba72570', part: `form-file ${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: disableInput }) }, h(FormInputLabel, { key: '76bfacc32501d26455a81634c4aa922d1892e5e8', name: this.name, isRequired: isRequired, label: label }), h("div", { key: '7caea635fc7e9a7505e1ac7c316ab19268eef580', part: `${this.name}-container form-input-container`, class: cn('form-input-container') }, h("input", { key: '0625ef13a5254d3de16e0403c2c3ea76f96e807f', type: "file", name: this.name, accept: this.accept, disabled: disableInput, multiple: this.maxUpload > 1, onChange: this.handleFileChange, part: `${this.name}-file-input form-file-input`, class: cn('form-file-input', `${partKeyPrefix}${this.name}-input`) }), h("button", { key: '44e249de81befc80561c7ff49e55d7567958447b', type: "button", disabled: disableInput, onClick: this.openFilePicker, part: `${this.name}-file-trigger form-file-trigger form-input`, title: showSpinner ? this.getLoadingText(locale, language) : displayText, class: cn('form-file-trigger form-input-style', {
                 'form-input-error-style': isErrorState,
                 'form-file-trigger-loading': showSpinner,
                 'form-file-trigger-success': this.uploadState === 'success',
-            }) }, h("span", { key: 'd2461ead64d452c824926e04a2f2b08075cf3aef', part: `${this.name}-file-text form-file-text`, class: "form-file-text" }, showSpinner ? this.getLoadingText(locale, language) : displayText), h("span", { key: '23460eb0dfdaf4c9123ca177f197505b081017d4', part: `${this.name}-file-icon form-file-icon`, class: "form-file-icon" }, showSpinner && h(LoaderIcon, { key: '22081ddee1bbeaaa69a51cf1d2beae708d7a166a', class: "form-file-spinner" }), !showSpinner && this.uploadState === 'success' && h(TickIcon, { key: '0fccc0b9b39f962577216161aedb237ebcdb58ed', class: "form-file-success-icon" })))), h(FormErrorMessage, { key: '92e43c9ad207349461243b8409974bb0f5458dd8', name: this.name, isError: isErrorState, errorMessage: this.failedText || errorTextMessage }))));
+            }) }, h("span", { key: 'ad3e337bdb4d6a4494ef9264fe35c755fe2e556c', part: `${this.name}-file-text form-file-text`, class: "form-file-text" }, showSpinner ? this.getLoadingText(locale, language) : displayText), h("span", { key: 'dacd0d4792606b11adda9d5cb6fe8e4b41b6e5c5', part: `${this.name}-file-icon form-file-icon`, class: "form-file-icon" }, showSpinner && h(LoaderIcon, { key: 'ed8838820648f7d6f9980bf7a3b33ad32a63d20c', class: "form-file-spinner" }), !showSpinner && this.uploadState === 'success' && h(TickIcon, { key: '6d26e5526a5cb9ccccfa9ba923808553b50f9af6', class: "form-file-success-icon" })))), h(FormErrorMessage, { key: '4b0e1e69ba22fd36d675a56ecce7e813574aeb34', name: this.name, isError: isErrorState, errorMessage: this.failedText || errorTextMessage }))));
     }
     static get is() { return "form-file"; }
     static get originalStyleUrls() {
@@ -280,7 +352,6 @@ export class FormFile {
         return {
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -295,11 +366,11 @@ export class FormFile {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "name"
             },
             "wrapperId": {
                 "type": "string",
-                "attribute": "wrapper-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -314,11 +385,11 @@ export class FormFile {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "wrapper-id"
             },
             "form": {
                 "type": "unknown",
-                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "FormHook<any>",
@@ -327,7 +398,8 @@ export class FormFile {
                         "FormHook": {
                             "location": "import",
                             "path": "~features/form-hook",
-                            "id": "src/features/form-hook/index.ts::FormHook"
+                            "id": "src/features/form-hook/index.ts::FormHook",
+                            "referenceLocation": "FormHook"
                         }
                     }
                 },
@@ -342,7 +414,6 @@ export class FormFile {
             },
             "isLoading": {
                 "type": "boolean",
-                "attribute": "is-loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -357,11 +428,11 @@ export class FormFile {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "is-loading"
             },
             "wrapperClass": {
                 "type": "string",
-                "attribute": "wrapper-class",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -376,11 +447,11 @@ export class FormFile {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "wrapper-class"
             },
             "isDisabled": {
                 "type": "boolean",
-                "attribute": "is-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -395,11 +466,11 @@ export class FormFile {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "is-disabled"
             },
             "accept": {
                 "type": "string",
-                "attribute": "accept",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -414,11 +485,11 @@ export class FormFile {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "accept"
             },
             "maxSize": {
                 "type": "number",
-                "attribute": "max-size",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -433,11 +504,11 @@ export class FormFile {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "max-size"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -452,11 +523,11 @@ export class FormFile {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "required"
             },
             "signUrl": {
                 "type": "string",
-                "attribute": "sign-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -471,11 +542,11 @@ export class FormFile {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "sign-url"
             },
             "maxUpload": {
                 "type": "number",
-                "attribute": "max-upload",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -491,11 +562,11 @@ export class FormFile {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "max-upload",
                 "defaultValue": "1"
             },
             "signMethod": {
                 "type": "string",
-                "attribute": "sign-method",
                 "mutable": false,
                 "complexType": {
                     "original": "'POST' | 'PUT'",
@@ -511,11 +582,11 @@ export class FormFile {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "sign-method",
                 "defaultValue": "'POST'"
             },
             "signPrefix": {
                 "type": "string",
-                "attribute": "sign-prefix",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -530,11 +601,11 @@ export class FormFile {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "sign-prefix"
             },
             "accountName": {
                 "type": "string",
-                "attribute": "account-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -549,11 +620,11 @@ export class FormFile {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "account-name"
             },
             "containerName": {
                 "type": "string",
-                "attribute": "container-name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -568,20 +639,21 @@ export class FormFile {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "container-name"
             },
             "localization": {
                 "type": "unknown",
-                "attribute": "localization",
                 "mutable": false,
                 "complexType": {
                     "original": "FormInputLocalization<{\n    uploading?: string;\n    upload?: string;\n    failure?: string;\n    success?: string;\n  }>",
-                    "resolved": "{ [lang: string]: { label?: string; placeholder?: string; require?: string; format?: string; minMessage: string; maxMessage: string; betweenMessage: string; } & { uploading?: string; upload?: string; failure?: string; success?: string; }; }",
+                    "resolved": "{ uploading?: string; upload?: string; failure?: string; success?: string; }",
                     "references": {
                         "FormInputLocalization": {
                             "location": "import",
                             "path": "~features/form-hook",
-                            "id": "src/features/form-hook/index.ts::FormInputLocalization"
+                            "id": "src/features/form-hook/index.ts::FormInputLocalization",
+                            "referenceLocation": "FormInputLocalization"
                         }
                     }
                 },

package/dist/collection/components/form-elements/form-input-preview.js

@@ -48,7 +48,6 @@ export class FormStepper {
         return {
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -63,11 +62,11 @@ export class FormStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "name"
             },
             "props": {
                 "type": "any",
-                "attribute": "props",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -83,11 +82,11 @@ export class FormStepper {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "props",
                 "defaultValue": "{}"
             },
             "form": {
                 "type": "unknown",
-                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "FormHook<any>",
@@ -96,7 +95,8 @@ export class FormStepper {
                         "FormHook": {
                             "location": "import",
                             "path": "~features/form-hook",
-                            "id": "src/features/form-hook/index.ts::FormHook"
+                            "id": "src/features/form-hook/index.ts::FormHook",
+                            "referenceLocation": "FormHook"
                         }
                     }
                 },
@@ -111,16 +111,16 @@ export class FormStepper {
             },
             "localization": {
                 "type": "unknown",
-                "attribute": "localization",
                 "mutable": false,
                 "complexType": {
                     "original": "FormInputLocalization<{ value?: string }>",
-                    "resolved": "{ [lang: string]: { label?: string; placeholder?: string; require?: string; format?: string; minMessage: string; maxMessage: string; betweenMessage: string; } & { value?: string; }; }",
+                    "resolved": "{ value?: string; }",
                     "references": {
                         "FormInputLocalization": {
                             "location": "import",
                             "path": "~features/form-hook",
-                            "id": "src/features/form-hook/index.ts::FormInputLocalization"
+                            "id": "src/features/form-hook/index.ts::FormInputLocalization",
+                            "referenceLocation": "FormInputLocalization"
                         }
                     }
                 },