adp-web-components 0.3.10 → 0.3.13

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

@@ -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.uploadToSignedUrl(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();
@@ -120,10 +127,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 +163,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)
@@ -184,12 +239,16 @@ export class FormFile {
         const resolved = (value === null || value === void 0 ? void 0 : value[0]) || '';
         this.fileName = typeof resolved === 'string' ? resolved : resolved === null || resolved === void 0 ? void 0 : resolved.name;
         // @ts-ignore
-        (_a = this.form) === null || _a === void 0 ? void 0 : _a.validateForm(this.name, !!value ? value : [], false);
+        (_a = this.form) === null || _a === void 0 ? void 0 : _a.validateForm(this.name, value ? value : [], false);
         (_b = this.form) === null || _b === void 0 ? void 0 : _b.rerender({ inputName: this.name, rerenderForm: true });
     }
     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 +270,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 +292,16 @@ 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);
+        }));
     }
     render() {
         const { disabled, isRequired, meta, isError, errorMessage } = this.form.getInputState(this.name);
@@ -259,11 +313,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: '01a336807102ac05f2d56b86fba4ffc07b7204bb', translate: "no" }, h("label", { key: 'c0dc4c48ffa9e536accbdc6bc4620e6a2c4ef4a9', part: `form-file ${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: disableInput }) }, h(FormInputLabel, { key: '757b0effce444d8df8993404a7a62a75cef3996e', name: this.name, isRequired: isRequired, label: label }), h("div", { key: 'b5d63a30ccd687d0ff7e79da1968a9d0a2324cf7', part: `${this.name}-container form-input-container`, class: cn('form-input-container') }, h("input", { key: 'f80697792482c72df360cdcd1e0b82a0ffbe0dfb', 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: '92b1a144940f796246a6c9a61fd71d68ef565bf0', 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: '2e6fff41c02c74c27bdf7090d1db741d2d2d1f3f', translate: "no" }, h("label", { key: 'd223e629794d4c3006733ec9b34e2c6fe1227319', part: `form-file ${this.name}`, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: disableInput }) }, h(FormInputLabel, { key: '4584e81d3f039b241a3926cdc31937a2a6932d27', name: this.name, isRequired: isRequired, label: label }), h("div", { key: '2eb0dec1c916ee2268f6e6e2f121777b688861b8', part: `${this.name}-container form-input-container`, class: cn('form-input-container') }, h("input", { key: 'a2fc3290827b89875f50ef5664d21e96473badbc', 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: '38b6b6b841981077cca8e252d76adeeed6af826f', 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: 'd3c43e9a9cc883cea8db1c229097764807f2f92d', part: `${this.name}-file-text form-file-text`, class: "form-file-text" }, showSpinner ? this.getLoadingText(locale, language) : displayText), h("span", { key: 'fe69569c57c3597260d256f95f9e163aca239046', part: `${this.name}-file-icon form-file-icon`, class: "form-file-icon" }, showSpinner && h(LoaderIcon, { key: 'c93782e7a6057e02e43b013a6609a122724af446', class: "form-file-spinner" }), !showSpinner && this.uploadState === 'success' && h(TickIcon, { key: 'dba3e6c5d0767007fb011b33e9f6c262041d6bcc', class: "form-file-success-icon" })))), h(FormErrorMessage, { key: 'c70a8614a3d2b1c9416caee665007f33bc530e50', name: this.name, isError: isErrorState, errorMessage: this.failedText || errorTextMessage }))));
+            }) }, h("span", { key: '0eb7c3f4b5c1fee1b26fc2f12c5858bd7594eead', part: `${this.name}-file-text form-file-text`, class: "form-file-text" }, showSpinner ? this.getLoadingText(locale, language) : displayText), h("span", { key: 'f0b0d94b7d9016566d2ad06459fbe787fca31f6b', part: `${this.name}-file-icon form-file-icon`, class: "form-file-icon" }, showSpinner && h(LoaderIcon, { key: 'f8f0e6fd9df60dc092c00ee7ad4a9552df5c02cc', class: "form-file-spinner" }), !showSpinner && this.uploadState === 'success' && h(TickIcon, { key: '1ab155ccc1383f9d5c77f966b50b9945ba84a82e', class: "form-file-success-icon" })))), h(FormErrorMessage, { key: '69689beddd7f5da29c99c410922fa589d8f849be', name: this.name, isError: isErrorState, errorMessage: this.failedText || errorTextMessage }))));
     }
     static get is() { return "form-file"; }
     static get originalStyleUrls() {
@@ -280,7 +334,6 @@ export class FormFile {
         return {
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -295,11 +348,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 +367,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 +380,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 +396,6 @@ export class FormFile {
             },
             "isLoading": {
                 "type": "boolean",
-                "attribute": "is-loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -357,11 +410,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 +429,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 +448,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 +467,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 +486,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 +505,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 +524,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 +544,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 +564,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 +583,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 +602,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 +621,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"
                         }
                     }
                 },