npm - @salla.sa/twilight-components - Versions diffs - 2.13.37 → 2.13.39 - Mend

@salla.sa/twilight-components 2.13.37 → 2.13.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

package/dist/components/salla-advertisement.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-advertisement.js","mappings":";;;;;;;AAAA,MAAM,qBAAqB,GAAG,sBAAsB;;MCiBvCA,oBAAkB;;;;EAI7B;;;;;;;uBAa+B,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC;IAZ1D,KAAK,CAAC,OAAO,CAAC;MACZ,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;KAClD,CAAC,CAAA;IAEF,IAAI,CAAC,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,SAAS,KAAI;KACpE,CAAC;GACH;;;;;;EAgBO,YAAY,CAAC,MAAqB;IACxC,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,YAAY,MAAM,CAAC,EAAE,EAAE,CAAC,CAAA;GACpD;;;;;;EAOO,iBAAiB,CAAC,MAAqB,EAAE,IAAa;IAC5D,IAAI,CAAC,IAAI,EAAE;;MAET,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,YAAY,MAAM,CAAC,EAAE,EAAE,EAAE,WAAW,CAAC,CAAC;;MAExDC,KAAO,CAAC;QACN,OAAO,EAAE,IAAI,CAAC,IAAI;QAClB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QACf,QAAQ,EAAE,GAAG;QACb,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QACnC,MAAM,EAAE,eAAe;OACxB,CAAC,CAAC;KACJ;GACF;;;;;EAMD,MAAM;IACJ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,cAAc,EAAE;MAC/F,OAAO;KACR;IACD,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,aAA4B;MAC1D,OAAO,WAAK,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,iBAAiB,EAAE,IAAI,EAAE,aAAW,aAAa,CAAC,EAAE,EACrH,KAAK,EAAE,EAAE,kBAAkB,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,EAAE,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,IAAI,EAAE,IAC1F,WAAK,EAAE,EAAC,UAAU,EAAC,SAAS,EAC1B,IAAI,CAAC,OAAO;;;WAGT,OAAO,CAAC,YAAY,EAAE,0CAA0C,aAAa,CAAC,IAAI,QAAQ,CAAC;WAC3F,OAAO,CAAC,WAAW,EAAE,aAAa,CAAC,GAAG,GAAG,YAAY,aAAa,CAAC,GAAG,aAAa,aAAa,CAAC,MAAM,KAAK,aAAa,CAAC,WAAW,MAAM,GAAG,aAAa,CAAC,WAAW,CAAC;WACxK,OAAO,CAAC,aAAa,EAAE,uGAAuG,CAAC;WAC/H,OAAO,CAAC,QAAQ,EAAE,aAAa,CAAC,IAAI,CAAC;WACrC,OAAO,CAAC,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC;WACnC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC;WACzC,OAAO,CAAC,eAAe,EAAE,aAAa,CAAC,WAAW,CAAC;WACnD,OAAO,CAAC,YAAY,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC;WAC9C,OAAO,CAAC,cAAc,EAAE,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAC/C,CACJ,CAAA;KACP,CACA,CAAC;GACH;;;;EAKD,iBAAiB;;IAEhB,OAAO,MAAM,CAAC,mBAAmB,CAAC,CAAC,~~QAAQ~~;~~MACxC~~,OAAO,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC;SACnD,IAAI,CAAC,IAAI;QACR,IAAI,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC;QACpB,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE;UACxC,KAAK,MAAM,EAAE,IAAI,GAAG,EAAE;YACpB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE;cAC3C,IAAI,CAAC,cAAc,GAAG,CAAC,EAAE,CAAC,CAAC;cAC3B,MAAM;aACP;WACF;SACF;~~OACF~~,CAAC,CAAA;KACL,CAAC,CAAC;GACJ;EACD,kBAAkB;;IAChB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,cAAc,EAAE;MAC/F,OAAO;KACR;;IAED,UAAU,CAAC;MACT,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;MAClE,IAAI,QAAQ,EAAE;QACZ,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;OACjG;KACF,CAAC,CAAC;;IAGH,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,WAAW,CAAC,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,UAAU,CAAC,CAAC,CAAC;IACvF,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,MAAM,EAAE,CAAC;;IAGlDA,KAAO,CAAC;MACN,OAAO,EAAE,IAAI,CAAC,IAAI;MAClB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,QAAQ,EAAE,GAAG;MACb,MAAM,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;MACnC,MAAM,EAAE,eAAe;KACxB,CAAC,CAAC;GACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SallaAdvertisement","AnimeJS"],"sources":["src/components/salla-advertisement/salla-advertisement.scss?tag=salla-advertisement","src/components/salla-advertisement/salla-advertisement.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, State, Element, h } from '@stencil/core';\nimport { Advertisement } from './interfaces';\nimport AnimeJS from 'animejs';\nimport Helper from '../../Helpers/Helper';\n/*\n @name SallaAdvertisement\n * @description A StencilJS component for handling and displaying advertisements in different pages of salla applications.\n * @tag salla-advertisement\n /\n\n/\n @slot adv - Replaces the entire advertisement, has replaceable props `{icon}`, `{url}`, `{target}`, `{description}`, `{bg_color}`, `{text_color}`.\n * /\n@Component({\n tag: 'salla-advertisement',\n styleUrl: 'salla-advertisement.scss',\n})\nexport class SallaAdvertisement {\n /\n Constructor for initializing the component.\n /\n constructor() {\n salla.onReady(() => {\n this.currentSlug = salla.config.get(\"page.slug\");\n })\n\n this.advSlot = this.host.querySelector('[slot=\"adv\"]')?.innerHTML \|\| `<div class=\"s-advertisement-content\"><h2 class=\"s-advertisement-content-main\">{iconElem}{urlElem}</h2>{closeElem}</div>\n `;\n }\n private readonly advSlot: string;\n // State properties for managing component state\n @State() position: string;\n @State() advertisements: Advertisement[];\n @State() advertIcon: string;\n @State() currentSlug: string = salla.config.get(\"page.slug\");\n\n @Element() private host: HTMLElement;\n\n\n /\n Checks whether an advertisement is marked as not visible/dismissed.\n * @param advert - The advertisement to check.\n * @returns True if the advertisement is not visible, false otherwise.\n /\n private isNotVisible(advert: Advertisement): boolean {\n return !!salla.storage.get(`statusAd-${advert.id}`)\n }\n\n /\n Sets a flag to control the visibility of an advertisement and triggers an animation when hiding it.\n * @param advert - The advertisement to update.\n * @param flag - The flag indicating whether to display or hide the advertisement.\n /\n private setCanDisplayFlag(advert: Advertisement, flag: boolean): void {\n if (!flag) {\n // Set the statusAd flag to 'dismissed'\n salla.storage.set(`statusAd-${advert.id}`, 'dismissed');\n // Trigger an animation to hide the advertisement\n AnimeJS({\n targets: this.host,\n opacity: [1, 0],\n duration: 300,\n height: [this.host.clientHeight, 0],\n easing: 'easeInOutQuad',\n });\n }\n }\n\n /\n Renders the advertisements based on the fetched data and visibility status.\n * @returns JSX for rendering advertisements.\n /\n render() {\n if ((Array.isArray(this.advertisements) && !this.advertisements.length) \|\| !this.advertisements) {\n return;\n }\n return this.advertisements.map((advertisement: Advertisement) => {\n return <div class={{ \"s-hidden\": this.isNotVisible(advertisement), 's-advertisement': true }} data-id={advertisement.id}\n style={{ \"background-color\": advertisement.colors.bg, \"color\": advertisement.colors.text }}>\n <div id=\"adv-slot\" innerHTML={\n this.advSlot\n // Replace the props with the advertisement data\n // !Note: The props with the 'Elem' suffix are for internal use only.\n .replace(\"{iconElem}\", `<i class=\"s-advertisement-content-icon ${advertisement.icon}\"></i>`)\n .replace(\"{urlElem}\", advertisement.url ? `<a href=\"${advertisement.url}\" target=\"${advertisement.target}\">${advertisement.description}</a>` : advertisement.description)\n .replace(\"{closeElem}\", `<button class=\"s-advertisement-action\" aria-label=\"close-alert\"><i class=\"sicon-cancel\"></i></button>`)\n .replace('{icon}', advertisement.icon)\n .replace('{url}', advertisement.url)\n .replace('{target}', advertisement.target)\n .replace('{description}', advertisement.description)\n .replace('{bg_color}', advertisement.colors.bg)\n .replace('{text_color}', advertisement.colors.text)\n }></div>\n </div>\n }\n );\n }\n\n /\n Lifecycle method that fetches advertisements before the component is loaded.\n */\n componentWillLoad() {\n // Fetch advertisements based on the current page\n return Helper.onSallaReadyPromise((~~_resolve~~) => {\n return salla.api.advertisement.fetch(this.currentSlug)\n .then(resp => {\n let ads = resp.data;\n if (Array.isArray(ads) && ads.length > 0) {\n for (const ad of ads) {\n if (!salla.storage.get(`statusAd-${ad.id}`)) {\n this.advertisements = [ad];\n break;\n }\n }\n }\n })\n });\n }\n componentDidRender() {\n if ((Array.isArray(this.advertisements) && !this.advertisements.length) \|\| !this.advertisements) {\n return;\n }\n // Add event listener for the close button\n setTimeout(() => {\n let closeBtn = this.host.querySelector('.s-advertisement-action');\n if (closeBtn) {\n closeBtn.addEventListener('click', () => this.setCanDisplayFlag(this.advertisements[0], false));\n }\n });\n\n // Reduce Dom size by removing the slot element\n this.host.querySelectorAll('#adv-slot').forEach(el => el?.replaceWith(el?.firstChild));\n this.host.querySelector('[slot=\"adv\"]')?.remove();\n\n // Trigger an animation to show the advertisement\n AnimeJS({\n targets: this.host,\n opacity: [0, 1],\n duration: 300,\n height: [0, this.host.clientHeight],\n easing: 'easeInOutQuad',\n });\n }\n}\n"],"version":3}
1	+ {"file":"salla-advertisement.js","mappings":"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","names":["SallaAdvertisement","AnimeJS"],"sources":["src/components/salla-advertisement/salla-advertisement.scss?tag=salla-advertisement","src/components/salla-advertisement/salla-advertisement.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, State, Element, h } from '@stencil/core';\nimport { Advertisement } from './interfaces';\nimport AnimeJS from 'animejs';\nimport Helper from '../../Helpers/Helper';\n/*\n @name SallaAdvertisement\n * @description A StencilJS component for handling and displaying advertisements in different pages of salla applications.\n * @tag salla-advertisement\n /\n\n/\n @slot adv - Replaces the entire advertisement, has replaceable props `{icon}`, `{url}`, `{target}`, `{description}`, `{bg_color}`, `{text_color}`.\n * /\n@Component({\n tag: 'salla-advertisement',\n styleUrl: 'salla-advertisement.scss',\n})\nexport class SallaAdvertisement {\n /\n Constructor for initializing the component.\n /\n constructor() {\n salla.onReady(() => {\n this.currentSlug = salla.config.get(\"page.slug\");\n })\n\n this.advSlot = this.host.querySelector('[slot=\"adv\"]')?.innerHTML \|\| `<div class=\"s-advertisement-content\"><h2 class=\"s-advertisement-content-main\">{iconElem}{urlElem}</h2>{closeElem}</div>\n `;\n }\n private readonly advSlot: string;\n // State properties for managing component state\n @State() position: string;\n @State() advertisements: Advertisement[];\n @State() advertIcon: string;\n @State() currentSlug: string = salla.config.get(\"page.slug\");\n\n @Element() private host: HTMLElement;\n\n\n /\n Checks whether an advertisement is marked as not visible/dismissed.\n * @param advert - The advertisement to check.\n * @returns True if the advertisement is not visible, false otherwise.\n /\n private isNotVisible(advert: Advertisement): boolean {\n return !!salla.storage.get(`statusAd-${advert.id}`)\n }\n\n /\n Sets a flag to control the visibility of an advertisement and triggers an animation when hiding it.\n * @param advert - The advertisement to update.\n * @param flag - The flag indicating whether to display or hide the advertisement.\n /\n private setCanDisplayFlag(advert: Advertisement, flag: boolean): void {\n if (!flag) {\n // Set the statusAd flag to 'dismissed'\n salla.storage.set(`statusAd-${advert.id}`, 'dismissed');\n // Trigger an animation to hide the advertisement\n AnimeJS({\n targets: this.host,\n opacity: [1, 0],\n duration: 300,\n height: [this.host.clientHeight, 0],\n easing: 'easeInOutQuad',\n });\n }\n }\n\n /\n Renders the advertisements based on the fetched data and visibility status.\n * @returns JSX for rendering advertisements.\n /\n render() {\n if ((Array.isArray(this.advertisements) && !this.advertisements.length) \|\| !this.advertisements) {\n return;\n }\n return this.advertisements.map((advertisement: Advertisement) => {\n return <div class={{ \"s-hidden\": this.isNotVisible(advertisement), 's-advertisement': true }} data-id={advertisement.id}\n style={{ \"background-color\": advertisement.colors.bg, \"color\": advertisement.colors.text }}>\n <div id=\"adv-slot\" innerHTML={\n this.advSlot\n // Replace the props with the advertisement data\n // !Note: The props with the 'Elem' suffix are for internal use only.\n .replace(\"{iconElem}\", `<i class=\"s-advertisement-content-icon ${advertisement.icon}\"></i>`)\n .replace(\"{urlElem}\", advertisement.url ? `<a href=\"${advertisement.url}\" target=\"${advertisement.target}\">${advertisement.description}</a>` : advertisement.description)\n .replace(\"{closeElem}\", `<button class=\"s-advertisement-action\" aria-label=\"close-alert\"><i class=\"sicon-cancel\"></i></button>`)\n .replace('{icon}', advertisement.icon)\n .replace('{url}', advertisement.url)\n .replace('{target}', advertisement.target)\n .replace('{description}', advertisement.description)\n .replace('{bg_color}', advertisement.colors.bg)\n .replace('{text_color}', advertisement.colors.text)\n }></div>\n </div>\n }\n );\n }\n\n /\n Lifecycle method that fetches advertisements before the component is loaded.\n */\n componentWillLoad() {\n // Fetch advertisements based on the current page\n return Helper.onSallaReadyPromise((resolve) => {\n return salla.api.advertisement.fetch(this.currentSlug)\n .then(resp => {\n let ads = resp.data;\n if (Array.isArray(ads) && ads.length > 0) {\n for (const ad of ads) {\n if (!salla.storage.get(`statusAd-${ad.id}`)) {\n this.advertisements = [ad];\n break;\n }\n }\n }\n resolve();\n })\n });\n }\n componentDidRender() {\n if ((Array.isArray(this.advertisements) && !this.advertisements.length) \|\| !this.advertisements) {\n return;\n }\n // Add event listener for the close button\n setTimeout(() => {\n let closeBtn = this.host.querySelector('.s-advertisement-action');\n if (closeBtn) {\n closeBtn.addEventListener('click', () => this.setCanDisplayFlag(this.advertisements[0], false));\n }\n });\n\n // Reduce Dom size by removing the slot element\n this.host.querySelectorAll('#adv-slot').forEach(el => el?.replaceWith(el?.firstChild));\n this.host.querySelector('[slot=\"adv\"]')?.remove();\n\n // Trigger an animation to show the advertisement\n AnimeJS({\n targets: this.host,\n opacity: [0, 1],\n duration: 300,\n height: [0, this.host.clientHeight],\n easing: 'easeInOutQuad',\n });\n }\n}\n"],"version":3}

package/dist/components/salla-apps-icons.js CHANGED Viewed

@@ -26,6 +26,9 @@ const SallaAppsIcons$1 = /*@__PURE__*/ proxyCustomElement(class SallaAppsIcons e
     return Object.entries(this.apps)
       .map(([name, value]) => ({ name, value }));
   }
+  componentWillLoad() {
+    return new Promise(resolve => salla.onReady(resolve));
+  }
   render() {
     const appsArray = this.getAppsArray();
     if (Array.isArray(appsArray) && !appsArray.length) {

package/dist/components/salla-apps-icons.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-apps-icons.js","mappings":";;;;;AAAA,MAAM,iBAAiB,GAAG,sBAAsB;;MCQnCA,gBAAc;EACzB;;;;gBAYgB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC;;;;IAX5C,IAAI,CAAC,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,SAAS,KAAI,+BAA+B,CAAC;IACrG,KAAK,CAAC,OAAO,CAAC;MACZ,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;KAC5C,CAAC,CAAC;IAEH,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;MAClB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;KAChE,CAAC,CAAC;GACJ;EAoBO,YAAY;IAClB,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC7B,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;GAC9C;EAED,MAAM;IACJ,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;IACtC,IAAI,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;MACjD,OAAO;KACR;IACD,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,cAAc,IACrB,CAAC,IAAI,CAAC,SAAS,IAAI,cAAK,IAAI,CAAC,SAAS,CAAM,EAC7C,WAAK,KAAK,EAAE,EAAC,mBAAmB,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAC,IAC/D,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,MACvB,SAAG,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,CAAC,KAAe,EAAE,GAAG,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAC,UAAU,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO;SACxI,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,IAAI,MAAM,CAAC,CAAC;SAC7D,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC,IAAI,CAAC,GAC7B,CACL,CAAC,CACE,CACH,EACP;GACH;EACD,kBAAkB;;IAChB,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,MAAM,EAAE,CAAC;GACnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SallaAppsIcons"],"sources":["src/components/salla-apps-icons/salla-apps-icons.scss?tag=salla-apps-icons","src/components/salla-apps-icons/salla-apps-icons.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Host, Prop, State, h, Element } from '@stencil/core';\n/*\n @slot app - Replaces app item, has replaceable props `{icon}`, `{name}`.\n /\n@Component({\n tag: 'salla-apps-icons',\n styleUrl: 'salla-apps-icons.scss',\n})\nexport class SallaAppsIcons {\n constructor() {\n this.appSlot = this.host.querySelector('[slot=\"app\"]')?.innerHTML \|\| `<img alt={name} src={icon} />`;\n salla.onReady(() => {\n this.apps = salla.config.get('store.apps');\n });\n\n salla.lang.onLoaded(() => {\n this.appsTitle = salla.lang.get('blocks.footer.download_apps');\n });\n }\n private readonly appSlot: string;\n @Element() host: HTMLElement;\n @State() apps = salla.config.get('store.apps');\n\n /\n Flag to show or hide title.\n /\n @Prop() hideTitle: boolean;\n\n /\n The title to display.\n /\n @Prop() appsTitle: string;\n\n /\n Display flag to horizontal/vertical.\n */\n @Prop() vertical: boolean;\n\n private getAppsArray() {\n return Object.entries(this.apps)\n .map(([name, value]) => ({ name, value }));\n }\n\n render() {\n const appsArray = this.getAppsArray();\n if (Array.isArray(appsArray) && !appsArray.length) {\n return;\n }\n return (\n <Host class=\"s-apps-icons\">\n {!this.hideTitle && <h3>{this.appsTitle}</h3>}\n <div class={{\"s-apps-icons-list\": true, \"vertical\": this.vertical}}>\n {appsArray.map((app, index) => (\n <a key={index} href={app.value as string} rel=\"noreferrer\" target=\"_blank\" class=\"s-apps-icons-item\" id=\"app-slot\" innerHTML={this.appSlot\n .replace(/\\{icon\\}/g, salla.url.cdn(`images/${app.name}.png`))\n .replace(/\\{name\\}/g, app.name)}>\n </a>\n ))}\n </div>\n </Host>\n );\n }\n componentDidRender() {\n this.host.querySelector('[slot=\"app\"]')?.remove();\n }\n}\n"],"version":3}
1	+ {"file":"salla-apps-icons.js","mappings":";;;;;AAAA,MAAM,iBAAiB,GAAG,sBAAsB;;MCQnCA,gBAAc;EACzB;;;;gBAYgB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC;;;;IAX5C,IAAI,CAAC,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,SAAS,KAAI,+BAA+B,CAAC;IACrG,KAAK,CAAC,OAAO,CAAC;MACZ,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;KAC5C,CAAC,CAAC;IAEH,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;MAClB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;KAChE,CAAC,CAAC;GACJ;EAoBO,YAAY;IAClB,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC7B,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;GAC9C;EAED,iBAAiB;IACf,OAAO,IAAI,OAAO,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;GACvD;EAED,MAAM;IACJ,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;IACtC,IAAI,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;MACjD,OAAO;KACR;IACD,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,cAAc,IACrB,CAAC,IAAI,CAAC,SAAS,IAAI,cAAK,IAAI,CAAC,SAAS,CAAM,EAC7C,WAAK,KAAK,EAAE,EAAC,mBAAmB,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAC,IAC/D,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,MACvB,SAAG,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,CAAC,KAAe,EAAE,GAAG,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAC,UAAU,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO;SACxI,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,IAAI,MAAM,CAAC,CAAC;SAC7D,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC,IAAI,CAAC,GAC7B,CACL,CAAC,CACE,CACH,EACP;GACH;EACD,kBAAkB;;IAChB,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,MAAM,EAAE,CAAC;GACnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SallaAppsIcons"],"sources":["src/components/salla-apps-icons/salla-apps-icons.scss?tag=salla-apps-icons","src/components/salla-apps-icons/salla-apps-icons.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Host, Prop, State, h, Element } from '@stencil/core';\n/*\n @slot app - Replaces app item, has replaceable props `{icon}`, `{name}`.\n /\n@Component({\n tag: 'salla-apps-icons',\n styleUrl: 'salla-apps-icons.scss',\n})\nexport class SallaAppsIcons {\n constructor() {\n this.appSlot = this.host.querySelector('[slot=\"app\"]')?.innerHTML \|\| `<img alt={name} src={icon} />`;\n salla.onReady(() => {\n this.apps = salla.config.get('store.apps');\n });\n\n salla.lang.onLoaded(() => {\n this.appsTitle = salla.lang.get('blocks.footer.download_apps');\n });\n }\n private readonly appSlot: string;\n @Element() host: HTMLElement;\n @State() apps = salla.config.get('store.apps');\n\n /\n Flag to show or hide title.\n /\n @Prop() hideTitle: boolean;\n\n /\n The title to display.\n /\n @Prop() appsTitle: string;\n\n /\n Display flag to horizontal/vertical.\n */\n @Prop() vertical: boolean;\n\n private getAppsArray() {\n return Object.entries(this.apps)\n .map(([name, value]) => ({ name, value }));\n }\n\n componentWillLoad() {\n return new Promise(resolve => salla.onReady(resolve));\n }\n\n render() {\n const appsArray = this.getAppsArray();\n if (Array.isArray(appsArray) && !appsArray.length) {\n return;\n }\n return (\n <Host class=\"s-apps-icons\">\n {!this.hideTitle && <h3>{this.appsTitle}</h3>}\n <div class={{\"s-apps-icons-list\": true, \"vertical\": this.vertical}}>\n {appsArray.map((app, index) => (\n <a key={index} href={app.value as string} rel=\"noreferrer\" target=\"_blank\" class=\"s-apps-icons-item\" id=\"app-slot\" innerHTML={this.appSlot\n .replace(/\\{icon\\}/g, salla.url.cdn(`images/${app.name}.png`))\n .replace(/\\{name\\}/g, app.name)}>\n </a>\n ))}\n </div>\n </Host>\n );\n }\n componentDidRender() {\n this.host.querySelector('[slot=\"app\"]')?.remove();\n }\n}\n"],"version":3}

package/dist/components/salla-contacts.js CHANGED Viewed

@@ -78,6 +78,9 @@ const SallaContacts$1 = /*@__PURE__*/ proxyCustomElement(class SallaContacts ext
   getContactIcon(type) {
     return this.iconsList[type];
   }
+  componentWillLoad() {
+    return new Promise(resolve => salla.onReady(resolve));
+  }
   render() {
     const contactsArray = this.getContactsArray();
     if (this.isHeader && contactsArray && contactsArray.length > 0) {

package/dist/components/salla-contacts.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-contacts.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,iEAAiE;;MCa7EA,eAAa;EACxB;;;;;;;;;oBAwCyB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,gBAAgB,CAAC;qBACjC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE;IAxCpE,IAAI,CAAC,WAAW,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,0CAAE,SAAS,KAAI,qFAAqF,CAAC,IAAI,CAAC,SAAS,IAAI,sCAAsC,MAAM,CAAC;IAElO,KAAK,CAAC,OAAO,CAAC;MACZ,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACpD,CAAC,CAAC;IAEH,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;MAClB,IAAI,CAAC,aAAa,GAAI,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;KACpF,CAAC,CAAC;GACJ;~~EAiCO~~,gBAAgB;IACtB,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;OACjC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;OACvC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;GAC9C;EAEO,cAAc,CAAC,IAAI;IACzB,QAAQ,IAAI;MACV,KAAK,OAAO;QACV,OAAO,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;MACtC,KAAK,QAAQ;QACX,OAAO,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;MACtC,KAAK,UAAU;QACb,OAAO,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;MACxC,KAAK,OAAO;QACV,OAAO,UAAU,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;MACzC,KAAK,UAAU;QACb,OAAO,gBAAgB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;MAC/C;QACE,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;KAC9B;GACF;EAEO,cAAc,CAAC,IAAI;IACzB,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;GAC7B;~~EACD~~,MAAM;IACJ,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC9C,IAAI,IAAI,CAAC,QAAQ,IAAI,aAAa,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;MAC9D,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,8BAA8B,IACvC,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MACxG,SAAG,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAC,wBAAwB,IACnF,OAAO,CAAC,IAAI,KAAK,OAAO,IACvB,OAAO,CAAC,KAAK,KAEb;QACE,gBAAO,IAAI,CAAC,aAAa,OAAU;QACnC,SAAG,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAG,OAAO,CAAC,KAAK,CAAK;OAC3E,CACF,CACC,CACL,CAAC,CACG,EACP;KACH;IACD,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,YAAY,IACrB,CAAC,IAAI,CAAC,SAAS,IAAI,UAAI,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,aAAa,CAAM,EAC1E,WAAK,KAAK,EAAE;QACV,iBAAiB,EAAE,IAAI;QACvB,4BAA4B,EAAE,IAAI,CAAC,UAAU;QAC7C,0BAA0B,EAAE,CAAC,IAAI,CAAC,UAAU;QAC5C,4BAA4B,EAAE,IAAI,CAAC,SAAS;OAC7C,IAEE,aAAa,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MAChC,WAAK,GAAG,EAAE,KAAK,EAAE,EAAE,EAAC,cAAc,EAAC,SAAS,EAAE,IAAI,CAAC,WAAW;SAC3D,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;SACvD,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;SAC/C,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GACpD,CACP,CAAC,CACE,CACD,EACP;GACH;EACD,kBAAkB;;;IAEhB,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,0CAAE,MAAM,EAAE,CAAC;GACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SallaContacts"],"sources":["src/components/salla-contacts/salla-contacts.scss?tag=salla-contacts","src/components/salla-contacts/salla-contacts.tsx"],"sourcesContent":[".unicode {\n unicode-bidi: plaintext;\n}","import { Component, Host, h, Prop, State, Element } from '@stencil/core';\nimport mobile from '../../assets/svg/iphone.svg';\nimport whatsapp from '../../assets/svg/whatsapp2.svg';\nimport phone from '../../assets/svg/phone.svg';\nimport telegram from '../../assets/svg/paper-plane-o.svg';\nimport email from '../../assets/svg/mail.svg';\n/*\n @slot contact - Replaces contact item, has replaceable props `{icon}`, `{value}`.\n /\n@Component({\n tag: 'salla-contacts',\n styleUrl: 'salla-contacts.scss',\n})\nexport class SallaContacts {\n constructor() {\n this.contactSlot = this.host.querySelector('[slot=\"contact\"]')?.innerHTML \|\| `<a href={link} class=\"s-contacts-item\"><span class=\"s-contacts-icon\">{icon}</span>${!this.iconsOnly && \"<span class='unicode'>{value}</span>\"}</a>`;\n\n salla.onReady(() => {\n this.contacts = salla.config.get('store.contacts');\n });\n\n salla.lang.onLoaded(() => {\n this.contactsTitle = this.contactsTitle \|\| salla.lang.get('blocks.footer.social');\n });\n }\n private readonly contactSlot: string;\n\n /\n Section title for social block of footer.\n /\n @Prop({mutable: true}) contactsTitle: string;\n\n /\n Flag to toggle title visibility.\n /\n @Prop() hideTitle: boolean;\n\n /\n Conditional flag to check whether the content is header or not.\n /\n @Prop() isHeader: boolean;\n\n /\n Flag to toggle list of contents whether vertical or horizontal.\n /\n @Prop() horizontal: boolean;\n\n /\n Flag condition to show icon only or icon with label\n */\n @Prop() iconsOnly: boolean;\n\n\n @Element() host: HTMLElement;\n @State() contacts: any = salla.config.get('store.contacts');\n @State() iconsList: any = { mobile, whatsapp, phone, telegram, email }\n\n private getContactsArray() {\n return Object.entries(this.contacts)\n .filter(([_key, value]) => value !== '')\n .map(([type, value]) => ({ type, value }));\n }\n\n private getContactLink(type) {\n switch (type) {\n case 'phone':\n return `tel:${this.contacts[type]}`; \n case 'mobile':\n return `tel:${this.contacts[type]}`;\n case 'whatsapp':\n return salla.url.get('whatsapp/send');\n case 'email':\n return `mailto:${this.contacts[type]}`;\n case 'telegram':\n return `https://t.me/${this.contacts[type]}`;\n default:\n return this.contacts[type];\n }\n }\n\n private getContactIcon(type) {\n return this.iconsList[type];\n }\n render() {\n const contactsArray = this.getContactsArray();\n if (this.isHeader && contactsArray && contactsArray.length > 0) {\n return (\n <Host class=\"s-contacts s-contacts-header\">\n {contactsArray.filter((contact) => contact.type == 'phone' \|\| contact.type == 'email').map((contact, index) => (\n <a href={this.getContactLink(contact.type)} key={index} class=\"s-contacts-topnav-link\">\n {contact.type === 'email' ? (\n contact.value\n ) : (\n [\n <span>{this.contactsTitle}: </span>,\n <a class=\"unicode\" href={this.iconsList[contact.type]}>{contact.value}</a>\n ]\n )}\n </a>\n ))}\n </Host>\n );\n }\n return (\n <Host class=\"s-contacts\">\n {!this.hideTitle && <h3 class=\"s-contacts-title\">{this.contactsTitle}</h3>}\n <div class={{\n 's-contacts-list': true,\n 's-contacts-list-horizontal': this.horizontal,\n 's-contacts-list-vertical': !this.horizontal,\n 's-contacts-list-icons-only': this.iconsOnly\n }\n }>\n {contactsArray.map((contact, index) => (\n <div key={index} id=\"contact-slot\" innerHTML={this.contactSlot\n .replace(/\\{icon\\}/g, this.getContactIcon(contact.type))\n .replace(/\\{value\\}/g, contact.value.toString())\n .replace(/\\{link\\}/g, this.getContactLink(contact.type))}>\n </div>\n ))}\n </div>\n </Host>\n );\n }\n componentDidRender() {\n // this.host.querySelectorAll('#contact-slot').forEach(el => el.replaceWith(el.firstChild));\n this.host.querySelector('[slot=\"contact\"]')?.remove();\n }\n}\n\n"],"version":3}
1	+ {"file":"salla-contacts.js","mappings":"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","names":["SallaContacts"],"sources":["src/components/salla-contacts/salla-contacts.scss?tag=salla-contacts","src/components/salla-contacts/salla-contacts.tsx"],"sourcesContent":[".unicode {\n unicode-bidi: plaintext;\n}","import { Component, Host, h, Prop, State, Element } from '@stencil/core';\nimport mobile from '../../assets/svg/iphone.svg';\nimport whatsapp from '../../assets/svg/whatsapp2.svg';\nimport phone from '../../assets/svg/phone.svg';\nimport telegram from '../../assets/svg/paper-plane-o.svg';\nimport email from '../../assets/svg/mail.svg';\n/*\n @slot contact - Replaces contact item, has replaceable props `{icon}`, `{value}`.\n /\n@Component({\n tag: 'salla-contacts',\n styleUrl: 'salla-contacts.scss',\n})\nexport class SallaContacts {\n constructor() {\n this.contactSlot = this.host.querySelector('[slot=\"contact\"]')?.innerHTML \|\| `<a href={link} class=\"s-contacts-item\"><span class=\"s-contacts-icon\">{icon}</span>${!this.iconsOnly && \"<span class='unicode'>{value}</span>\"}</a>`;\n\n salla.onReady(() => {\n this.contacts = salla.config.get('store.contacts');\n });\n\n salla.lang.onLoaded(() => {\n this.contactsTitle = this.contactsTitle \|\| salla.lang.get('blocks.footer.social');\n });\n }\n private readonly contactSlot: string;\n\n /\n Section title for social block of footer.\n /\n @Prop({mutable: true}) contactsTitle: string;\n\n /\n Flag to toggle title visibility.\n /\n @Prop() hideTitle: boolean;\n\n /\n Conditional flag to check whether the content is header or not.\n /\n @Prop() isHeader: boolean;\n\n /\n Flag to toggle list of contents whether vertical or horizontal.\n /\n @Prop() horizontal: boolean;\n\n /\n Flag condition to show icon only or icon with label\n */\n @Prop() iconsOnly: boolean;\n\n\n @Element() host: HTMLElement;\n @State() contacts: any = salla.config.get('store.contacts');\n @State() iconsList: any = { mobile, whatsapp, phone, telegram, email }\n private getContactsArray() {\n return Object.entries(this.contacts)\n .filter(([_key, value]) => value !== '')\n .map(([type, value]) => ({ type, value }));\n }\n\n private getContactLink(type) {\n switch (type) {\n case 'phone':\n return `tel:${this.contacts[type]}`; \n case 'mobile':\n return `tel:${this.contacts[type]}`;\n case 'whatsapp':\n return salla.url.get('whatsapp/send');\n case 'email':\n return `mailto:${this.contacts[type]}`;\n case 'telegram':\n return `https://t.me/${this.contacts[type]}`;\n default:\n return this.contacts[type];\n }\n }\n\n private getContactIcon(type) {\n return this.iconsList[type];\n }\n\n componentWillLoad() {\n return new Promise(resolve => salla.onReady(resolve));\n }\n\n\n render() {\n const contactsArray = this.getContactsArray();\n if (this.isHeader && contactsArray && contactsArray.length > 0) {\n return (\n <Host class=\"s-contacts s-contacts-header\">\n {contactsArray.filter((contact) => contact.type == 'phone' \|\| contact.type == 'email').map((contact, index) => (\n <a href={this.getContactLink(contact.type)} key={index} class=\"s-contacts-topnav-link\">\n {contact.type === 'email' ? (\n contact.value\n ) : (\n [\n <span>{this.contactsTitle}: </span>,\n <a class=\"unicode\" href={this.iconsList[contact.type]}>{contact.value}</a>\n ]\n )}\n </a>\n ))}\n </Host>\n );\n }\n return (\n <Host class=\"s-contacts\">\n {!this.hideTitle && <h3 class=\"s-contacts-title\">{this.contactsTitle}</h3>}\n <div class={{\n 's-contacts-list': true,\n 's-contacts-list-horizontal': this.horizontal,\n 's-contacts-list-vertical': !this.horizontal,\n 's-contacts-list-icons-only': this.iconsOnly\n }\n }>\n {contactsArray.map((contact, index) => (\n <div key={index} id=\"contact-slot\" innerHTML={this.contactSlot\n .replace(/\\{icon\\}/g, this.getContactIcon(contact.type))\n .replace(/\\{value\\}/g, contact.value.toString())\n .replace(/\\{link\\}/g, this.getContactLink(contact.type))}>\n </div>\n ))}\n </div>\n </Host>\n );\n }\n componentDidRender() {\n // this.host.querySelectorAll('#contact-slot').forEach(el => el.replaceWith(el.firstChild));\n this.host.querySelector('[slot=\"contact\"]')?.remove();\n }\n}\n\n"],"version":3}

package/dist/components/salla-payments.js CHANGED Viewed

@@ -23,6 +23,9 @@ const SallaPayments$1 = /*@__PURE__*/ proxyCustomElement(class SallaPayments ext
       this.placeholderImage = salla.url.cdn(`images/s-empty.png`);
     });
   }
+  componentWillLoad() {
+    return new Promise(resolve => salla.onReady(resolve));
+  }
   render() {
     return (h(Host, { class: "s-payments-list" }, this.withMadeInKsa && h("li", { class: "s-payments-list-item" }, h("img", { class: "lazy", width: "100%", height: "100%", decoding: "async", loading: "lazy", "data-src": salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.map((payment) => (payment == "cod" ?
       h("div", { id: "cod-slot", innerHTML: this.codSlot

package/dist/components/salla-payments.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-payments.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,sBAAsB;;MCWlCA,eAAa;EACxB;;;;oBAcoB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,yBAAyB,CAAC;4BACnC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,oBAAoB,CAAC;;;;IAd7D,IAAI,CAAC,WAAW,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,0CAAE,SAAS,KAAI,sFAAsF,IAAI,CAAC,gBAAgB,wCAAwC,CAAC;IACjO,IAAI,CAAC,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,SAAS,KAAI,2GAA2G,IAAI,CAAC,gBAAgB,0EAA0E,CAAC;IAChR,IAAI,CAAC,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,SAAS,KAAI,0EAA0E,IAAI,CAAC,gBAAgB,iDAAiD,CAAC;IAEtN,KAAK,CAAC,OAAO,CAAC;MACZ,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;MAC5D,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;KAC7D,CAAC,CAAC;GACJ;~~EAuBD~~,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,IAG1B,IAAI,CAAC,aAAa,IAAI,UAAI,KAAK,EAAC,sBAAsB,IACrD,WAAK,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,OAAO,EAAC,MAAM,cAAW,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,wBAAwB,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAC,uBAAuB,GAAG,CACnK,EAGJ,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACzB,OAAO,IAAI,KAAK;MACd,WAAK,EAAE,EAAC,UAAU,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO;WACvC,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,6BAA6B,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GACxE;MACN,WAAK,EAAE,EAAC,cAAc,EAAC,SAAS,EAAE,IAAI,CAAC,WAAW;WAC/C,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAkB,OAAO,WAAW,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;WAClF,OAAO,CAAC,cAAc,EAAE,OAAO,CAAC,GAC7B,CACT,CAAC,EAID,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,IAAI,WAAK,EAAE,EAAC,UAAU,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO;SACtE,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,gBAAgB,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;SAC9D,OAAO,CAAC,WAAW,EAAE,kEAAkE,IAAI,CAAC,KAAK,EAAE,CAAC,GACjG,CACD,EACP;GACH;EACD,gBAAgB;;IACd,MAAA,QAAQ,CAAC,gBAAgB,0CAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;;IAEvE,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG;MAC9C,GAAG,CAAC,gBAAgB,CAAC,MAAM,EAAE;QAC3B,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAClC,GAAG,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;OACpC,CAAC,CAAC;KACJ,CAAC,CAAC;GACJ;EACD,kBAAkB;;IAChB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACzF,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACrF,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACrF,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,0CAAE,MAAM,EAAE,CAAC;IACtD,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,MAAM,EAAE,CAAC;IAClD,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,MAAM,EAAE,CAAC;GACnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SallaPayments"],"sources":["src/components/salla-payments/salla-payments.scss?tag=salla-payments","src/components/salla-payments/salla-payments.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Host, Prop, State, h, Element } from '@stencil/core';\n/*\n @slot payment - Replaces payment item, has replaceable props `{image}`, `{name}`.\n * @slot sbc - Replaces SBC certificate item, has replaceable props `{image}`.\n * @slot cod - Replaces COD item, has replaceable props `{image}`.\n /\n@Component({\n tag: 'salla-payments',\n styleUrl: 'salla-payments.scss'\n})\n\nexport class SallaPayments {\n constructor() {\n this.paymentSlot = this.host.querySelector('[slot=\"payment\"]')?.innerHTML \|\| `<li class=\"s-payments-list-item\"><img class=\"lazy\" width=\"100%\" height=\"100%\" src=\"${this.placeholderImage}\" data-src=\"{image}\" alt={name} /><li>`;\n this.sbcSlot = this.host.querySelector('[slot=\"sbc\"]')?.innerHTML \|\| `<li class=\"s-payments-list-item\"><a target=\"_blank\" href=\"{link}\"> <img width=\"100%\" height=\"100%\" src=\"${this.placeholderImage}\" data-src={image} class=\"lazy s-payments-sbc-image\" alt=\"SBC\"/></a><li>`;\n this.codSlot = this.host.querySelector('[slot=\"cod\"]')?.innerHTML \|\| `<li class=\"s-payments-list-item\"> <img width=\"100%\" height=\"100%\" src=\"${this.placeholderImage}\" data-src={image} class=\"lazy\" alt=\"COD\"/><li>`;\n\n salla.onReady(() => {\n this.payments = salla.config.get('store.settings.payments');\n this.placeholderImage = salla.url.cdn(`images/s-empty.png`);\n });\n }\n private readonly paymentSlot: string;\n private readonly sbcSlot: string;\n private readonly codSlot: string;\n @Element() host: HTMLElement;\n @State() payments = salla.config.get('store.settings.payments');\n @State() placeholderImage = salla.url.cdn(`images/s-empty.png`);\n\n /\n Boolean indicating whether to include the SBC (Saudi Business Council) certificate.\n /\n @Prop() withSbc: boolean;\n\n /\n The SBC (Saudi Business Council) certificate ID.\n /\n @Prop() sbcId: string;\n\n /\n Boolean indicating whether to include the \"Made in KSA\" certification.\n /\n @Prop() withMadeInKsa: boolean;\n\n render() {\n return (\n <Host class=\"s-payments-list\">\n\n {/ Made in KSA /}\n {this.withMadeInKsa && <li class=\"s-payments-list-item\">\n <img class=\"lazy\" width=\"100%\" height=\"100%\" decoding=\"async\" loading=\"lazy\" data-src={salla.url.cdn(`images/made-in-ksa.svg`, 58, 58)} alt=\"made in KSA certified\" />\n </li>}\n\n {/ Dynamic methods /}\n {this.payments.map((payment) => (\n payment == \"cod\" ?\n <div id=\"cod-slot\" innerHTML={this.codSlot\n .replace(/\\{image\\}/g, salla.url.cdn(`images/payment/cod_mini.png`, 58, 58))}>\n </div> :\n <div id=\"payment-slot\" innerHTML={this.paymentSlot\n .replace(/\\{image\\}/g, salla.url.cdn(`images/payment/${payment}_mini.png`, 58, 58))\n .replace(/\\{payment\\}/g, payment)}>\n </div>\n ))}\n\n\n {/ SBC certificate */}\n {this.withSbc && this.sbcId && <div id=\"sbc-slot\" innerHTML={this.sbcSlot\n .replace(/\\{image\\}/g, salla.url.cdn(`images/sbc.png`, 58, 58))\n .replace(/\\{link\\}/g, `https://eauthenticate.saudibusiness.gov.sa/certificate-details/${this.sbcId}`)}>\n </div>}\n </Host>\n );\n }\n componentDidLoad() {\n document.lazyLoadInstance?.update(this.host.querySelectorAll('.lazy'));\n // fix lazy loaded images that have 100% width and height\n this.host.querySelectorAll('.lazy').forEach((img) => {\n img.addEventListener('load', () => {\n img.setAttribute('width', \"100%\");\n img.setAttribute('height', \"100%\");\n });\n });\n }\n componentDidRender() {\n this.host.querySelectorAll('#payment-slot').forEach(el => el.replaceWith(el.firstChild));\n this.host.querySelectorAll('#sbc-slot').forEach(el => el.replaceWith(el.firstChild));\n this.host.querySelectorAll('#cod-slot').forEach(el => el.replaceWith(el.firstChild));\n this.host.querySelector('[slot=\"payment\"]')?.remove();\n this.host.querySelector('[slot=\"sbc\"]')?.remove();\n this.host.querySelector('[slot=\"cod\"]')?.remove();\n }\n}\n"],"version":3}
1	+ {"file":"salla-payments.js","mappings":"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","names":["SallaPayments"],"sources":["src/components/salla-payments/salla-payments.scss?tag=salla-payments","src/components/salla-payments/salla-payments.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Host, Prop, State, h, Element } from '@stencil/core';\n/*\n @slot payment - Replaces payment item, has replaceable props `{image}`, `{name}`.\n * @slot sbc - Replaces SBC certificate item, has replaceable props `{image}`.\n * @slot cod - Replaces COD item, has replaceable props `{image}`.\n /\n@Component({\n tag: 'salla-payments',\n styleUrl: 'salla-payments.scss'\n})\n\nexport class SallaPayments {\n constructor() {\n this.paymentSlot = this.host.querySelector('[slot=\"payment\"]')?.innerHTML \|\| `<li class=\"s-payments-list-item\"><img class=\"lazy\" width=\"100%\" height=\"100%\" src=\"${this.placeholderImage}\" data-src=\"{image}\" alt={name} /><li>`;\n this.sbcSlot = this.host.querySelector('[slot=\"sbc\"]')?.innerHTML \|\| `<li class=\"s-payments-list-item\"><a target=\"_blank\" href=\"{link}\"> <img width=\"100%\" height=\"100%\" src=\"${this.placeholderImage}\" data-src={image} class=\"lazy s-payments-sbc-image\" alt=\"SBC\"/></a><li>`;\n this.codSlot = this.host.querySelector('[slot=\"cod\"]')?.innerHTML \|\| `<li class=\"s-payments-list-item\"> <img width=\"100%\" height=\"100%\" src=\"${this.placeholderImage}\" data-src={image} class=\"lazy\" alt=\"COD\"/><li>`;\n\n salla.onReady(() => {\n this.payments = salla.config.get('store.settings.payments');\n this.placeholderImage = salla.url.cdn(`images/s-empty.png`);\n });\n }\n private readonly paymentSlot: string;\n private readonly sbcSlot: string;\n private readonly codSlot: string;\n @Element() host: HTMLElement;\n @State() payments = salla.config.get('store.settings.payments');\n @State() placeholderImage = salla.url.cdn(`images/s-empty.png`);\n /\n Boolean indicating whether to include the SBC (Saudi Business Council) certificate.\n /\n @Prop() withSbc: boolean;\n\n /\n The SBC (Saudi Business Council) certificate ID.\n /\n @Prop() sbcId: string;\n\n /\n Boolean indicating whether to include the \"Made in KSA\" certification.\n /\n @Prop() withMadeInKsa: boolean;\n\n componentWillLoad() {\n return new Promise(resolve => salla.onReady(resolve));\n }\n \n render() {\n return (\n <Host class=\"s-payments-list\">\n\n {/ Made in KSA /}\n {this.withMadeInKsa && <li class=\"s-payments-list-item\">\n <img class=\"lazy\" width=\"100%\" height=\"100%\" decoding=\"async\" loading=\"lazy\" data-src={salla.url.cdn(`images/made-in-ksa.svg`, 58, 58)} alt=\"made in KSA certified\" />\n </li>}\n\n {/ Dynamic methods /}\n {this.payments.map((payment) => (\n payment == \"cod\" ?\n <div id=\"cod-slot\" innerHTML={this.codSlot\n .replace(/\\{image\\}/g, salla.url.cdn(`images/payment/cod_mini.png`, 58, 58))}>\n </div> :\n <div id=\"payment-slot\" innerHTML={this.paymentSlot\n .replace(/\\{image\\}/g, salla.url.cdn(`images/payment/${payment}_mini.png`, 58, 58))\n .replace(/\\{payment\\}/g, payment)}>\n </div>\n ))}\n\n\n {/ SBC certificate */}\n {this.withSbc && this.sbcId && <div id=\"sbc-slot\" innerHTML={this.sbcSlot\n .replace(/\\{image\\}/g, salla.url.cdn(`images/sbc.png`, 58, 58))\n .replace(/\\{link\\}/g, `https://eauthenticate.saudibusiness.gov.sa/certificate-details/${this.sbcId}`)}>\n </div>}\n </Host>\n );\n }\n componentDidLoad() {\n document.lazyLoadInstance?.update(this.host.querySelectorAll('.lazy'));\n // fix lazy loaded images that have 100% width and height\n this.host.querySelectorAll('.lazy').forEach((img) => {\n img.addEventListener('load', () => {\n img.setAttribute('width', \"100%\");\n img.setAttribute('height', \"100%\");\n });\n });\n }\n componentDidRender() {\n this.host.querySelectorAll('#payment-slot').forEach(el => el.replaceWith(el.firstChild));\n this.host.querySelectorAll('#sbc-slot').forEach(el => el.replaceWith(el.firstChild));\n this.host.querySelectorAll('#cod-slot').forEach(el => el.replaceWith(el.firstChild));\n this.host.querySelector('[slot=\"payment\"]')?.remove();\n this.host.querySelector('[slot=\"sbc\"]')?.remove();\n this.host.querySelector('[slot=\"cod\"]')?.remove();\n }\n}\n"],"version":3}

package/dist/components/salla-quick-buy2.js CHANGED Viewed

@@ -2117,35 +2117,45 @@ window.SallaApplePay = {
      *
      * @param event
      */
-    onValidateMerchant: (event) => {
-        Salla.event.dispatch('payments::apple-pay.validate-merchant.init', event);
+    onValidateMerchant: async (event) => {
+        try {
+            // Dispatch event to initialize Apple Pay merchant validation
+            Salla.event.dispatch('payments::apple-pay.validate-merchant.init', event);
-        Http.post(SallaApplePay.detail.validateMerchant.url.replace('{id}', SallaApplePay.id), {
-            validation_url: event.validationURL
-        }, ({data}) => {
+            // Post request to validate merchant
+            const { data } = await Http.post(SallaApplePay.detail.validateMerchant.url.replace('{id}', SallaApplePay.id), {
+                validation_url: event.validationURL
+            });
+            // Dispatch event on successful merchant validation
             Salla.event.dispatch('payments::apple-pay.validate-merchant.success', data);
-            if (typeof SallaApplePay.detail.validateMerchant.onSuccess === 'function') {
-                SallaApplePay.detail.validateMerchant.onSuccess(data).then((response) => {
-                    // check if there are redirect
-                    if (response?.redirect) {
-                        window.location = response.redirect;
-                        return SallaApplePay.abortValidateMerchant(response);
-                    }
+            // Define a function to handle the completion of merchant validation
+            const completeMerchantValidation = async (responseData) => {
+                try {
+                    await SallaApplePay.recalculateTotal();
+                } catch (error) {
+                    salla.logger.warn('🍏 Pay: Failed recalculate total', error);
+                }
+                SallaApplePay.session.completeMerchantValidation(responseData);
+            };
-                    SallaApplePay.session.completeMerchantValidation(data.data);
-                }).catch((response) => {
-                    SallaApplePay.abortValidateMerchant(response);
-                });
-            } else {
-                SallaApplePay.session.completeMerchantValidation(data.data);
+            // Check if onSuccess function is defined in SallaApplePay.detail.validateMerchant
+            if (typeof SallaApplePay.detail.validateMerchant.onSuccess === 'function') {
+                // Call onSuccess function and handle response
+                const response = await SallaApplePay.detail.validateMerchant.onSuccess(data);
+                if (response?.redirect) {
+                    // Handle redirect if present
+                    window.location = response.redirect;
+                    return SallaApplePay.abortValidateMerchant(response);
+                }
             }
-        }, (error) => {
+            completeMerchantValidation(data.data);
+        } catch (error) {
+            // Handle errors
             console.error(error);
             SallaApplePay.abortValidateMerchant(error?.response);
-        });
+        }
     },
     abortValidateMerchant: (response = null) => {