@salla.sa/twilight-components 2.14.352 → 2.14.354

package/dist/esm/salla-social-share.entry.js

@@ -0,0 +1,163 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, a as getElement } from './index-B74h9G6a.js';
+import { a as anime } from './anime.es-CgtvEd63.js';
+import { f as facebook, t as twitter } from './facebook-CO-PeZ27.js';
+import { M as MailIcon } from './mail-DmgxDvXL.js';
+import { C as Cancel } from './cancel-BsLF_HK7.js';
+
+var copy_link = `<!-- 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>link</title>
+<path d="M19.247 23.019l-4.189 4.189c-2.831 2.831-7.435 2.831-10.265 0-1.371-1.372-2.125-3.193-2.125-5.132s0.755-3.761 2.125-5.133l4.189-4.191c0.521-0.521 0.521-1.364 0-1.885s-1.364-0.521-1.885 0l-4.189 4.191c-1.875 1.875-2.907 4.367-2.907 7.019s1.032 5.143 2.907 7.017 4.368 2.907 7.019 2.907 5.143-1.032 7.017-2.908l4.189-4.189c0.521-0.521 0.521-1.364 0-1.885s-1.364-0.52-1.885 0.001zM22.276 9.724c-0.521-0.521-1.364-0.521-1.885 0l-10.667 10.667c-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l10.667-10.667c0.521-0.521 0.521-1.364 0-1.885zM29.093 2.908c-1.875-1.876-4.368-2.908-7.019-2.908s-5.143 1.032-7.017 2.908l-4.189 4.188c-0.521 0.521-0.521 1.364 0 1.885s1.364 0.521 1.885 0l4.189-4.189c2.831-2.831 7.435-2.831 10.265 0 1.371 1.372 2.125 3.193 2.125 5.132s-0.755 3.761-2.125 5.133l-4.189 4.191c-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l4.189-4.191c1.875-1.875 2.907-4.367 2.907-7.019s-1.032-5.143-2.907-7.016z"></path>
+</svg>
+`;
+
+var whatsapp = `<!-- 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>whatsapp</title>
+<path d="M16 32c-0.008 0-0.018 0-0.028 0-3.1 0-5.993-0.887-8.439-2.421l0.066 0.039-7.2 2.3 2.336-6.964c-1.713-2.492-2.736-5.575-2.736-8.897 0-0.020 0-0.040 0-0.060v0.003c0.009-8.833 7.167-15.991 15.999-16h0.001c8.837 0 16 7.163 16 16s-7.163 16-16 16v0zM7.906 27.424l0.4 0.264c2.169 1.449 4.837 2.312 7.707 2.312 7.732 0 14-6.268 14-14s-6.268-14-14-14c-0.004 0-0.009 0-0.013 0h0.001c-7.729 0.008-13.992 6.271-14 13.999v0.001c-0 0.010-0 0.021-0 0.032 0 3.072 1 5.909 2.693 8.206l-0.027-0.038 0.304 0.416-1.4 4.2zM20.716 24.958c-1.684-0.131-3.237-0.574-4.641-1.271l0.073 0.033c-3.098-1.456-5.634-3.668-7.438-6.405l-0.042-0.067c-1.102-1.357-1.819-3.067-1.962-4.938l-0.002-0.030c-0.001-0.036-0.001-0.078-0.001-0.12 0-1.575 0.66-2.995 1.719-4l0.002-0.002c0.547-0.52 1.289-0.839 2.105-0.839 0.033 0 0.066 0.001 0.099 0.002l-0.005-0c0.2 0 0.378 0 0.542 0.018 0.016-0.001 0.035-0.001 0.054-0.001 0.815 0 1.502 0.549 1.711 1.298l0.003 0.012 0.324 0.782c0.376 0.906 0.858 2.068 0.942 2.244 0.144 0.251 0.23 0.552 0.23 0.873 0 0.286-0.068 0.557-0.188 0.797l0.005-0.010c-0.149 0.307-0.332 0.57-0.55 0.802l0.002-0.002c-0.148 0.168-0.248 0.274-0.346 0.378s-0.172 0.18-0.26 0.284c0.575 0.92 1.237 1.713 1.992 2.406l0.008 0.008c0.829 0.758 1.802 1.373 2.872 1.8l0.064 0.022c0.369-0.266 0.672-0.6 0.896-0.985l0.008-0.015 0.174-0.232c0.328-0.484 0.875-0.798 1.495-0.798 0.249 0 0.487 0.051 0.703 0.142l-0.012-0.004c0.492 0.168 2.922 1.372 2.946 1.384l0.228 0.11c0.415 0.149 0.758 0.417 0.996 0.763l0.004 0.007c0.107 0.349 0.169 0.75 0.169 1.166 0 0.591-0.125 1.153-0.349 1.661l0.010-0.026c-0.702 1.368-1.983 2.353-3.511 2.637l-0.031 0.005c-0.309 0.071-0.663 0.112-1.028 0.112-0.004 0-0.007 0-0.011 0h0.001zM10.632 9.318c-0.028-0.002-0.062-0.004-0.095-0.004-0.245 0-0.472 0.076-0.659 0.206l0.004-0.002c-0.726 0.651-1.18 1.591-1.18 2.638 0 0.044 0.001 0.087 0.002 0.13l-0-0.006c0.122 1.404 0.662 2.662 1.495 3.671l-0.009-0.011 0.12 0.168c1.627 2.491 3.865 4.46 6.504 5.723l0.096 0.041c3.136 1.288 3.916 1.124 4.426 1.014 0.87-0.159 1.601-0.656 2.067-1.347l0.007-0.011c0.12-0.316 0.204-0.682 0.237-1.063l0.001-0.015-0.040-0.018-0.256-0.124c-0.8-0.4-2.46-1.2-2.734-1.292l-0.058 0.184c-0.346 0.501-0.684 0.934-1.045 1.347l0.015-0.017c-0.344 0.349-0.821 0.565-1.349 0.565-0.28 0-0.546-0.061-0.785-0.17l0.012 0.005c-1.403-0.547-2.609-1.301-3.646-2.239l0.010 0.009c-0.975-0.891-1.81-1.912-2.486-3.039l-0.034-0.061c-0.152-0.244-0.242-0.54-0.242-0.857 0-0.463 0.191-0.88 0.499-1.178l0-0c0.13-0.162 0.264-0.302 0.4-0.444l0.236-0.256c0.091-0.096 0.177-0.201 0.254-0.311l0.006-0.009c-0.158-0.36-0.622-1.472-0.988-2.352l-0.322-0.772-0.038-0.086c-0.188-0.010-0.302-0.016-0.426-0.016zM12.462 12.442v0.012z"></path>
+</svg>
+`;
+
+var Socials;
+(function (Socials) {
+    Socials["FACEBOOK"] = "facebook";
+    Socials["TWITTER"] = "twitter";
+    Socials["WHATSAPP"] = "whatsapp";
+    Socials["EMAIL"] = "email";
+    Socials["COPY_LINK"] = "copy_link";
+})(Socials || (Socials = {}));
+
+var ShareAlt = `<!-- 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>share-alt</title>
+<path d="M26.667 21.333c-1.699 0-3.196 0.812-4.173 2.052l-11.912-5.211c0.044-0.276 0.085-0.553 0.085-0.841 0-0.472-0.081-0.923-0.197-1.359l12.361-6.952c0.971 1.009 2.328 1.644 3.836 1.644 2.941 0 5.333-2.392 5.333-5.333s-2.392-5.333-5.333-5.333-5.333 2.392-5.333 5.333c0 0.472 0.081 0.923 0.197 1.359l-12.361 6.952c-0.971-1.009-2.328-1.644-3.836-1.644-2.941 0-5.333 2.392-5.333 5.333s2.392 5.333 5.333 5.333c1.699 0 3.196-0.812 4.173-2.052l11.912 5.211c-0.044 0.276-0.085 0.553-0.085 0.841 0 2.941 2.392 5.333 5.333 5.333s5.333-2.392 5.333-5.333-2.392-5.333-5.333-5.333zM26.667 2.667c1.471 0 2.667 1.196 2.667 2.667s-1.196 2.667-2.667 2.667-2.667-1.196-2.667-2.667 1.196-2.667 2.667-2.667zM5.333 20c-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.667zM26.667 29.333c-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 sallaSocialShareCss = "";
+
+const SallaSocialShare = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.opened = false;
+        this.allPlatforms = [Socials.WHATSAPP, Socials.FACEBOOK, Socials.TWITTER, Socials.EMAIL, Socials.COPY_LINK];
+        this.platformIcons = [{ icon: whatsapp, name: Socials.WHATSAPP }, {
+                icon: facebook,
+                name: Socials.FACEBOOK
+            }, { icon: twitter, name: Socials.TWITTER }, { icon: MailIcon, name: Socials.EMAIL }, {
+                icon: copy_link,
+                name: Socials.COPY_LINK
+            }];
+        this.convertedPlatforms = [];
+        /**
+         * page url that will be shared custom | current page url
+         */
+        this.url = "";
+        /**
+         * page url name that will be shared custom | current page url
+         */
+        this.urlName = "";
+        /**
+         * selected platforms to share | all platforms
+         */
+        this.platforms = 'facebook,twitter,whatsapp,email,copy_link';
+    }
+    componentWillLoad() {
+        if (this.host.hasAttribute('aria-label')) {
+            this.host.removeAttribute('aria-label');
+        }
+        if (document.getElementById('a2a-script')) {
+            return;
+        }
+        const script = document.createElement('script');
+        script.src = 'https://static.addtoany.com/menu/page.js';
+        script.setAttribute('id', 'a2a-script');
+        script.async = true;
+        script.onload = function () {
+            window.a2a_config.locale = salla.config.get('user.language_code', salla.lang.getLocale());
+            window.a2a_config.callbacks = window.a2a_config.callbacks || [];
+            window.a2a_config.callbacks.push({
+                share: (data) => {
+                    // Handle share event
+                    const shareData = {
+                        share_via: data.service.toLowerCase(),
+                        url: data.url,
+                        title: data.title
+                    };
+                    // Dispatch the share event
+                    salla.event.emit('share-element', shareData);
+                }
+            });
+        };
+        document.body.appendChild(script);
+    }
+    /**
+     * Activate or open the share menu.
+     */
+    async open() {
+        const animateList = new anime.timeline().add({
+            targets: this.shareMenu,
+            translateY: [-50, 0],
+            opacity: [0, 1],
+            duration: 300,
+            podding: '0',
+            easing: 'easeInOutSine'
+        });
+        animateList.add({
+            targets: this.shareMenu.children,
+            translateZ: 0,
+            translateY: [-30, 0],
+            scaleY: [0, 1],
+            opacity: [0, 1],
+            duration: 1400,
+            delay: anime.stagger(100)
+        }, '-=200');
+        this.opened = !this.opened;
+        if (this.opened) {
+            this.shareMenu.classList.add('opened');
+        }
+        else {
+            animateList.pause();
+            animateList.seek(0);
+            this.shareMenu.classList.remove('opened');
+        }
+    }
+    /**
+     * Asynchronously initializes the "AddToAny" (a2a) social sharing tool on the current page.
+     * If the global object `window.a2a` is available, it initializes the tool with the 'page' mode.
+     * The 'page' mode is typically used to enable sharing of the current webpage.
+     *
+     * @remarks
+     * This function is designed to be used in scenarios where dynamic loading or refreshing of social sharing tools is needed.
+     * Ensure that the AddToAny script is properly included in the HTML document before calling this function.
+     *
+     * @example
+     * // Call the refresh function to initialize AddToAny on the page.
+     * await refresh();
+     *
+     * @throws {Error} Throws an error if the AddToAny script is not properly included or if there are issues during initialization.
+     *
+     * @async
+     * @returns {Promise<void>} A promise that resolves once the initialization is complete.
+     */
+    async refresh() {
+        // Attempt to initialize AddToAny with 'page' mode if the global object `window.a2a` is available.
+        window.a2a?.init('page');
+    }
+    render() {
+        return (h("div", { key: 'c4ac8faea4a8ec8aa5ba9f4e744710d508387d78', class: "s-social-share-wrapper" }, h("slot", { key: '6c6b54513f67be8818a9a042570286d09b7115f8', name: 'widget' }, h("salla-button", { key: '8a57650940dad634cf3576dada4cc35687ed447c', "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: '207f2fb0e2f89e7057775153ffcc68eebb069824', innerHTML: this.opened ? Cancel : ShareAlt }))), h("ul", { key: 'fd9b25a483a93efa10994c2a7a876b6741d976c2', 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 });
+                }
+            }))));
+        }))));
+    }
+    get host() { return getElement(this); }
+};
+SallaSocialShare.style = sallaSocialShareCss;
+
+export { SallaSocialShare as salla_social_share };

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

@@ -1,8 +1,8 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-D2-TtAhI.js';
-import { f as facebook, t as twitter } from './twitter-Dz7o69vX.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-B74h9G6a.js';
+import { f as facebook, t as twitter } from './facebook-CO-PeZ27.js';
 
 var instagram = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/esm/salla-tab-content_3.entry.js

@@ -0,0 +1,153 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, c as createEvent, a as getElement } from './index-B74h9G6a.js';
+
+const sallaTabContentCss = "";
+
+const SallaTabContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isSelected = false;
+    }
+    /**
+     * Expose self for the parent.
+     */
+    async getChild() {
+        return {
+            selected: this.selected.bind(this),
+            unselect: this.unselect.bind(this),
+            name: this.name
+        };
+    }
+    unselect() {
+        this.isSelected = false;
+    }
+    selected() {
+        this.isSelected = true;
+    }
+    render() {
+        const classes = {
+            's-tabs-content': true,
+            's-tabs-content-selected': this.isSelected
+        };
+        return (h("div", { key: '6b11ec3a839c759e64e1766de55f9ac1be18931e', class: classes }, h("slot", { key: '17300d7a52e068428ea956b2c5d5be6d0ab69fca' })));
+    }
+};
+SallaTabContent.style = sallaTabContentCss;
+
+function generateRandomId() {
+    return Math.random().toString(36).slice(2, 10);
+}
+
+const sallaTabHeaderCss = "";
+
+const SallaTabHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tabSelected = createEvent(this, "tabSelected");
+        this.id = generateRandomId();
+        /**
+       * The class applied to the currently active(selected) tab
+       */
+        this.activeClass = undefined;
+        /**
+         * Set the height of the tab bar
+         */
+        this.height = undefined;
+        /**
+         * Center tab items in the given flex.
+         */
+        this.centered = false;
+        this.isSelected = false;
+    }
+    /**
+     * Expose self for the parent.
+     */
+    async getChild() {
+        return {
+            selected: this.selected.bind(this),
+            unselect: this.unselect.bind(this),
+            name: this.name,
+            id: this.id
+        };
+    }
+    unselect() {
+        this.isSelected = false;
+    }
+    selected() {
+        this.isSelected = true;
+    }
+    onClick() {
+        this.getChild().then(child => {
+            this.tabSelected.emit(child);
+        });
+    }
+    render() {
+        const classes = {
+            's-tabs-header-item': true,
+            's-tabs-bg-normal': true,
+            's-tabs-active': this.isSelected,
+        };
+        return [
+            h("div", { key: '08c51c1ad15c6b0efbeb165c89fc7d73748467d0', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: 'ba5045dab7c254eb4533dc64630ab0c1f561701b' })),
+        ];
+    }
+};
+SallaTabHeader.style = sallaTabHeaderCss;
+
+const sallaTabsCss = ".s-tabs-header{-ms-overflow-style:none;scrollbar-width:none;}.s-tabs-header::-webkit-scrollbar{display:none}";
+
+const SallaTabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Background color
+         */
+        this.backgroundColor = undefined;
+        /**
+         * Align tabs vertically.
+         */
+        this.vertical = false;
+    }
+    componentWillLoad() {
+        this.createGroup().then(() => {
+            const [group] = this.tabGroup;
+            this.selectGroup(group);
+        });
+    }
+    onSelectedTab(event) {
+        const group = this.tabGroup.find(group => group.header.id === event.detail.id);
+        this.selectGroup(group);
+    }
+    async createGroup() {
+        const tabsHeaderEl = Array.from(this.host.querySelectorAll('salla-tab-header'));
+        this.tabsHeader = await Promise.all(tabsHeaderEl.map(async (el) => await el.getChild()));
+        const tabsContentEl = Array.from(this.host.querySelectorAll('salla-tab-content'));
+        this.tabsContent = await Promise.all(tabsContentEl.map(async (el) => await el.getChild()));
+        this.tabGroup = this.tabsHeader.map(header => {
+            const content = this.tabsContent.find(content => content.name === header.name);
+            return {
+                header: header,
+                content: content
+            };
+        });
+    }
+    selectGroup(group) {
+        this.tabGroup.map(g => {
+            g.header.unselect();
+            g.content.unselect();
+        });
+        group.header.selected();
+        group.content.selected();
+    }
+    render() {
+        return [
+            h("div", { key: '3195e8954179d52867093b5e861b3c0caa6d7af6', class: "s-tabs" }, h("div", { key: 'cf75a77b6cc9b9cd288e963ee56acf19e177029a', class: "s-tabs-header" }, h("slot", { key: 'fa345597be2fbb8ff4f1cb420a030c5ec821bc8b', name: "header" })), h("div", { key: 'f7fd939608e5341b6d9c1d75e7d9dc909a4d8912', class: "s-tabs-content-wrapper" }, h("slot", { key: '86ce2c9bcb3be06264e75369a6be81b2e1361619', name: "content" })))
+        ];
+    }
+    get host() { return getElement(this); }
+};
+SallaTabs.style = sallaTabsCss;
+
+export { SallaTabContent as salla_tab_content, SallaTabHeader as salla_tab_header, SallaTabs as salla_tabs };

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

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

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-D2-TtAhI.js';
+import { r as registerInstance, h, a as getElement } from './index-B74h9G6a.js';
 
 const sallaTooltipCss = ".s-tooltip-container{position:relative;display:inline-block}.s-tooltip-item{position:absolute;transform:translateX(-39%);background-color:#baf3e6;color:#004d5a;bottom:100%;left:50%;text-align:center;border-radius:5px;z-index:1;white-space:nowrap;opacity:0;transition:opacity 0.3s;pointer-events:none;margin:0 0 16px 8px;padding:12px;max-width:150px;width:190px;white-space:normal;opacity:1}.s-tooltip-item::after{content:\"\";position:absolute;bottom:-10px;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#baf3e6 transparent transparent transparent}.s-tooltip-item:dir(ltr){transform:translateX(-72%)}";
 

package/dist/esm/salla-trust-badges.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-D2-TtAhI.js';
+import { r as registerInstance, h, H as Host } from './index-B74h9G6a.js';
 
 const sallaTrustBadgesCss = "";
 

package/dist/esm/salla-user-menu.entry.js

@@ -0,0 +1,273 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, H as Host, a as getElement } from './index-B74h9G6a.js';
+import { A as ArrowDown } from './keyboard_arrow_down-DCZbpt2a.js';
+import { B as BellRing } from './bell-ring-D3mWkc-3.js';
+import { P as PendingOrdersIcon } from './cart-DY4LZmNP.js';
+import { W as WishListIcon } from './star-ZT7ehBBk.js';
+import { C as Cancel } from './cancel-BsLF_HK7.js';
+import { S as Star } from './star2-D4oPi1Ov.js';
+import { l as loyaltyProgramIcon } from './gift-BChI23pG.js';
+
+var OrderIcon = `<!-- 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>box-bankers</title>
+<path d="M28 1.333h-24c-2.205 0-4 1.795-4 4v5.333c0 0.736 0.597 1.333 1.333 1.333v14.667c0 2.205 1.795 4 4 4h21.333c2.205 0 4-1.795 4-4v-14.667c0.736 0 1.333-0.597 1.333-1.333v-5.333c0-2.205-1.795-4-4-4zM28 26.667c0 0.735-0.599 1.333-1.333 1.333h-21.333c-0.735 0-1.333-0.599-1.333-1.333v-14.667h5.333v2.667c0 1.471 1.196 2.667 2.667 2.667h8c1.471 0 2.667-1.196 2.667-2.667v-2.667h5.333zM12 14.667v-2.667h8v2.667zM29.333 9.333h-26.667v-4c0-0.735 0.599-1.333 1.333-1.333h24c0.735 0 1.333 0.599 1.333 1.333z"></path>
+</svg>
+`;
+
+var UserCircle = `<!-- 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>user-circle</title>
+<path d="M16 22.964c-4.525 0-8.447 1.713-9.993 4.365-0.371 0.636-0.156 1.452 0.48 1.823s1.453 0.156 1.823-0.48c0.855-1.465 3.624-3.041 7.689-3.041s6.835 1.576 7.689 3.041c0.249 0.424 0.696 0.661 1.155 0.661 0.228 0 0.459-0.059 0.669-0.181 0.637-0.371 0.852-1.187 0.48-1.823-1.545-2.652-5.467-4.365-9.992-4.365zM22.667 13.631c0-3.676-2.991-6.667-6.667-6.667s-6.667 2.991-6.667 6.667 2.991 6.667 6.667 6.667 6.667-2.992 6.667-6.667zM12 13.631c0-2.205 1.795-4 4-4s4 1.795 4 4-1.795 4-4 4-4-1.795-4-4zM16 0.297c-8.823 0-16 7.177-16 16 0 2.941 0.821 5.831 2.373 8.357 0.252 0.411 0.689 0.636 1.137 0.636 0.239 0 0.479-0.064 0.696-0.197 0.628-0.385 0.824-1.207 0.439-1.833-1.295-2.108-1.979-4.516-1.979-6.963 0-7.352 5.981-13.333 13.333-13.333s13.333 5.981 13.333 13.333c0 2.448-0.684 4.856-1.979 6.961-0.385 0.628-0.189 1.448 0.437 1.835 0.627 0.384 1.448 0.189 1.835-0.437 1.553-2.527 2.373-5.416 2.373-8.359 0-8.823-7.177-16-16-16z"></path>
+</svg>
+`;
+
+var LogoutIcon = `<!-- 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>send-out</title>
+<path d="M16 26.667h-9.333c-0.736 0-1.333-0.597-1.333-1.333v-18.667c0-0.736 0.597-1.333 1.333-1.333h9.333c0.737 0 1.333-0.596 1.333-1.333s-0.596-1.333-1.333-1.333h-9.333c-2.205 0-4 1.795-4 4v18.667c0 2.205 1.795 4 4 4h9.333c0.737 0 1.333-0.596 1.333-1.333s-0.596-1.333-1.333-1.333zM29.231 15.491c-0.068-0.164-0.167-0.312-0.289-0.436l-5.332-5.332c-0.521-0.521-1.364-0.521-1.885 0s-0.521 1.364 0 1.885l3.057 3.059h-12.781c-0.737 0-1.333 0.596-1.333 1.333s0.596 1.333 1.333 1.333h12.781l-3.057 3.057c-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391s0.683-0.131 0.943-0.391l5.332-5.332c0.124-0.123 0.221-0.271 0.289-0.435 0.135-0.325 0.135-0.693 0-1.019z"></path>
+</svg>
+`;
+
+var WalletIcon = `<!-- 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>wallet</title>
+<path d="M28 6.667h-24c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333h24c0.737 0 1.333-0.596 1.333-1.333s-0.596-1.333-1.333-1.333h-24c-2.204 0-3.999 1.793-4 3.997v18.669c0 3.676 2.991 6.667 6.667 6.667h21.333c2.205 0 4-1.795 4-4v-16c0-2.205-1.795-4-4-4zM29.333 26.667c0 0.736-0.597 1.333-1.333 1.333h-21.333c-2.205 0-4-1.795-4-4v-14.895c0.416 0.147 0.865 0.228 1.333 0.228h24c0.736 0 1.333 0.597 1.333 1.333zM22.667 14.667c-2.205 0-4 1.795-4 4s1.795 4 4 4 4-1.795 4-4-1.795-4-4-4zM22.667 20c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333 1.333 0.597 1.333 1.333-0.597 1.333-1.333 1.333z"></path>
+</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.accountLoading = false;
+        this.opened = false;
+        this.notifications = salla.lang.get('common.titles.notifications');
+        this.orders = salla.lang.get('common.titles.orders');
+        this.pending_orders = salla.lang.get('common.titles.pending_orders');
+        this.wishlist = salla.lang.get('common.titles.wishlist');
+        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');
+        this.first_name = salla.storage.get('user.first_name') || '';
+        this.last_name = salla.storage.get('user.last_name') || '';
+        this.avatar = salla.storage.get('user.avatar') || salla.url.cdn('images/avatar.png', 40, 40);
+        this.badges = {
+            notifications: salla.helpers.number(salla.storage.get('user.notifications') || 0),
+            pending_orders: salla.helpers.number(salla.storage.get('user.pending_orders') || 0),
+        };
+        this.sallaAccountEnabled = false;
+        this.hasBadges = Number(salla.storage.get('user.pending_orders')) > 0 ||
+            Number(salla.storage.get('user.notifications')) > 0;
+        /**
+         * To display only the list without the dropdown functionality
+         */
+        this.inline = false;
+        /**
+         * To display the trigger as an avatar only
+         */
+        this.avatarOnly = false;
+        /**
+         * To display the dropdown header in mobile sheet
+         */
+        this.showHeader = false;
+        /**
+         * To Make the dropdown menu relative to parent element or not
+         */
+        this.relativeDropdown = false;
+        this.onClickOutside = () => {
+            this.opened = false;
+        };
+        this.OrderUpdate = 0;
+        this.items = {
+            notifications: BellRing,
+            orders: OrderIcon,
+            pending_orders: PendingOrdersIcon,
+            wishlist: WishListIcon,
+            wallet: WalletIcon,
+            loyalty_program: loyaltyProgramIcon,
+            profile: UserCircle
+        };
+        // salla.auth.event.onLoggedIn(() => {
+        //   this.is_loggedIn = true
+        // })
+        salla.lang.onLoaded(() => {
+            this.notifications = salla.lang.get('common.titles.notifications');
+            this.orders = salla.lang.get('common.titles.orders');
+            this.pending_orders = salla.lang.get('common.titles.pending_orders');
+            this.wishlist = salla.lang.get('common.titles.wishlist');
+            this.profile = salla.lang.get('common.titles.profile');
+            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');
+        });
+        Salla.onReady(() => {
+            if (salla.config.isGuest()) {
+                return;
+            }
+            this.is_loggedIn = true;
+            /**
+             * Get Fresh Notifications In These Cases:
+             * - is notification page, if user already changed the status of his orders (to reset notification badge)
+             * - is pending orders page, if user already changed the status of his orders (to reset orders badge)
+             * - is profile page, in case user changed his name or avatar, we need to update it
+             * - half hour is passed from the last user data fetched
+             *
+             * //todo:: update the data in the storage in customer pages
+             * //todo:: cover two requests in customer pages
+             * //todo:: make sure to run this only after token is set
+             */
+            const shouldFetchProfile = !this.inline &&
+                (salla.url.is_page('customer.notifications') ||
+                    salla.url.is_page('customer.orders.index.pending') ||
+                    salla.url.is_page('customer.profile') ||
+                    (Date.now() - (salla.storage.get('user.fetched_at') || 0)) / 1000 / 60 > 30);
+            if (shouldFetchProfile) {
+                this.fetchFreshProfile();
+            }
+            else {
+                salla.event.on('profile::info.fetched', res => {
+                    this.updateProfileState(res);
+                });
+            }
+        });
+    }
+    async componentWillLoad() {
+        await salla.onReady();
+        await salla.lang.onLoaded();
+        Salla.event.on('api::token.injected', (token) => this.profileUrl = this.buildProfileUrl(token));
+        this.sallaAccountEnabled = Salla.config.get('store.features')?.includes('salla-account');
+        this.items = this.sallaAccountEnabled ? { ...this.items, settings: SettingstIcon } : this.items;
+        //we need it only in theme-y
+        if (this.host.hasAttribute('with-rating')) {
+            this.items.rating = Star;
+        }
+        //we need it to be the last item
+        this.items.logout = LogoutIcon;
+        let token = Salla.storage.get('token');
+        if (!token) {
+            token = '';
+        }
+        this.profileUrl = this.buildProfileUrl(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) {
+            return;
+        }
+        this.triggerSlot = trigger.innerHTML;
+        trigger.innerHTML = this.replaceParams(trigger.innerHTML);
+    }
+    fetchFreshProfile() {
+        //don't request fetchFreshProfile unless token is injected into the api
+        if (!salla.api.token) {
+            salla.log('trying to fetchFreshProfile before injected the token!!');
+            return;
+        }
+        salla.profile.api.info().then(res => {
+            this.updateProfileState(res);
+        });
+    }
+    updateProfileState(res) {
+        this.badges = {
+            notifications: salla.helpers.number(res.data.notifications || 0),
+            pending_orders: salla.helpers.number(res.data.pending_orders || 0),
+        };
+        this.hasBadges = Number(res.data.pending_orders) > 0 || Number(res.data.notifications) > 0;
+        this.first_name = res.data.first_name;
+        this.last_name = res.data.last_name;
+        this.avatar = res.data.avatar || salla.url.cdn('images/avatar.png', 40, 40);
+    }
+    async open(e) {
+        this.opened = !this.opened;
+        e.stopPropagation();
+        if (this.opened) {
+            window.addEventListener('click', this.onClickOutside);
+        }
+    }
+    menuItemClicked(event, itemKey) {
+        if (itemKey !== 'logout') {
+            return;
+        }
+        event.preventDefault();
+        salla.auth.logout('sall-user-menu');
+    }
+    replaceParams(body) {
+        return body
+            .replace(/\{hello\}/g, this.hello)
+            .replace(/\{first_name\}/g, this.first_name)
+            .replace(/\{last_name\}/g, this.last_name)
+            .replace(/\{avatar\}/g, this.avatar)
+            .replace(/\{icon\}/g, ArrowDown);
+    }
+    getTheHeader() {
+        return (h("div", { 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), onKeyUp: e => this.open(e), innerHTML: this.replaceParams(this.triggerSlot) }));
+    }
+    getItemAnchorLinkAttrs(itemKey) {
+        if (itemKey === 'profile' && this.profileUrl && this.sallaAccountEnabled) {
+            return { href: this.profileUrl, target: '_blank', rel: 'noopener noreferrer' };
+        }
+        // Fix loyalty program URL mapping from master
+        const urlKey = itemKey === 'loyalty_program' ? 'loyalty' : itemKey;
+        return { href: Salla.url.get(urlKey) };
+    }
+    getMenuItem([itemKey, itemValue], i) {
+        //todo:: enhancement support slot here
+        if (itemKey === 'wallet' && !window.can_access_wallet)
+            return;
+        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", { ...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) {
+            window.removeEventListener('click', this.onClickOutside);
+        }
+    }
+    render() {
+        if (!this.is_loggedIn) {
+            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)))));
+        }
+        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(), 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() {
+        document.lazyLoadInstance?.update(this.host.querySelectorAll('.lazy'));
+    }
+    buildProfileUrl(token) {
+        return `${Salla.config.get('account.url', 'https://accounts.salla.com')}/${salla.config.get('user.language_code')}/user?store=${Salla.config.get('store.id')}&info=${encodeURIComponent(token)}`;
+    }
+    get host() { return getElement(this); }
+};
+SallaUserMenu.style = sallaUserMenuCss;
+
+export { SallaUserMenu as salla_user_menu };