@salla.sa/twilight-components 2.14.294 → 2.14.296

package/dist/components/interfaces.js

@@ -0,0 +1,15 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+var Genders;
+(function (Genders) {
+    Genders["Female"] = "female";
+    Genders["Male"] = "male";
+})(Genders || (Genders = {}));
+var FormFieldTypes;
+(function (FormFieldTypes) {
+    FormFieldTypes["Photo"] = "photo";
+    FormFieldTypes["Text"] = "Text";
+})(FormFieldTypes || (FormFieldTypes = {}));
+
+export { FormFieldTypes as F, Genders as G };

package/dist/components/salla-custom-fields.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaCustomFields extends Components.SallaCustomFields, HTMLElement {}
+export const SallaCustomFields: {
+    prototype: SallaCustomFields;
+    new (): SallaCustomFields;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-custom-fields.js

@@ -0,0 +1,174 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { C as CameraIcon } from './camera.js';
+import { F as FormFieldTypes } from './interfaces.js';
+import { d as defineCustomElement$3 } from './salla-button2.js';
+import { d as defineCustomElement$2 } from './salla-file-upload2.js';
+
+const sallaCustomFieldsCss = ":host{display:block}";
+
+const SallaCustomFields$1 = /*@__PURE__*/ proxyCustomElement(class SallaCustomFields extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.fieldChanged = createEvent(this, "fieldChanged", 7);
+        this.fileUploaded = createEvent(this, "fileUploaded", 7);
+        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)));
+    }
+    static get style() { return sallaCustomFieldsCss; }
+}, [0, "salla-custom-fields", {
+        "fields": [1],
+        "isEditable": [4, "is-editable"],
+        "fileUploadUrl": [1, "file-upload-url"],
+        "parsedFields": [32],
+        "fieldErrors": [32],
+        "isSubmitting": [32],
+        "setFields": [64],
+        "getFieldValues": [64],
+        "validateFields": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-custom-fields", "salla-button", "salla-file-upload"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-custom-fields":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaCustomFields$1);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-file-upload":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaCustomFields = SallaCustomFields$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaCustomFields, defineCustomElement };

package/dist/components/salla-file-upload2.js

@@ -51,6 +51,10 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class SallaFileUpload e
          * 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
          */
@@ -312,11 +316,11 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class SallaFileUpload e
         }
     }
     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();
@@ -399,7 +403,7 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class SallaFileUpload e
                 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,
@@ -443,6 +447,11 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class SallaFileUpload e
                             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);
                         }
@@ -497,6 +506,7 @@ const SallaFileUpload = /*@__PURE__*/ proxyCustomElement(class SallaFileUpload e
         "profileImage": [516, "profile-image"],
         "name": [1537],
         "payloadName": [1, "payload-name"],
+        "payloadParams": [16, "payload-params"],
         "type": [1],
         "accept": [1537],
         "fileId": [2, "file-id"],

package/dist/components/salla-product-options2.js

@@ -447,7 +447,7 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
      */
     handlePaste(event) {
         const target = event.target;
-        if (!Salla.helpers.hasApplePay()
+        if (!Salla.helpers.isAppleDevice()
             || !(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)
             || !target.classList.contains('s-form-control')) {
             return;

package/dist/components/salla-user-menu.js

@@ -38,6 +38,13 @@ 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$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu extends HTMLElement {
@@ -49,9 +56,10 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
             orders: OrderIcon,
             pending_orders: PendingOrdersIcon,
             wishlist: WishListIcon,
-            profile: UserCircle,
             wallet: WalletIcon,
             loyalty_program: loyaltyProgramIcon,
+            profile: UserCircle,
+            settings: SettingstIcon,
         };
         this.accountLoading = false;
         this.opened = false;
@@ -62,6 +70,7 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
         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');
@@ -106,6 +115,7 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
             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');
         });
@@ -147,8 +157,9 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
         });
     }
     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) {
@@ -185,8 +196,8 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
             window.addEventListener('click', this.onClickOutside);
         }
     }
-    menuItemClicked(event, item) {
-        if (item[0] !== 'logout') {
+    menuItemClicked(event, itemKey) {
+        if (itemKey !== 'logout') {
             return;
         }
         event.preventDefault();
@@ -205,18 +216,23 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
                 '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) {
+        // 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) {
@@ -225,7 +241,7 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
     }
     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)))));
@@ -233,10 +249,9 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
         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 this; }
@@ -255,6 +270,7 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
         "profile": [32],
         "rating": [32],
         "wallet": [32],
+        "settings": [32],
         "loyalty_program": [32],
         "logout": [32],
         "hello": [32],
@@ -264,6 +280,7 @@ const SallaUserMenu$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu ext
         "is_loggedIn": [32],
         "badges": [32],
         "hasBadges": [32],
+        "profileUrl": [32],
         "OrderUpdate": [32]
     }]);
 function defineCustomElement$1() {

package/dist/components/salla-user-profile.js

@@ -2,24 +2,12 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { C as CameraIcon } from './camera.js';
-import { d as defineCustomElement$6 } from './salla-button2.js';
-import { d as defineCustomElement$5 } from './salla-datetime-picker2.js';
-import { d as defineCustomElement$4 } from './salla-file-upload2.js';
+import { G as Genders } from './interfaces.js';
+import { d as defineCustomElement$5 } from './salla-button2.js';
+import { d as defineCustomElement$4 } from './salla-datetime-picker2.js';
 import { d as defineCustomElement$3 } from './salla-skeleton2.js';
 import { d as defineCustomElement$2 } from './salla-tel-input2.js';
 
-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$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserProfile extends HTMLElement {
@@ -30,7 +18,6 @@ const SallaUserProfile$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserProfi
         /**
          * 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;
@@ -77,20 +64,13 @@ const SallaUserProfile$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserProfi
             });
         });
     }
-    /**
-     * 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;
     }
@@ -106,74 +86,34 @@ const SallaUserProfile$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserProfi
             }
         }
     }
-    // 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();
@@ -182,19 +122,9 @@ const SallaUserProfile$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserProfi
         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');
@@ -210,15 +140,13 @@ const SallaUserProfile$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserProfi
         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)));
     }
     static get style() { return sallaUserProfileCss; }
 }, [0, "salla-user-profile", {
-        "customFields": [1, "custom-fields"],
         "minAge": [2, "min-age"],
         "userData": [32],
         "isEditable": [32],
-        "userDefinedFields": [32],
         "disableAction": [32],
         "isLoading": [32],
         "first_name_trans": [32],
@@ -235,14 +163,13 @@ const SallaUserProfile$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserProfi
         "drag_and_drop_trans": [32],
         "browse_trans": [32],
         "email_required_trans": [32],
-        "invalid_email_trans": [32],
-        "setCustomFields": [64]
+        "invalid_email_trans": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-user-profile", "salla-button", "salla-datetime-picker", "salla-file-upload", "salla-skeleton", "salla-tel-input"];
+    const components = ["salla-user-profile", "salla-button", "salla-datetime-picker", "salla-skeleton", "salla-tel-input"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-user-profile":
             if (!customElements.get(tagName)) {
@@ -250,16 +177,11 @@ function defineCustomElement$1() {
             }
             break;
         case "salla-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "salla-datetime-picker":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "salla-file-upload":
+        case "salla-datetime-picker":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/esm/{filepond-9s_hrH-T.js → filepond-BEN4Pt87.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-BzYM6G5p.js';
+import { d as getDefaultExportFromCjs } from './index-bXg2F_NN.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-poster-B0Eow32y.js → filepond-plugin-file-poster-B7t9aVVy.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-BzYM6G5p.js';
+import { d as getDefaultExportFromCjs } from './index-bXg2F_NN.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {