@salla.sa/twilight-components 2.14.393 → 2.14.394

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

@@ -1,4 +1,347 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as e,h as l,Host as a}from"@stencil/core/internal/client";import{A as i}from"./keyboard_arrow_down.js";import{B as o}from"./bell-ring.js";import{P as n}from"./cart.js";import{W as r}from"./star.js";import{C as c}from"./cancel.js";import{R as h}from"./star2.js";import{l as m}from"./gift.js";import{d}from"./salla-loading2.js";import{d as u}from"./salla-login-modal2.js";import{d as g}from"./salla-modal2.js";var p='\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>user-circle</title>\n<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>\n</svg>\n';const w=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.accountLoading=!1,this.opened=!1,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=!1,this.hasBadges=Number(salla.storage.get("user.pending_orders"))>0||Number(salla.storage.get("user.notifications"))>0,this.inline=!1,this.avatarOnly=!1,this.showHeader=!1,this.relativeDropdown=!1,this.showTrigger=!1,this.onClickOutside=()=>{this.opened=!1},this.OrderUpdate=0,this.items={notifications:o,orders:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>box-bankers</title>\n<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>\n</svg>\n',pending_orders:n,wishlist:r,wallet:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>wallet</title>\n<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>\n</svg>\n',loyalty_program:m,profile:p}}async componentWillLoad(){await salla.onReady(),await salla.lang.onLoaded(),this.loadTranslations(),this.initiate(),Salla.event.on("api::token.injected",(s=>this.profileUrl=this.buildProfileUrl(s))),this.sallaAccountEnabled=Salla.config.get("store.features")?.includes("salla-account"),this.items=this.sallaAccountEnabled?{...this.items,settings:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>settings</title>\n<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>\n</svg>\n'}:this.items,this.host.hasAttribute("with-rating")&&(this.items.rating=h),this.items.logout='\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>send-out</title>\n<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>\n</svg>\n';let s=Salla.storage.get("token");s||(s=""),this.profileUrl=this.buildProfileUrl(s);const t=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>',t&&(this.triggerSlot=t.innerHTML,t.innerHTML=this.replaceParams(t.innerHTML))}loadTranslations(){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")}initiate(){return Salla.config.isGuest()?this.autoMountLoginModal():(this.is_loggedIn=!0,!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))/1e3/60>30)?this.fetchFreshProfile():void salla.event.on("profile::info.fetched",(s=>{this.updateProfileState(s)})))}autoMountLoginModal(){this.showTrigger&&(document.querySelector("salla-login-modal")||Salla.hooks.mount("body:end",document.createElement("salla-login-modal")))}fetchFreshProfile(){salla.api.token?salla.profile.api.info().then((s=>{this.updateProfileState(s)})):salla.log("trying to fetchFreshProfile before injected the token!!")}updateProfileState(s){this.badges={notifications:salla.helpers.number(s.data.notifications||0),pending_orders:salla.helpers.number(s.data.pending_orders||0)},this.hasBadges=Number(s.data.pending_orders)>0||Number(s.data.notifications)>0,this.first_name=s.data.first_name,this.last_name=s.data.last_name,this.avatar=s.data.avatar||salla.url.cdn("images/avatar.png",40,40)}async open(s){this.opened=!this.opened,s.stopPropagation(),this.opened&&window.addEventListener("click",this.onClickOutside)}menuItemClicked(s,t){"logout"===t&&(s.preventDefault(),salla.auth.logout("sall-user-menu"))}replaceParams(s){return s.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,i)}getTheHeader(){return l("div",{class:{"s-user-menu-trigger-slot":!0,"s-user-menu-red-dot":this.hasBadges,"s-user-menu-trigger-avatar-only":this.avatarOnly},id:"trigger-slot",onClick:s=>this.open(s),onKeyUp:s=>this.open(s),innerHTML:this.replaceParams(this.triggerSlot)})}getItemAnchorLinkAttrs(s){return"profile"===s&&this.profileUrl&&this.sallaAccountEnabled?{href:this.profileUrl,target:"_blank",rel:"noopener noreferrer"}:{href:Salla.url.get("loyalty_program"===s?"loyalty":s)}}getMenuItem([s,t],e){if(("wallet"!==s||window.can_access_wallet)&&("loyalty_program"!==s||Salla.config.get("store.features").includes("loyalty-system")))return l("li",{class:{"s-user-menu-dropdown-item":!0,"s-user-menu-dropdown-item-logout":e+1===Object.entries(this.items).length}},l("a",{...this.getItemAnchorLinkAttrs(s),class:"s-user-menu-dropdown-item-link",onClick:t=>this.menuItemClicked(t,s)},l("i",{class:"s-user-menu-dropdown-item-prefix",innerHTML:t}),l("span",{class:"s-user-menu-dropdown-item-title"},this[s]),["٠","0",void 0].includes(this.badges[s])?"":l("span",{class:"s-user-menu-dropdown-item-badge"},this.badges[s])))}componentShouldUpdate(){this.opened||window.removeEventListener("click",this.onClickOutside)}render(){return l(a,null,this.is_loggedIn?this.inline?l("ul",{class:"s-user-menu-inline"},Object.entries(this.items).map(((s,t)=>this.getMenuItem(s,t)))):l("div",{class:{"s-user-menu-wrapper":!0,"s-user-menu-relative-dropdown":this.relativeDropdown}},this.getTheHeader(),l("div",{class:{"s-user-menu-toggler":!0,opened:this.opened}},l("div",{class:"s-user-menu-dropdown",onClick:s=>s.stopPropagation(),onKeyUp:s=>s.stopPropagation()},this.showHeader?l("div",{class:"s-user-menu-dropdown-header"},l("img",{src:this.avatar,alt:`${this.first_name} ${this.last_name}`}),l("div",{class:"s-user-menu-dropdown-header-content"},l("span",null,this.hello),l("p",null,this.first_name," ",this.last_name)),l("button",{type:"button",class:"s-user-menu-dropdown-header-close",innerHTML:c,onClick:()=>{this.opened=!1}})):"",l("ul",{class:"s-user-menu-dropdown-list"},Object.entries(this.items).map(((s,t)=>this.getMenuItem(s,t))))))):l("slot",{name:"login-btn"},l("button",{type:"button",class:"s-user-menu-login-btn",onClick:()=>salla.event.dispatch("login::open"),innerHTML:p})))}componentDidLoad(){document.lazyLoadInstance?.update(this.host.querySelectorAll(".lazy"))}buildProfileUrl(s){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(s)}`}get host(){return this}static get style(){return""}},[260,"salla-user-menu",{inline:[516],avatarOnly:[516,"avatar-only"],showHeader:[516,"show-header"],relativeDropdown:[516,"relative-dropdown"],showTrigger:[1540,"show-trigger"],accountLoading:[32],opened:[32],notifications:[32],orders:[32],pending_orders:[32],wishlist:[32],profile:[32],rating:[32],wallet:[32],settings:[32],loyalty_program:[32],logout:[32],hello:[32],first_name:[32],last_name:[32],avatar:[32],is_loggedIn:[32],badges:[32],sallaAccountEnabled:[32],hasBadges:[32],profileUrl:[32],OrderUpdate:[32]}]);function v(){"undefined"!=typeof customElements&&["salla-user-menu","salla-loading","salla-login-modal","salla-modal"].forEach((t=>{switch(t){case"salla-user-menu":customElements.get(s(t))||customElements.define(s(t),w);break;case"salla-loading":customElements.get(s(t))||d();break;case"salla-login-modal":customElements.get(s(t))||u();break;case"salla-modal":customElements.get(s(t))||g()}}))}v();const f=w,y=v;export{f as SallaUserMenu,y as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { A as ArrowDown } from './keyboard_arrow_down.js';
+import { B as BellRing } from './bell-ring.js';
+import { P as PendingOrdersIcon } from './cart.js';
+import { W as WishListIcon } from './star.js';
+import { C as Cancel } from './cancel.js';
+import { R as Rate } from './star2.js';
+import { l as loyaltyProgramIcon } from './gift.js';
+import { d as defineCustomElement$4 } from './salla-loading2.js';
+import { d as defineCustomElement$3 } from './salla-login-modal2.js';
+import { d as defineCustomElement$2 } from './salla-modal2.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$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserMenu extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        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;
+        /**
+         * To show the trigger button or not
+         */
+        this.showTrigger = 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
+        };
+    }
+    async componentWillLoad() {
+        await salla.onReady();
+        await salla.lang.onLoaded();
+        this.loadTranslations();
+        this.initiate();
+        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 = Rate;
+        }
+        //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);
+    }
+    loadTranslations() {
+        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');
+    }
+    initiate() {
+        if (Salla.config.isGuest()) {
+            return this.autoMountLoginModal();
+        }
+        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) {
+            return this.fetchFreshProfile();
+        }
+        salla.event.on('profile::info.fetched', res => {
+            this.updateProfileState(res);
+        });
+    }
+    autoMountLoginModal() {
+        if (!this.showTrigger) {
+            return;
+        }
+        if (document.querySelector('salla-login-modal')) {
+            return;
+        }
+        Salla.hooks.mount('body:end', document.createElement('salla-login-modal'));
+    }
+    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 this; }
+    static get style() { return sallaUserMenuCss; }
+}, [4, "salla-user-menu", {
+        "inline": [516],
+        "avatarOnly": [516, "avatar-only"],
+        "showHeader": [516, "show-header"],
+        "relativeDropdown": [516, "relative-dropdown"],
+        "showTrigger": [1540, "show-trigger"],
+        "accountLoading": [32],
+        "opened": [32],
+        "notifications": [32],
+        "orders": [32],
+        "pending_orders": [32],
+        "wishlist": [32],
+        "profile": [32],
+        "rating": [32],
+        "wallet": [32],
+        "settings": [32],
+        "loyalty_program": [32],
+        "logout": [32],
+        "hello": [32],
+        "first_name": [32],
+        "last_name": [32],
+        "avatar": [32],
+        "is_loggedIn": [32],
+        "badges": [32],
+        "sallaAccountEnabled": [32],
+        "hasBadges": [32],
+        "profileUrl": [32],
+        "OrderUpdate": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-user-menu", "salla-loading", "salla-login-modal", "salla-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-user-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaUserMenu$1);
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-login-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaUserMenu = SallaUserMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaUserMenu, defineCustomElement };

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

@@ -1,4 +1,206 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as e,proxyCustomElement as s,HTMLElement as a,h as l}from"@stencil/core/internal/client";import{G as t}from"./interfaces.js";import{d as i}from"./salla-button2.js";import{d as r}from"./salla-datetime-picker2.js";import{d as o}from"./salla-skeleton2.js";import{d as n}from"./salla-tel-input2.js";const h=s(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.minAge=10,this.isEditable=!0,this.disableAction=!1,this.isLoading=!0,this.first_name_trans=salla.lang.get("pages.profile.first_name"),this.last_name_trans=salla.lang.get("pages.profile.last_name"),this.birthday_trans=salla.lang.get("pages.profile.birthday"),this.birthday_placeholder_trans=salla.lang.get("pages.profile.birthday_placeholder"),this.gender_trans=salla.lang.get("pages.profile.gender"),this.gender_placeholder_trans=salla.lang.get("pages.profile.gender_placeholder"),this.male_trans=salla.lang.get("pages.profile.male"),this.female_trans=salla.lang.get("pages.profile.female"),this.email_trans=salla.lang.get("common.elements.email"),this.mobile_trans=salla.lang.get("common.elements.mobile"),this.save_btn_trans=salla.lang.get("common.elements.save"),this.drag_and_drop_trans=salla.lang.get("common.uploader.drag_and_drop"),this.browse_trans=salla.lang.get("common.uploader.browse"),this.email_required_trans=salla.lang.get("pages.checkout.email_required"),this.invalid_email_trans=salla.lang.get("pages.error.invalid_value",{attribute:"email"}),salla.lang.onLoaded((()=>{this.first_name_trans=salla.lang.get("pages.profile.first_name"),this.last_name_trans=salla.lang.get("pages.profile.last_name"),this.birthday_trans=salla.lang.get("pages.profile.birthday"),this.birthday_placeholder_trans=salla.lang.get("pages.profile.birthday_placeholder"),this.gender_trans=salla.lang.get("pages.profile.gender"),this.gender_placeholder_trans=salla.lang.get("pages.profile.gender_placeholder"),this.male_trans=salla.lang.get("pages.profile.male"),this.female_trans=salla.lang.get("pages.profile.female"),this.email_trans=salla.lang.get("common.elements.email"),this.mobile_trans=salla.lang.get("common.elements.mobile"),this.save_btn_trans=salla.lang.get("common.elements.save"),this.drag_and_drop_trans=salla.lang.get("common.uploader.drag_and_drop"),this.browse_trans=salla.lang.get("common.uploader.browse"),this.email_required_trans=salla.lang.get("pages.checkout.email_required"),this.invalid_email_trans=salla.lang.get("pages.error.invalid_value",{attribute:"email"})}))}phoneNumberFieldEventHandler(e){e.detail.number?(this.userData.phone.number=Number.parseInt(e.detail.number),this.userData.phone.country=e.detail.country_code,this.disableAction=!1):this.disableAction=!0}handleFieldChange(e,s,a=!1){s.target.value?(this.userData[e]=s.target.value,this.disableAction=!1):a&&(this.disableAction=!0)}handleEmailInput(e,s){const a=document.getElementById("email-error"),l=s.target.value;if(!l)return this.disableAction=!0,void(a.textContent=this.email_required_trans);/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(l)||(this.disableAction=!0,a.textContent=this.invalid_email_trans),a.textContent="",this.userData[e]=l,this.disableAction=!1}submitForm(e){e.preventDefault(),this.disableAction=!0;const s=Object.assign({},this.userData);s.phone=void 0,s.phone=this.userData.phone.number,s.country_code=this.userData.phone.country,salla.api.profile.update(s).finally((()=>{this.disableAction=!1}))}getBirthDateRestriction(){const e=new Date,s=e.getFullYear()-this.minAge;return e.setFullYear(s),e}fetchData(){return salla.api.profile.info().then((e=>{this.userData=e.data})).finally((()=>{this.isLoading=!1,this.isEditable=!Salla.config.get("store.features").includes("sso-login")}))}renderLoadingSection(){return l("div",{class:"s-user-profile-skeleton-wrapper"},Array.from({length:6},((e,s)=>l("salla-skeleton",{class:"skeleton-item",width:"100%",height:"50px",key:s}))))}componentWillLoad(){Salla.onReady().then((()=>this.fetchData()))}render(){return this.isLoading?this.renderLoadingSection():l("form",{onSubmit:e=>this.submitForm(e)},l("div",{class:"s-user-profile-wrapper"},l("div",{class:"s-user-profile-field"},l("label",{htmlFor:"first-name",class:"s-user-profile-field-label"},this.first_name_trans),l("input",{disabled:!this.isEditable,type:"text",name:"first_name",value:this.userData.first_name,id:"first-name",required:!0,autocomplete:"first_name",class:"form-input",onChange:e=>this.handleFieldChange("first_name",e)})),l("div",{class:"s-user-profile-field"},l("label",{htmlFor:"last-name",class:"s-user-profile-field-label"},this.last_name_trans),l("input",{disabled:!this.isEditable,type:"text",name:"last_name",value:this.userData.last_name,id:"last-name",required:!0,autocomplete:"last_name",class:"form-input",onChange:e=>this.handleFieldChange("last_name",e)})),l("div",{class:"s-user-profile-field"},l("label",{htmlFor:"birthday",class:"s-user-profile-field-label"},this.birthday_trans),l("salla-datetime-picker",{disabled:!this.isEditable,dateFormat:"Y-m-d",value:this.userData.birthday,placeholder:this.birthday_placeholder_trans,required:!0,maxDate:this.getBirthDateRestriction(),name:"birthday",onPicked:e=>this.handleFieldChange("birthday",e)})),l("div",{class:"s-user-profile-field"},l("label",{htmlFor:"gender",class:"s-user-profile-field-label"},this.gender_trans),l("select",{disabled:!this.isEditable,class:"form-input",name:"gender",required:!0,onChange:e=>this.handleFieldChange("gender",e)},l("option",{value:""},this.gender_placeholder_trans),l("option",{value:t.Male,selected:this.userData.gender===t.Male},this.male_trans),l("option",{value:t.Female,selected:this.userData.gender===t.Female},this.female_trans))),l("div",{class:"s-user-profile-field"},l("label",{htmlFor:"email",class:"s-user-profile-field-label"},this.email_trans),l("input",{disabled:!this.isEditable,type:"email",name:"email",value:this.userData.email,id:"email",class:"form-input",required:!0,onInput:e=>this.handleEmailInput("email",e)}),l("p",{id:"email-error",class:"s-user-profile-field-error"})),l("div",{class:"s-user-profile-field"},l("label",{htmlFor:"international-mobile",class:"s-user-profile-field-label"},this.mobile_trans),l("salla-tel-input",{disabled:!this.isEditable,name:"international-mobile","country-code":this.userData.phone.country,phone:""+this.userData.phone.number,onPhoneEntered:e=>this.phoneNumberFieldEventHandler(e)}))),l("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":host{display:block}"}},[0,"salla-user-profile",{minAge:[2,"min-age"],userData:[32],isEditable:[32],disableAction:[32],isLoading:[32],first_name_trans:[32],last_name_trans:[32],birthday_trans:[32],birthday_placeholder_trans:[32],gender_trans:[32],gender_placeholder_trans:[32],male_trans:[32],female_trans:[32],email_trans:[32],mobile_trans:[32],save_btn_trans:[32],drag_and_drop_trans:[32],browse_trans:[32],email_required_trans:[32],invalid_email_trans:[32]}]);function m(){"undefined"!=typeof customElements&&["salla-user-profile","salla-button","salla-datetime-picker","salla-skeleton","salla-tel-input"].forEach((s=>{switch(s){case"salla-user-profile":customElements.get(e(s))||customElements.define(e(s),h);break;case"salla-button":customElements.get(e(s))||i();break;case"salla-datetime-picker":customElements.get(e(s))||r();break;case"salla-skeleton":customElements.get(e(s))||o();break;case"salla-tel-input":customElements.get(e(s))||n()}}))}m();const d=h,p=m;export{d as SallaUserProfile,p as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+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';
+
+const sallaUserProfileCss = ":host{display:block}";
+
+const SallaUserProfile$1 = /*@__PURE__*/ proxyCustomElement(class SallaUserProfile extends HTMLElement {
+    // Constructor
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * 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.
+         */
+        this.minAge = 10;
+        this.isEditable = true;
+        this.disableAction = false;
+        this.isLoading = true;
+        // Translated Strings State
+        this.first_name_trans = salla.lang.get('pages.profile.first_name');
+        this.last_name_trans = salla.lang.get('pages.profile.last_name');
+        this.birthday_trans = salla.lang.get('pages.profile.birthday');
+        this.birthday_placeholder_trans = salla.lang.get('pages.profile.birthday_placeholder');
+        this.gender_trans = salla.lang.get('pages.profile.gender');
+        this.gender_placeholder_trans = salla.lang.get('pages.profile.gender_placeholder');
+        this.male_trans = salla.lang.get('pages.profile.male');
+        this.female_trans = salla.lang.get('pages.profile.female');
+        this.email_trans = salla.lang.get('common.elements.email');
+        this.mobile_trans = salla.lang.get('common.elements.mobile');
+        this.save_btn_trans = salla.lang.get('common.elements.save');
+        this.drag_and_drop_trans = salla.lang.get('common.uploader.drag_and_drop');
+        this.browse_trans = salla.lang.get('common.uploader.browse');
+        this.email_required_trans = salla.lang.get('pages.checkout.email_required');
+        this.invalid_email_trans = salla.lang.get('pages.error.invalid_value', {
+            attribute: 'email',
+        });
+        // Localization setup when the language is loaded
+        salla.lang.onLoaded(() => {
+            // Assigning translated strings to state properties
+            // These translations are fetched from the localization object
+            this.first_name_trans = salla.lang.get('pages.profile.first_name');
+            this.last_name_trans = salla.lang.get('pages.profile.last_name');
+            this.birthday_trans = salla.lang.get('pages.profile.birthday');
+            this.birthday_placeholder_trans = salla.lang.get('pages.profile.birthday_placeholder');
+            this.gender_trans = salla.lang.get('pages.profile.gender');
+            this.gender_placeholder_trans = salla.lang.get('pages.profile.gender_placeholder');
+            this.male_trans = salla.lang.get('pages.profile.male');
+            this.female_trans = salla.lang.get('pages.profile.female');
+            this.email_trans = salla.lang.get('common.elements.email');
+            this.mobile_trans = salla.lang.get('common.elements.mobile');
+            this.save_btn_trans = salla.lang.get('common.elements.save');
+            this.drag_and_drop_trans = salla.lang.get('common.uploader.drag_and_drop');
+            this.browse_trans = salla.lang.get('common.uploader.browse');
+            this.email_required_trans = salla.lang.get('pages.checkout.email_required');
+            this.invalid_email_trans = salla.lang.get('pages.error.invalid_value', {
+                attribute: 'email',
+            });
+        });
+    }
+    // Event handler for phone number field changes
+    phoneNumberFieldEventHandler(data) {
+        if (!data.detail.number) {
+            this.disableAction = true;
+            return;
+        }
+        this.userData.phone.number = Number.parseInt(data.detail.number);
+        this.userData.phone.country = data.detail.country_code;
+        this.disableAction = false;
+    }
+    // Event handler for generic field changes
+    handleFieldChange(key, event, required = false) {
+        if (event.target.value) {
+            this.userData[key] = event.target.value;
+            this.disableAction = false;
+        }
+        else {
+            if (required) {
+                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;
+            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;
+            emailErrorDisplaySection.textContent = this.invalid_email_trans;
+        }
+        emailErrorDisplaySection.textContent = '';
+        this.userData[key] = email;
+        this.disableAction = false;
+    }
+    // Submit form method
+    submitForm(event) {
+        event.preventDefault();
+        this.disableAction = true;
+        const payload = Object.assign({}, this.userData);
+        payload.phone = undefined;
+        //@ts-ignore
+        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();
+        const pastYear = now.getFullYear() - this.minAge;
+        now.setFullYear(pastYear);
+        return now;
+    }
+    fetchData() {
+        return salla.api.profile
+            .info()
+            .then(resp => { this.userData = resp.data; })
+            .finally(() => {
+            this.isLoading = false;
+            this.isEditable = !Salla.config.get('store.features').includes('sso-login');
+        });
+    }
+    renderLoadingSection() {
+        return (h("div", { class: "s-user-profile-skeleton-wrapper" }, Array.from({ length: 6 }, (_, i) => (h("salla-skeleton", { class: "skeleton-item", width: "100%", height: "50px", key: i })))));
+    }
+    componentWillLoad() {
+        Salla.onReady().then(() => this.fetchData());
+    }
+    render() {
+        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) }))), 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", {
+        "minAge": [2, "min-age"],
+        "userData": [32],
+        "isEditable": [32],
+        "disableAction": [32],
+        "isLoading": [32],
+        "first_name_trans": [32],
+        "last_name_trans": [32],
+        "birthday_trans": [32],
+        "birthday_placeholder_trans": [32],
+        "gender_trans": [32],
+        "gender_placeholder_trans": [32],
+        "male_trans": [32],
+        "female_trans": [32],
+        "email_trans": [32],
+        "mobile_trans": [32],
+        "save_btn_trans": [32],
+        "drag_and_drop_trans": [32],
+        "browse_trans": [32],
+        "email_required_trans": [32],
+        "invalid_email_trans": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    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)) {
+                customElements.define(tagName, SallaUserProfile$1);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-datetime-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-skeleton":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-tel-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaUserProfile = SallaUserProfile$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaUserProfile, defineCustomElement };