npm - @salla.sa/twilight-components - Versions diffs - 2.11.92 → 2.11.94 - Mend

@salla.sa/twilight-components 2.11.92 → 2.11.94

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 (93) hide show

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

@@ -74,11 +74,7 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     super();
     this.__registerHost();
     this.loyaltyProgram = undefined;
-    this.buttonLoading = false;
     this.selectedItem = undefined;
-    this.askConfirmation = false;
-    this.is_loggedin = false;
-    this.hasError = false;
     /**
      * Does the merchant allow to login using email
      */

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

	@@ -1 +1 @@
1	- {"file":"salla-loyalty.js","mappings":"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","names":["SallaLoyalty","CancelIcon","Star2"],"sources":["./src/components/salla-loyalty/salla-loyalty.scss?tag=salla-loyalty","./src/components/salla-loyalty/salla-loyalty.tsx"],"sourcesContent":["","import {Item, LoyaltyProgram, Prize} from './loyalty-schema';\nimport {Component, h, Method, Prop, State} from '@stencil/core';\nimport Star2 from '../../assets/svg/star2.svg';\nimport Star3 from '../../assets/svg/star3.svg';\nimport CancelIcon from '../../assets/svg/cancel.svg';\nimport GiftImg from '../../assets/svg/flat.svg';\n\n/*\n @slot widget - When used, will activate the component and needs to emit `loyalty::open` event to open the modal. If not provided the default value will be used.\n * @slot points-applied-widget - Widget to show information about the already exchanged points. It should have it's own resetting action and call the `resetExchange` method. If not provided, it will use the default value.\n /\n@Component({\n tag: 'salla-loyalty',\n styleUrl: 'salla-loyalty.scss',\n})\nexport class SallaLoyalty {\n\n constructor() {\n salla.event.on('loyalty::open', () => this.open());\n\n salla.auth.event.onLoggedIn(() => {\n this.is_loggedin = true\n })\n\n salla.onReady(() => {\n this.is_loggedin = salla.config.isUser()\n })\n\n salla.lang.onLoaded(() => {\n this.guestMessage = salla.lang.get('pages.loyalty_program.guest_message');\n this.translationLoaded = true;\n })\n\n salla.cart.event.onUpdated(cart => {\n this.prizePoints = cart.loyalty.prize?.points;\n this.prizeTitle = cart.loyalty.prize?.title;\n this.customerPoints = cart.loyalty.customer_points \|\| this.customerPoints;\n })\n }\n\n private modal: HTMLSallaModalElement;\n private confirmationModal: HTMLSallaModalElement;\n\n @State() loyaltyProgram: LoyaltyProgram = undefined;\n @State() buttonLoading: boolean = false;\n @State() selectedItem: Item \| undefined = undefined;\n @State() askConfirmation: boolean = false;\n @State() is_loggedin: boolean = false;\n @State() hasError: boolean = false;\n\n @State() errorMessage: string;\n\n //todo:: drop it\n @State() translationLoaded: boolean;\n\n /\n The exchanged prize point\n /\n @Prop({mutable: true, reflect: true}) prizePoints: string \| number;\n\n /\n Available customer points with which they can exchange.\n /\n @Prop({mutable: true, reflect: true}) customerPoints: number;\n\n /\n The prize title\n /\n @Prop({mutable: true, reflect: true}) prizeTitle: string;\n\n /\n Does the merchant allow to login using email\n /\n @Prop() allowEmail: boolean = true;\n\n /\n Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`\n /\n @Prop() allowMobile: boolean = true;\n\n /\n Does the merchant require registration with email & mobile\n /\n @Prop() requireEmail: boolean = false;\n\n //todo:: change it to state\n /\n Message to show for guest users.\n /\n @Prop({mutable: true}) guestMessage: string\n\n\n private setSelectedPrizeItem(item) {\n if (!this.selectedItem \|\| this.selectedItem?.id != item.id) {\n this.selectedItem = item;\n } else {\n this.selectedItem = undefined\n }\n }\n\n private handleLongText(text: string) {\n if (text.length > 150) {\n return text.substring(0, 150) + '...';\n }\n\n return text;\n }\n\n private prizeItem(item: Item) {\n let klass = {\n 's-loyalty-prize-item-selected': !!this.selectedItem && this.selectedItem?.id == item.id,\n \"s-loyalty-prize-item\": true\n }\n return <div onClick={() => this.setSelectedPrizeItem(item)} class={klass}>\n <img class=\"s-loyalty-prize-item-image\" src={item.image} alt={item.name}/>\n <div class=\"s-loyalty-prize-item-title\">{item.name}</div>\n <div class=\"s-loyalty-prize-item-subtitle\">{this.handleLongText(item.description)}</div>\n <div class=\"s-loyalty-prize-item-points\">\n {item.cost_points} {salla.lang.get('pages.loyalty_program.point')}\n <div class=\"s-loyalty-prize-item-check\">\n <div></div>\n </div>\n </div>\n </div>\n }\n\n private getConfirmationModal() {\n return [\n <salla-placeholder alignment=\"center\" icon={Star3} class=\"s-loyalty-confirmation-modal-content\">\n <div slot=\"title\" class=\"s-loyalty-confirmation-title\">\n {salla.lang.get('pages.loyalty_program.exchange_points')}\n </div>\n <div slot=\"description\">\n {salla.lang.get('pages.loyalty_program.are_you_sure_to_exchange')} ( <strong>{this.selectedItem?.cost_points}</strong> {salla.lang.get('pages.loyalty_program.point')} ) {salla.lang.get('pages.loyalty_program.for')} ( <strong>{this.selectedItem?.name}</strong> )\n </div>\n </salla-placeholder>,\n <div class=\"s-loyalty-confirmation-actions\">\n <salla-button fill='outline' width=\"wide\"\n onClick={() => this.cancelProcess()}>{salla.lang.get('pages.loyalty_program.cancellation')}</salla-button>\n <salla-button loading={this.buttonLoading} width=\"wide\"\n onClick={() => this.exchangeLoyaltyPoint()}>{salla.lang.get('pages.loyalty_program.confirm')}</salla-button>\n </div>\n ]\n }\n\n private getAfterExchangeUI() {\n return <slot name='points-applied-widget'>\n <salla-list-tile class=\"s-loyalty-after-exchange\">\n <div slot=\"title\" class=\"s-loyalty-after-exchange-title\">\n {this.prizeTitle}   -   {this.prizePoints} {salla.lang.get('pages.loyalty_program.point')}\n </div>\n <div slot='action' class=\"s-loyalty-after-exchange-action\">\n <salla-button class=\"s-loyalty-after-exchange-reset\" shape=\"icon\" fill='outline' color=\"danger\" size=\"small\"\n onClick={() => this.resetExchange()}>\n <span innerHTML={CancelIcon}/>\n </salla-button>\n </div>\n </salla-list-tile>\n </slot>\n }\n\n /\n Show loyalty modal\n /\n @Method()\n async open() {\n if (!this.is_loggedin) return salla.event.dispatch('login::open');\n this.modal?.open()\n return await salla.loyalty.getProgram()\n .then(response => {\n this.loyaltyProgram = response.data as LoyaltyProgram\n })\n .catch(e => {\n this.hasError = true;\n this.errorMessage = e.response?.data?.error?.message \|\| e.response?.data;\n })\n .finally(() => this.modal?.stopLoading())\n\n }\n\n /\n \n * Hide loyalty modal\n /\n @Method()\n async close() {\n return this.modal.close();\n }\n\n /\n \n * Cancel Exchanged prizes\n /\n @Method()\n async resetExchange() {\n return await salla.loyalty.reset();\n }\n\n /\n Open Confirmation modal\n /\n private async openConfirmation() {\n return await this.modal.close()\n .then(() => this.confirmationModal?.open())\n .catch(e => console.log(e))\n }\n\n /\n Cancel process\n /\n private async cancelProcess() {\n return await this.confirmationModal.close()\n .then(() => this.selectedItem = null)\n .catch(e => console.log(e))\n }\n\n /\n Exchange loyalty points with the selected prize item\n * @param {number} loyalty_prize_id\n \n /\n @Method()\n async exchangeLoyaltyPoint() {\n this.buttonLoading = true;\n return await salla.loyalty.exchange(this.selectedItem?.id)\n .then(() => this.selectedItem.key == \"FREE_PRODUCT\" && salla.url.is_page('cart') && window.location.reload())\n .finally(() => {\n this.buttonLoading = false;\n this.cancelProcess()\n }\n )\n }\n\n render() {\n\n // A. when the exchange is done, and we have the final prize points to show it in cart page\n if (this.prizePoints) {\n return this.getAfterExchangeUI();\n }\n\n //todo:: change all translations to states\n return [\n <slot name='widget'>\n {/* B. he wants to use the default widget by pass the customer points . */}\n {\n this.customerPoints ?\n <salla-list-tile class='s-loyalty-widget'>\n <div slot=\"icon\" class=\"s-loyalty-widget-icon\" innerHTML={Star2}/>\n <div slot=\"subtitle\">\n {this.customerPoints ? salla.lang.get('pages.loyalty_program.cart_total_point_summary', {\"balance\": this.customerPoints}) : this.guestMessage}\n <salla-button shape=\"link\" color=\"primary\" onClick={() => salla.event.dispatch(\"loyalty::open\")}>\n {this.customerPoints ? salla.lang.get('pages.loyalty_program.cart_point_exchange_now') : salla.lang.get('blocks.header.login')}\n </salla-button>\n </div>\n </salla-list-tile> :\n ''\n }\n </slot>,\n <salla-modal noPadding width=\"sm\"\n ref={modal => this.confirmationModal = modal}>\n {this.getConfirmationModal()}\n </salla-modal>,\n <salla-modal isLoading={true} has-skeleton={true} width=\"md\" ref={modal => this.modal = modal}>\n <div slot=\"loading\">\n <div class=\"s-loyalty-skeleton\">\n <salla-list-tile class=\"s-loyalty-header\">\n <div slot=\"icon\" class=\"s-loyalty-header-icon\">\n <salla-skeleton type=\"circle\" height='6rem' width='6rem'/>\n </div>\n\n <div slot=\"title\" class=\"s-loyalty-header-title mb-5\">\n <salla-skeleton height='15px' width='50%'/>\n </div>\n <div slot=\"subtitle\" class=\"s-loyalty-header-subtitle\">\n <salla-skeleton height='10px'/>\n <salla-skeleton height='10px' width='75%'/>\n </div>\n\n </salla-list-tile>\n <div class=\"s-loyalty-skeleton-cards\">\n {[...Array(3)].map(() =>\n <div class=\"s-loyalty-prize-item swiper-slide\">\n <salla-skeleton height='9rem'/>\n <div class=\"s-loyalty-prize-item-title\">\n <salla-skeleton height='15px' width='75%'/>\n </div>\n <div class=\"s-loyalty-prize-item-subtitle\">\n <salla-skeleton height='10px' width='50%'/>\n <salla-skeleton height='10px' width='25%'/>\n </div>\n <div class=\"s-loyalty-prize-item-points\">\n <salla-skeleton height='15px' width='100px'/>\n <div class=\"s-loyalty-prize-item-check\">\n <salla-skeleton height='1rem' width='1rem' type='circle'/>\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n </div>\n {\n !this.hasError && !!this.loyaltyProgram ?\n [\n <salla-list-tile id='s-loyalty-header' class=\"s-loyalty-header\">\n <div slot=\"icon\" class=\"s-loyalty-header-icon\" innerHTML={GiftImg}/>\n\n <div slot=\"title\" class=\"s-loyalty-header-title\">\n {this.loyaltyProgram.prize_promotion_title}\n </div>\n\n <div slot=\"subtitle\" class=\"s-loyalty-header-subtitle\">\n {this.loyaltyProgram.prize_promotion_description}\n </div>\n\n </salla-list-tile>,\n <salla-tabs>\n {this.loyaltyProgram.prizes.map((prize: Prize) =>\n <salla-tab-header slot=\"header\" name={prize.title}>\n <span>{prize.title}</span>\n </salla-tab-header>\n )}\n {this.loyaltyProgram.prizes.map((prize: Prize, index) =>\n <salla-tab-content slot=\"content\" name={prize.title}>\n <salla-slider\n class=\"s-loyalty-slider\"\n loop={false}\n controls-outer={true}\n id={'loyalty-popup-slider-' + index}\n type=\"carousel\">\n <div slot='items'>\n {prize.items.map((item: Item) =>\n this.prizeItem(item)\n )}\n </div>\n </salla-slider>\n </salla-tab-content>\n )}\n </salla-tabs>,\n <salla-button disabled={!this.selectedItem} width=\"wide\"\n class=\"s-loyalty-program-redeem-btn\"\n onClick={() => this.openConfirmation()}>{salla.lang.get('pages.loyalty_program.exchange_points')}</salla-button>,\n\n ]\n : <salla-placeholder class=\"s-loyalty-placeholder\" alignment=\"center\">\n {!!this.errorMessage ? <span slot=\"description\">{this.errorMessage}</span> : ''}\n </salla-placeholder>\n }\n </salla-modal>,\n ];\n }\n}\n"],"version":3}
1	+ {"file":"salla-loyalty.js","mappings":"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","names":["SallaLoyalty","CancelIcon","Star2"],"sources":["./src/components/salla-loyalty/salla-loyalty.scss?tag=salla-loyalty","./src/components/salla-loyalty/salla-loyalty.tsx"],"sourcesContent":["","import {Item, LoyaltyProgram, Prize} from './loyalty-schema';\nimport {Component, h, Method, Prop, State} from '@stencil/core';\nimport Star2 from '../../assets/svg/star2.svg';\nimport Star3 from '../../assets/svg/star3.svg';\nimport CancelIcon from '../../assets/svg/cancel.svg';\nimport GiftImg from '../../assets/svg/flat.svg';\n\n/*\n @slot widget - When used, will activate the component and needs to emit `loyalty::open` event to open the modal. If not provided the default value will be used.\n * @slot points-applied-widget - Widget to show information about the already exchanged points. It should have it's own resetting action and call the `resetExchange` method. If not provided, it will use the default value.\n /\n@Component({\n tag: 'salla-loyalty',\n styleUrl: 'salla-loyalty.scss',\n})\nexport class SallaLoyalty {\n\n constructor() {\n salla.event.on('loyalty::open', () => this.open());\n\n salla.auth.event.onLoggedIn(() => {\n this.is_loggedin = true\n })\n\n salla.onReady(() => {\n this.is_loggedin = salla.config.isUser()\n })\n\n salla.lang.onLoaded(() => {\n this.guestMessage = salla.lang.get('pages.loyalty_program.guest_message');\n this.translationLoaded = true;\n })\n\n salla.cart.event.onUpdated(cart => {\n this.prizePoints = cart.loyalty.prize?.points;\n this.prizeTitle = cart.loyalty.prize?.title;\n this.customerPoints = cart.loyalty.customer_points \|\| this.customerPoints;\n })\n }\n\n private modal: HTMLSallaModalElement;\n private confirmationModal: HTMLSallaModalElement;\n\n @State() loyaltyProgram: LoyaltyProgram = undefined;\n @State() buttonLoading: boolean;\n @State() selectedItem: Item \| undefined = undefined;\n @State() askConfirmation: boolean;\n @State() is_loggedin: boolean;\n @State() hasError: boolean;\n\n @State() errorMessage: string;\n\n //todo:: drop it\n @State() translationLoaded: boolean;\n\n /\n The exchanged prize point\n /\n @Prop({mutable: true, reflect: true}) prizePoints: string \| number;\n\n /\n Available customer points with which they can exchange.\n /\n @Prop({mutable: true, reflect: true}) customerPoints: number;\n\n /\n The prize title\n /\n @Prop({mutable: true, reflect: true}) prizeTitle: string;\n\n /\n Does the merchant allow to login using email\n /\n @Prop() allowEmail: boolean = true;\n\n /\n Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`\n /\n @Prop() allowMobile: boolean = true;\n\n /\n Does the merchant require registration with email & mobile\n /\n @Prop() requireEmail: boolean = false;\n\n //todo:: change it to state\n /\n Message to show for guest users.\n /\n @Prop({mutable: true}) guestMessage: string\n\n\n private setSelectedPrizeItem(item) {\n if (!this.selectedItem \|\| this.selectedItem?.id != item.id) {\n this.selectedItem = item;\n } else {\n this.selectedItem = undefined\n }\n }\n\n private handleLongText(text: string) {\n if (text.length > 150) {\n return text.substring(0, 150) + '...';\n }\n\n return text;\n }\n\n private prizeItem(item: Item) {\n let klass = {\n 's-loyalty-prize-item-selected': !!this.selectedItem && this.selectedItem?.id == item.id,\n \"s-loyalty-prize-item\": true\n }\n return <div onClick={() => this.setSelectedPrizeItem(item)} class={klass}>\n <img class=\"s-loyalty-prize-item-image\" src={item.image} alt={item.name}/>\n <div class=\"s-loyalty-prize-item-title\">{item.name}</div>\n <div class=\"s-loyalty-prize-item-subtitle\">{this.handleLongText(item.description)}</div>\n <div class=\"s-loyalty-prize-item-points\">\n {item.cost_points} {salla.lang.get('pages.loyalty_program.point')}\n <div class=\"s-loyalty-prize-item-check\">\n <div></div>\n </div>\n </div>\n </div>\n }\n\n private getConfirmationModal() {\n return [\n <salla-placeholder alignment=\"center\" icon={Star3} class=\"s-loyalty-confirmation-modal-content\">\n <div slot=\"title\" class=\"s-loyalty-confirmation-title\">\n {salla.lang.get('pages.loyalty_program.exchange_points')}\n </div>\n <div slot=\"description\">\n {salla.lang.get('pages.loyalty_program.are_you_sure_to_exchange')} ( <strong>{this.selectedItem?.cost_points}</strong> {salla.lang.get('pages.loyalty_program.point')} ) {salla.lang.get('pages.loyalty_program.for')} ( <strong>{this.selectedItem?.name}</strong> )\n </div>\n </salla-placeholder>,\n <div class=\"s-loyalty-confirmation-actions\">\n <salla-button fill='outline' width=\"wide\"\n onClick={() => this.cancelProcess()}>{salla.lang.get('pages.loyalty_program.cancellation')}</salla-button>\n <salla-button loading={this.buttonLoading} width=\"wide\"\n onClick={() => this.exchangeLoyaltyPoint()}>{salla.lang.get('pages.loyalty_program.confirm')}</salla-button>\n </div>\n ]\n }\n\n private getAfterExchangeUI() {\n return <slot name='points-applied-widget'>\n <salla-list-tile class=\"s-loyalty-after-exchange\">\n <div slot=\"title\" class=\"s-loyalty-after-exchange-title\">\n {this.prizeTitle}   -   {this.prizePoints} {salla.lang.get('pages.loyalty_program.point')}\n </div>\n <div slot='action' class=\"s-loyalty-after-exchange-action\">\n <salla-button class=\"s-loyalty-after-exchange-reset\" shape=\"icon\" fill='outline' color=\"danger\" size=\"small\"\n onClick={() => this.resetExchange()}>\n <span innerHTML={CancelIcon}/>\n </salla-button>\n </div>\n </salla-list-tile>\n </slot>\n }\n\n /\n Show loyalty modal\n /\n @Method()\n async open() {\n if (!this.is_loggedin) return salla.event.dispatch('login::open');\n this.modal?.open()\n return await salla.loyalty.getProgram()\n .then(response => {\n this.loyaltyProgram = response.data as LoyaltyProgram\n })\n .catch(e => {\n this.hasError = true;\n this.errorMessage = e.response?.data?.error?.message \|\| e.response?.data;\n })\n .finally(() => this.modal?.stopLoading())\n\n }\n\n /\n \n * Hide loyalty modal\n /\n @Method()\n async close() {\n return this.modal.close();\n }\n\n /\n \n * Cancel Exchanged prizes\n /\n @Method()\n async resetExchange() {\n return await salla.loyalty.reset();\n }\n\n /\n Open Confirmation modal\n /\n private async openConfirmation() {\n return await this.modal.close()\n .then(() => this.confirmationModal?.open())\n .catch(e => console.log(e))\n }\n\n /\n Cancel process\n /\n private async cancelProcess() {\n return await this.confirmationModal.close()\n .then(() => this.selectedItem = null)\n .catch(e => console.log(e))\n }\n\n /\n Exchange loyalty points with the selected prize item\n * @param {number} loyalty_prize_id\n \n /\n @Method()\n async exchangeLoyaltyPoint() {\n this.buttonLoading = true;\n return await salla.loyalty.exchange(this.selectedItem?.id)\n .then(() => this.selectedItem.key == \"FREE_PRODUCT\" && salla.url.is_page('cart') && window.location.reload())\n .finally(() => {\n this.buttonLoading = false;\n this.cancelProcess()\n }\n )\n }\n\n render() {\n\n // A. when the exchange is done, and we have the final prize points to show it in cart page\n if (this.prizePoints) {\n return this.getAfterExchangeUI();\n }\n\n //todo:: change all translations to states\n return [\n <slot name='widget'>\n {/* B. he wants to use the default widget by pass the customer points . */}\n {\n this.customerPoints ?\n <salla-list-tile class='s-loyalty-widget'>\n <div slot=\"icon\" class=\"s-loyalty-widget-icon\" innerHTML={Star2}/>\n <div slot=\"subtitle\">\n {this.customerPoints ? salla.lang.get('pages.loyalty_program.cart_total_point_summary', {\"balance\": this.customerPoints}) : this.guestMessage}\n <salla-button shape=\"link\" color=\"primary\" onClick={() => salla.event.dispatch(\"loyalty::open\")}>\n {this.customerPoints ? salla.lang.get('pages.loyalty_program.cart_point_exchange_now') : salla.lang.get('blocks.header.login')}\n </salla-button>\n </div>\n </salla-list-tile> :\n ''\n }\n </slot>,\n <salla-modal noPadding width=\"sm\"\n ref={modal => this.confirmationModal = modal}>\n {this.getConfirmationModal()}\n </salla-modal>,\n <salla-modal isLoading={true} has-skeleton={true} width=\"md\" ref={modal => this.modal = modal}>\n <div slot=\"loading\">\n <div class=\"s-loyalty-skeleton\">\n <salla-list-tile class=\"s-loyalty-header\">\n <div slot=\"icon\" class=\"s-loyalty-header-icon\">\n <salla-skeleton type=\"circle\" height='6rem' width='6rem'/>\n </div>\n\n <div slot=\"title\" class=\"s-loyalty-header-title mb-5\">\n <salla-skeleton height='15px' width='50%'/>\n </div>\n <div slot=\"subtitle\" class=\"s-loyalty-header-subtitle\">\n <salla-skeleton height='10px'/>\n <salla-skeleton height='10px' width='75%'/>\n </div>\n\n </salla-list-tile>\n <div class=\"s-loyalty-skeleton-cards\">\n {[...Array(3)].map(() =>\n <div class=\"s-loyalty-prize-item swiper-slide\">\n <salla-skeleton height='9rem'/>\n <div class=\"s-loyalty-prize-item-title\">\n <salla-skeleton height='15px' width='75%'/>\n </div>\n <div class=\"s-loyalty-prize-item-subtitle\">\n <salla-skeleton height='10px' width='50%'/>\n <salla-skeleton height='10px' width='25%'/>\n </div>\n <div class=\"s-loyalty-prize-item-points\">\n <salla-skeleton height='15px' width='100px'/>\n <div class=\"s-loyalty-prize-item-check\">\n <salla-skeleton height='1rem' width='1rem' type='circle'/>\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n </div>\n {\n !this.hasError && !!this.loyaltyProgram ?\n [\n <salla-list-tile id='s-loyalty-header' class=\"s-loyalty-header\">\n <div slot=\"icon\" class=\"s-loyalty-header-icon\" innerHTML={GiftImg}/>\n\n <div slot=\"title\" class=\"s-loyalty-header-title\">\n {this.loyaltyProgram.prize_promotion_title}\n </div>\n\n <div slot=\"subtitle\" class=\"s-loyalty-header-subtitle\">\n {this.loyaltyProgram.prize_promotion_description}\n </div>\n\n </salla-list-tile>,\n <salla-tabs>\n {this.loyaltyProgram.prizes.map((prize: Prize) =>\n <salla-tab-header slot=\"header\" name={prize.title}>\n <span>{prize.title}</span>\n </salla-tab-header>\n )}\n {this.loyaltyProgram.prizes.map((prize: Prize, index) =>\n <salla-tab-content slot=\"content\" name={prize.title}>\n <salla-slider\n class=\"s-loyalty-slider\"\n loop={false}\n controls-outer={true}\n id={'loyalty-popup-slider-' + index}\n type=\"carousel\">\n <div slot='items'>\n {prize.items.map((item: Item) =>\n this.prizeItem(item)\n )}\n </div>\n </salla-slider>\n </salla-tab-content>\n )}\n </salla-tabs>,\n <salla-button disabled={!this.selectedItem} width=\"wide\"\n class=\"s-loyalty-program-redeem-btn\"\n onClick={() => this.openConfirmation()}>{salla.lang.get('pages.loyalty_program.exchange_points')}</salla-button>,\n\n ]\n : <salla-placeholder class=\"s-loyalty-placeholder\" alignment=\"center\">\n {!!this.errorMessage ? <span slot=\"description\">{this.errorMessage}</span> : ''}\n </salla-placeholder>\n }\n </salla-modal>,\n ];\n }\n}\n"],"version":3}

package/dist/components/salla-product-card2.js CHANGED Viewed

@@ -92,8 +92,7 @@ const SallaProductCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       return h("div", { class: "s-product-card-sale-price" }, h("h4", null, this.getPriceFormat(this.productData.sale_price)), h("span", null, this.getPriceFormat((_a = this.productData) === null || _a === void 0 ? void 0 : _a.regular_price)));
     }
     if (this.productData.starting_price) {
-      return h("div", { class: "s-product-card-starting-price" }, h("p", null, this.startingPrice), h("h4", null, " ", (_b = this.productData) === null || _b === void 0 ? void 0 :
-        _b.starting_price, " "));
+      return h("div", { class: "s-product-card-starting-price" }, h("p", null, this.startingPrice), h("h4", null, " ", this.getPriceFormat((_b = this.productData) === null || _b === void 0 ? void 0 : _b.starting_price), " "));
     }
     return h("h4", { class: "s-product-card-price" }, this.getPriceFormat((_c = this.productData) === null || _c === void 0 ? void 0 : _c.price));
   }

package/dist/components/salla-product-card2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-product-card2.js","mappings":"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","names":[],"sources":["./src/components/salla-product-card/salla-product-card.scss?tag=salla-product-card","./src/components/salla-product-card/salla-product-card.tsx"],"sourcesContent":[".s-product-card {\n &-entry {}\n\n &-image {\n &::before {\n font-family: \"sallaicons\";\n content: \"\\ec1f\" !important;\n }\n }\n\n &-vertical {}\n\n &-horizontal {}\n\n &-fit-height {}\n\n &-special {}\n\n &-full-image {}\n\n &-minimal {}\n\n &-donation {}\n\n &-shadow {}\n\n &-out-of-stock {}\n\n &-wishlist-btn {}\n\n &-content {\n &-main {}\n\n &-sub {}\n\n &-footer {}\n\n &-title {}\n\n &-subtitle {}\n\n &-pie {\n &-svg {\n circle {\n transition: stroke-dashoffset 1s linear;\n -webkit-transition: stroke-dashoffset 1s linear;\n -moz-transition: stroke-dashoffset 1s linear;\n -ms-transition: stroke-dashoffset 1s linear;\n -o-transition: stroke-dashoffset 1s linear;\n stroke: #E8EDF2;\n stroke-width: 2px;\n stroke-linecap: round;\n fill: none\n }\n\n &-base {}\n\n &-bar {\n stroke: var(--color-primary) !important;\n stroke-dasharray: 100 100;\n stroke-dashoffset: 100\n }\n }\n }\n\n // for special card\n &-extra-padding {}\n }\n\n &-donation-input {}\n}\n","import {Component, Host, h, Prop, State, Element} from '@stencil/core';\nimport Heart from '../../assets/svg/heart.svg';\n\n/*\n @slot add-to-cart-label - Add to cart label.\n /\n@Component({\n tag: 'salla-product-card',\n styleUrl: 'salla-product-card.scss',\n assetsDirs: ['assets']\n})\n\nexport class SallaProductCard {\n constructor() {\n // Store configs\n salla.onReady(() => {\n this.fitImageHeight = salla.config.get('store.settings.product.fit_type');\n salla.wishlist.event.onAdded((_res, id) => this.toggleFavoriteIcon(true, id));\n salla.wishlist.event.onRemoved((_res, id) => this.toggleFavoriteIcon(false, id));\n this.placeholder = salla.url.asset(salla.config.get('theme.settings.placeholder'));\n });\n\n // Language\n salla.lang.onLoaded(() => {\n this.remained = salla.lang.get('pages.products.remained');\n this.donationAmount = salla.lang.get('pages.products.donation_amount');\n this.startingPrice = salla.lang.get('pages.products.starting_price');\n this.addToCart = salla.lang.get('pages.cart.add_to_cart');\n this.outOfStock = salla.lang.get('pages.products.out_of_stock');\n })\n\n // Parse product data\n if (this.product) {\n try {\n this.productData = typeof this.product == 'object' ? this.product : JSON.parse(this.product);\n return;\n } catch (e) {\n salla.log('Bad json passed via product prop');\n }\n }\n }\n\n @Element() host: HTMLElement;\n // State\n @State() productData: any;\n @State() fitImageHeight: boolean;\n @State() remained: string;\n @State() outOfStock: string;\n @State() donationAmount: string;\n @State() startingPrice: string;\n @State() addToCart: string;\n @State() placeholder: string;\n\n\n // Refs\n private pie: any;\n private wishlistBtn: HTMLSallaButtonElement;\n\n // Props\n\n\n /\n Product information.\n /\n @Prop() product: string;\n\n /\n Horizontal card.\n /\n @Prop() horizontal: boolean;\n\n /\n Support shadow on hover.\n /\n @Prop() shadowOnHover: boolean;\n\n /\n Hide add to cart button.\n /\n @Prop() hideAddBtn: boolean;\n\n /\n Full image card.\n /\n @Prop() fullImage: boolean;\n\n /\n Minimal card.\n /\n @Prop() minimal: boolean;\n\n /\n Special card.\n /\n @Prop() isSpecial: boolean;\n\n /\n Show quantity.\n /\n @Prop() showQuantity: boolean;\n\n\n // Private Methods\n private initCircleBar() {\n let qty = this.productData.quantity,\n total = this.productData.quantity > 100 ? this.productData.quantity 2 : 100,\n roundPercent = (qty / total) * 100,\n bar = this.pie.querySelector('.s-product-card-content-pie-svg-bar'),\n strokeDashOffsetValue = 100 - roundPercent;\n bar.style.strokeDashoffset = strokeDashOffsetValue;\n }\n\n private toggleFavoriteIcon(isAdded = true, id = null) {\n if (id && id !== this.productData.id) {\n return;\n }\n this.wishlistBtn?.classList.toggle('s-product-card-wishlist-added', isAdded);\n }\n\n private formatDate(date) {\n let d = new Date(date);\n return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;\n }\n\n private getProductBadge() {\n if (this.productData.promotion_title) {\n return <div class=\"s-product-card-promotion-title\">{this.productData.promotion_title}</div>\n }\n if (this.showQuantity && this.productData?.quantity) {\n return <div\n class=\"s-product-card-quantity\">{this.remained} {salla.helpers.number(this.productData?.quantity)}</div>\n }\n if (this.showQuantity && this.productData?.is_out_of_stock) {\n return <div class=\"s-product-card-out-badge\">{this.outOfStock}</div>\n }\n return '';\n\n }\n\n getPriceFormat(price) {\n if (!price) {\n return;\n }\n\n return salla.money(price);\n }\n\n private getProductPrice() {\n if (this.productData.is_on_sale) {\n return <div class=\"s-product-card-sale-price\">\n <h4>{this.getPriceFormat(this.productData.sale_price)}</h4>\n <span>{this.getPriceFormat(this.productData?.regular_price)}</span>\n </div>;\n }\n if (this.productData.starting_price) {\n return <div class=\"s-product-card-starting-price\"><p>{this.startingPrice}</p>\n <h4> {this.productData?.starting_price} </h4></div>\n }\n return <h4 class=\"s-product-card-price\">{this.getPriceFormat(this.productData?.price)}</h4>\n }\n\n render() {\n const classes = {\n 's-product-card-entry': true,\n 's-product-card-vertical': !this.horizontal && !this.fullImage && !this.minimal,\n 's-product-card-horizontal': this.horizontal && !this.fullImage && !this.minimal,\n 's-product-card-fit-height': this.fitImageHeight && !this.isSpecial && !this.fullImage && !this.minimal,\n 's-product-card-special': this.isSpecial,\n 's-product-card-full-image': this.fullImage,\n 's-product-card-minimal': this.minimal,\n 's-product-card-donation': this.productData?.is_donation,\n 's-product-card-shadow': this.shadowOnHover,\n 's-product-card-out-of-stock': this.productData?.is_out_of_stock,\n };\n return (\n <Host id={`product-${this.productData?.id}`} class={classes}>\n <div class={!this.fullImage ? 's-product-card-image' : 's-product-card-image-full'}>\n <a href={this.productData?.url}>\n <img class={`s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)\n ? 'contain'\n : this.fitImageHeight\n ? this.fitImageHeight\n : 'cover'} lazy`}\n src={this.placeholder}\n alt={this.productData?.image?.alt}\n data-src={this.productData?.image?.url \|\| this.productData?.thumbnail}\n />\n {!this.fullImage && !this.minimal ? this.getProductBadge() : ''}\n </a>\n {this.fullImage && <a href={this.productData?.url} class=\"s-product-card-overlay\"/>}\n {!this.horizontal && !this.fullImage ?\n <salla-button\n shape=\"icon\"\n fill=\"none\"\n color=\"light\"\n aria-label=\"Add or remove to wishlist\"\n ref={el => this.wishlistBtn = el}\n class=\"s-product-card-wishlist-btn animated\"\n onClick={() => salla.wishlist.toggle(this.productData.id)}>\n <span innerHTML={Heart}/>\n </salla-button> : ''\n }\n </div>\n <div class=\"s-product-card-content\">\n {this.isSpecial && this.productData?.quantity ?\n <div class=\"s-product-card-content-pie\" ref={pie => this.pie = pie}>\n <span>\n <b>{salla.helpers.number(this.productData?.quantity)}</b>\n {this.remained}\n </span>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-2 -1 36 34\" class=\"s-product-card-content-pie-svg\">\n <circle cx=\"16\" cy=\"16\" r=\"15.9155\" class=\"s-product-card-content-pie-svg-base\"/>\n <circle cx=\"16\" cy=\"16\" r=\"15.9155\" class=\"s-product-card-content-pie-svg-bar\"/>\n </svg>\n </div>\n : ''}\n\n <div class={{'s-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial}}>\n <h3 class=\"s-product-card-content-title\">\n <a href={this.productData?.url}>{this.productData?.name}</a>\n </h3>\n\n {this.productData?.subtitle && !this.minimal ?\n <p class=\"s-product-card-content-subtitle\">{this.productData?.subtitle}</p>\n : ''}\n </div>\n {this.productData?.is_donation && !this.minimal && !this.fullImage ?\n [<salla-progress-bar donation={this.productData?.donation}/>,\n <div class=\"s-product-card-donation-input\">\n {this.productData?.can_donate ?\n [<label htmlFor=\"donation-amount\">{this.donationAmount} <span></span></label>,\n <input\n type=\"text\"\n data-digits\n id=\"donation-amount\"\n name=\"donating_amount\"\n class=\"s-form-control\"\n placeholder={this.donationAmount}/>]\n : ''}\n </div>]\n : ''}\n <div class={{'s-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial}}>\n {this.getProductPrice()}\n </div>\n\n {this.isSpecial && this.productData.discount_ends\n ? <salla-count-down date={this.formatDate(this.productData.discount_ends)} end-of-day={true} boxed={true}\n labeled={true}/>\n : ''}\n\n\n {!this.hideAddBtn ?\n <div class=\"s-product-card-content-footer\">\n {/ @ts-ignore */}\n <salla-add-product-button fill=\"outline\" width=\"wide\"\n product-id={this.productData.id}\n product-status={this.productData.status}\n product-type={this.productData.type}>\n <slot name=\"add-to-cart-label\">{this.productData.add_to_cart_label}</slot>\n </salla-add-product-button>\n\n {this.horizontal \|\| this.fullImage ?\n <salla-button\n shape=\"icon\"\n fill=\"none\"\n color=\"light\"\n ref={el => this.wishlistBtn = el}\n aria-label=\"Add or remove to wishlist\"\n class=\"s-product-card-wishlist-btn animated\"\n onClick={() => salla.wishlist.toggle(this.productData.id)}\n data-id=\"{{ product.id }}\">\n <span class=\"text-xl\" innerHTML={Heart}/>\n </salla-button>\n : ''}\n </div>\n : ''}\n </div>\n </Host>\n );\n }\n\n componentDidLoad() {\n document.lazyLoadInstance?.update(document.querySelectorAll('.s-product-card-image .lazy'));\n if (this.productData?.quantity && this.isSpecial) {\n this.initCircleBar();\n }\n\n if (!salla.config.isGuest() && salla.storage.get('salla::wishlist', []).includes(this.productData.id)) {\n this.toggleFavoriteIcon();\n }\n }\n\n}\n"],"version":3}
1	+ {"file":"salla-product-card2.js","mappings":"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","names":[],"sources":["./src/components/salla-product-card/salla-product-card.scss?tag=salla-product-card","./src/components/salla-product-card/salla-product-card.tsx"],"sourcesContent":[".s-product-card {\n &-entry {}\n\n &-image {\n &::before {\n font-family: \"sallaicons\";\n content: \"\\ec1f\" !important;\n }\n }\n\n &-vertical {}\n\n &-horizontal {}\n\n &-fit-height {}\n\n &-special {}\n\n &-full-image {}\n\n &-minimal {}\n\n &-donation {}\n\n &-shadow {}\n\n &-out-of-stock {}\n\n &-wishlist-btn {}\n\n &-content {\n &-main {}\n\n &-sub {}\n\n &-footer {}\n\n &-title {}\n\n &-subtitle {}\n\n &-pie {\n &-svg {\n circle {\n transition: stroke-dashoffset 1s linear;\n -webkit-transition: stroke-dashoffset 1s linear;\n -moz-transition: stroke-dashoffset 1s linear;\n -ms-transition: stroke-dashoffset 1s linear;\n -o-transition: stroke-dashoffset 1s linear;\n stroke: #E8EDF2;\n stroke-width: 2px;\n stroke-linecap: round;\n fill: none\n }\n\n &-base {}\n\n &-bar {\n stroke: var(--color-primary) !important;\n stroke-dasharray: 100 100;\n stroke-dashoffset: 100\n }\n }\n }\n\n // for special card\n &-extra-padding {}\n }\n\n &-donation-input {}\n}\n","import {Component, Host, h, Prop, State, Element} from '@stencil/core';\nimport Heart from '../../assets/svg/heart.svg';\n\n/*\n @slot add-to-cart-label - Add to cart label.\n /\n@Component({\n tag: 'salla-product-card',\n styleUrl: 'salla-product-card.scss',\n assetsDirs: ['assets']\n})\n\nexport class SallaProductCard {\n constructor() {\n // Store configs\n salla.onReady(() => {\n this.fitImageHeight = salla.config.get('store.settings.product.fit_type');\n salla.wishlist.event.onAdded((_res, id) => this.toggleFavoriteIcon(true, id));\n salla.wishlist.event.onRemoved((_res, id) => this.toggleFavoriteIcon(false, id));\n this.placeholder = salla.url.asset(salla.config.get('theme.settings.placeholder'));\n });\n\n // Language\n salla.lang.onLoaded(() => {\n this.remained = salla.lang.get('pages.products.remained');\n this.donationAmount = salla.lang.get('pages.products.donation_amount');\n this.startingPrice = salla.lang.get('pages.products.starting_price');\n this.addToCart = salla.lang.get('pages.cart.add_to_cart');\n this.outOfStock = salla.lang.get('pages.products.out_of_stock');\n })\n\n // Parse product data\n if (this.product) {\n try {\n this.productData = typeof this.product == 'object' ? this.product : JSON.parse(this.product);\n return;\n } catch (e) {\n salla.log('Bad json passed via product prop');\n }\n }\n }\n\n @Element() host: HTMLElement;\n // State\n @State() productData: any;\n @State() fitImageHeight: boolean;\n @State() remained: string;\n @State() outOfStock: string;\n @State() donationAmount: string;\n @State() startingPrice: string;\n @State() addToCart: string;\n @State() placeholder: string;\n\n\n // Refs\n private pie: any;\n private wishlistBtn: HTMLSallaButtonElement;\n\n // Props\n\n\n /\n Product information.\n /\n @Prop() product: string;\n\n /\n Horizontal card.\n /\n @Prop() horizontal: boolean;\n\n /\n Support shadow on hover.\n /\n @Prop() shadowOnHover: boolean;\n\n /\n Hide add to cart button.\n /\n @Prop() hideAddBtn: boolean;\n\n /\n Full image card.\n /\n @Prop() fullImage: boolean;\n\n /\n Minimal card.\n /\n @Prop() minimal: boolean;\n\n /\n Special card.\n /\n @Prop() isSpecial: boolean;\n\n /\n Show quantity.\n /\n @Prop() showQuantity: boolean;\n\n\n // Private Methods\n private initCircleBar() {\n let qty = this.productData.quantity,\n total = this.productData.quantity > 100 ? this.productData.quantity 2 : 100,\n roundPercent = (qty / total) * 100,\n bar = this.pie.querySelector('.s-product-card-content-pie-svg-bar'),\n strokeDashOffsetValue = 100 - roundPercent;\n bar.style.strokeDashoffset = strokeDashOffsetValue;\n }\n\n private toggleFavoriteIcon(isAdded = true, id = null) {\n if (id && id !== this.productData.id) {\n return;\n }\n this.wishlistBtn?.classList.toggle('s-product-card-wishlist-added', isAdded);\n }\n\n private formatDate(date) {\n let d = new Date(date);\n return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;\n }\n\n private getProductBadge() {\n if (this.productData.promotion_title) {\n return <div class=\"s-product-card-promotion-title\">{this.productData.promotion_title}</div>\n }\n if (this.showQuantity && this.productData?.quantity) {\n return <div\n class=\"s-product-card-quantity\">{this.remained} {salla.helpers.number(this.productData?.quantity)}</div>\n }\n if (this.showQuantity && this.productData?.is_out_of_stock) {\n return <div class=\"s-product-card-out-badge\">{this.outOfStock}</div>\n }\n return '';\n\n }\n\n getPriceFormat(price) {\n if (!price) {\n return;\n }\n\n return salla.money(price);\n }\n\n private getProductPrice() {\n if (this.productData.is_on_sale) {\n return <div class=\"s-product-card-sale-price\">\n <h4>{this.getPriceFormat(this.productData.sale_price)}</h4>\n <span>{this.getPriceFormat(this.productData?.regular_price)}</span>\n </div>;\n }\n if (this.productData.starting_price) {\n return <div class=\"s-product-card-starting-price\"><p>{this.startingPrice}</p>\n <h4> {this.getPriceFormat(this.productData?.starting_price)} </h4></div>\n }\n return <h4 class=\"s-product-card-price\">{this.getPriceFormat(this.productData?.price)}</h4>\n }\n\n render() {\n const classes = {\n 's-product-card-entry': true,\n 's-product-card-vertical': !this.horizontal && !this.fullImage && !this.minimal,\n 's-product-card-horizontal': this.horizontal && !this.fullImage && !this.minimal,\n 's-product-card-fit-height': this.fitImageHeight && !this.isSpecial && !this.fullImage && !this.minimal,\n 's-product-card-special': this.isSpecial,\n 's-product-card-full-image': this.fullImage,\n 's-product-card-minimal': this.minimal,\n 's-product-card-donation': this.productData?.is_donation,\n 's-product-card-shadow': this.shadowOnHover,\n 's-product-card-out-of-stock': this.productData?.is_out_of_stock,\n };\n return (\n <Host id={`product-${this.productData?.id}`} class={classes}>\n <div class={!this.fullImage ? 's-product-card-image' : 's-product-card-image-full'}>\n <a href={this.productData?.url}>\n <img class={`s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)\n ? 'contain'\n : this.fitImageHeight\n ? this.fitImageHeight\n : 'cover'} lazy`}\n src={this.placeholder}\n alt={this.productData?.image?.alt}\n data-src={this.productData?.image?.url \|\| this.productData?.thumbnail}\n />\n {!this.fullImage && !this.minimal ? this.getProductBadge() : ''}\n </a>\n {this.fullImage && <a href={this.productData?.url} class=\"s-product-card-overlay\"/>}\n {!this.horizontal && !this.fullImage ?\n <salla-button\n shape=\"icon\"\n fill=\"none\"\n color=\"light\"\n aria-label=\"Add or remove to wishlist\"\n ref={el => this.wishlistBtn = el}\n class=\"s-product-card-wishlist-btn animated\"\n onClick={() => salla.wishlist.toggle(this.productData.id)}>\n <span innerHTML={Heart}/>\n </salla-button> : ''\n }\n </div>\n <div class=\"s-product-card-content\">\n {this.isSpecial && this.productData?.quantity ?\n <div class=\"s-product-card-content-pie\" ref={pie => this.pie = pie}>\n <span>\n <b>{salla.helpers.number(this.productData?.quantity)}</b>\n {this.remained}\n </span>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-2 -1 36 34\" class=\"s-product-card-content-pie-svg\">\n <circle cx=\"16\" cy=\"16\" r=\"15.9155\" class=\"s-product-card-content-pie-svg-base\"/>\n <circle cx=\"16\" cy=\"16\" r=\"15.9155\" class=\"s-product-card-content-pie-svg-bar\"/>\n </svg>\n </div>\n : ''}\n\n <div class={{'s-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial}}>\n <h3 class=\"s-product-card-content-title\">\n <a href={this.productData?.url}>{this.productData?.name}</a>\n </h3>\n\n {this.productData?.subtitle && !this.minimal ?\n <p class=\"s-product-card-content-subtitle\">{this.productData?.subtitle}</p>\n : ''}\n </div>\n {this.productData?.is_donation && !this.minimal && !this.fullImage ?\n [<salla-progress-bar donation={this.productData?.donation}/>,\n <div class=\"s-product-card-donation-input\">\n {this.productData?.can_donate ?\n [<label htmlFor=\"donation-amount\">{this.donationAmount} <span></span></label>,\n <input\n type=\"text\"\n data-digits\n id=\"donation-amount\"\n name=\"donating_amount\"\n class=\"s-form-control\"\n placeholder={this.donationAmount}/>]\n : ''}\n </div>]\n : ''}\n <div class={{'s-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial}}>\n {this.getProductPrice()}\n </div>\n\n {this.isSpecial && this.productData.discount_ends\n ? <salla-count-down date={this.formatDate(this.productData.discount_ends)} end-of-day={true} boxed={true}\n labeled={true}/>\n : ''}\n\n\n {!this.hideAddBtn ?\n <div class=\"s-product-card-content-footer\">\n {/ @ts-ignore */}\n <salla-add-product-button fill=\"outline\" width=\"wide\"\n product-id={this.productData.id}\n product-status={this.productData.status}\n product-type={this.productData.type}>\n <slot name=\"add-to-cart-label\">{this.productData.add_to_cart_label}</slot>\n </salla-add-product-button>\n\n {this.horizontal \|\| this.fullImage ?\n <salla-button\n shape=\"icon\"\n fill=\"none\"\n color=\"light\"\n ref={el => this.wishlistBtn = el}\n aria-label=\"Add or remove to wishlist\"\n class=\"s-product-card-wishlist-btn animated\"\n onClick={() => salla.wishlist.toggle(this.productData.id)}\n data-id=\"{{ product.id }}\">\n <span class=\"text-xl\" innerHTML={Heart}/>\n </salla-button>\n : ''}\n </div>\n : ''}\n </div>\n </Host>\n );\n }\n\n componentDidLoad() {\n document.lazyLoadInstance?.update(document.querySelectorAll('.s-product-card-image .lazy'));\n if (this.productData?.quantity && this.isSpecial) {\n this.initCircleBar();\n }\n\n if (!salla.config.isGuest() && salla.storage.get('salla::wishlist', []).includes(this.productData.id)) {\n this.toggleFavoriteIcon();\n }\n }\n\n}\n"],"version":3}

package/dist/components/salla-products-list.js CHANGED Viewed

@@ -30,11 +30,15 @@ const SallaProductsList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
         'landing-page': 'landing-page',
         'product.index.tag': 'tags',
       }[salla.config.get('page.slug')] || 'latest';
-      this.sourceValue = this.sourceValue || this.getSourceValue();
+      let parsedSourceValue = this.sourceValue = this.sourceValue || this.getSourceValue();
+      if (this.sourceValue && ['categories', 'brands', 'tags', 'selected'].includes(this.source) && typeof this.sourceValue == 'string') {
+        parsedSourceValue = JSON.parse(this.sourceValue);
+      }
+      this.parsedSourceValue = parsedSourceValue;
       this.sourceValueIsValid = !!(this.sourceValue || ['latest', 'offers'].includes(this.source));
+      this.buildNextPageUrl();
       this.isReady = true;
     });
-    this.buildNextPageUrl();
     if (!this.sourceValueIsValid) {
       salla.logger.warn(`source-value prop is required for source [${this.source}]`);
       return;
@@ -88,12 +92,11 @@ const SallaProductsList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
       return;
     }
     if (['search', 'related', 'landing-page'].includes(this.source)) {
-      this.nextPage = salla.url.api(`products?source=${this.source}&source_value=${this.sourceValue}${this.urlPrefix}`);
+      this.nextPage = salla.url.api(`products?source=${this.source}&source_value=${this.parsedSourceValue}${this.urlPrefix}`);
       return;
     }
     try {
-      let ids = JSON.parse(this.sourceValue);
-      this.nextPage = salla.url.api(`products?source=${this.source}&source_value[]=${ids.join('&source_value[]=')}${this.urlPrefix}`);
+      this.nextPage = salla.url.api(`products?source=${this.source}&source_value[]=${this.parsedSourceValue.join('&source_value[]=')}${this.urlPrefix}`);
     }
     catch (e) {
       salla.logger.warn(`source-value prop should be array of ids ex source-value="[1,2,3]" for the source [${this.source}]`);
@@ -159,16 +162,16 @@ const SallaProductsList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
       return;
     }
     if (this.source === 'json') {
-      if (!this.sourceValue.length) {
+      if (!this.parsedSourceValue.length) {
         this.showPlaceholder = true;
         return;
       }
-      JSON.parse(this.sourceValue).map(product => this.wrapper.append(this.getItemHTML(product)));
+      this.parsedSourceValue.map(product => this.wrapper.append(this.getItemHTML(product)));
       return;
     }
     this.initiateInfiniteScroll();
     this.loading();
-    salla.product.fetch({ source: this.source, sourceValue: this.sourceValue, filters: this.filters, limit: this.limit })
+    salla.product.fetch({ source: this.source, source_value: this.parsedSourceValue, filters: this.filters, limit: this.limit })
       .then(res => {
       if (!res.data.length) {
         this.showPlaceholder = true;
@@ -197,7 +200,7 @@ const SallaProductsList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   static get style() { return sallaProductsListCss; }
 }, [0, "salla-products-list", {
     "source": [1537],
-    "sourceValue": [1, "source-value"],
+    "sourceValue": [1032, "source-value"],
     "limit": [1026],
     "filters": [1025],
     "page": [32],
@@ -208,7 +211,8 @@ const SallaProductsList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     "placeholderText": [32],
     "isReady": [32],
     "showPlaceholder": [32],
-    "urlPrefix": [32]
+    "urlPrefix": [32],
+    "parsedSourceValue": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/salla-products-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-products-list.js","mappings":"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","names":["SallaProductsList"],"sources":["./src/components/salla-products-list/salla-products-list.scss?tag=salla-products-list","./src/components/salla-products-list/salla-products-list.tsx"],"sourcesContent":["\n","import { Component, Host, h, Prop, State, Element, Watch } from '@stencil/core';\nimport ShoppingBag from '../../assets/svg/shopping-bag.svg';\n\n@Component({\n tag: 'salla-products-list',\n styleUrl: 'salla-products-list.scss'\n})\nexport class SallaProductsList {\n constructor() {\n // this.source = this.source \|\| 'latest';\n salla.onReady(() => {\n this.source = this.source \|\| {\n 'brands.single': 'brands',\n 'product.index': 'categories',\n 'product.index.latest': 'latest',\n 'product.index.offers': 'offers',\n 'product.index.search': 'search',\n 'landing-page': 'landing-page',\n 'product.index.tag': 'tags',\n }[salla.config.get('page.slug')] \|\| 'latest';\n this.sourceValue = this.sourceValue \|\| this.getSourceValue()\n this.sourceValueIsValid = !!(this.sourceValue \|\| ['latest', 'offers'].includes(this.source));\n this.isReady = true;\n });\n this.buildNextPageUrl();\n if (!this.sourceValueIsValid) {\n salla.logger.warn(`source-value prop is required for source [${this.source}]`);\n return;\n }\n this.hasCustomComponent = !!customElements.get('custom-salla-product-card');\n\n this.hasInfiniteScroll = !['json', 'selected', 'related', 'landing-page'].includes(this.source);\n // Language\n //enhance\n this.status = document.createElement('div');\n this.status.className = 's-infinite-scroll-wrapper';\n this.status.innerHTML = `<div class=\"s-infinite-scroll-status\">\n <p class=\"s-infinite-scroll-last infinite-scroll-last s-hidden\" >${salla.lang.get('common.elements.end_of_content')}</p>\n <p class=\"s-infinite-scroll-error infinite-scroll-error s-hidden\">${salla.lang.get('common.elements.failed_to_load_more')}</p>\n </div>\n <a href=\"#\" class=\"s-infinite-scroll-btn s-button-btn\">\n <span class=\"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader\" style=\"display: none\"></span>\n </a>`;\n this.btnLoader = this.status.querySelector('.s-button-loader');\n salla.lang.onLoaded(() => {\n this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');\n this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');\n this.placeholderText = salla.lang.get('pages.categories.no_products');\n });\n }\n\n private readonly status: HTMLDivElement;\n private btnLoader: HTMLAnchorElement;\n @Element() host: HTMLElement;\n private wrapper: any;\n private infiniteScroll: any;\n /*\n The source of the products list\n * @type {string}\n * /\n @Prop({\n reflect: true,\n mutable: true\n }) source: 'categories' \| 'latest' \| 'related' \| 'brands' \| 'json' \| 'search' \| 'tags' \| 'selected' \| 'offers' \| 'landing-page';\n\n /\n The source value, cloud be different values as following:\n * - array of ids when `source` in ['categories', 'brands', 'tags', 'selected']\n * - keyword when `source` = 'search'\n * - products payload when `source` = 'json'\n * - product_id when `source` = 'related'\n \n @type {string}\n * /\n @Prop() sourceValue: string;\n\n /\n Limit for number of products in the list.\n /\n @Prop({mutable: true}) limit: number;\n\n /\n Filter parameters. JSON STRING or object\n /\n @Prop({mutable: true}) filters: string;\n\n @Watch('limit')\n validateLimitMaximumValue(_newValue: number, _) {\n if (this.limit) {\n this.urlPrefix += `&per_page=${this.limit > 32 ? 32 : this.limit}}`;\n }\n }\n\n @Watch('filters')\n parseFilters(newValue: string \| object, _) {\n this.filters = typeof newValue == 'string' ? JSON.parse(newValue) : newValue\n for (const [key, value] of Object.entries(this.filters)) {\n if (typeof value == \"string\") {\n this.urlPrefix += `&filters[${key}]=${value}}`;\n // TODO: only if there is going to be another type of value\n // otherwise we can remove the `else if` check. Just a fail safety\n } else if (Array.isArray(value)) {\n (value as any).forEach(item => {\n this.urlPrefix += `&filters[${key}][]=${item}}`\n })\n }\n }\n }\n\n // State\n @State() page: number = 1;\n @State() nextPage: string;\n @State() hasInfiniteScroll: boolean;\n @State() hasCustomComponent: boolean;\n @State() sourceValueIsValid: boolean;\n @State() placeholderText: string;\n @State() isReady: boolean;\n @State() showPlaceholder: boolean;\n @State() urlPrefix: string = '';\n\n\n private buildNextPageUrl() {\n if (this.source === 'json') {\n return;\n }\n if (['offers', 'latest'].includes(this.source)) {\n this.nextPage = salla.url.api(`products?source=${this.source}${this.urlPrefix}`);\n return;\n }\n\n if (['search', 'related', 'landing-page'].includes(this.source)) {\n this.nextPage = salla.url.api(`products?source=${this.source}&source_value=${this.sourceValue}${this.urlPrefix}`);\n return;\n }\n\n try {\n let ids: Array<number> = JSON.parse(this.sourceValue);\n this.nextPage = salla.url.api(`products?source=${this.source}&source_value[]=${ids.join('&source_value[]=')}${this.urlPrefix}`);\n } catch (e) {\n salla.logger.warn(`source-value prop should be array of ids ex source-value=\"[1,2,3]\" for the source [${this.source}]`);\n this.sourceValueIsValid = false;\n }\n }\n\n private getSourceValue() {\n if (['landing-page'].includes(this.source)) {\n return `${salla.config.get('page.id')}`\n } else if (['categories', 'brands', 'tags'].includes(this.source)){\n return JSON.stringify([salla.config.get('page.id')])\n }\n return this.sourceValue;\n }\n\n private loading(isLoading = true) {\n this.btnLoader.style.display = isLoading ? 'inherit' : 'none';\n }\n\n private getItemHTML(product) {\n let customComponent: string \| HTMLElement = this.hasCustomComponent ? 'custom-salla-product-card' : 'salla-product-card';\n customComponent = document.createElement(customComponent);\n customComponent.setAttribute('product', JSON.stringify(product));\n if (this.source == 'landing-page' && !this.hasCustomComponent) {\n customComponent.toggleAttribute('hide-add-btn', true);\n customComponent.toggleAttribute('show-quantity', true);\n customComponent.classList.add('s-product-card-fit-height');\n }\n customComponent.toggleAttribute('shadow-on-hover', true);\n return customComponent;\n }\n\n private initiateInfiniteScroll() {\n if (!this.hasInfiniteScroll) {\n return;\n }\n\n this.host.insertAdjacentElement('afterend', this.status);\n this.infiniteScroll = salla.infiniteScroll.initiate(this.wrapper, this.wrapper, {\n path: () => this.nextPage,\n history: false,\n nextPage: this.nextPage,\n scrollThreshold: 100,\n }, / infinite via api*/true);\n\n\n this.infiniteScroll.on('request', () => this.loading())\n this.infiniteScroll.on('load', response => this.infiniteScroll.appendItems(this.handleResponse(response)))\n this.infiniteScroll.on('error', () => {\n this.status.querySelector('.s-infinite-scroll-error').classList.remove('s-hidden')\n this.loading(false);\n });\n }\n\n private canRender() {\n return this.sourceValueIsValid && this.isReady;\n }\n\n render() {\n if (!this.canRender()) {\n return '';\n }\n if (this.showPlaceholder) {\n return <div class=\"s-products-list-placeholder\">\n <span innerHTML={ShoppingBag}></span>\n <p>{this.placeholderText}</p>\n </div>;\n }\n return (\n <Host class=\"s-products-list\">\n <div class=\"s-products-list-wrapper\" ref={wrapper => this.wrapper = wrapper} />\n </Host>\n );\n }\n\n componentDidLoad() {\n if (!this.canRender()) {\n return;\n }\n if (this.source === 'json') {\n if (!this.sourceValue.length) {\n this.showPlaceholder = true;\n return;\n }\n JSON.parse(this.sourceValue).map(product => this.wrapper.append(this.getItemHTML(product)));\n return;\n }\n\n this.initiateInfiniteScroll();\n this.loading();\n salla.product.fetch({source: this.source, sourceValue: this.sourceValue, filters: this.filters, limit: this.limit})\n .then(res => {\n if (!res.data.length) {\n this.showPlaceholder = true;\n this.loading(false);\n return;\n }\n this.handleResponse(res).forEach(card => this.wrapper.append(card));\n })\n }\n\n private handleResponse(response): Array<HTMLElement> {\n //💡 when source is related, cursor will not be existed\n this.nextPage = response.cursor ? response.cursor.next : this.nextPage;\n this.loading(false);\n if (this.hasInfiniteScroll && !this.nextPage) {\n this.infiniteScroll.option({ scrollThreshold: false, loadOnScroll: false });\n this.status.querySelector('.s-infinite-scroll-last').classList.remove('s-hidden');\n }\n return response.data?.map(product => this.getItemHTML(product)) \|\| [];\n }\n}\n"],"version":3}
1	+ {"file":"salla-products-list.js","mappings":"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","names":["SallaProductsList"],"sources":["./src/components/salla-products-list/salla-products-list.scss?tag=salla-products-list","./src/components/salla-products-list/salla-products-list.tsx"],"sourcesContent":["\n","import { Component, Host, h, Prop, State, Element, Watch } from '@stencil/core';\nimport ShoppingBag from '../../assets/svg/shopping-bag.svg';\n\n@Component({\n tag: 'salla-products-list',\n styleUrl: 'salla-products-list.scss'\n})\nexport class SallaProductsList {\n constructor() {\n // this.source = this.source \|\| 'latest';\n salla.onReady(() => {\n this.source = this.source \|\| {\n 'brands.single': 'brands',\n 'product.index': 'categories',\n 'product.index.latest': 'latest',\n 'product.index.offers': 'offers',\n 'product.index.search': 'search',\n 'landing-page': 'landing-page',\n 'product.index.tag': 'tags',\n }[salla.config.get('page.slug')] \|\| 'latest';\n\n \n let parsedSourceValue = this.sourceValue = this.sourceValue \|\| this.getSourceValue();\n\n if (this.sourceValue && ['categories', 'brands', 'tags', 'selected'].includes(this.source) && typeof this.sourceValue == 'string') {\n parsedSourceValue = JSON.parse(this.sourceValue);\n }\n this.parsedSourceValue = parsedSourceValue;\n this.sourceValueIsValid = !!(this.sourceValue \|\| ['latest', 'offers'].includes(this.source));\n this.buildNextPageUrl();\n this.isReady = true;\n });\n \n if (!this.sourceValueIsValid) {\n salla.logger.warn(`source-value prop is required for source [${this.source}]`);\n return;\n }\n this.hasCustomComponent = !!customElements.get('custom-salla-product-card');\n\n this.hasInfiniteScroll = !['json', 'selected', 'related', 'landing-page'].includes(this.source);\n // Language\n //enhance\n this.status = document.createElement('div');\n this.status.className = 's-infinite-scroll-wrapper';\n this.status.innerHTML = `<div class=\"s-infinite-scroll-status\">\n <p class=\"s-infinite-scroll-last infinite-scroll-last s-hidden\" >${salla.lang.get('common.elements.end_of_content')}</p>\n <p class=\"s-infinite-scroll-error infinite-scroll-error s-hidden\">${salla.lang.get('common.elements.failed_to_load_more')}</p>\n </div>\n <a href=\"#\" class=\"s-infinite-scroll-btn s-button-btn\">\n <span class=\"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader\" style=\"display: none\"></span>\n </a>`;\n this.btnLoader = this.status.querySelector('.s-button-loader');\n salla.lang.onLoaded(() => {\n this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');\n this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');\n this.placeholderText = salla.lang.get('pages.categories.no_products');\n });\n }\n\n private readonly status: HTMLDivElement;\n private btnLoader: HTMLAnchorElement;\n @Element() host: HTMLElement;\n private wrapper: any;\n private infiniteScroll: any;\n /*\n The source of the products list\n * @type {string}\n * /\n @Prop({\n reflect: true,\n mutable: true\n }) source: 'categories' \| 'latest' \| 'related' \| 'brands' \| 'json' \| 'search' \| 'tags' \| 'selected' \| 'offers' \| 'landing-page';\n\n /\n The source value, cloud be different values as following:\n * - array of ids when `source` in ['categories', 'brands', 'tags', 'selected']\n * - keyword when `source` = 'search'\n * - products payload when `source` = 'json'\n * - product_id when `source` = 'related'\n \n @type {string}\n * /\n @Prop({mutable: true}) sourceValue: any;\n\n /\n Limit for number of products in the list.\n /\n @Prop({mutable: true}) limit: number;\n\n /\n Filter parameters. JSON STRING or object\n /\n @Prop({mutable: true}) filters: string;\n\n @Watch('limit')\n validateLimitMaximumValue(_newValue: number, _) {\n if (this.limit) {\n this.urlPrefix += `&per_page=${this.limit > 32 ? 32 : this.limit}}`;\n }\n }\n\n @Watch('filters')\n parseFilters(newValue: string \| object, _) {\n this.filters = typeof newValue == 'string' ? JSON.parse(newValue) : newValue\n for (const [key, value] of Object.entries(this.filters)) {\n if (typeof value == \"string\") {\n this.urlPrefix += `&filters[${key}]=${value}}`;\n // TODO: only if there is going to be another type of value\n // otherwise we can remove the `else if` check. Just a fail safety\n } else if (Array.isArray(value)) {\n (value as any).forEach(item => {\n this.urlPrefix += `&filters[${key}][]=${item}}`\n })\n }\n }\n }\n\n // State\n @State() page: number = 1;\n @State() nextPage: string;\n @State() hasInfiniteScroll: boolean;\n @State() hasCustomComponent: boolean;\n @State() sourceValueIsValid: boolean;\n @State() placeholderText: string;\n @State() isReady: boolean;\n @State() showPlaceholder: boolean;\n @State() urlPrefix: string = '';\n @State() parsedSourceValue: any;\n\n\n private buildNextPageUrl() {\n if (this.source === 'json') {\n return;\n }\n if (['offers', 'latest'].includes(this.source)) {\n this.nextPage = salla.url.api(`products?source=${this.source}${this.urlPrefix}`);\n return;\n }\n\n if (['search', 'related', 'landing-page'].includes(this.source)) {\n this.nextPage = salla.url.api(`products?source=${this.source}&source_value=${this.parsedSourceValue}${this.urlPrefix}`);\n return;\n }\n\n try {\n this.nextPage = salla.url.api(`products?source=${this.source}&source_value[]=${this.parsedSourceValue.join('&source_value[]=')}${this.urlPrefix}`);\n } catch (e) {\n salla.logger.warn(`source-value prop should be array of ids ex source-value=\"[1,2,3]\" for the source [${this.source}]`);\n this.sourceValueIsValid = false;\n }\n }\n\n private getSourceValue() {\n if (['landing-page'].includes(this.source)) {\n return `${salla.config.get('page.id')}`\n } else if (['categories', 'brands', 'tags'].includes(this.source)){\n return JSON.stringify([salla.config.get('page.id')])\n } \n return this.sourceValue;\n }\n\n private loading(isLoading = true) {\n this.btnLoader.style.display = isLoading ? 'inherit' : 'none';\n }\n\n private getItemHTML(product) {\n let customComponent: string \| HTMLElement = this.hasCustomComponent ? 'custom-salla-product-card' : 'salla-product-card';\n customComponent = document.createElement(customComponent);\n customComponent.setAttribute('product', JSON.stringify(product));\n if (this.source == 'landing-page' && !this.hasCustomComponent) {\n customComponent.toggleAttribute('hide-add-btn', true);\n customComponent.toggleAttribute('show-quantity', true);\n customComponent.classList.add('s-product-card-fit-height');\n }\n customComponent.toggleAttribute('shadow-on-hover', true);\n return customComponent;\n }\n\n private initiateInfiniteScroll() {\n if (!this.hasInfiniteScroll) {\n return;\n }\n\n this.host.insertAdjacentElement('afterend', this.status);\n this.infiniteScroll = salla.infiniteScroll.initiate(this.wrapper, this.wrapper, {\n path: () => this.nextPage,\n history: false,\n nextPage: this.nextPage,\n scrollThreshold: 100,\n }, / infinite via api*/true);\n\n\n this.infiniteScroll.on('request', () => this.loading())\n this.infiniteScroll.on('load', response => this.infiniteScroll.appendItems(this.handleResponse(response)))\n this.infiniteScroll.on('error', () => {\n this.status.querySelector('.s-infinite-scroll-error').classList.remove('s-hidden')\n this.loading(false);\n });\n }\n\n private canRender() {\n return this.sourceValueIsValid && this.isReady;\n }\n\n render() {\n if (!this.canRender()) {\n return '';\n }\n if (this.showPlaceholder) {\n return <div class=\"s-products-list-placeholder\">\n <span innerHTML={ShoppingBag}></span>\n <p>{this.placeholderText}</p>\n </div>;\n }\n return (\n <Host class=\"s-products-list\">\n <div class=\"s-products-list-wrapper\" ref={wrapper => this.wrapper = wrapper} />\n </Host>\n );\n }\n\n componentDidLoad() {\n if (!this.canRender()) {\n return;\n }\n if (this.source === 'json') {\n if (!this.parsedSourceValue.length) {\n this.showPlaceholder = true;\n return;\n }\n this.parsedSourceValue.map(product => this.wrapper.append(this.getItemHTML(product)));\n return;\n }\n\n this.initiateInfiniteScroll();\n this.loading();\n salla.product.fetch({source: this.source, source_value: this.parsedSourceValue , filters: this.filters, limit: this.limit})\n .then(res => { \n if (!res.data.length) {\n this.showPlaceholder = true;\n this.loading(false);\n return;\n }\n this.handleResponse(res).forEach(card => this.wrapper.append(card));\n })\n }\n\n private handleResponse(response): Array<HTMLElement> {\n //💡 when source is related, cursor will not be existed\n this.nextPage = response.cursor ? response.cursor.next : this.nextPage;\n this.loading(false);\n if (this.hasInfiniteScroll && !this.nextPage) {\n this.infiniteScroll.option({ scrollThreshold: false, loadOnScroll: false });\n this.status.querySelector('.s-infinite-scroll-last').classList.remove('s-hidden');\n }\n return response.data?.map(product => this.getItemHTML(product)) \|\| [];\n }\n}\n"],"version":3}

package/dist/components/salla-products-slider.js CHANGED Viewed

@@ -32,7 +32,11 @@ const SallaProductsSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         'product.index.tag': 'tags',
         'product.single': 'related',
       }[salla.config.get('page.slug')] || 'latest';
-      this.sourceValue = this.sourceValue || this.getSourceValue();
+      let parsedSourceValue = this.sourceValue = this.sourceValue || this.getSourceValue();
+      if (this.sourceValue && ['categories', 'brands', 'tags', 'selected'].includes(this.source) && typeof this.sourceValue == 'string') {
+        parsedSourceValue = JSON.parse(this.sourceValue);
+      }
+      this.parsedSourceValue = parsedSourceValue;
       this.sourceValueIsValid = !!(this.sourceValue || ['latest', 'offers'].includes(this.source));
     });
     if (!this.sourceValueIsValid) {
@@ -110,7 +114,8 @@ const SallaProductsSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "sourceValueIsValid": [32],
     "hasCustomComponent": [32],
     "urlPrefix": [32],
-    "apiUrl": [32]
+    "apiUrl": [32],
+    "parsedSourceValue": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/salla-products-slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"salla-products-slider.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,EAAE;;MCMpBA,qBAAmB;EAC9B;;;~~IA+ES~~,cAAS,GAAW,EAAE,CAAC;IACvB,WAAM,GAAW,EAAE,CAAC;~~IA/E3B~~,KAAK,CAAC,OAAO,CAAC;MACZ,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI;QAC3B,eAAe,EAAE,QAAQ;QACzB,eAAe,EAAE,YAAY;QAC7B,sBAAsB,EAAE,QAAQ;QAChC,sBAAsB,EAAE,QAAQ;QAChC,cAAc,EAAE,cAAc;QAC9B,mBAAmB,EAAE,MAAM;QAC3B,gBAAgB,EAAE,SAAS;OAC5B,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,IAAI,QAAQ,CAAC;MAE7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE,~~CAAA~~;~~MAC5D~~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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SallaProductsSlider"],"sources":["./src/components/salla-products-slider/salla-products-slider.scss?tag=salla-products-slider","./src/components/salla-products-slider/salla-products-slider.tsx"],"sourcesContent":[".s-products-slider{\n &-wrapper{\n\n }\n &-slider{\n\n }\n &-card{\n\n }\n}","import {Component, Host, h, Prop, Element, State} from '@stencil/core';\n\n@Component({\n tag: 'salla-products-slider',\n styleUrl: 'salla-products-slider.scss'\n})\nexport class SallaProductsSlider {\n constructor() {\n salla.onReady(() => {\n this.source = this.source \|\| {\n 'brands.single': 'brands',\n 'product.index': 'categories',\n 'product.index.latest': 'latest',\n 'product.index.offers': 'offers',\n 'landing-page': 'landing-page',\n 'product.index.tag': 'tags',\n 'product.single': 'related',\n }[salla.config.get('page.slug')] \|\| 'latest';\n\n this.sourceValue = this.sourceValue \|\| this.getSourceValue()\n this.sourceValueIsValid = !!(this.sourceValue \|\| ['latest', 'offers'].includes(this.source));\n\n });\n if (!this.sourceValueIsValid) {\n salla.logger.warn(`source-value prop is required for source [${this.source}]`);\n return;\n }\n this.hasCustomComponent = !!customElements.get('custom-salla-product-card');\n }\n\n @Element() host: HTMLElement;\n //todo:: support limit, default =10, make sure that maximum is 32,\n\n /*\n Title of the block - works only if slider is true\n * @type {string}\n * @default ''\n * /\n @Prop() blockTitle: string;\n\n /\n Sub title of the block - works only if slider is true\n * @type {string}\n * @default ''\n * /\n @Prop() subTitle: string;\n\n /\n Slider Id, if not provided will be generated automatically\n * @type {string}\n * @default ''\n * /\n @Prop() sliderId: string;\n\n /\n Display 'ALL' URL\n * @type {string}\n * @default ''\n * /\n @Prop() displayAllUrl: string;\n\n /\n Source of the products, if api will get the products from the API, if json will get the products from the products prop\n * @type {string}\n * @default ''\n * /\n @Prop({\n reflect: true,\n mutable: true\n }) source: 'categories' \| 'latest' \| 'related' \| 'brands' \| 'json' \| 'tags' \| 'selected' \| 'offers' \| 'landing-page';\n\n /\n The source value, cloud be different values as following:\n * - array of ids when `source` in ['categories', 'brands', 'tags', 'selected']\n * - products payload when `source` = 'json'\n * - product_id when `source` = 'related'\n \n @type {string}\n * */\n @Prop() sourceValue: string;\n\n //todo:: remove this\n @State() productsData: any;\n @State() isReady: boolean;\n @State() sourceValueIsValid: boolean;\n @State() hasCustomComponent: boolean;\n @State() urlPrefix: string = '';\n @State() apiUrl: string = '';\n\n private getSourceValue() {\n if (['landing-page', 'related'].includes(this.source)) {\n return `${salla.config.get('page.id')}`\n } else if (['categories', 'brands', 'tags'].includes(this.source)) {\n return JSON.stringify([salla.config.get('page.id')])\n }\n return this.sourceValue;\n }\n\n private getItemHTML(product) {\n if (this.hasCustomComponent) {\n return <div class=\"s-products-slider-card\">\n <custom-salla-product-card product={product} source={this.source} source-value={this.sourceValue}/>\n </div>;\n }\n\n return <div class=\"s-products-slider-card\">\n <salla-product-card\n show-quantity={this.source == 'landing-page'}\n hide-add-btn={this.source == 'landing-page'}\n shadow-on-hover={true}\n product={product}/>\n </div>;\n }\n\n getApiUrl() {\n if (this.source === 'json') {\n return;\n }\n if (['offers', 'latest'].includes(this.source)) {\n return salla.url.api(`products?source=${this.source}${this.urlPrefix}`);\n }\n if (['related', 'landing-page'].includes(this.source)) {\n return salla.url.api(`products?source=${this.source}&source_value=${this.sourceValue}${this.urlPrefix}`);\n }\n\n try {\n let ids: Array<number> = JSON.parse(this.sourceValue);\n return salla.url.api(`products?source=${this.source}&source_value[]=${ids.join('&source_value[]=')}${this.urlPrefix}`);\n } catch (e) {\n salla.logger.warn(`source-value prop should be array of ids ex source-value=\"[1,2,3]\" for the source [${this.source}]`);\n this.sourceValueIsValid = false;\n }\n }\n\n private canRender() {\n return this.sourceValueIsValid && this.isReady;\n }\n\n componentWillLoad() {\n if (this.source === 'json') {\n this.productsData = JSON.parse(this.sourceValue)\n this.isReady = true\n return;\n }\n salla.api.request(this.getApiUrl(), null, 'get').then(res => {\n this.productsData = res.data\n this.isReady = true\n })\n }\n\n render() {\n if ((this.source == 'related' && salla.config.get('product.related_products')) \|\| !this.canRender()) {\n return;\n }\n return (\n <Host class=\"s-products-slider-wrapper\">\n <salla-slider\n class=\"s-products-slider-slider\"\n id={this.sliderId \|\| `s-products-slider-${Math.random().toString(36).substr(2, 9)}`}\n type=\"carousel\"\n block-title={this.blockTitle}\n block-subTitle={this.subTitle}\n display-all-url={this.displayAllUrl}\n >\n <div slot=\"items\">\n {this.productsData?.map((product) =>\n this.getItemHTML(product)\n )}\n </div>\n </salla-slider>\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"salla-products-slider.js","mappings":"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","names":["SallaProductsSlider"],"sources":["./src/components/salla-products-slider/salla-products-slider.scss?tag=salla-products-slider","./src/components/salla-products-slider/salla-products-slider.tsx"],"sourcesContent":[".s-products-slider{\n &-wrapper{\n\n }\n &-slider{\n\n }\n &-card{\n\n }\n}","import {Component, Host, h, Prop, Element, State} from '@stencil/core';\n\n@Component({\n tag: 'salla-products-slider',\n styleUrl: 'salla-products-slider.scss'\n})\nexport class SallaProductsSlider {\n constructor() {\n salla.onReady(() => {\n this.source = this.source \|\| {\n 'brands.single': 'brands',\n 'product.index': 'categories',\n 'product.index.latest': 'latest',\n 'product.index.offers': 'offers',\n 'landing-page': 'landing-page',\n 'product.index.tag': 'tags',\n 'product.single': 'related',\n }[salla.config.get('page.slug')] \|\| 'latest';\n \n let parsedSourceValue = this.sourceValue = this.sourceValue \|\| this.getSourceValue();\n\n if (this.sourceValue && ['categories', 'brands', 'tags', 'selected'].includes(this.source) && typeof this.sourceValue == 'string') {\n parsedSourceValue = JSON.parse(this.sourceValue);\n }\n this.parsedSourceValue = parsedSourceValue;\n this.sourceValueIsValid = !!(this.sourceValue \|\| ['latest', 'offers'].includes(this.source));\n\n });\n if (!this.sourceValueIsValid) {\n salla.logger.warn(`source-value prop is required for source [${this.source}]`);\n return;\n }\n this.hasCustomComponent = !!customElements.get('custom-salla-product-card');\n }\n\n @Element() host: HTMLElement;\n //todo:: support limit, default =10, make sure that maximum is 32,\n\n /*\n Title of the block - works only if slider is true\n * @type {string}\n * @default ''\n * /\n @Prop() blockTitle: string;\n\n /\n Sub title of the block - works only if slider is true\n * @type {string}\n * @default ''\n * /\n @Prop() subTitle: string;\n\n /\n Slider Id, if not provided will be generated automatically\n * @type {string}\n * @default ''\n * /\n @Prop() sliderId: string;\n\n /\n Display 'ALL' URL\n * @type {string}\n * @default ''\n * /\n @Prop() displayAllUrl: string;\n\n /\n Source of the products, if api will get the products from the API, if json will get the products from the products prop\n * @type {string}\n * @default ''\n * /\n @Prop({\n reflect: true,\n mutable: true\n }) source: 'categories' \| 'latest' \| 'related' \| 'brands' \| 'json' \| 'tags' \| 'selected' \| 'offers' \| 'landing-page';\n\n /\n The source value, cloud be different values as following:\n * - array of ids when `source` in ['categories', 'brands', 'tags', 'selected']\n * - products payload when `source` = 'json'\n * - product_id when `source` = 'related'\n \n @type {string}\n * */\n @Prop() sourceValue: string;\n\n //todo:: remove this\n @State() productsData: any;\n @State() isReady: boolean;\n @State() sourceValueIsValid: boolean;\n @State() hasCustomComponent: boolean;\n @State() urlPrefix: string = '';\n @State() apiUrl: string = '';\n @State() parsedSourceValue: any;\n private getSourceValue() {\n if (['landing-page', 'related'].includes(this.source)) {\n return `${salla.config.get('page.id')}`\n } else if (['categories', 'brands', 'tags'].includes(this.source)) {\n return JSON.stringify([salla.config.get('page.id')])\n }\n return this.sourceValue;\n }\n\n private getItemHTML(product) {\n if (this.hasCustomComponent) {\n return <div class=\"s-products-slider-card\">\n <custom-salla-product-card product={product} source={this.source} source-value={this.sourceValue}/>\n </div>;\n }\n\n return <div class=\"s-products-slider-card\">\n <salla-product-card\n show-quantity={this.source == 'landing-page'}\n hide-add-btn={this.source == 'landing-page'}\n shadow-on-hover={true}\n product={product}/>\n </div>;\n }\n\n getApiUrl() {\n if (this.source === 'json') {\n return;\n }\n if (['offers', 'latest'].includes(this.source)) {\n return salla.url.api(`products?source=${this.source}${this.urlPrefix}`);\n }\n if (['related', 'landing-page'].includes(this.source)) {\n return salla.url.api(`products?source=${this.source}&source_value=${this.sourceValue}${this.urlPrefix}`);\n }\n\n try {\n let ids: Array<number> = JSON.parse(this.sourceValue);\n return salla.url.api(`products?source=${this.source}&source_value[]=${ids.join('&source_value[]=')}${this.urlPrefix}`);\n } catch (e) {\n salla.logger.warn(`source-value prop should be array of ids ex source-value=\"[1,2,3]\" for the source [${this.source}]`);\n this.sourceValueIsValid = false;\n }\n }\n\n private canRender() {\n return this.sourceValueIsValid && this.isReady;\n }\n\n componentWillLoad() {\n if (this.source === 'json') {\n this.productsData = JSON.parse(this.sourceValue)\n this.isReady = true\n return;\n }\n salla.api.request(this.getApiUrl(), null, 'get').then(res => {\n this.productsData = res.data\n this.isReady = true\n })\n }\n\n render() {\n if ((this.source == 'related' && salla.config.get('product.related_products')) \|\| !this.canRender()) {\n return;\n }\n return (\n <Host class=\"s-products-slider-wrapper\">\n <salla-slider\n class=\"s-products-slider-slider\"\n id={this.sliderId \|\| `s-products-slider-${Math.random().toString(36).substr(2, 9)}`}\n type=\"carousel\"\n block-title={this.blockTitle}\n block-subTitle={this.subTitle}\n display-all-url={this.displayAllUrl}\n >\n <div slot=\"items\">\n {this.productsData?.map((product) =>\n this.getItemHTML(product)\n )}\n </div>\n </salla-slider>\n </Host>\n );\n }\n\n}\n"],"version":3}

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

@@ -57,6 +57,10 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Vertical or Horizontal thumbs slider
      */
     this.verticalThumbs = false;
+    /**
+     * Disable thumbs slider and show it as a grid
+     */
+    this.gridThumbs = false;
     /**
      * Vertical or Horizontal main slider
      */
@@ -130,7 +134,6 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.currentIndex = undefined;
     this.isEnd = false;
     this.isBeginning = true;
-    this.isRTL = document.documentElement.dir === 'rtl';
     this.hasThumbSlot = false;
     this.pre_defined_config = {
       carousel: {
@@ -174,6 +177,7 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         spaceBetween: 30
       }
     };
+    this.direction = this.direction || document.documentElement.dir;
   }
   // Methods
   /**
@@ -447,17 +451,19 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     classes += this.blockTitle == '' ? ' s-slider-has-notitle s-slider-v-centered ' : '';
     classes += this.verticalThumbs ? ' s-slider-vertical ' : ' s-slider-horizontal ';
     classes += this.arrowsCentered ? ' s-slider-v-centered ' : '';
+    classes += this.gridThumbs ? ' s-slider-with-grid-thumbs ' : '';
     return (h(Host, { class: 's-slider-wrapper ' + classes }, this.blockTitle || this.showControls ?
       h("div", { class: "s-slider-block__title" }, this.blockTitle ?
         h("div", { class: "s-slider-block__title-right" }, h("h2", null, this.blockTitle), this.blockSubtitle ? h("p", { innerHTML: this.blockSubtitle }) : '')
         : '', h("div", { class: "s-slider-block__title-left" }, this.displayAllUrl ?
         h("a", { href: this.displayAllUrl, class: "s-slider-block__display-all" }, this.displayAllTitle)
         : '', this.showControls ?
-        h("div", { class: "s-slider-block__title-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.isRTL ? KeyboardArrowRightIcon : ArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.isRTL ? ArrowLeftIcon : KeyboardArrowRightIcon })))
+        h("div", { class: "s-slider-block__title-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? KeyboardArrowRightIcon : ArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowLeftIcon : KeyboardArrowRightIcon })))
         : ''))
-      : '', h("div", { class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.isRTL ? 'rtl' : 'ltr' }, h("slot", null), h("div", { class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { name: 'items' })), this.pagination ? h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' && this.hasThumbSlot ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", dir: this.verticalThumbs ? "ltr" : this.isRTL ? 'rtl' : 'ltr', ref: el => this.thumbsSliderContainer = el }, h("div", { class: "s-slider-swiper-wrapper swiper-wrapper", ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ?
-      h("div", { class: "s-slider-thumbs-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-thumbs-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.isRTL ? KeyboardArrowRightIcon : ArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-thumbs-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.isRTL ? ArrowLeftIcon : KeyboardArrowRightIcon })))
-      : '')) : ''));
+      : '', h("div", { class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.direction }, h("slot", null), h("div", { class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { name: 'items' })), this.pagination ? h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' && this.hasThumbSlot ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", dir: this.verticalThumbs ? "ltr" : this.direction, ref: el => this.thumbsSliderContainer = el }, h("div", { class: { "s-slider-swiper-wrapper swiper-wrapper": true, "s-slider-grid-thumbs": this.gridThumbs }, ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ?
+      h("div", { class: "s-slider-thumbs-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-thumbs-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? KeyboardArrowRightIcon : ArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-thumbs-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowLeftIcon : KeyboardArrowRightIcon })))
+      : null))
+      : null));
   }
   componentDidLoad() {
     let itemsSlot = this.sliderWrapper.querySelector('div[slot="items"]');
@@ -484,6 +490,7 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "displayAllUrl": [513, "display-all-url"],
     "arrowsCentered": [516, "arrows-centered"],
     "verticalThumbs": [516, "vertical-thumbs"],
+    "gridThumbs": [516, "grid-thumbs"],
     "vertical": [516],
     "autoHeight": [516, "auto-height"],
     "showControls": [516, "show-controls"],
@@ -494,13 +501,13 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "pagination": [4],
     "centered": [4],
     "loop": [4],
+    "direction": [1537],
     "type": [1],
     "sliderConfig": [520, "slider-config"],
     "thumbsConfig": [520, "thumbs-config"],
     "currentIndex": [32],
     "isEnd": [32],
     "isBeginning": [32],
-    "isRTL": [32],
     "swiperScript": [32],
     "displayAllTitle": [32],
     "slideTo": [64],