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/cjs/salla-advertisement.cjs.entry.js CHANGED Viewed

@@ -83,7 +83,7 @@ const SallaAdvertisement = class {
   */
   componentWillLoad() {
     // Fetch advertisements based on the current page
-    return Helper.Helper.onSallaReadyPromise((_resolve) => {
+    return Helper.Helper.onSallaReadyPromise((resolve) => {
       return salla.api.advertisement.fetch(this.currentSlug)
         .then(resp => {
         let ads = resp.data;
@@ -95,6 +95,7 @@ const SallaAdvertisement = class {
             }
           }
         }
+        resolve();
       });
     });
   }

package/dist/cjs/salla-advertisement.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-advertisement.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,qBAAqB,GAAG,sBAAsB;;MCiBvC,kBAAkB;;;;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;;MAExDA,cAAO,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,OAAOC,iBAAK,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,IAC1FA,iBAAK,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,OAAOC,aAAM,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;;IAGlDF,cAAO,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":["AnimeJS","h","Helper"],"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.entry.cjs.js","mappings":"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","names":["AnimeJS","h","Helper"],"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/cjs/salla-apps-icons.cjs.entry.js CHANGED Viewed

@@ -29,6 +29,9 @@ const SallaAppsIcons = class {
     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/cjs/salla-apps-icons.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-apps-icons.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,sBAAsB;;MCQnC,cAAc;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,QACEA,QAACC,UAAI,IAAC,KAAK,EAAC,cAAc,IACrB,CAAC,IAAI,CAAC,SAAS,IAAID,oBAAK,IAAI,CAAC,SAAS,CAAM,EAC7CA,iBAAK,KAAK,EAAE,EAAC,mBAAmB,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAC,IAC/D,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAEE,OAAK,MACvBF,eAAG,GAAG,EAAEE,OAAK,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":["h","Host","index"],"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.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,sBAAsB;;MCQnC,cAAc;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,QACEA,QAACC,UAAI,IAAC,KAAK,EAAC,cAAc,IACrB,CAAC,IAAI,CAAC,SAAS,IAAID,oBAAK,IAAI,CAAC,SAAS,CAAM,EAC7CA,iBAAK,KAAK,EAAE,EAAC,mBAAmB,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAC,IAC/D,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAEE,OAAK,MACvBF,eAAG,GAAG,EAAEE,OAAK,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":["h","Host","index"],"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/cjs/salla-contacts.cjs.entry.js CHANGED Viewed

@@ -81,6 +81,9 @@ const SallaContacts = class {
   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/cjs/salla-contacts.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-contacts.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,iEAAiE;;MCa7E,aAAa;EACxB;;;;;;;;oBAwCyB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,gBAAgB,CAAC;qBACjC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,SAAEA,UAAK,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,QACEC,QAACC,UAAI,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,EAAEC,OAAK,MACxGF,eAAG,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,EAAEE,OAAK,EAAE,KAAK,EAAC,wBAAwB,IACnF,OAAO,CAAC,IAAI,KAAK,OAAO,IACvB,OAAO,CAAC,KAAK,KAEb;QACEF,sBAAO,IAAI,CAAC,aAAa,OAAU;QACnCA,eAAG,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,QACEA,QAACC,UAAI,IAAC,KAAK,EAAC,YAAY,IACrB,CAAC,IAAI,CAAC,SAAS,IAAID,gBAAI,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,aAAa,CAAM,EAC1EA,iBAAK,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,EAAEE,OAAK,MAChCF,iBAAK,GAAG,EAAEE,OAAK,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":["email","h","Host","index"],"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.entry.cjs.js","mappings":"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","names":["email","h","Host","index"],"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/cjs/salla-payments.cjs.entry.js CHANGED Viewed

@@ -26,6 +26,9 @@ const SallaPayments = class {
       this.placeholderImage = salla.url.cdn(`images/s-empty.png`);
     });
   }
+  componentWillLoad() {
+    return new Promise(resolve => salla.onReady(resolve));
+  }
   render() {
     return (index.h(index.Host, { class: "s-payments-list" }, this.withMadeInKsa && index.h("li", { class: "s-payments-list-item" }, index.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" ?
       index.h("div", { id: "cod-slot", innerHTML: this.codSlot

package/dist/cjs/salla-payments.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-payments.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,sBAAsB;;MCWlC,aAAa;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,QACEA,QAACC,UAAI,IAAC,KAAK,EAAC,iBAAiB,IAG1B,IAAI,CAAC,aAAa,IAAID,gBAAI,KAAK,EAAC,sBAAsB,IACrDA,iBAAK,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;MACdA,iBAAK,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;MACNA,iBAAK,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,IAAIA,iBAAK,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":["h","Host"],"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.entry.cjs.js","mappings":"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","names":["h","Host"],"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/cjs/salla-social.cjs.entry.js CHANGED Viewed

@@ -44,7 +44,7 @@ const SallaSocial = class {
     var _a;
     this.links = salla.config.get('store.social');
     this.iconsList = { instagram, twitter: twitter.twitter, facebook: twitter.facebook, youtube, snapchat, tiktok };
-    this.socialSlot = ((_a = this.host.querySelector('[slot="social"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) ||
+    this.socialSlot = ((_a = this.host.querySelector('[slot="social-item"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) ||
       `<li class="s-social-link"><a href={link} rel="noopener" target="_blank" title={type} aria-label={type}><span class="s-social-icon">{icon}</span></a></li>`;
     salla.lang.onLoaded(() => {
       this.links = salla.config.get('store.social');
@@ -55,6 +55,9 @@ const SallaSocial = class {
       .filter(([key, value]) => !!value && key !== 'whatsapp')
       .map(([type, value]) => ({ type, value }));
   }
+  componentWillLoad() {
+    return new Promise(resolve => salla.onReady(resolve));
+  }
   render() {
     const linksArray = this.getLinksArray();
     return (index.h(index.Host, { class: "s-social-list" }, linksArray.map((link) => (index.h("div", { id: "social-slot", innerHTML: this.socialSlot
@@ -65,7 +68,7 @@ const SallaSocial = class {
   componentDidRender() {
     var _a;
     this.host.querySelectorAll('#social-slot').forEach(el => el.replaceWith(el.firstChild));
-    (_a = this.host.querySelector('[slot="social"]')) === null || _a === void 0 ? void 0 : _a.remove();
+    (_a = this.host.querySelector('[slot="social-item"]')) === null || _a === void 0 ? void 0 : _a.remove();
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/salla-social.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-social.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,cAAc,GAAG,sBAAsB;;~~MCYhC~~,WAAW;EACtB;;;iBASiB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC;qBAEvB,EAAE,SAAS,WAAEA,eAAO,YAAEC,gBAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE;IAVnF,IAAI,CAAC,UAAU,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,~~iBAAiB~~,CAAC,0CAAE,SAAS;~~MACrE~~,2JAA2J,CAAC;IAC9J,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;MAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;KAC/C,CAAC,CAAC;GACJ;~~EAQO~~,aAAa;IACnB,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;OAC9B,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,GAAG,KAAK,UAAU,CAAC;OACvD,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;GAC9C;EAED,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;IACxC,QACEC,QAACC,UAAI,IAAC,KAAK,EAAC,eAAe,IACxB,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,MACnBD,iBAAK,EAAE,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,UAAU;SAC7C,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC/C,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC;SAC/B,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,GACxC,CACP,CAAC,CACG,EACP;GACH;EACD,kBAAkB;;IAChB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACxF,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,~~iBAAiB~~,CAAC,0CAAE,MAAM,EAAE,CAAC;~~GACtD~~;;;;;;;","names":["twitter","facebook","h","Host"],"sources":["src/components/salla-social/salla-social.scss?tag=salla-social","src/components/salla-social/salla-social.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Host, State, h, Element } from '@stencil/core';\nimport instagram from '../../assets/svg/instagram.svg';\nimport twitter from '../../assets/svg/twitter.svg';\nimport facebook from '../../assets/svg/facebook.svg';\nimport youtube from '../../assets/svg/youtube.svg';\nimport snapchat from '../../assets/svg/snapchat.svg';\nimport tiktok from '../../assets/svg/tiktok.svg';\n\n@Component({\n tag: 'salla-social',\n styleUrl: 'salla-social.scss',\n})\nexport class SallaSocial {\n constructor() {\n this.socialSlot = this.host.querySelector('[slot=\"social\"]')?.innerHTML \|\|\n `<li class=\"s-social-link\"><a href={link} rel=\"noopener\" target=\"_blank\" title={type} aria-label={type}><span class=\"s-social-icon\">{icon}</span></a></li>`;\n salla.lang.onLoaded(() => {\n this.links = salla.config.get('store.social');\n });\n }\n\n private readonly socialSlot: string;\n @State() links = salla.config.get('store.social');\n @Element() host: HTMLElement;\n @State() iconsList: any = { instagram, twitter, facebook, youtube, snapchat, tiktok }\n\n\n private getLinksArray() {\n return Object.entries(this.links)\n .filter(([key, value]) => !!value && key !== 'whatsapp')\n .map(([type, value]) => ({ type, value }));\n }\n\n render() {\n const linksArray = this.getLinksArray();\n return (\n <Host class=\"s-social-list\">\n {linksArray.map((link) => (\n <div id=\"social-slot\" innerHTML={this.socialSlot\n .replace(/\\{icon\\}/g, this.iconsList[link.type])\n .replace(/\\{type\\}/g, link.type)\n .replace(/\\{link\\}/g, link.value.toString())}>\n </div>\n ))}\n </Host>\n );\n }\n componentDidRender() {\n this.host.querySelectorAll('#social-slot').forEach(el => el.replaceWith(el.firstChild));\n this.host.querySelector('[slot=\"social\"]')?.remove();\n }\n}\n"],"version":3}
1	+ {"file":"salla-social.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,cAAc,GAAG,sBAAsB;;MCehC,WAAW;EACtB;;;iBASiB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC;qBAEvB,EAAE,SAAS,WAAEA,eAAO,YAAEC,gBAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE;IAVnF,IAAI,CAAC,UAAU,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,0CAAE,SAAS;MAC1E,2JAA2J,CAAC;IAC9J,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;MAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;KAC/C,CAAC,CAAC;GACJ;EAOO,aAAa;IACnB,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;OAC9B,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,GAAG,KAAK,UAAU,CAAC;OACvD,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,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;IACxC,QACEC,QAACC,UAAI,IAAC,KAAK,EAAC,eAAe,IACxB,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,MACnBD,iBAAK,EAAE,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,UAAU;SAC7C,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC/C,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC;SAC/B,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,GACxC,CACP,CAAC,CACG,EACP;GACH;EACD,kBAAkB;;IAChB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACxF,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,0CAAE,MAAM,EAAE,CAAC;GAC3D;;;;;;;","names":["twitter","facebook","h","Host"],"sources":["src/components/salla-social/salla-social.scss?tag=salla-social","src/components/salla-social/salla-social.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Host, State, h, Element } from '@stencil/core';\nimport instagram from '../../assets/svg/instagram.svg';\nimport twitter from '../../assets/svg/twitter.svg';\nimport facebook from '../../assets/svg/facebook.svg';\nimport youtube from '../../assets/svg/youtube.svg';\nimport snapchat from '../../assets/svg/snapchat.svg';\nimport tiktok from '../../assets/svg/tiktok.svg';\n\n/*\n @slot social-item - Replaces social item, has replaceable keys `{icon}`, `{type} and {link}`.\n */\n@Component({\n tag: 'salla-social',\n styleUrl: 'salla-social.scss',\n})\nexport class SallaSocial {\n constructor() {\n this.socialSlot = this.host.querySelector('[slot=\"social-item\"]')?.innerHTML \|\|\n `<li class=\"s-social-link\"><a href={link} rel=\"noopener\" target=\"_blank\" title={type} aria-label={type}><span class=\"s-social-icon\">{icon}</span></a></li>`;\n salla.lang.onLoaded(() => {\n this.links = salla.config.get('store.social');\n });\n }\n\n private readonly socialSlot: string;\n @State() links = salla.config.get('store.social');\n @Element() host: HTMLElement;\n @State() iconsList: any = { instagram, twitter, facebook, youtube, snapchat, tiktok }\n\n private getLinksArray() {\n return Object.entries(this.links)\n .filter(([key, value]) => !!value && key !== 'whatsapp')\n .map(([type, value]) => ({ type, value }));\n }\n\n componentWillLoad() {\n return new Promise(resolve => salla.onReady(resolve));\n }\n\n render() {\n const linksArray = this.getLinksArray();\n return (\n <Host class=\"s-social-list\">\n {linksArray.map((link) => (\n <div id=\"social-slot\" innerHTML={this.socialSlot\n .replace(/\\{icon\\}/g, this.iconsList[link.type])\n .replace(/\\{type\\}/g, link.type)\n .replace(/\\{link\\}/g, link.value.toString())}>\n </div>\n ))}\n </Host>\n );\n }\n componentDidRender() {\n this.host.querySelectorAll('#social-slot').forEach(el => el.replaceWith(el.firstChild));\n this.host.querySelector('[slot=\"social-item\"]')?.remove();\n }\n}\n"],"version":3}

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

@@ -83,7 +83,7 @@ export class SallaAdvertisement {
   */
   componentWillLoad() {
     // Fetch advertisements based on the current page
-    return Helper.onSallaReadyPromise((_resolve) => {
+    return Helper.onSallaReadyPromise((resolve) => {
       return salla.api.advertisement.fetch(this.currentSlug)
         .then(resp => {
         let ads = resp.data;
@@ -95,6 +95,7 @@ export class SallaAdvertisement {
             }
           }
         }
+        resolve();
       });
     });
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"salla-advertisement.js","sourceRoot":"","sources":["../../../src/components/salla-advertisement/salla-advertisement.tsx"],"names":[],"mappings":"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~~QAAQ~~,EAAE,EAAE;~~MAC5C~~,OAAO,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC;SACnD,IAAI,CAAC,IAAI,CAAC,EAAE;QACX,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;~~MACH~~,CAAC,CAAC,CAAA;IACN,CAAC,CAAC,CAAC;EACL,CAAC;EACD,kBAAkB;;IAChB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MAC/F,OAAO;KACR;IACD,0CAA0C;IAC1C,UAAU,CAAC,GAAG,EAAE;MACd,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;MAClE,IAAI,QAAQ,EAAE;QACZ,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;OACjG;IACH,CAAC,CAAC,CAAC;IAEH,+CAA+C;IAC/C,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,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;IAElD,iDAAiD;IACjD,OAAO,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;EACL,CAAC;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
1	+ {"version":3,"file":"salla-advertisement.js","sourceRoot":"","sources":["../../../src/components/salla-advertisement/salla-advertisement.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -24,6 +24,9 @@ export class SallaAppsIcons {
     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/collection/components/salla-apps-icons/salla-apps-icons.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"salla-apps-icons.js","sourceRoot":"","sources":["../../../src/components/salla-apps-icons/salla-apps-icons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACzE;;GAEG;AAKH,MAAM,OAAO,cAAc;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,GAAG,EAAE;MACjB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MACvB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;GACJ;EAoBO,YAAY;IAClB,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC7B,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;EAC/C,CAAC;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,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,cAAc;MACrB,CAAC,IAAI,CAAC,SAAS,IAAI,cAAK,IAAI,CAAC,SAAS,CAAM;MAC7C,WAAK,KAAK,EAAE,EAAC,mBAAmB,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAC,IAC/D,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,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;WACxI,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,IAAI,MAAM,CAAC,CAAC;WAC7D,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC,IAAI,CAAC,GAC7B,CACL,CAAC,CACE,CACH,CACR,CAAC;EACJ,CAAC;EACD,kBAAkB;;IAChB,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,MAAM,EAAE,CAAC;EACpD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
1	+ {"version":3,"file":"salla-apps-icons.js","sourceRoot":"","sources":["../../../src/components/salla-apps-icons/salla-apps-icons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACzE;;GAEG;AAKH,MAAM,OAAO,cAAc;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,GAAG,EAAE;MACjB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MACvB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;GACJ;EAoBO,YAAY;IAClB,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC7B,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;EAC/C,CAAC;EAED,iBAAiB;IACf,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;EACxD,CAAC;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,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,cAAc;MACrB,CAAC,IAAI,CAAC,SAAS,IAAI,cAAK,IAAI,CAAC,SAAS,CAAM;MAC7C,WAAK,KAAK,EAAE,EAAC,mBAAmB,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAC,IAC/D,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,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;WACxI,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,IAAI,MAAM,CAAC,CAAC;WAC7D,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC,IAAI,CAAC,GAC7B,CACL,CAAC,CACE,CACH,CACR,CAAC;EACJ,CAAC;EACD,kBAAkB;;IAChB,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,MAAM,EAAE,CAAC;EACpD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -52,6 +52,9 @@ export class SallaContacts {
   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/collection/components/salla-contacts/salla-contacts.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"salla-contacts.js","sourceRoot":"","sources":["../../../src/components/salla-contacts/salla-contacts.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AACtD,OAAO,KAAK,MAAM,4BAA4B,CAAC;AAC/C,OAAO,QAAQ,MAAM,oCAAoC,CAAC;AAC1D,OAAO,KAAK,MAAM,2BAA2B,CAAC;AAC9C;;GAEG;AAKH,MAAM,OAAO,aAAa;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,GAAG,EAAE;MACjB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MACvB,IAAI,CAAC,aAAa,GAAI,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;IACrF,CAAC,CAAC,CAAC;GACJ;~~EAiCO~~,gBAAgB;IACtB,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;OACjC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,KAAK,EAAE,CAAC;OACvC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;EAC/C,CAAC;EAEO,cAAc,CAAC,IAAI;IACzB,QAAQ,IAAI,EAAE;MACZ,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;EACH,CAAC;EAEO,cAAc,CAAC,IAAI;IACzB,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;EAC9B,CAAC;~~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,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,8BAA8B,IACvC,aAAa,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7G,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,CAAC,CAAC,CAAC,CAC1B,OAAO,CAAC,KAAK,CACd,CAAC,CAAC,CAAC,CACF;QACE;UAAO,IAAI,CAAC,aAAa;eAAU;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,CACR,CAAC;KACH;IACD,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,YAAY;MACrB,CAAC,IAAI,CAAC,SAAS,IAAI,UAAI,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,aAAa,CAAM;MAC1E,WAAK,KAAK,EAAE;UACV,iBAAiB,EAAE,IAAI;UACvB,4BAA4B,EAAE,IAAI,CAAC,UAAU;UAC7C,0BAA0B,EAAE,CAAC,IAAI,CAAC,UAAU;UAC5C,4BAA4B,EAAE,IAAI,CAAC,SAAS;SAC7C,IAEE,aAAa,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,WAAK,GAAG,EAAE,KAAK,EAAE,EAAE,EAAC,cAAc,EAAC,SAAS,EAAE,IAAI,CAAC,WAAW;WAC3D,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;WACvD,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;WAC/C,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GACpD,CACP,CAAC,CACE,CACD,CACR,CAAC;EACJ,CAAC;EACD,kBAAkB;;IAChB,4FAA4F;IAC5F,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,0CAAE,MAAM,EAAE,CAAC;EACxD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
1	+ {"version":3,"file":"salla-contacts.js","sourceRoot":"","sources":["../../../src/components/salla-contacts/salla-contacts.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -23,6 +23,9 @@ export class SallaPayments {
       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/collection/components/salla-payments/salla-payments.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"salla-payments.js","sourceRoot":"","sources":["../../../src/components/salla-payments/salla-payments.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACzE;;;;GAIG;AAMH,MAAM,OAAO,aAAa;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,GAAG,EAAE;MACjB,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;IAC9D,CAAC,CAAC,CAAC;GACJ;~~EAuBD~~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","sourcesContent":["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"]}
1	+ {"version":3,"file":"salla-payments.js","sourceRoot":"","sources":["../../../src/components/salla-payments/salla-payments.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/salla-social/salla-social.js CHANGED Viewed

@@ -8,12 +8,15 @@ import facebook from "../../assets/svg/facebook.svg";
 import youtube from "../../assets/svg/youtube.svg";
 import snapchat from "../../assets/svg/snapchat.svg";
 import tiktok from "../../assets/svg/tiktok.svg";
+/**
+ * @slot social-item - Replaces social item, has replaceable keys `{icon}`, `{type} and {link}`.
+ */
 export class SallaSocial {
   constructor() {
     var _a;
     this.links = salla.config.get('store.social');
     this.iconsList = { instagram, twitter, facebook, youtube, snapchat, tiktok };
-    this.socialSlot = ((_a = this.host.querySelector('[slot="social"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) ||
+    this.socialSlot = ((_a = this.host.querySelector('[slot="social-item"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) ||
       `<li class="s-social-link"><a href={link} rel="noopener" target="_blank" title={type} aria-label={type}><span class="s-social-icon">{icon}</span></a></li>`;
     salla.lang.onLoaded(() => {
       this.links = salla.config.get('store.social');
@@ -24,6 +27,9 @@ export class SallaSocial {
       .filter(([key, value]) => !!value && key !== 'whatsapp')
       .map(([type, value]) => ({ type, value }));
   }
+  componentWillLoad() {
+    return new Promise(resolve => salla.onReady(resolve));
+  }
   render() {
     const linksArray = this.getLinksArray();
     return (h(Host, { class: "s-social-list" }, linksArray.map((link) => (h("div", { id: "social-slot", innerHTML: this.socialSlot
@@ -34,7 +40,7 @@ export class SallaSocial {
   componentDidRender() {
     var _a;
     this.host.querySelectorAll('#social-slot').forEach(el => el.replaceWith(el.firstChild));
-    (_a = this.host.querySelector('[slot="social"]')) === null || _a === void 0 ? void 0 : _a.remove();
+    (_a = this.host.querySelector('[slot="social-item"]')) === null || _a === void 0 ? void 0 : _a.remove();
   }
   static get is() { return "salla-social"; }
   static get originalStyleUrls() {

package/dist/collection/components/salla-social/salla-social.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"salla-social.js","sourceRoot":"","sources":["../../../src/components/salla-social/salla-social.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,SAAS,MAAM,gCAAgC,CAAC;AACvD,OAAO,OAAO,MAAM,8BAA8B,CAAC;AACnD,OAAO,QAAQ,MAAM,+BAA+B,CAAC;AACrD,OAAO,OAAO,MAAM,8BAA8B,CAAC;AACnD,OAAO,QAAQ,MAAM,+BAA+B,CAAC;AACrD,OAAO,MAAM,MAAM,6BAA6B,CAAC;~~AAMjD~~,MAAM,OAAO,WAAW;EACtB;;iBASiB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC;qBAEvB,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE;IAVnF,IAAI,CAAC,UAAU,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,~~iBAAiB~~,CAAC,0CAAE,SAAS;~~MACrE~~,2JAA2J,CAAC;IAC9J,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;GACJ;~~EAQO~~,aAAa;IACnB,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;OAC9B,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,KAAK,UAAU,CAAC;OACvD,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;EAC/C,CAAC;EAED,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;IACxC,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,eAAe,IACxB,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACxB,WAAK,EAAE,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,UAAU;SAC7C,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC/C,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC;SAC/B,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,GACxC,CACP,CAAC,CACG,CACR,CAAC;EACJ,CAAC;EACD,kBAAkB;;IAChB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACxF,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,~~iBAAiB~~,CAAC,0CAAE,MAAM,EAAE,CAAC;~~EACvD~~,CAAC;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, State, h, Element } from '@stencil/core';\nimport instagram from '../../assets/svg/instagram.svg';\nimport twitter from '../../assets/svg/twitter.svg';\nimport facebook from '../../assets/svg/facebook.svg';\nimport youtube from '../../assets/svg/youtube.svg';\nimport snapchat from '../../assets/svg/snapchat.svg';\nimport tiktok from '../../assets/svg/tiktok.svg';\n\n@Component({\n tag: 'salla-social',\n styleUrl: 'salla-social.scss',\n})\nexport class SallaSocial {\n constructor() {\n this.socialSlot = this.host.querySelector('[slot=\"social\"]')?.innerHTML \|\|\n `<li class=\"s-social-link\"><a href={link} rel=\"noopener\" target=\"_blank\" title={type} aria-label={type}><span class=\"s-social-icon\">{icon}</span></a></li>`;\n salla.lang.onLoaded(() => {\n this.links = salla.config.get('store.social');\n });\n }\n\n private readonly socialSlot: string;\n @State() links = salla.config.get('store.social');\n @Element() host: HTMLElement;\n @State() iconsList: any = { instagram, twitter, facebook, youtube, snapchat, tiktok }\n\n\n private getLinksArray() {\n return Object.entries(this.links)\n .filter(([key, value]) => !!value && key !== 'whatsapp')\n .map(([type, value]) => ({ type, value }));\n }\n\n render() {\n const linksArray = this.getLinksArray();\n return (\n <Host class=\"s-social-list\">\n {linksArray.map((link) => (\n <div id=\"social-slot\" innerHTML={this.socialSlot\n .replace(/\\{icon\\}/g, this.iconsList[link.type])\n .replace(/\\{type\\}/g, link.type)\n .replace(/\\{link\\}/g, link.value.toString())}>\n </div>\n ))}\n </Host>\n );\n }\n componentDidRender() {\n this.host.querySelectorAll('#social-slot').forEach(el => el.replaceWith(el.firstChild));\n this.host.querySelector('[slot=\"social\"]')?.remove();\n }\n}\n"]}
1	+ {"version":3,"file":"salla-social.js","sourceRoot":"","sources":["../../../src/components/salla-social/salla-social.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,SAAS,MAAM,gCAAgC,CAAC;AACvD,OAAO,OAAO,MAAM,8BAA8B,CAAC;AACnD,OAAO,QAAQ,MAAM,+BAA+B,CAAC;AACrD,OAAO,OAAO,MAAM,8BAA8B,CAAC;AACnD,OAAO,QAAQ,MAAM,+BAA+B,CAAC;AACrD,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAEjD;;GAEG;AAKH,MAAM,OAAO,WAAW;EACtB;;iBASiB,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC;qBAEvB,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE;IAVnF,IAAI,CAAC,UAAU,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,0CAAE,SAAS;MAC1E,2JAA2J,CAAC;IAC9J,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;GACJ;EAOO,aAAa;IACnB,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;OAC9B,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,KAAK,UAAU,CAAC;OACvD,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;EAC/C,CAAC;EAED,iBAAiB;IACf,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;EACxD,CAAC;EAED,MAAM;IACJ,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;IACxC,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,eAAe,IACxB,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACxB,WAAK,EAAE,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,UAAU;SAC7C,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC/C,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC;SAC/B,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,GACxC,CACP,CAAC,CACG,CACR,CAAC;EACJ,CAAC;EACD,kBAAkB;;IAChB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACxF,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,0CAAE,MAAM,EAAE,CAAC;EAC5D,CAAC;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, State, h, Element } from '@stencil/core';\nimport instagram from '../../assets/svg/instagram.svg';\nimport twitter from '../../assets/svg/twitter.svg';\nimport facebook from '../../assets/svg/facebook.svg';\nimport youtube from '../../assets/svg/youtube.svg';\nimport snapchat from '../../assets/svg/snapchat.svg';\nimport tiktok from '../../assets/svg/tiktok.svg';\n\n/*\n @slot social-item - Replaces social item, has replaceable keys `{icon}`, `{type} and {link}`.\n */\n@Component({\n tag: 'salla-social',\n styleUrl: 'salla-social.scss',\n})\nexport class SallaSocial {\n constructor() {\n this.socialSlot = this.host.querySelector('[slot=\"social-item\"]')?.innerHTML \|\|\n `<li class=\"s-social-link\"><a href={link} rel=\"noopener\" target=\"_blank\" title={type} aria-label={type}><span class=\"s-social-icon\">{icon}</span></a></li>`;\n salla.lang.onLoaded(() => {\n this.links = salla.config.get('store.social');\n });\n }\n\n private readonly socialSlot: string;\n @State() links = salla.config.get('store.social');\n @Element() host: HTMLElement;\n @State() iconsList: any = { instagram, twitter, facebook, youtube, snapchat, tiktok }\n\n private getLinksArray() {\n return Object.entries(this.links)\n .filter(([key, value]) => !!value && key !== 'whatsapp')\n .map(([type, value]) => ({ type, value }));\n }\n\n componentWillLoad() {\n return new Promise(resolve => salla.onReady(resolve));\n }\n\n render() {\n const linksArray = this.getLinksArray();\n return (\n <Host class=\"s-social-list\">\n {linksArray.map((link) => (\n <div id=\"social-slot\" innerHTML={this.socialSlot\n .replace(/\\{icon\\}/g, this.iconsList[link.type])\n .replace(/\\{type\\}/g, link.type)\n .replace(/\\{link\\}/g, link.value.toString())}>\n </div>\n ))}\n </Host>\n );\n }\n componentDidRender() {\n this.host.querySelectorAll('#social-slot').forEach(el => el.replaceWith(el.firstChild));\n this.host.querySelector('[slot=\"social-item\"]')?.remove();\n }\n}\n"]}

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

@@ -80,7 +80,7 @@ const SallaAdvertisement$1 = /*@__PURE__*/ proxyCustomElement(class SallaAdverti
   */
   componentWillLoad() {
     // Fetch advertisements based on the current page
-    return Helper.onSallaReadyPromise((_resolve) => {
+    return Helper.onSallaReadyPromise((resolve) => {
       return salla.api.advertisement.fetch(this.currentSlug)
         .then(resp => {
         let ads = resp.data;
@@ -92,6 +92,7 @@ const SallaAdvertisement$1 = /*@__PURE__*/ proxyCustomElement(class SallaAdverti
             }
           }
         }
+        resolve();
       });
     });
   }