udp-stencil-component-library 1.0.2 → 1.0.3

package/dist/cjs/file-upload_3.cjs.entry.js

@@ -4,6 +4,7 @@ var index = require('./index-Bu1pSYrV.js');
 var configService = require('./configService-OX6rz-VE.js');
 var Close24 = require('@carbon/icons/es/close/24');
 var axios = require('axios');
+var udpDriveUtils = require('./udp-drive-utils-BOyI3h7K.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -253,36 +254,48 @@ const FileUpload = class {
      * @internal
      */
     async initialValueChanged(newValue) {
-        // Check if this looks like an event detail object (has value, files, toString, valueOf properties)
-        // If so, ignore it since this is from our own event emission, not external initialization
-        if (newValue && typeof newValue === 'object' && 'value' in newValue && 'files' in newValue && 'toString' in newValue) {
-            console.log('initialValueChanged received an event detail object, ignoring to prevent circular processing');
+        // Ignore event detail objects from self-emission to prevent cycles
+        if (newValue && typeof newValue === 'object' && 'value' in newValue && 'files' in newValue) {
             return;
         }
-        if (newValue === '' || newValue === undefined || newValue === null) {
+        // Handle empty or null values by clearing the component
+        if (!newValue) {
             this.files = [];
             this.existingFileReferences.clear();
             return;
         }
         try {
-            // Clear existing references when initialValue changes
             this.existingFileReferences.clear();
-            if (typeof newValue === 'string') {
-                // For backward compatibility - clear files if just a string
-                this.files = [];
+            let processedFiles = [];
+            // Case 1: The value is a special reference string
+            if (typeof newValue === 'string' && udpDriveUtils.isFileReference(newValue)) {
+                processedFiles = await udpDriveUtils.parseFileReferences(newValue);
+                // After parsing, populate the map of existing UDP files so they are marked as "(saved)"
+                for (const file of processedFiles) {
+                    if (file.driveFileId) {
+                        const udpFile = {
+                            driveFileId: file.driveFileId,
+                            name: file.name,
+                            extension: file.extension || file.name.split('.').pop() || '',
+                            tenantId: null, // Dummy value, not needed for display
+                            productId: 0, // Dummy value
+                            path: '', // Dummy value
+                        };
+                        this.existingFileReferences.set(file.name, udpFile);
+                    }
+                }
             }
+            // Case 2: The value is an array of File or UdpDriveFile objects
             else if (Array.isArray(newValue)) {
-                // Handle array of files (UdpDriveFile[] or File[])
-                const processedFiles = await Promise.all(newValue.map(file => this.processInitialFile(file)));
-                // Filter out null results after processing
-                this.files = processedFiles.filter(file => file !== null);
+                const files = await Promise.all(newValue.map(file => this.processInitialFile(file)));
+                processedFiles = files.filter(file => file !== null);
             }
-            else {
-                // Handle single file (UdpDriveFile or File)
-                const processedFile = await this.processInitialFile(newValue);
-                this.files = processedFile ? [processedFile] : [];
+            // Case 3: The value is a single File or UdpDriveFile object
+            else if (typeof newValue === 'object') {
+                const file = await this.processInitialFile(newValue);
+                processedFiles = file ? [file] : [];
             }
-            // Update value prop after initialization (but don't emit events)
+            this.files = processedFiles;
             this.updateValueProp();
         }
         catch (error) {
@@ -682,18 +695,18 @@ const FileUpload = class {
         //   return null;
         // }
         const isError = !!this.errorMessage;
-        return (index.h(index.Host, { key: '7e56f8e39623d43c746c38f7ddab10bc42198b18', class: {
+        return (index.h(index.Host, { key: 'c1f02a5c917b40937601e2e3884c4fe1936a959d', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--full-width': this.fullWidth,
                 'udp-input--disabled': this.disabled,
                 'udp-input--readonly': this.readonly,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: '19869bd8b849eb6e9c88d6816613180e63f81d9c', id: !this.hideDragAndDrop ? 'drop-area' : 'outer-container', onDragOver: this.handleDragOver, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, class: !this.hideDragAndDrop ? (this.fullWidth ? 'full-width' : 'contained-width') : '' }, !this.hideDragAndDrop ? (index.h("unity-typography", null, index.h("p", null, this.dragAndDropMessage), !this.hideButton ? index.h("p", null, "or") : '')) : (''), !this.hideButton ? (index.h("custom-button", { label: this.browseFileMessage, onClick: (e) => this.handleBrowseFiles(e), id: 'udpRecord-file-upload-' + this.id, disabled: this.disabled || this.readonly,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: '1d1a154c1c761076a9dff60d8ba69061d11a13c3', id: !this.hideDragAndDrop ? 'drop-area' : 'outer-container', onDragOver: this.handleDragOver, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, class: !this.hideDragAndDrop ? (this.fullWidth ? 'full-width' : 'contained-width') : '' }, !this.hideDragAndDrop ? (index.h("unity-typography", null, index.h("p", null, this.dragAndDropMessage), !this.hideButton ? index.h("p", null, "or") : '')) : (''), !this.hideButton ? (index.h("custom-button", { label: this.browseFileMessage, onClick: (e) => this.handleBrowseFiles(e), id: 'udpRecord-file-upload-' + this.id, disabled: this.disabled || this.readonly,
             //@ts-ignore
-            udprecordid: 'udpRecord-file-upload-' + this.id })) : (''), this.files.length > 0 && (index.h("div", { key: 'a0237ffaeca36e4270511dc80ca005d453635c51', class: !this.hideDragAndDrop ? 'container' : '' }, index.h("div", { key: '29f6b2a647031ddb1edbaf6546bd59b0b83ee72b', class: !this.hideDragAndDrop ? 'inner-container' : '' }, this.files.map((file, index$1) => {
+            udprecordid: 'udpRecord-file-upload-' + this.id })) : (''), this.files.length > 0 && (index.h("div", { key: 'f80617fca05ad0020cd6b659b54728dd05d02f8c', class: !this.hideDragAndDrop ? 'container' : '' }, index.h("div", { key: '27d4582929098019d177ba87e5e721b1a442cce4', class: !this.hideDragAndDrop ? 'inner-container' : '' }, this.files.map((file, index$1) => {
             const isExistingFile = this.existingFileReferences.has(file.name);
             return (index.h("div", { class: !this.hideDragAndDrop ? 'file-container' : '', key: index$1 }, index.h("div", { class: "file-text", onClick: () => this.downloadFile(file), style: { cursor: this.disabled ? 'not-allowed' : 'pointer', textDecoration: 'underline' } }, index.h("unity-typography", null, file.name, isExistingFile && index.h("span", { style: { fontSize: '0.8em', opacity: '0.7' } }, " (saved)"))), index.h("div", null, index.h("stencil-icon-button", { showLabel: false, icon: Close24__default.default, onClick: () => this.handleRemoveFile(index$1), disabled: this.disabled || this.readonly }))));
-        })))), this.errorMessage ? (index.h("div", { id: "error-text" }, index.h("unity-typography", null, this.errorMessage))) : (''))));
+        })))), this.errorMessage && !this.fileWindowOpen ? (index.h("div", { id: "error-text" }, index.h("unity-typography", { color: "error" }, this.errorMessage))) : (''))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -933,8 +946,6 @@ const SelectableList = class {
 };
 SelectableList.style = selectableListCss;
 
-const stencilFieldCss = "stencil-field.css :host{display:block;padding:16px;background-color:#f4f4f4;}input[type=\"checkbox\"],input[type=\"radio\"]{appearance:none;background-color:#fff;border:2px solid #8d8d8d;width:20px;height:20px;border-radius:50%;position:relative;cursor:pointer;transition:all 0.3s ease;}input[type=\"checkbox\"]{border-radius:2px;}input[type=\"radio\"]:checked,input[type=\"checkbox\"]:checked{background-color:var(--primary-color);border-color:var(--primary-color)}input[type=\"radio\"]:checked::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:12px;height:12px;background-color:white;border-radius:50%;}input[type=\"checkbox\"]:checked::before{content:'\\2714';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:14px;color:white;}.checkbox-container,.radio-container{display:flex;align-items:center;cursor:pointer}input[type=\"checkbox\"],input[type=\"radio\"]{margin-right:8px;}label{margin:0;display:block;line-height:1;display:flex;align-items:center}";
-
 const StencilField = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -954,20 +965,24 @@ const StencilField = class {
                 this.finalFormBlur = () => {
                     var _a;
                     blur();
-                    this.errorMessage = (_a = this.state.api.getFieldState(this.name)) === null || _a === void 0 ? void 0 : _a.error;
+                    // Preserve custom errors - only use Final Form errors if no custom error exists
+                    const finalFormError = (_a = this.state.api.getFieldState(this.name)) === null || _a === void 0 ? void 0 : _a.error;
+                    if (!this.errorMessage) {
+                        this.errorMessage = finalFormError || '';
+                    }
                 };
                 this.finalFormChange = event => {
                     change(event);
                     // reset the error on change, error state will be re-evaluated when the blur event is triggered
                     this.errorMessage = '';
-                    // Force re-render to inject cleared error into child components
+                    // // Force re-render to inject cleared error into child components
                     this.injectPropsIntoSlottedElements();
                 };
                 this.finalFormFocus = focus;
                 this.registered = true;
             }
             // update value
-            this.value = value;
+            this.value = value !== null && value !== void 0 ? value : "";
         }, {
             value: true,
             error: false,
@@ -1004,6 +1019,7 @@ const StencilField = class {
                     element.addEventListener('change', this.handleChange.bind(this));
                     element.addEventListener('blur', this.handleBlur.bind(this));
                     element.addEventListener('focus', this.handleFocus.bind(this));
+                    element.addEventListener('error', this.handleError.bind(this));
                     element.setAttribute('data-field-events-bound', 'true');
                 }
             });
@@ -1104,8 +1120,37 @@ const StencilField = class {
         var _a;
         (_a = this.finalFormBlur) === null || _a === void 0 ? void 0 : _a.call(this, e);
     }
+    handleError(e) {
+        var _a, _b;
+        // Handle error events from slotted child components
+        if (e.detail !== undefined) {
+            this.errorMessage = e.detail;
+            // Store the custom error in the form's custom errors registry
+            if (((_a = this.state) === null || _a === void 0 ? void 0 : _a.registeredFields) && this.name) {
+                if (!this.state.customErrors) {
+                    this.state.customErrors = {};
+                }
+                this.state.customErrors[this.name] = e.detail;
+                // Trigger form validation to include custom errors
+                if (this.state.api) {
+                    // Force re-validation by changing the field value to itself
+                    const currentValue = (_b = this.state.api.getFieldState(this.name)) === null || _b === void 0 ? void 0 : _b.value;
+                    this.state.api.change(this.name, currentValue);
+                }
+            }
+            // Force re-render to inject error state
+            this.injectPropsIntoSlottedElements();
+        }
+    }
     stencilInvalid(e) {
-        this.finalFormBlur(e);
+        // Handle form validation errors
+        if (e.detail && this.name && e.detail[this.name]) {
+            // Set the error message for this specific field
+            this.errorMessage = e.detail[this.name];
+            // Force re-render to inject error into child components
+            this.injectPropsIntoSlottedElements();
+        }
+        // Don't call finalFormBlur here as it might overwrite custom errors
     }
     render() {
         if (!this.registered) {
@@ -1116,7 +1161,6 @@ const StencilField = class {
     }
     get el() { return index.getElement(this); }
 };
-StencilField.style = stencilFieldCss;
 
 exports.file_upload = FileUpload;
 exports.selectable_list = SelectableList;