@salla.sa/twilight-components 2.14.295 → 2.14.297

package/dist/esm/salla-accordion_62.entry.js

@@ -1,12 +1,13 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement, c as createEvent, d as getDefaultExportFromCjs, F as Fragment, j as axios } from './index-Ziat6EbF.js';
+import { r as registerInstance, h, H as Host, a as getElement, c as createEvent, d as getDefaultExportFromCjs, F as Fragment, j as axios } from './index-D8Ikl-5X.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
 import { A as ArrowDownIcon, S as SpecialDiscountIcon } from './special-discount-yRO-ZESF.js';
 import { I as IconVerified } from './check-uTyAzPSy.js';
 import { H as Helper } from './Helper-B51hb0bi.js';
 import { a as arrowLeft } from './arrow-left-BedNk7k1.js';
+import { C as CameraIcon, G as Genders } from './interfaces-CBT_Nxny.js';
 import { S as ShoppingBag } from './shopping-bag-DiKTtDW5.js';
 import { M as MailIcon } from './mail-DmgxDvXL.js';
 import { w as whatsapp$1 } from './whatsapp2-DWksgowB.js';
@@ -3523,13 +3524,13 @@ const SallaFileUpload = class {
             return;
         try {
             const [FilePondModule, FilePondPluginFileValidateSize, FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginImageEdit, FilePondPluginFileValidateType, FilePondPluginFilePoster] = await Promise.all([
-                import('./filepond-vl78959W.js').then(function (n) { return n.f; }),
-                import('./filepond-plugin-file-validate-size-B6Dk56YE.js').then(function (n) { return n.f; }),
-                import('./filepond-plugin-image-exif-orientation-dnXbnCGP.js').then(function (n) { return n.f; }),
-                import('./filepond-plugin-image-preview-CGT6aBAl.js').then(function (n) { return n.f; }),
-                import('./filepond-plugin-image-edit-DWNUa3R3.js').then(function (n) { return n.f; }),
-                import('./filepond-plugin-file-validate-type-P-_BDRkR.js').then(function (n) { return n.f; }),
-                import('./filepond-plugin-file-poster-CqR_Dwed.js').then(function (n) { return n.f; })
+                import('./filepond-DjIxwPi0.js').then(function (n) { return n.f; }),
+                import('./filepond-plugin-file-validate-size-Cf09KKtA.js').then(function (n) { return n.f; }),
+                import('./filepond-plugin-image-exif-orientation-BhEk_QOu.js').then(function (n) { return n.f; }),
+                import('./filepond-plugin-image-preview-Bsa9hzKo.js').then(function (n) { return n.f; }),
+                import('./filepond-plugin-image-edit-DbT6_H2k.js').then(function (n) { return n.f; }),
+                import('./filepond-plugin-file-validate-type-ByZikBAG.js').then(function (n) { return n.f; }),
+                import('./filepond-plugin-file-poster-CYvspSki.js').then(function (n) { return n.f; })
             ]);
             this.FilePond = FilePondModule;
             // Register plugins
@@ -3558,6 +3559,10 @@ const SallaFileUpload = class {
          * Set the component to be profile image uploader with a preview and a circular shape
          */
         this.profileImage = false;
+        /**
+         * Allow to pass extra params to be sent with the upload request
+         */
+        this.payloadParams = {};
         /**
          * Accepted file types
          */
@@ -3819,11 +3824,11 @@ const SallaFileUpload = class {
         }
     }
     render() {
-        return (h(Host, { key: 'b5d3d0cf960e703c563f8999d55a99cbfe7a85e3', class: {
+        return (h(Host, { key: '68939496fd8cfcc89a7a5d21e7e4daedab0db536', class: {
                 "s-file-upload": true,
                 "s-file-upload-profile-image": this.profileImage,
                 "s-file-upload-multiple": this.allowMultiple,
-            } }, h("input", { key: '5e9cc8cd73e83acbb0a9f04e15e530563e94988b', type: "file", name: this.name, value: this.value, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), this.allowMultiple && this.showMaxCountHint ? h("div", { class: "s-file-upload-hint s-hidden" }, this.max_count_hint(this.maxFilesCount)) : '', h("input", { key: '13a402c070302bfb00d82a24f523a9b764e39037', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.value, ref: input => this.hiddenInput = input })));
+            } }, h("input", { key: 'adef3f296d759850322faf038602143a0239201d', type: "file", name: this.name, value: this.value, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), this.allowMultiple && this.showMaxCountHint ? h("div", { class: "s-file-upload-hint s-hidden" }, this.max_count_hint(this.maxFilesCount)) : '', h("input", { key: 'dc74f8a155eeedd294548f782ed158f1a889b373', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.value, ref: input => this.hiddenInput = input })));
     }
     componentDidLoad() {
         let files = this.getFiles();
@@ -3906,7 +3911,7 @@ const SallaFileUpload = class {
                 process: {
                     onload: (response) => {
                         let responseData = JSON.parse(response).data;
-                        if (this.allowMultiple && Array.isArray(responseData) && responseData.length > 0) {
+                        if ((this.instantUpload || this.allowMultiple) && Array.isArray(responseData) && responseData.length > 0) {
                             const fileId = `${this.host.id}-${Math.floor(100 + Math.random() * 900)}`;
                             this.uploadedFiles.push({
                                 id: fileId,
@@ -3950,6 +3955,11 @@ const SallaFileUpload = class {
                             formData.append(this.payloadName, this.filepond.getFile(0).file);
                             formData.delete(this.name);
                         }
+                        if (this.payloadParams) {
+                            for (const [k, v] of Object.entries(this.payloadParams)) {
+                                formData.append(k, v);
+                            }
+                        }
                         if (this.cartItemId) {
                             formData.append('cart_item_id', this.cartItemId);
                         }
@@ -7710,13 +7720,6 @@ var Currency;
     Currency["Sar"] = "SAR";
 })(Currency || (Currency = {}));
 
-var CameraIcon = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>camera</title>
-<path d="M16 10.667c-4.044 0-7.333 3.289-7.333 7.333s3.289 7.333 7.333 7.333 7.333-3.289 7.333-7.333-3.289-7.333-7.333-7.333zM16 22.667c-2.573 0-4.667-2.093-4.667-4.667s2.093-4.667 4.667-4.667 4.667 2.093 4.667 4.667-2.093 4.667-4.667 4.667zM28 5.333h-3.287l-2.271-3.407c-0.248-0.371-0.664-0.593-1.109-0.593h-10.667c-0.445 0-0.861 0.223-1.109 0.593l-2.271 3.407h-3.287c-2.205 0-4 1.795-4 4v17.333c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-17.333c0-2.205-1.795-4-4-4zM29.333 26.667c0 0.735-0.599 1.333-1.333 1.333h-24c-0.735 0-1.333-0.599-1.333-1.333v-17.333c0-0.735 0.599-1.333 1.333-1.333h4c0.445 0 0.861-0.223 1.109-0.593l2.272-3.407h9.239l2.271 3.407c0.248 0.371 0.664 0.593 1.109 0.593h4c0.735 0 1.333 0.599 1.333 1.333zM25.333 10.66c-0.736 0-1.333 0.604-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.597 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327z"></path>
-</svg>
-`;
-
 var FileIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>file-upload</title>
@@ -12504,7 +12507,7 @@ const SallaTelInput = class {
         if (this.TelInput)
             return;
         try {
-            const telInputModule = await import('./index-DvtO64lP.js').then(function (n) { return n.i; });
+            const telInputModule = await import('./index-CYhDRQ7q.js').then(function (n) { return n.i; });
             this.TelInput = telInputModule.default;
         }
         catch (error) {
@@ -12655,20 +12658,18 @@ var WalletIcon = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
+var SettingstIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>settings</title>
+<path d="M29.717 19.037l-1.817-1.499c0.067-0.512 0.1-1.028 0.1-1.539s-0.033-1.027-0.1-1.54l1.817-1.499c1.177-0.969 1.479-2.633 0.716-3.956l-1.159-2.009c-0.761-1.324-2.349-1.895-3.784-1.359l-2.212 0.829c-0.817-0.627-1.704-1.139-2.649-1.535l-0.388-2.332c-0.251-1.507-1.54-2.6-3.067-2.6h-2.319c-1.525 0-2.815 1.093-3.065 2.6l-0.388 2.332c-0.945 0.396-1.833 0.909-2.649 1.535l-2.212-0.829c-1.428-0.533-3.021 0.036-3.783 1.359l-1.16 2.011c-0.763 1.323-0.46 2.985 0.716 3.955l1.817 1.499c-0.067 0.513-0.1 1.029-0.1 1.54s0.033 1.027 0.1 1.539l-1.819 1.5c-1.176 0.971-1.476 2.635-0.715 3.955l1.159 2.011c0.763 1.324 2.356 1.899 3.784 1.36l2.212-0.831c0.816 0.625 1.703 1.139 2.649 1.535l0.388 2.332c0.251 1.507 1.54 2.6 3.067 2.6h2.319c1.527 0 2.816-1.093 3.065-2.6l0.389-2.332c0.947-0.396 1.833-0.909 2.649-1.535l2.212 0.831c1.432 0.539 3.023-0.035 3.783-1.36l1.16-2.011c0.76-1.32 0.459-2.984-0.717-3.956zM28.123 21.663l-1.16 2.011c-0.108 0.188-0.336 0.267-0.536 0.193l-2.931-1.1c-0.459-0.173-0.979-0.079-1.349 0.248-0.923 0.811-1.979 1.423-3.139 1.819-0.464 0.157-0.804 0.559-0.885 1.043l-0.515 3.087c-0.033 0.215-0.216 0.371-0.433 0.371h-2.319c-0.217 0-0.4-0.156-0.436-0.371l-0.513-3.087c-0.080-0.484-0.42-0.884-0.885-1.043-1.16-0.396-2.216-1.008-3.139-1.819-0.248-0.217-0.561-0.332-0.88-0.332-0.157 0-0.316 0.028-0.469 0.084l-2.931 1.1c-0.199 0.079-0.428-0.004-0.537-0.193l-1.159-2.011c-0.109-0.191-0.067-0.428 0.101-0.568l2.409-1.985c0.379-0.312 0.555-0.807 0.46-1.288-0.119-0.605-0.179-1.219-0.179-1.821 0-0.604 0.060-1.217 0.181-1.823 0.095-0.481-0.081-0.976-0.46-1.288l-2.409-1.985c-0.168-0.139-0.211-0.376-0.101-0.567l1.16-2.011c0.107-0.188 0.332-0.268 0.536-0.193l2.931 1.1c0.459 0.172 0.979 0.079 1.348-0.247 0.924-0.812 1.98-1.424 3.139-1.817 0.465-0.159 0.805-0.559 0.885-1.044l0.513-3.088c0.036-0.215 0.219-0.371 0.436-0.371h2.319c0.217 0 0.4 0.156 0.436 0.371l0.515 3.088c0.081 0.484 0.42 0.885 0.885 1.044 1.157 0.393 2.213 1.005 3.139 1.817 0.371 0.325 0.889 0.42 1.349 0.247l2.929-1.099c0.203-0.076 0.428 0.005 0.537 0.193l1.159 2.009c0.109 0.191 0.067 0.428-0.101 0.567l-2.409 1.985c-0.379 0.312-0.555 0.807-0.46 1.288 0.119 0.605 0.179 1.219 0.179 1.823 0 0.603-0.060 1.216-0.181 1.821-0.095 0.48 0.081 0.975 0.46 1.288l2.408 1.984c0.169 0.141 0.212 0.379 0.103 0.569zM16.016 10.667c-2.941 0-5.333 2.392-5.333 5.333s2.392 5.333 5.333 5.333 5.333-2.392 5.333-5.333-2.392-5.333-5.333-5.333zM16.016 18.667c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667z"></path>
+</svg>
+`;
+
 const sallaUserMenuCss = "";
 
 const SallaUserMenu = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.items = {
-            notifications: BellRing,
-            orders: OrderIcon,
-            pending_orders: PendingOrdersIcon,
-            wishlist: WishListIcon,
-            profile: UserCircle,
-            wallet: WalletIcon,
-            loyalty_program: GiftIcon,
-        };
         this.accountLoading = false;
         this.opened = false;
         this.notifications = salla.lang.get('common.titles.notifications');
@@ -12678,6 +12679,7 @@ const SallaUserMenu = class {
         this.profile = salla.lang.get('common.titles.profile');
         this.rating = salla.lang.get('common.titles.rating');
         this.wallet = salla.lang.get('common.titles.wallet');
+        this.settings = salla.lang.get('common.titles.settings');
         this.loyalty_program = salla.lang.get('pages.loyalty_program.loyalty_points');
         this.logout = salla.lang.get('blocks.header.logout');
         this.hello = salla.lang.get('pages.checkout.hello');
@@ -12688,6 +12690,7 @@ const SallaUserMenu = class {
             notifications: salla.helpers.number(salla.storage.get('user.notifications') || 0),
             pending_orders: salla.helpers.number(salla.storage.get('user.pending_orders') || 0),
         };
+        this.sallaAccountEnabled = Salla.config.get('store.features').includes('salla-account');
         this.hasBadges = Number(salla.storage.get('user.pending_orders')) > 0 ||
             Number(salla.storage.get('user.notifications')) > 0;
         /**
@@ -12710,6 +12713,16 @@ const SallaUserMenu = class {
             this.opened = false;
         };
         this.OrderUpdate = 0;
+        this.items = {
+            notifications: BellRing,
+            orders: OrderIcon,
+            pending_orders: PendingOrdersIcon,
+            wishlist: WishListIcon,
+            wallet: WalletIcon,
+            loyalty_program: GiftIcon,
+            profile: UserCircle,
+            ...(this.sallaAccountEnabled ? { settings: SettingstIcon } : {})
+        };
         // salla.auth.event.onLoggedIn(() => {
         //   this.is_loggedIn = true
         // })
@@ -12722,6 +12735,7 @@ const SallaUserMenu = class {
             this.hello = salla.lang.get('pages.checkout.hello');
             this.rating = salla.lang.get('common.titles.rating');
             this.wallet = salla.lang.get('common.titles.wallet');
+            this.settings = salla.lang.get('common.titles.settings');
             this.loyalty_program = salla.lang.get('pages.loyalty_program.loyalty_points');
             this.logout = salla.lang.get('blocks.header.logout');
         });
@@ -12763,8 +12777,9 @@ const SallaUserMenu = class {
         });
     }
     componentWillLoad() {
-        return new Promise(resolve => salla.onReady(resolve)).then(() => {
-            let trigger = this.host.querySelector('[slot="trigger"]');
+        return salla.onReady().then(() => {
+            this.profileUrl = `${salla.config.get('account.url', 'https://accounts.salla.com')}/${salla.config.get('user.language_code')}/user?store=${salla.config.get('store.id')}&info=${salla.storage.get('token')}`;
+            const trigger = this.host.querySelector('[slot="trigger"]');
             this.triggerSlot =
                 '<div class="s-user-menu-trigger"><div class="s-user-menu-avatar-wrap"><img class="s-user-menu-trigger-avatar" src="{avatar}" alt="{first_name}{last_name}" /></div><div class="s-user-menu-trigger-content"><span class="s-user-menu-trigger-hello">{hello}</span><p class="s-user-menu-trigger-name">{first_name} {last_name}</p></div> <i class="s-user-menu-trigger-icon">{icon}</i></div>';
             if (!trigger) {
@@ -12801,8 +12816,8 @@ const SallaUserMenu = class {
             window.addEventListener('click', this.onClickOutside);
         }
     }
-    menuItemClicked(event, item) {
-        if (item[0] !== 'logout') {
+    menuItemClicked(event, itemKey) {
+        if (itemKey !== 'logout') {
             return;
         }
         event.preventDefault();
@@ -12821,18 +12836,28 @@ const SallaUserMenu = class {
                 's-user-menu-trigger-slot': true,
                 's-user-menu-red-dot': this.hasBadges,
                 's-user-menu-trigger-avatar-only': this.avatarOnly,
-            }, id: "trigger-slot", onClick: e => this.open(e), innerHTML: this.replaceParams(this.triggerSlot) }));
+            }, id: "trigger-slot", onClick: e => this.open(e), onKeyUp: e => this.open(e), innerHTML: this.replaceParams(this.triggerSlot) }));
+    }
+    getItemAnchorLinkAttrs(itemKey) {
+        if (itemKey === 'profile' && this.profileUrl) {
+            return this.sallaAccountEnabled ?
+                { href: this.profileUrl, target: '_blank', rel: 'noopener noreferrer' } :
+                { href: '/profile' };
+        }
+        // Fix loyalty program URL mapping from master
+        const urlKey = itemKey === 'loyalty_program' ? 'loyalty' : itemKey;
+        return { href: salla.url.get(urlKey) };
     }
-    getMenuItem(item, i) {
+    getMenuItem([itemKey, itemValue], i) {
         //todo:: enhancement support slot here
-        if (item[0] === 'wallet' && !window.can_access_wallet)
+        if (itemKey === 'wallet' && !window.can_access_wallet)
             return;
-        if (item[0] === 'loyalty_program' && !salla.config.get('store.features').includes('loyalty-system'))
+        if (itemKey === 'loyalty_program' && !salla.config.get('store.features').includes('loyalty-system'))
             return;
         return (h("li", { class: {
                 's-user-menu-dropdown-item': true,
-                's-user-menu-dropdown-item-logout': i + 1 == Object.entries(this.items).length,
-            } }, h("a", { href: salla.url.get(item[0] === 'loyalty_program' ? 'loyalty' : item[0]), onClick: event => this.menuItemClicked(event, item) }, h("i", { innerHTML: item[1] }, " "), h("span", { class: "s-user-menu-dropdown-item-title" }, this[item[0]]), !['٠', '0', undefined].includes(this.badges[item[0]]) ? (h("span", { class: "s-user-menu-dropdown-item-badge" }, this.badges[item[0]])) : (''))));
+                's-user-menu-dropdown-item-logout': i + 1 === Object.entries(this.items).length,
+            } }, h("a", { ...this.getItemAnchorLinkAttrs(itemKey), class: "s-user-menu-dropdown-item-link", onClick: event => this.menuItemClicked(event, itemKey) }, h("i", { class: "s-user-menu-dropdown-item-prefix", innerHTML: itemValue }), h("span", { class: "s-user-menu-dropdown-item-title" }, this[itemKey]), !['٠', '0', undefined].includes(this.badges[itemKey]) ? (h("span", { class: "s-user-menu-dropdown-item-badge" }, this.badges[itemKey])) : (''))));
     }
     componentShouldUpdate() {
         if (!this.opened) {
@@ -12841,7 +12866,7 @@ const SallaUserMenu = class {
     }
     render() {
         if (!this.is_loggedIn) {
-            return (h(Host, null, h("slot", { name: "login-btn" }, h("button", { class: "s-user-menu-login-btn", onClick: () => salla.event.dispatch('login::open'), innerHTML: UserCircle }))));
+            return (h(Host, null, h("slot", { name: "login-btn" }, h("button", { type: "button", class: "s-user-menu-login-btn", onClick: () => salla.event.dispatch('login::open'), innerHTML: UserCircle }))));
         }
         if (this.inline) {
             return (h(Host, null, h("ul", { class: "s-user-menu-inline" }, Object.entries(this.items).map((item, i) => this.getMenuItem(item, i)))));
@@ -12849,27 +12874,15 @@ const SallaUserMenu = class {
         return (h(Host, null, h("div", { class: {
                 's-user-menu-wrapper': true,
                 's-user-menu-relative-dropdown': this.relativeDropdown,
-            } }, this.getTheHeader(), h("div", { class: { 's-user-menu-toggler': true, opened: this.opened } }, h("div", { class: "s-user-menu-dropdown", onClick: e => e.stopPropagation() }, this.showHeader ? (h("div", { class: "s-user-menu-dropdown-header" }, h("img", { src: this.avatar, alt: `${this.first_name} ${this.last_name}` }), h("div", { class: "s-user-menu-dropdown-header-content" }, h("span", null, this.hello), h("p", null, this.first_name, " ", this.last_name)), h("button", { class: "s-user-menu-dropdown-header-close", innerHTML: Cancel, onClick: () => (this.opened = false) }))) : (''), h("ul", { class: "s-user-menu-dropdown-list" }, Object.entries(this.items).map((item, i) => this.getMenuItem(item, i))))))));
+            } }, this.getTheHeader(), h("div", { class: { 's-user-menu-toggler': true, opened: this.opened } }, h("div", { class: "s-user-menu-dropdown", onClick: e => e.stopPropagation(), onKeyUp: e => e.stopPropagation() }, this.showHeader ? (h("div", { class: "s-user-menu-dropdown-header" }, h("img", { src: this.avatar, alt: `${this.first_name} ${this.last_name}` }), h("div", { class: "s-user-menu-dropdown-header-content" }, h("span", null, this.hello), h("p", null, this.first_name, " ", this.last_name)), h("button", { type: 'button', class: "s-user-menu-dropdown-header-close", innerHTML: Cancel, onClick: () => { this.opened = false; } }))) : (''), h("ul", { class: "s-user-menu-dropdown-list" }, Object.entries(this.items).map((item, i) => this.getMenuItem(item, i))))))));
     }
     componentDidLoad() {
-        //make sure to load the avatar if it's lazy, we use it in Y
         document.lazyLoadInstance?.update(this.host.querySelectorAll('.lazy'));
     }
     get host() { return getElement(this); }
 };
 SallaUserMenu.style = sallaUserMenuCss;
 
-var Genders;
-(function (Genders) {
-    Genders["Female"] = "female";
-    Genders["Male"] = "male";
-})(Genders || (Genders = {}));
-var FormFieldTypes;
-(function (FormFieldTypes) {
-    FormFieldTypes["Photo"] = "photo";
-    FormFieldTypes["Text"] = "Text";
-})(FormFieldTypes || (FormFieldTypes = {}));
-
 const sallaUserProfileCss = ":host{display:block}";
 
 const SallaUserProfile = class {
@@ -12879,7 +12892,6 @@ const SallaUserProfile = class {
         /**
          * The minimum allowed age for a user. Users with a birthdate indicating an age less than this value will be considered invalid.
          * Defaults to 10.
-         * @type {number}
          */
         this.minAge = 10;
         this.isEditable = true;
@@ -12926,20 +12938,13 @@ const SallaUserProfile = class {
             });
         });
     }
-    /**
-     * Sets custom fields for the component. Can be handy for non HTML usage.
-     *
-     * @param fields - An array of custom fields.
-     */
-    async setCustomFields(fields) {
-        this.userDefinedFields = fields;
-    }
     // Event handler for phone number field changes
     phoneNumberFieldEventHandler(data) {
         if (!data.detail.number) {
-            return (this.disableAction = true);
+            this.disableAction = true;
+            return;
         }
-        this.userData.phone.number = parseInt(data.detail.number);
+        this.userData.phone.number = Number.parseInt(data.detail.number);
         this.userData.phone.country = data.detail.country_code;
         this.disableAction = false;
     }
@@ -12955,74 +12960,34 @@ const SallaUserProfile = class {
             }
         }
     }
-    // Event handler for file upload changes
-    handleOnFileAdded(key, data) {
-        // TODO: the key in here, shall be not have whitespace. or the key for
-        // the field shall be provided with one of the properties of the custom field
-        if (!data.detail.error) {
-            this.userData[key] = data.detail.file;
-            this.disableAction = false;
-        }
-        else {
-            this.disableAction = true;
-        }
-    }
     // Event handler for email input changes
     handleEmailInput(key, event) {
         const emailErrorDisplaySection = document.getElementById('email-error');
         const email = event.target.value;
         if (!email) {
             this.disableAction = true;
-            return (emailErrorDisplaySection.textContent = this.email_required_trans);
+            emailErrorDisplaySection.textContent = this.email_required_trans;
+            return;
         }
         const emailPattern = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
         if (!emailPattern.test(email)) {
             this.disableAction = true;
-            return (emailErrorDisplaySection.textContent = this.invalid_email_trans);
+            emailErrorDisplaySection.textContent = this.invalid_email_trans;
         }
         emailErrorDisplaySection.textContent = '';
         this.userData[key] = email;
         this.disableAction = false;
     }
-    // Helper method to trim language code from URL
-    trimLanguageCodeFromUrl(url, languageCode) {
-        const pattern = new RegExp(`^(https?://[^/]+)\\/${languageCode}(.*)`, 'i');
-        const match = url.replace(/\/+$/, '').match(pattern);
-        if (match && match.length >= 2) {
-            const [, baseUrl, restOfUrl] = match;
-            return baseUrl + restOfUrl;
-        }
-        return url;
-    }
-    // Helper method to get file upload URL
-    getFileUploadUrl() {
-        return `${this.trimLanguageCodeFromUrl(salla.config.get('store.url'), salla.config.get('user.language_code'))}/upload-image`;
-    }
-    // Render custom fields based on user-defined fields
-    renderCustomFields() {
-        if (!this.userDefinedFields) {
-            return '';
-        }
-        return this.userDefinedFields.map((field) => {
-            return (h("div", { class: "s-user-profile-field" }, h("label", { htmlFor: `${field.id}`, class: "s-user-profile-field-label" }, field.label), this.renderCustomField(field)));
-        });
-    }
-    renderCustomField(field) {
-        if (field.type !== FormFieldTypes.Photo) {
-            return (h("input", { type: field.type, id: `${field.id}`, value: field.value, onChange: event => this.handleFieldChange(`custom_fields[${field.id}]`, event), name: `custom_fields[${field.id}]`, class: "form-input", required: field.required }));
-        }
-        return (h("salla-file-upload", { "instant-upload": true, value: field.value, url: this.getFileUploadUrl(), name: `custom_fields[${field.id}]`, "payload-name": "image", height: "120px", onAdded: data => this.handleOnFileAdded(`custom_fields[${field.id}]`, data) }, h("div", { class: "s-user-profile-filepond-placeholder" }, h("span", { class: "s-user-profile-filepond-placeholder-icon" }, h("i", { innerHTML: CameraIcon })), h("p", { class: "s-user-profile-filepond-placeholder-text" }, this.drag_and_drop_trans), h("span", { class: "filepond--label-action" }, this.browse_trans))));
-    }
     // Submit form method
     submitForm(event) {
         event.preventDefault();
         this.disableAction = true;
-        let payload = Object.assign({}, this.userData);
-        delete payload.phone;
+        const payload = Object.assign({}, this.userData);
+        payload.phone = undefined;
         //@ts-ignore
-        payload['phone'] = this.userData.phone.number;
-        payload['country_code'] = this.userData.phone.country;
-        return salla.api.profile.update(payload).finally(() => (this.disableAction = false));
+        payload.phone = this.userData.phone.number;
+        payload.country_code = this.userData.phone.country;
+        salla.api.profile.update(payload).finally(() => { this.disableAction = false; });
     }
     getBirthDateRestriction() {
         const now = new Date();
@@ -13031,19 +12996,9 @@ const SallaUserProfile = class {
         return now;
     }
     fetchData() {
-        let customFields = null;
-        // Load user-defined fields and initial user data
-        if (this.customFields) {
-            customFields = typeof this.customFields === 'string'
-                ? JSON.parse(this.customFields)
-                : this.customFields;
-        }
-        if (customFields && Array.isArray(customFields)) {
-            this.userDefinedFields = customFields;
-        }
         return salla.api.profile
             .info()
-            .then(resp => (this.userData = resp.data))
+            .then(resp => { this.userData = resp.data; })
             .finally(() => {
             this.isLoading = false;
             this.isEditable = !Salla.config.get('store.features').includes('sso-login');
@@ -13059,7 +13014,7 @@ const SallaUserProfile = class {
         if (this.isLoading) {
             return this.renderLoadingSection();
         }
-        return (h("form", { onSubmit: event => this.submitForm(event) }, h("div", { class: "s-user-profile-wrapper" }, h("div", { class: "s-user-profile-field" }, h("label", { htmlFor: "first-name", class: "s-user-profile-field-label" }, this.first_name_trans), h("input", { disabled: !this.isEditable, type: "text", name: "first_name", value: this.userData.first_name, id: "first-name", required: true, autocomplete: "first_name", class: "form-input", onChange: event => this.handleFieldChange('first_name', event) })), h("div", { class: "s-user-profile-field" }, h("label", { htmlFor: "last-name", class: "s-user-profile-field-label" }, this.last_name_trans), h("input", { disabled: !this.isEditable, type: "text", name: "last_name", value: this.userData.last_name, id: "last-name", required: true, autocomplete: "last_name", class: "form-input", onChange: event => this.handleFieldChange('last_name', event) })), h("div", { class: "s-user-profile-field" }, h("label", { htmlFor: "birthday", class: "s-user-profile-field-label" }, this.birthday_trans), h("salla-datetime-picker", { disabled: !this.isEditable, dateFormat: "Y-m-d", value: this.userData.birthday, placeholder: this.birthday_placeholder_trans, required: true, maxDate: this.getBirthDateRestriction(), name: "birthday", onPicked: event => this.handleFieldChange('birthday', event) })), h("div", { class: "s-user-profile-field" }, h("label", { htmlFor: "gender", class: "s-user-profile-field-label" }, this.gender_trans), h("select", { disabled: !this.isEditable, class: "form-input", name: "gender", required: true, onChange: event => this.handleFieldChange('gender', event) }, h("option", { value: "" }, this.gender_placeholder_trans), h("option", { value: Genders.Male, selected: this.userData.gender == Genders.Male }, this.male_trans), h("option", { value: Genders.Female, selected: this.userData.gender == Genders.Female }, this.female_trans))), h("div", { class: "s-user-profile-field" }, h("label", { htmlFor: "email", class: "s-user-profile-field-label" }, this.email_trans), h("input", { disabled: !this.isEditable, type: "email", name: "email", value: this.userData.email, id: "email", class: "form-input", required: true, onInput: event => this.handleEmailInput('email', event) }), h("p", { id: "email-error", class: "s-user-profile-field-error" })), h("div", { class: "s-user-profile-field" }, h("label", { htmlFor: "international-mobile", class: "s-user-profile-field-label" }, this.mobile_trans), h("salla-tel-input", { disabled: !this.isEditable, name: "international-mobile", "country-code": this.userData.phone.country, phone: `${this.userData.phone.number}`, onPhoneEntered: data => this.phoneNumberFieldEventHandler(data) })), this.isEditable && this.renderCustomFields()), h("salla-button", { type: "submit", loading: this.disableAction, disabled: this.disableAction || !this.isEditable, "loader-position": "end", class: "s-user-profile-submit" }, this.save_btn_trans)));
+        return (h("form", { onSubmit: event => this.submitForm(event) }, h("div", { class: "s-user-profile-wrapper" }, h("div", { class: "s-user-profile-field" }, h("label", { htmlFor: "first-name", class: "s-user-profile-field-label" }, this.first_name_trans), h("input", { disabled: !this.isEditable, type: "text", name: "first_name", value: this.userData.first_name, id: "first-name", required: true, autocomplete: "first_name", class: "form-input", onChange: event => this.handleFieldChange('first_name', event) })), h("div", { class: "s-user-profile-field" }, h("label", { htmlFor: "last-name", class: "s-user-profile-field-label" }, this.last_name_trans), h("input", { disabled: !this.isEditable, type: "text", name: "last_name", value: this.userData.last_name, id: "last-name", required: true, autocomplete: "last_name", class: "form-input", onChange: event => this.handleFieldChange('last_name', event) })), h("div", { class: "s-user-profile-field" }, h("label", { htmlFor: "birthday", class: "s-user-profile-field-label" }, this.birthday_trans), h("salla-datetime-picker", { disabled: !this.isEditable, dateFormat: "Y-m-d", value: this.userData.birthday, placeholder: this.birthday_placeholder_trans, required: true, maxDate: this.getBirthDateRestriction(), name: "birthday", onPicked: event => this.handleFieldChange('birthday', event) })), h("div", { class: "s-user-profile-field" }, h("label", { htmlFor: "gender", class: "s-user-profile-field-label" }, this.gender_trans), h("select", { disabled: !this.isEditable, class: "form-input", name: "gender", required: true, onChange: event => this.handleFieldChange('gender', event) }, h("option", { value: "" }, this.gender_placeholder_trans), h("option", { value: Genders.Male, selected: this.userData.gender === Genders.Male }, this.male_trans), h("option", { value: Genders.Female, selected: this.userData.gender === Genders.Female }, this.female_trans))), h("div", { class: "s-user-profile-field" }, h("label", { htmlFor: "email", class: "s-user-profile-field-label" }, this.email_trans), h("input", { disabled: !this.isEditable, type: "email", name: "email", value: this.userData.email, id: "email", class: "form-input", required: true, onInput: event => this.handleEmailInput('email', event) }), h("p", { id: "email-error", class: "s-user-profile-field-error" })), h("div", { class: "s-user-profile-field" }, h("label", { htmlFor: "international-mobile", class: "s-user-profile-field-label" }, this.mobile_trans), h("salla-tel-input", { disabled: !this.isEditable, name: "international-mobile", "country-code": this.userData.phone.country, phone: `${this.userData.phone.number}`, onPhoneEntered: data => this.phoneNumberFieldEventHandler(data) }))), h("salla-button", { type: "submit", loading: this.disableAction, disabled: this.disableAction || !this.isEditable, "loader-position": "end", class: "s-user-profile-submit" }, this.save_btn_trans)));
     }
 };
 SallaUserProfile.style = sallaUserProfileCss;

package/dist/esm/salla-advertisement.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-Ziat6EbF.js';
+import { r as registerInstance, h, a as getElement } from './index-D8Ikl-5X.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
 
 const sallaAdvertisementCss = ":host{display:block}";

package/dist/esm/salla-app-install-alert.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-Ziat6EbF.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-D8Ikl-5X.js';
 
 const sallaAppInstallAlertCss = ":host{display:block}";
 

package/dist/esm/salla-apps-icons.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-Ziat6EbF.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-D8Ikl-5X.js';
 
 const sallaAppsIconsCss = ":host{display:block}";
 

package/dist/esm/salla-cart-item-offers.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-Ziat6EbF.js';
+import { r as registerInstance, h } from './index-D8Ikl-5X.js';
 import { S as SpecialDiscountIcon, A as ArrowDownIcon } from './special-discount-yRO-ZESF.js';
 import { G as GiftIcon } from './gift-C0JNGIpa.js';
 

package/dist/esm/salla-conditional-offer.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-Ziat6EbF.js';
+import { r as registerInstance, h, H as Host } from './index-D8Ikl-5X.js';
 
 var DiscountType;
 (function (DiscountType) {

package/dist/esm/salla-contacts.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-Ziat6EbF.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-D8Ikl-5X.js';
 import { w as whatsapp } from './whatsapp2-DWksgowB.js';
 import { M as MailIcon } from './mail-DmgxDvXL.js';
 

package/dist/esm/salla-custom-fields.entry.js

@@ -0,0 +1,133 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, c as createEvent, h } from './index-D8Ikl-5X.js';
+import { C as CameraIcon, F as FormFieldTypes } from './interfaces-CBT_Nxny.js';
+
+const sallaCustomFieldsCss = ":host{display:block}";
+
+const SallaCustomFields = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.fieldChanged = createEvent(this, "fieldChanged");
+        this.fileUploaded = createEvent(this, "fileUploaded");
+        this.isEditable = true;
+        this.fieldErrors = {};
+        this.isSubmitting = false;
+    }
+    get dragAndDropText() {
+        return salla.lang.get("common.uploader.drag_and_drop");
+    }
+    get browseText() {
+        return salla.lang.get("common.uploader.browse");
+    }
+    get saveButtonText() {
+        return salla.lang.get("common.elements.save");
+    }
+    async setFields(fields) {
+        this.parsedFields = fields;
+    }
+    async getFieldValues() {
+        return this.parsedFields?.reduce((values, field) => {
+            values[`custom_fields[${field.id}]`] = field.value;
+            return values;
+        }, {}) || {};
+    }
+    async validateFields() {
+        if (!this.parsedFields)
+            return true;
+        const errors = this.parsedFields.reduce((acc, field) => {
+            if (field.required && (!field.value || field.value === "")) {
+                acc[field.id.toString()] = `${field.label} is required`;
+            }
+            return acc;
+        }, {});
+        this.fieldErrors = errors;
+        return Object.keys(errors).length === 0;
+    }
+    handleFieldChange(field, event) {
+        const value = event.target.value;
+        field.value = value;
+        this.clearFieldError(field.id);
+        const isValid = !(field.required && !value);
+        if (!isValid) {
+            this.setFieldError(field.id, `${field.label} is required`);
+        }
+        this.fieldChanged.emit({ fieldId: field.id, value, isValid });
+    }
+    handleFileUpload(field, event) {
+        const { error, file } = event.detail;
+        const isValid = !error;
+        this.clearFieldError(field.id);
+        if (isValid) {
+            field.value = file;
+        }
+        else {
+            this.setFieldError(field.id, "File upload failed");
+        }
+        this.fileUploaded.emit({ fieldId: field.id, file, isValid });
+    }
+    clearFieldError(fieldId) {
+        this.fieldErrors = { ...this.fieldErrors };
+        delete this.fieldErrors[fieldId];
+    }
+    setFieldError(fieldId, message) {
+        this.fieldErrors = { ...this.fieldErrors, [fieldId]: message };
+    }
+    renderTextField(field) {
+        return (h("input", { disabled: !this.isEditable, type: field.type, id: `custom-field-${field.id}`, value: field.value?.toString() || "", onChange: (e) => this.handleFieldChange(field, e), name: `${field.id}`, class: "form-input", required: field.required }));
+    }
+    renderFileField(field) {
+        return (h("salla-file-upload", { url: salla.url.api('upload'), id: `custom-field-${field.id}`, name: `${field.id}`, type: "registration", value: field.value, height: "120px", onAdded: (e) => this.handleFileUpload(field, e), required: field.required, disabled: !this.isEditable, onUploaded: e => { e.target.value = e.target.value?.url; }, allowRemove: true, onRemoved: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                field.value = "";
+                e.target.value = "";
+            }, payloadName: "files[]", payloadParams: { type: 'registration' }, "instant-upload": true }, h("div", { class: "s-custom-fields-filepond-placeholder" }, h("span", { class: "s-custom-fields-filepond-placeholder-icon" }, h("i", { innerHTML: CameraIcon })), h("p", { class: "s-custom-fields-filepond-placeholder-text" }, this.dragAndDropText), h("span", { class: "filepond--label-action" }, this.browseText))));
+    }
+    renderField(field) {
+        return (h("div", { class: "s-custom-fields-field", key: field.id }, h("label", { class: "s-custom-fields-field-label", htmlFor: `custom-field-${field.id}` }, field.label, field.required && h("span", { class: "s-custom-fields-required" }, "*")), h("div", null, field.type === FormFieldTypes.Photo
+            ? this.renderFileField(field)
+            : this.renderTextField(field), this.fieldErrors[field.id] && (h("p", { class: "s-custom-fields-error" }, this.fieldErrors[field.id])))));
+    }
+    componentWillLoad() {
+        this.parsedFields = this.parseFields(this.fields);
+    }
+    parseFields(fields) {
+        if (!fields)
+            return [];
+        return typeof fields === "string"
+            ? JSON.parse(fields)
+            : Array.isArray(fields) ? fields : [];
+    }
+    async handleSubmit(e) {
+        e.preventDefault();
+        this.isSubmitting = true;
+        try {
+            const payload = {};
+            const form = e.target;
+            const elements = form.elements;
+            for (let i = 0; i < elements.length; i++) {
+                const element = elements[i];
+                if (element.name && !element.name.startsWith("hidden") && element.value) {
+                    payload[element.name] = element.value;
+                }
+            }
+            await salla.api.profile.updateCustomFields({
+                id: salla.config.get("store.id"),
+                fields: payload,
+            });
+        }
+        finally {
+            this.isSubmitting = false;
+        }
+    }
+    render() {
+        if (!this.parsedFields?.length)
+            return null;
+        return (h("form", { class: "s-custom-fields-wrapper", onSubmit: this.handleSubmit }, this.parsedFields.map(field => this.renderField(field)), h("salla-button", { type: "submit", loading: this.isSubmitting, disabled: this.isSubmitting || !this.isEditable, "loader-position": "end", class: "s-custom-fields-submit-btn" }, this.saveButtonText)));
+    }
+};
+SallaCustomFields.style = sallaCustomFieldsCss;
+
+export { SallaCustomFields as salla_custom_fields };

package/dist/esm/salla-filters-widget.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Ziat6EbF.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-D8Ikl-5X.js';
 import { H as Helper } from './Helper-B51hb0bi.js';
 import { F as FilterOptionTypes } from './interfaces-DL4h2bc3.js';
 import './anime.es-CgtvEd63.js';

package/dist/esm/salla-filters.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Ziat6EbF.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-D8Ikl-5X.js';
 import { F as FilterOptionTypes } from './interfaces-DL4h2bc3.js';
 import { H as Helper } from './Helper-B51hb0bi.js';
 import './anime.es-CgtvEd63.js';