@salla.sa/twilight-components 2.14.426 → 2.14.428

package/dist/components/salla-searchable-dropdown2.js

@@ -0,0 +1,255 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const SallaSearchableDropdown = /*@__PURE__*/ proxyCustomElement(class SallaSearchableDropdown extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.itemSelected = createEvent(this, "itemSelected", 7);
+        this.searchInput = createEvent(this, "searchInput", 7);
+        this.dropdownOpened = createEvent(this, "dropdownOpened", 7);
+        this.dropdownClosed = createEvent(this, "dropdownClosed", 7);
+        this.placeholder = '';
+        this.items = [];
+        this.selectedItem = null;
+        this.loading = false;
+        this.searching = false;
+        this.disabled = false;
+        this.required = false;
+        this.noResultsText = '';
+        this.inputId = '';
+        this.searchQuery = '';
+        this.clientSearch = false;
+        this.dropUp = false;
+        this.isOpen = false;
+        this.focusedIndex = -1;
+        this.clientSearchQuery = '';
+        this.scrollableAncestor = null;
+        this.handleTriggerClick = () => {
+            if (this.isOpen) {
+                this.close();
+            }
+            else {
+                this.open();
+            }
+        };
+        this.handleTriggerKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                if (!this.isOpen)
+                    this.open();
+            }
+            else if (e.key === 'Escape') {
+                this.close();
+            }
+        };
+        this.handleSearchInputChange = (e) => {
+            const value = e.target.value;
+            if (this.clientSearch) {
+                this.clientSearchQuery = value;
+            }
+            this.searchInput.emit(value);
+            this.focusedIndex = -1;
+        };
+        this.handleSearchKeyDown = (e) => {
+            const visibleItems = this.filteredItems;
+            const itemCount = visibleItems.length;
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    this.focusedIndex = itemCount > 0
+                        ? (this.focusedIndex + 1) % itemCount
+                        : -1;
+                    this.scrollFocusedIntoView();
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    this.focusedIndex = itemCount > 0
+                        ? (this.focusedIndex - 1 + itemCount) % itemCount
+                        : -1;
+                    this.scrollFocusedIntoView();
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    if (this.focusedIndex >= 0 && this.focusedIndex < itemCount) {
+                        this.selectItem(visibleItems[this.focusedIndex]);
+                    }
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    this.close();
+                    break;
+            }
+        };
+    }
+    connectedCallback() {
+        this.boundHandleClickOutside = this.handleClickOutside.bind(this);
+        document.addEventListener('mousedown', this.boundHandleClickOutside);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.boundHandleClickOutside);
+        if (this.scrollableAncestor) {
+            this.scrollableAncestor.style.overflow = '';
+            this.scrollableAncestor = null;
+        }
+    }
+    onItemsChange() {
+        this.focusedIndex = -1;
+    }
+    normalizeArabic(text) {
+        return text.replace(/[أإآا]/g, 'ا');
+    }
+    get filteredItems() {
+        if (!this.clientSearch || !this.clientSearchQuery.trim()) {
+            return this.items;
+        }
+        const query = this.normalizeArabic(this.clientSearchQuery.trim().toLowerCase());
+        return this.items.filter(item => {
+            const normalizedName = this.normalizeArabic(item.name.toLowerCase());
+            const normalizedNameEn = item.name_en ? item.name_en.toLowerCase() : '';
+            return normalizedName.includes(query) || normalizedNameEn.includes(query);
+        });
+    }
+    getDisplayName(item) {
+        const lang = salla?.config?.get('user.language_code');
+        if (lang && lang !== 'ar' && item.name_en?.trim()) {
+            return item.name_en.trim();
+        }
+        return item.name;
+    }
+    handleClickOutside(e) {
+        if (!this.isOpen)
+            return;
+        const target = e.target;
+        if (!this.host.contains(target)) {
+            this.close();
+        }
+    }
+    findScrollableAncestor() {
+        let el = this.host.parentElement;
+        while (el) {
+            const style = getComputedStyle(el);
+            const overflowY = style.overflowY;
+            if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'hidden' || style.overflow === 'clip') {
+                return el;
+            }
+            el = el.parentElement;
+        }
+        return null;
+    }
+    open() {
+        if (this.disabled || this.loading)
+            return;
+        this.isOpen = true;
+        this.focusedIndex = -1;
+        this.scrollableAncestor = this.findScrollableAncestor();
+        if (this.scrollableAncestor) {
+            this.scrollableAncestor.style.overflow = 'visible';
+        }
+        this.dropdownOpened.emit();
+        requestAnimationFrame(() => this.searchInputRef?.focus());
+    }
+    close() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.focusedIndex = -1;
+        this.clientSearchQuery = '';
+        if (this.scrollableAncestor) {
+            this.scrollableAncestor.style.overflow = '';
+            this.scrollableAncestor = null;
+        }
+        this.dropdownClosed.emit();
+    }
+    scrollFocusedIntoView() {
+        if (this.focusedIndex < 0)
+            return;
+        requestAnimationFrame(() => {
+            const listEl = this.panelRef?.querySelector('.s-searchable-dropdown-list');
+            const focused = listEl?.children[this.focusedIndex];
+            focused?.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    selectItem(item) {
+        this.itemSelected.emit(item);
+        this.close();
+    }
+    render() {
+        const hasSelection = this.selectedItem != null;
+        const listboxId = `${this.inputId}-listbox`;
+        return (h(Host, { key: '1e413d4391362f274223724ab37f5842a196f936', class: "s-searchable-dropdown" }, h("div", { key: 'c1c0b595a458db8918bc7c72b949cd514d764613', class: { 's-searchable-dropdown': true, 's-searchable-dropdown--open': this.isOpen } }, this.label && (h("label", { key: '576831e0383f561d5512792cb52d1c6d40156015', class: "s-searchable-dropdown-label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '290e1edb52971f5af6c6555f82ad595e97c9994d', class: "s-searchable-dropdown-required" }, " *"))), h("div", { key: 'e3c9aaea5697839e67aab1b91d07cb825ee76c7b', class: {
+                's-searchable-dropdown-trigger': true,
+                's-searchable-dropdown-trigger--disabled': this.disabled || this.loading,
+                's-searchable-dropdown-trigger--open': this.isOpen,
+            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-disabled": this.disabled || this.loading ? 'true' : 'false', tabIndex: this.disabled || this.loading ? -1 : 0, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hasSelection ? (h("span", { class: "s-searchable-dropdown-trigger-text" }, this.getDisplayName(this.selectedItem))) : (h("span", { class: "s-searchable-dropdown-trigger-placeholder" }, this.placeholder)), h("i", { key: 'f1e95e38ebffc358a9045f0fd38dd205eb2a14bb', class: {
+                'sicon-keyboard_arrow_down': true,
+                's-searchable-dropdown-trigger-icon': true,
+                's-searchable-dropdown-trigger-icon--open': this.isOpen,
+            }, "aria-hidden": "true" })), this.isOpen && (h("div", { key: 'a5c6b4650d8de5467c1d53e67700168a0795ff0b', class: {
+                's-searchable-dropdown-panel': true,
+                's-searchable-dropdown-panel--up': this.dropUp,
+            }, ref: (el) => (this.panelRef = el) }, h("div", { key: '5ddf73d6d8cb96881ac6f94ef25a9f58b883a6c0', class: "s-searchable-dropdown-search-wrap" }, h("i", { key: 'ec52897c25962c6d1e84986f25bdac2dd8ecdac0', class: "sicon-search s-searchable-dropdown-search-icon", "aria-hidden": "true" }), h("input", { key: 'e14dd7a0dae605dd37782cdd8c235e875105fcc9', ref: (el) => (this.searchInputRef = el), id: this.inputId, type: "text", class: "s-searchable-dropdown-search-input", placeholder: this.placeholder, value: this.clientSearch ? this.clientSearchQuery : this.searchQuery, onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchKeyDown, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId })), h("div", { key: '80daad72643001e400a9ff43444bbad5077ffa2d', id: listboxId, class: "s-searchable-dropdown-list s-scrollbar", role: "listbox" }, this.renderListContent()))))));
+    }
+    renderListContent() {
+        if (this.searching || this.loading) {
+            return (h("div", { class: "s-searchable-dropdown-loading" }, h("svg", { class: "s-searchable-dropdown-spinner", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", opacity: "0.25" }), h("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round" }))));
+        }
+        const visibleItems = this.filteredItems;
+        if (visibleItems.length === 0) {
+            return (h("div", { class: "s-searchable-dropdown-empty" }, this.noResultsText || salla?.lang?.get('common.elements.no_options') || 'No results found'));
+        }
+        return visibleItems.map((item, index) => {
+            const isSelected = this.selectedItem?.id === item.id;
+            const isFocused = this.focusedIndex === index;
+            return (h("button", { key: item.id, type: "button", role: "option", class: {
+                    's-searchable-dropdown-item': true,
+                    's-searchable-dropdown-item--selected': isSelected,
+                    's-searchable-dropdown-item--focused': isFocused && !isSelected,
+                }, "aria-selected": isSelected ? 'true' : 'false', onClick: () => this.selectItem(item) }, h("span", { class: {
+                    's-searchable-dropdown-item-name': true,
+                    's-searchable-dropdown-item-name--selected': isSelected,
+                } }, this.getDisplayName(item)), isSelected && (h("i", { class: "sicon-check s-searchable-dropdown-item-check", "aria-hidden": "true" }))));
+        });
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "items": ["onItemsChange"]
+    }; }
+}, [0, "salla-searchable-dropdown", {
+        "label": [1],
+        "placeholder": [1],
+        "items": [16],
+        "selectedItem": [16, "selected-item"],
+        "loading": [4],
+        "searching": [4],
+        "disabled": [4],
+        "required": [4],
+        "noResultsText": [1, "no-results-text"],
+        "inputId": [1, "input-id"],
+        "searchQuery": [1, "search-query"],
+        "clientSearch": [4, "client-search"],
+        "dropUp": [4, "drop-up"],
+        "isOpen": [32],
+        "focusedIndex": [32],
+        "clientSearchQuery": [32]
+    }, undefined, {
+        "items": ["onItemsChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-searchable-dropdown"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-searchable-dropdown":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaSearchableDropdown);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaSearchableDropdown as S, defineCustomElement as d };

package/dist/components/salla-skeleton2.js

@@ -27,7 +27,7 @@ const SallaSkeleton = /*@__PURE__*/ proxyCustomElement(class SallaSkeleton exten
             's-skeleton-item': true,
             's-skeleton-item-circular': this.type == 'circle',
         };
-        return (h(Host, { key: '9f9448d939ba69f60eca8dc6ea2ff98a047d6770', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: '3b43bb472316b5541a90081a5f3cb6ef91558212', class: classes }, "\u00A0")));
+        return (h(Host, { key: '2e14c27cb5a5403df46898ec1ae460fdd92f651f', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: '771d8d0c6640486cab15a70e47e8418edc77863e', class: classes }, "\u00A0")));
     }
     static get style() { return sallaSkeletonCss; }
 }, [0, "salla-skeleton", {

package/dist/components/salla-social-share.js

@@ -150,7 +150,7 @@ const SallaSocialShare$1 = /*@__PURE__*/ proxyCustomElement(class SallaSocialSha
         window.a2a?.init('page');
     }
     render() {
-        return (h("div", { key: 'b3e61354de13c16f9bce1dd4cd397375d9a42da9', class: "s-social-share-wrapper" }, h("slot", { key: 'ef44d8cda6967977a59a0fe85777add8a73ffa59', name: 'widget' }, h("salla-button", { key: '243916c3a241c9dceb11a406faabe033c71820d2', "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: 'a6fd2be4e2990f285960308cfd985d37e464d205', innerHTML: this.opened ? Cancel : ShareAlt }))), h("ul", { key: '27fa3a6ae2306cb61d97e71bb6591dd3614b5977', ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share", "data-a2a-url": this.url ? this.url : window.location.href, "data-a2a-title": this.urlName ? this.urlName : document.title }, this.platforms.split(',').map(platform => {
+        return (h("div", { key: 'e8585bb94b5e8c8b3136fa242bccdbf5406b350e', class: "s-social-share-wrapper" }, h("slot", { key: '15e2187a3df06ccb32b505d5437ebcf9241046a4', name: 'widget' }, h("salla-button", { key: '99467cafadf06a67b087e6ba13709d0d1a612ecc', "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: '2b6538e88a074cd769af24b72f2629e21dff45a5', innerHTML: this.opened ? Cancel : ShareAlt }))), h("ul", { key: 'dc42096ad383c9e7504c5e132e8fe65f25192748', ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share", "data-a2a-url": this.url ? this.url : window.location.href, "data-a2a-title": this.urlName ? this.urlName : document.title }, this.platforms.split(',').map(platform => {
             return (h("li", null, h("a", { class: `a2a_button_${platform}`, "aria-label": `Share Via ${platform}` }, this.platformIcons.map((icon) => {
                 if (icon.name === platform) {
                     return h("span", { class: "s-social-share-icon", innerHTML: icon.icon });

package/dist/components/salla-social.js

@@ -56,7 +56,7 @@ const SallaSocial$1 = /*@__PURE__*/ proxyCustomElement(class SallaSocial extends
     }
     render() {
         const linksArray = this.getLinksArray();
-        return (h(Host, { key: '27639596a37f52686c1ac4b1a825fa143747216c' }, h("ul", { key: '9f6a6c96fe124fda09d2b879e3825ef73ec29c2c', class: "s-social-list" }, linksArray.map((link) => (h("li", { class: "s-social-link" }, h("div", { id: "social-slot", innerHTML: this.socialSlot
+        return (h(Host, { key: '921a2e9387ec6d8c450f222ecbb36f81be06cb30' }, h("ul", { key: 'b65fa02b40dcd077ec89076aea55f9cc664eb92e', class: "s-social-list" }, linksArray.map((link) => (h("li", { class: "s-social-link" }, h("div", { id: "social-slot", innerHTML: this.socialSlot
                 .replace(/\{icon\}/g, this.iconsList[link.type])
                 .replace(/\{type\}/g, link.type)
                 .replace(/\{link\}/g, link.value.toString()) })))))));

package/dist/components/salla-tab-content2.js

@@ -32,7 +32,7 @@ const SallaTabContent = /*@__PURE__*/ proxyCustomElement(class SallaTabContent e
             's-tabs-content': true,
             's-tabs-content-selected': this.isSelected
         };
-        return (h("div", { key: '8678e860af6640f0ff1a92593fbe624416412b49', class: classes }, h("slot", { key: '10951e5230f9c5fbfbd5959d3773d44b66e85315' })));
+        return (h("div", { key: '32762c93a41db3a20cd9fa98db182af388ecb084', class: classes }, h("slot", { key: '40caefc56a772c6f3f9a41650aec01a72e9e899b' })));
     }
     static get style() { return sallaTabContentCss; }
 }, [4, "salla-tab-content", {

package/dist/components/salla-tab-header2.js

@@ -58,7 +58,7 @@ const SallaTabHeader = /*@__PURE__*/ proxyCustomElement(class SallaTabHeader ext
             's-tabs-active': this.isSelected,
         };
         return [
-            h("div", { key: '02bd540222ec3bd4adac0dd08132c366e29c6d9d', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: '9e6de884cb209d499e4bbd055e40c525680a7c37' })),
+            h("div", { key: 'ac33877e26aac4d67f1d0f1dfdd6f34197739d8f', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: 'bc8b9b519b480f0df2203b06bde1b82086f48a1e' })),
         ];
     }
     static get style() { return sallaTabHeaderCss; }

package/dist/components/salla-tabs2.js

@@ -51,7 +51,7 @@ const SallaTabs = /*@__PURE__*/ proxyCustomElement(class SallaTabs extends HTMLE
     }
     render() {
         return [
-            h("div", { key: 'ecbcdc11af92d35afe933b11676bcf4769d19162', class: "s-tabs" }, h("div", { key: 'fa4fdecbc995dded92e3d64bf770d6375ad53fd2', class: "s-tabs-header" }, h("slot", { key: '730c1a278e95b7fa98da29956fee23dcd06e641d', name: "header" })), h("div", { key: '9721096ba8e1236500855a80f569e6ea8a4c1c32', class: "s-tabs-content-wrapper" }, h("slot", { key: 'ce82c43fd21bd1f28a7658b927646d0ff6052ea7', name: "content" })))
+            h("div", { key: 'b9b534860c70c17b22cad198696b80a5fae10d90', class: "s-tabs" }, h("div", { key: '7285d740077583bf211e7744d2db22e361989778', class: "s-tabs-header" }, h("slot", { key: '951159808cd26ce4994cbf69a3b0bed6100929dd', name: "header" })), h("div", { key: 'db550a026743862e8056b1a0f361da06cb78b4a3', class: "s-tabs-content-wrapper" }, h("slot", { key: '3b5dacf111e5e911c1f821e38bcbf578699cae33', name: "content" })))
         ];
     }
     get host() { return this; }

package/dist/components/salla-tel-input2.js

@@ -129,7 +129,7 @@ const SallaTelInput = /*@__PURE__*/ proxyCustomElement(class SallaTelInput exten
         }
     }
     render() {
-        return (h(Host, { key: '0ed711498e5b2987a4299bd36bebb6963a5082ea', class: "s-tel-input" }, h("input", { key: '8beb06377cefe6b4e02ca82f04941025949ea304', type: "tel", disabled: this.disabled, name: this.name, value: this.phone, onChange: (event) => this.handleCountryInput(event), ref: el => this.phoneInput = el, enterkeyhint: "next", autocomplete: "tel", class: "s-tel-input-control tel-input s-ltr" }), h("span", { key: '90295738a19bae3c61f4cb149c162ae8e3e1b08c', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: 'a15b9f99bbae0be5af7bd00335a4174e9609d507', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
+        return (h(Host, { key: 'b7c80fe9322f6f0ddd519042387ded7f7be3b33e', class: "s-tel-input" }, h("input", { key: '839b34b164c5dca31c917f514fe3fabd6bc4dfa3', type: "tel", disabled: this.disabled, name: this.name, value: this.phone, onChange: (event) => this.handleCountryInput(event), ref: el => this.phoneInput = el, enterkeyhint: "next", autocomplete: "tel", class: "s-tel-input-control tel-input s-ltr" }), h("span", { key: '81be950bd3b0dffc5637b02687c9b4318485757f', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '4f6a8e7888bf8e28d8029fd12851bb77286893a1', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
     }
     componentDidLoad() {
         this.initTelInput();

package/dist/components/salla-tooltip2.js

@@ -32,7 +32,7 @@ const SallaTooltip = /*@__PURE__*/ proxyCustomElement(class SallaTooltip extends
     }
     render() {
         const validTheme = ['default', 'dark'].includes(this.theme) ? this.theme : 'default';
-        return (h("div", { key: '789e7e8e0653d68b5387b2199e05f287c8b91c92', class: "s-tooltip-container" }, h("div", { key: '0342a96fa7c3d316cfc9f5435dc7321920044a12', class: `s-tooltip-item s-tooltip-item--${validTheme}`, style: { display: this.show ? 'block' : 'none' } }, this.text ? h("span", null, this.text) : h("slot", null))));
+        return (h("div", { key: 'e88949e9f1d97170bc61a0ab37e221863b9bc79f', class: "s-tooltip-container" }, h("div", { key: '1e65ce349cab58449512ba02ab11028de7fd6aa4', class: `s-tooltip-item s-tooltip-item--${validTheme}`, style: { display: this.show ? 'block' : 'none' } }, this.text ? h("span", null, this.text) : h("slot", null))));
     }
     get el() { return this; }
     static get style() { return sallaTooltipCss; }

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

@@ -83,7 +83,7 @@ const SallaUserSettings$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserSett
         await salla.profile.delete().finally(() => this.confirmationModal.close());
     }
     render() {
-        return (h(Host, { key: '09c239e885ba9e52e21ce17706c9296f99518c80', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: 'ae1d8057c8bc4a1d355300f4be87b8a33091f694', class: "s-user-settings-section" }, h("salla-list-tile", { key: '93a7aec26398f466f350defd6f1878b89dc85351' }, h("div", { key: '2e89f6967972d7b95fe43ad735a2180409d234dd', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '622a59eff6171b5b1bb86d8482142df673cbf794', innerHTML: UserCancel })), h("div", { key: 'ce73e774974ea08605635a8443d068c73fd20129', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: '000e5e933e8d6a1f1d4742b0441d86c8403d6cb5', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: '498fc6ec63be3a7bc0a78b208a48a824af5c38df', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '707181396eddd29d85826a48fb74a7119cfed2d6', class: "s-toggle" }, h("input", { key: 'a2188b266c8abe95a94affb128611074f8889405', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: '1d50965f07763ba23f1675736f7d676a2e3300b9', class: "s-toggle-switcher" }))))), h("div", { key: '303f5388b3cb3954dc574dd8ac2c5f3981e870ce', class: "s-user-settings-section" }, h("salla-list-tile", { key: '6c751eafd2a3547fa7adaaf165230857c22820d4' }, h("div", { key: 'aaf770f0e43798c73d6fb7c5e0a71b7e03f812b8', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '3e5bbc36ed00b1c99816557314d82a5c51ceefac', innerHTML: Bullhorn })), h("div", { key: '9dce63894704b419536b9f7afec474b90bf047a8', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: 'd1df5e80e9ee8b8512cfe334b3032d64a61b9dc2', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: 'a57e08a44055a8859b4f3f2fd4ee8e7d3abf8e46', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '6289b221064d45fd944bbed843350f4183d32e7e', class: "s-toggle" }, h("input", { key: '545e32938c4f1da231486b20be8f220108c20019', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: 'efa1680c2fbbdcc280330ffa3d83379e96b0e755', class: "s-toggle-switcher" }))))), h("div", { key: '86e21a0171941aa0f1ddf008f479101a707c7e00', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: '55f0b6d0b72ff1f91ff4ba09d28e8962e7f445b3' }, h("div", { key: '2d8ff66a76c3c8bf6a3c0e5222c142c0402b1c75', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'e59a4224af4f355679e2e163ca97c0f03b121ac7', innerHTML: UserOff })), h("div", { key: '59d4a4d841ab40f782f5a6a258c5e91211376d22', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: 'b51a3eedf67d2635ebbf15eb7e39289866b92481', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: '0871a013df31afcacad1f3e3f2a37a80668fffa0', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: 'c42688b4aa87c5cbeb2145246327271cbc7561b5', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: 'eaf3dbc98dc2483d2251fa5858bf77d698d24d66', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: 'e7403e420404a68db65c1efa8edfa7ce8095ed82', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: '1625698c6e2d8058177b51b5565adcf3fb92115f', class: "s-user-settings-confirmation" }, h("div", { key: '97a28f55f8dd76f15caa25148021501fe6447ddc', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: '8454d3da817db426934ff49b535f82e9e0711eb9', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: '9227e5eb5854e0415c0280c752340a526c2d19fb', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: '3788d8ebbfe73e4bd085c942a9a651e22e4585e1', fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
+        return (h(Host, { key: 'c130220b738d80f14cd4000b9eb4dd20df77980f', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: '2bf49761f3437963ac75a6407d7ec98592417b3a', class: "s-user-settings-section" }, h("salla-list-tile", { key: '8a3c57c305433e0172175118b72e36901ca43fda' }, h("div", { key: '126853187b1c957f5a7bd81c0341bae24e8d87ea', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '0796752200d217095580a0855b8cb3c275b025ec', innerHTML: UserCancel })), h("div", { key: '6a2fb48adf9a08f2853f641f88d5744f1e5e79fd', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: '57d60c74311b8e556008ab1bfefc3dbc7fe14d26', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: '670446bf37f6aa476810e890d4f79904e39f5e72', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: 'aea20b164e6b47d3b23b55fd9d8ee445dc0515fe', class: "s-toggle" }, h("input", { key: '9fc592118faa754525faa49023909b6b1c62823a', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: '485fb4402cb435fa55fd44b139bacc4502c9dd27', class: "s-toggle-switcher" }))))), h("div", { key: '2437e14c095e28e1cc626cb1cbf71dbd8337d954', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'cec0fbe6bbfe56eff1054869f300b905c515bd4c' }, h("div", { key: '3c3a370d9eac62dc871eebad8329e75e6395d3fa', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '70d16c4a2bc42eac766273ca05f67d176c6d4374', innerHTML: Bullhorn })), h("div", { key: 'c341c8ad97cd2fffce8e3af294bfae434314a2e4', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '54bd0cc88488863f55a9104d04a9df78f3eb6bd7', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: 'f5efcfb1466f3df26ff8820ccdd85a73d6395fef', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '8f1eaf0951abad13e01a0027a7975e50ad831094', class: "s-toggle" }, h("input", { key: '39ce354fc1d64e1540710fa06230e527c0bb0234', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: 'a40a9bbc22a3fd7a49a66fb4808abe79ad2d792e', class: "s-toggle-switcher" }))))), h("div", { key: '1ae760df718ca439c7cb1010c778b1b8f61f1b8f', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: 'da1fbd3e37d9ab35b4dac164801acfb55650e054' }, h("div", { key: '59f89006b21a2ff7bdcf63d16e5f67256877ce1d', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '53711d6f97340b6a1e3a430dbda8430adbcb00d0', innerHTML: UserOff })), h("div", { key: '485ddc81c283c70b948a9acab40c97e4dde8795b', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: '10624a62c0b9bf822a2087d36f4d4ce77548c6dd', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: 'f023d0193586f778860fda0b567eac30b9e913f5', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: 'ffb0af3f744c8ae24a1143d577e2b8a065bad7d1', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: 'ab93ecef93e4b79bcdade007ecfaea01631045bd', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: '50764fa29f599b2163f81ee110f98e41900e6d82', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: '8c32d8c06fd1a86b1b585b648e4c66d8af89b2db', class: "s-user-settings-confirmation" }, h("div", { key: 'd5207ec65164615618977308a9a73a604fa5f122', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: '7c1c4070c63620f995a14103426d54bbdf4cc4c5', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: '6ec7b830b1efd9d0acbe17a013d3ce3be2f0532b', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: '17929fee163ae7088656ee54698444ef477b8e41', fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
     }
     static get style() { return sallaUserSettingsCss; }
 }, [0, "salla-user-settings", {

package/dist/esm/{filepond-Dsmh37s8.js → filepond-EbHhfQ2h.js}

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

package/dist/esm/{filepond-plugin-file-poster-D_DbNtTu.js → filepond-plugin-file-poster-NI3abP58.js}

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

package/dist/esm/{filepond-plugin-file-validate-size-TmlZBEB7.js → filepond-plugin-file-validate-size-B6y95YaS.js}

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

package/dist/esm/{filepond-plugin-file-validate-type-CsP3KOU8.js → filepond-plugin-file-validate-type-DFmkHdVr.js}

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

package/dist/esm/{filepond-plugin-image-edit-CUu5Zp6h.js → filepond-plugin-image-edit-pwPBfksJ.js}

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

package/dist/esm/{filepond-plugin-image-exif-orientation-BOQOVJ6l.js → filepond-plugin-image-exif-orientation-jJpoA9Lm.js}

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

package/dist/esm/{filepond-plugin-image-preview-DHbbDW9K.js → filepond-plugin-image-preview-ClEFsrPa.js}

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

package/dist/esm/{functions-DcLenERt.js → functions-CGUgaH8t.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h } from './index-BO4PufG1.js';
+import { h } from './index-D36ugbw7.js';
 
 function nearestLowerMultiple(number, multipleOf = window.matchMedia('(min-width: 768px)').matches ? 3 : 2) {
     return number < multipleOf ? number : number - (number % multipleOf);